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