{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "agency-reel",
"title": "Agency: Reel",
"description": "An ink-blue panel with a browser and a rail of projects: the address bar types each client's domain and the site loads line by line.",
"dependencies": [
"motion"
],
"registryDependencies": [
"https://eased.dev/r/eased-tokens.json",
"https://eased.dev/r/eased-motion.json",
"https://eased.dev/r/agency-core.json",
"https://eased.dev/r/button.json",
"https://eased.dev/r/text-swap.json"
],
"files": [
{
"path": "src/registry/eased/templates/agency/reel.tsx",
"content": "\"use client\";\n\nimport { AnimatePresence, motion, useInView, useMotionValue, useMotionValueEvent, useTransform, type MotionValue } from \"motion/react\";\nimport { useEffect, useId, useRef, useState, useSyncExternalStore, type KeyboardEvent } from \"react\";\nimport { Button } from \"../../button/button\";\nimport { enter, exit, reducedFade, stagger, useSafeReducedMotion } from \"../../lib/motion\";\nimport { TextSwap } from \"../../text-swap/text-swap\";\nimport { ClientArt } from \"./client-art\";\nimport { brand, projects, reel, type Project } from \"./content\";\nimport { COLUMN, Tiles } from \"./kit\";\n\n/**\n * The signature: a case-study reel. A panel in the studio's ink blue, inset to the page column\n * under the wordmark, holds a browser window and, beside it, a rail of the four projects; the\n * window plays the studio's client sites in turn. For each one the address bar types the\n * client's domain, a load line runs under the toolbar, and the drawn site comes in, its lines\n * rising 80ms apart; it holds, and the next one types. It starts on its own a beat after it is\n * in view, plays the four once and rests on the last, with Replay.\n *\n * Everything is one clock (`clock`, ms) that runs only while the panel is on screen, the tab is\n * visible and the reel is playing, so it pauses itself offscreen and the pause button (rule 85)\n * just stops the clock. The address bar, the page and the tabs' progress lines are all read\n * from the clock. Reduced motion shows one still: the first site, loaded, with the tabs to\n * switch sites and no clock.\n */\n\nconst SITES = reel.projects.map((id) => projects.find((p) => p.id === id)!);\n\n/** The blank tab before the first site types: a beat to notice the window. */\nconst BEAT = 900;\n/** One typed character, about a quick typist's pace. */\nconst CHAR = 55;\n/** After the last character, before Return. */\nconst ENTER = 220;\n/** The load line under the toolbar. */\nconst LOAD = 480;\n/** How long each site holds once it has loaded. */\nconst HOLD = 3400;\n\n/** Each site's span on the clock: typing from `start`, loaded at `loaded`, next site at `end`. */\nconst SPANS = SITES.reduce<{ start: number; loaded: number; end: number }[]>((spans, site) => {\n const start = spans.at(-1)?.end ?? BEAT;\n const loaded = start + site.domain.length * CHAR + ENTER + LOAD;\n return [...spans, { start, loaded, end: loaded + HOLD }];\n}, []);\nconst TOTAL = SPANS.at(-1)!.end;\n\n/** What the window shows at a time on the clock: the page that is up, and the address bar. */\ntype Frame = { page: number; typing: number; typed: number; ended: boolean };\n\nfunction frameAt(t: number): Frame {\n if (t >= TOTAL) return { page: SITES.length - 1, typing: -1, typed: 0, ended: true };\n const i = SPANS.findLastIndex((s) => t >= s.start);\n if (i === -1) return { page: -1, typing: -1, typed: 0, ended: false };\n const span = SPANS[i];\n if (t >= span.loaded) return { page: i, typing: -1, typed: 0, ended: false };\n // Typing (then loading): the previous page stays up until the new one has loaded.\n return { page: i - 1, typing: i, typed: Math.min(SITES[i].domain.length, Math.floor((t - span.start) / CHAR)), ended: false };\n}\n\nconst sameFrame = (a: Frame, b: Frame) => a.page === b.page && a.typing === b.typing && a.typed === b.typed && a.ended === b.ended;\n\nconst subscribeVisibility = (onChange: () => void) => {\n document.addEventListener(\"visibilitychange\", onChange);\n return () => document.removeEventListener(\"visibilitychange\", onChange);\n};\nconst useTabVisible = () => useSyncExternalStore(subscribeVisibility, () => document.visibilityState === \"visible\", () => true);\n\n/** The reel's clock and controls: it advances in animation frames while `active`. */\nfunction useReel(active: boolean, reduced: boolean) {\n const clock = useMotionValue(0);\n const [frame, setFrame] = useState(() => frameAt(0));\n const [playing, setPlaying] = useState(true);\n\n useMotionValueEvent(clock, \"change\", (t) => {\n const next = frameAt(t);\n setFrame((prev) => (sameFrame(prev, next) ? prev : next));\n });\n\n // Reduced motion: one still, the first site loaded, and no clock.\n useEffect(() => {\n if (reduced) clock.set(SPANS[0].loaded);\n }, [reduced, clock]);\n\n const running = active && playing && !reduced && !frame.ended;\n useEffect(() => {\n if (!running) return;\n let raf = 0;\n let last = performance.now();\n const tick = (now: number) => {\n clock.set(Math.min(TOTAL, clock.get() + (now - last)));\n last = now;\n raf = requestAnimationFrame(tick);\n };\n raf = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(raf);\n }, [running, clock]);\n\n return {\n clock,\n frame,\n playing,\n togglePlaying: () => setPlaying((p) => !p),\n replay: () => {\n clock.set(0);\n setPlaying(true);\n },\n /** A tab: the site at once, loaded; the reel carries on from there if it is playing. */\n show: (i: number) => clock.set(SPANS[i].loaded),\n };\n}\n\nexport function Reel() {\n const reduced = useSafeReducedMotion();\n const panel = useRef(null);\n const inView = useInView(panel, { amount: 0.35 });\n const visible = useTabVisible();\n const { clock, frame, playing, togglePlaying, replay, show } = useReel(inView && visible, reduced);\n const id = useId();\n const current = frame.page >= 0 ? SITES[frame.page] : undefined;\n // The tab marked as selected: the site being typed, else the one that is up.\n const selected = frame.typing >= 0 ? frame.typing : Math.max(frame.page, 0);\n // Arrow keys move between the tabs, Home and End jump to the ends, and each site shows as its tab takes focus (one tab stop).\n const onTabKey = (e: KeyboardEvent) => {\n const last = SITES.length - 1;\n const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key];\n const jump = { Home: 0, End: last }[e.key];\n if (step === undefined && jump === undefined) return;\n e.preventDefault();\n const next = jump ?? (selected + step! + SITES.length) % SITES.length;\n show(next);\n document.getElementById(`${id}-tab-${next}`)?.focus();\n };\n\n return (\n \n {/* The studio's ink in both themes; its tokens are the dark theme's, so text and lines read on it. */}\n \n \n
\n \n \n );\n}\n\n/**\n * The rail's framing: a mosaic of small tiles filling the space under the tabs, fading out\n * upward, one of them in vermilion. Drawn once and still; wide screens only.\n */\nfunction Mosaic() {\n const tiles = Array.from({ length: 8 * 6 }, (_, i) => ({ x: (i % 8) * 14, y: Math.floor(i / 8) * 14, lit: i === 29 }));\n return (\n \n {tiles.map((t) => (\n \n ))}\n \n );\n}\n\n/**\n * Pause and play while the reel runs; Replay once it has rested on the last site. One button\n * whose label swaps, anchored to the end of the rail's first line, so nothing beside it moves\n * when its width does (rule 108).\n */\nfunction PlayControl({ ended, playing, onToggle, onReplay }: { ended: boolean; playing: boolean; onToggle: () => void; onReplay: () => void }) {\n const state = ended ? \"replay\" : playing ? \"pause\" : \"play\";\n const label = { replay: \"Replay\", pause: \"Pause\", play: \"Play\" }[state];\n return (\n \n );\n}\n\n/**\n * One site's tab. In the rail (lg) it is a row: number, client and disciplines, with a 2px\n * vermilion line down its leading edge that fills while its site is on the clock. On narrower\n * screens the tabs sit four across under the window and the line runs along the bottom. Both\n * lines are transforms read from the clock; under reduced motion they mark the selected tab.\n */\nfunction ReelTab({\n id,\n panelId,\n index,\n site,\n selected,\n clock,\n reduced,\n onSelect,\n}: {\n id: string;\n panelId: string;\n index: number;\n site: Project;\n selected: boolean;\n clock: MotionValue;\n reduced: boolean;\n onSelect: () => void;\n}) {\n const span = SPANS[index];\n const progress = useTransform(clock, [span.start, span.end], [0, 1], { clamp: true });\n const fill = reduced ? (selected ? 1 : 0) : progress;\n return (\n \n \n {String(index + 1).padStart(2, \"0\")}\n {site.client}\n \n {site.disciplines.join(\", \")}\n \n \n \n \n \n );\n}\n\n/** The page's lines rise 8px, 80ms apart, as it loads; the outgoing page fades under it. */\nconst PAGE = {\n hidden: { opacity: 0 },\n shown: { opacity: 1, transition: { ...enter, staggerChildren: stagger.line, delayChildren: 0.05 } },\n gone: { opacity: 0, transition: exit },\n};\n\n/**\n * A plain browser window, drawn: traffic lights, back and forward, the address bar and the page.\n * The page area is 16:10, 4:5 on a phone, and the client sites lay themselves out to fit it.\n */\nfunction BrowserWindow({ frame, clock, panelId, tabId, reduced }: { frame: Frame; clock: MotionValue; panelId: string; tabId: string; reduced: boolean }) {\n const site = frame.page >= 0 ? SITES[frame.page] : undefined;\n return (\n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n \n {site ? : }\n \n \n {/* What the picture shows, for assistive tech: the drawn site itself is decoration. */}\n