# Echo Reel: Rotating Text Headline for React
> A giant word printed solid, with the words before and after it in the list stacked above and below as pale halftone proofs. Every few seconds the reel turns one row: the proof below rises into the middle while one roller pass moves the ink off the old word and onto the new one. Click a proof or press ↑ ↓ to turn it yourself, so it works as a headline that cycles who it's for or as a picker for plans.
Rotating Text Headline for React: a giant word turns like a reel between halftone proofs. Built with Tailwind CSS; install it with the shadcn CLI. It's a KeyframeUI component: the file lands in your project as source, yours to edit.
- Docs and live preview: https://keyframeui.com/components/echo-reel
- Tags: Text, Hero, Motion
- npm dependencies: clsx, tailwind-merge
- Inspired by: [Cloudflare for Startups](https://www.cloudflare.com/startups/)
## Installation
Register the @keyframeui registry in `components.json` once per project:
```json
{
"registries": {
"@keyframeui": "https://keyframeui.com/r/{name}.json"
}
}
```
Then add the component. It lands in `components/ui/echo-reel.tsx`, and the CLI also adds `lib/utils.ts` (the `cn` helper) and installs the npm dependencies:
```bash
npx shadcn@latest add @keyframeui/echo-reel
```
Or install by URL, without registering the namespace:
```bash
npx shadcn@latest add https://keyframeui.com/r/echo-reel.json
```
## Usage
The main demo shows typical usage.
### Audiences
A video tool's hero that cycles who it's made for. It holds while you point at it and stops once you pick a word.
Install this demo, with the component included:
```bash
npx shadcn@latest add @keyframeui/echo-reel-demo
```
```tsx title="components/echo-reel-demo.tsx"
import { EchoReel } from "@/components/ui/echo-reel";
const AUDIENCES = ["Creators", "Podcasters", "Studios", "Brands"];
export function EchoReelDemo() {
return (
Cutline is made for creators, podcasters, studios and brands
Cutline is made for
One long recording in. Clips, captions and dubs for every channel out, cut while you sleep.
);
}
```
## Examples
Finished sections built with Echo Reel. Each one installs whole, with the component included.
### Plan Picker
The giant word picks a pricing plan: click the proof above or below, or use the arrow keys, and the price card beside it changes.
Install this demo, with the component included:
```bash
npx shadcn@latest add @keyframeui/echo-reel-plans-demo
```
```tsx title="components/echo-reel-plans-demo.tsx"
"use client";
import * as React from "react";
import { EchoReel } from "@/components/ui/echo-reel";
const PLANS = [
{
name: "Solo",
price: 12,
blurb: "For one brand you're building yourself.",
lines: [
"One brand kit",
"Logo, palette and type pairings",
"Export to Figma and PDF",
],
cta: "Start with Solo",
},
{
name: "Team",
price: 36,
blurb: "For an in-house team keeping five brands in line.",
lines: [
"Five brand kits, five seats",
"Shared templates and review links",
"Version history on every asset",
],
cta: "Try Team free for 14 days",
},
{
name: "Studio",
price: 96,
blurb: "For agencies handing kits to clients.",
lines: [
"Unlimited client kits, 20 seats",
"White-label handoff pages",
"Priority support and SSO",
],
cta: "Talk to us about Studio",
},
];
function Check() {
return (
);
}
export function EchoReelPlansDemo() {
const [plan, setPlan] = React.useState(1);
return (
Tinta pricing
Click a plan above or below, or use ↑{" "}
↓
p.name)}
value={plan}
onValueChange={(index) => setPlan(index)}
interval={false}
aria-label="Plan"
className="mx-auto max-w-md text-[#ff3d1f] dark:text-[#ff5a3a]"
/>
{/* Every plan in one grid cell, so the card keeps its height while they cross. */}
{PLANS.map((p, i) => {
const on = i === plan;
return (
);
}
```
### Footer Wordmark
A studio's footer whose wordmark turns to whichever link you point at or tab to, and back to the name when you leave.
Install this demo, with the component included:
```bash
npx shadcn@latest add @keyframeui/echo-reel-footer-demo
```
```tsx title="components/echo-reel-footer-demo.tsx"
"use client";
import * as React from "react";
import { EchoReel } from "@/components/ui/echo-reel";
const BRAND = "Fieldwork";
const LINKS = [
{ label: "Work", href: "#work" },
{ label: "Studio", href: "#studio" },
{ label: "Journal", href: "#journal" },
{ label: "Contact", href: "#contact" },
];
const WORDS = [BRAND, ...LINKS.map((link) => link.label)];
export function EchoReelFooterDemo() {
const [word, setWord] = React.useState(0);
const back = React.useRef(undefined);
const show = (index: number) => {
window.clearTimeout(back.current);
setWord(index);
};
// Wait a beat before going back to the name, so moving between links
// doesn't turn the reel twice.
const release = () => {
window.clearTimeout(back.current);
back.current = window.setTimeout(() => setWord(0), 250);
};
React.useEffect(() => () => window.clearTimeout(back.current), []);
return (
);
}
```
## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `words` (required) | `string[]` | | The words on the reel, in order. The next word waits below the current one and the previous one sits above. A single word prints a still stack of itself. |
| `value` | `number` | | The index of the word in the middle, when the parent owns it. Pair it with `onValueChange`. |
| `defaultValue` | `number` | `0` | The index the reel starts on when it runs by itself. |
| `onValueChange` | `(index: number, reason: "auto" \| "user") => void` | | Called with the new index each time the reel turns, and whether autoplay or the visitor turned it. |
| `interval` | `number \| false` | `3` | Seconds between turns by itself, or `false` to wait for the visitor. Hover and focus hold it, and the visitor's first turn stops it. |
| `speed` | `number` | `1` | How fast each turn plays, as a multiple of the default pace: the reel moving a row, the roller handing the ink over, the first print and the fades, together. `2` is twice as fast. |
| `echoes` | `1 \| 2` | `1` | How many proofs sit on each side of the word. |
| `className` | `string` | | Extra classes for the reel. Its text color is the ink; set `--echo-reel-tint` for the proofs (default the ink at 38%) and `--echo-reel-dot` for the halftone pitch (default `clamp(4px, 0.028em, 8px)`). The longest word is sized to fill the width, so size the reel with its container. |
## What to keep
To adapt it, change its props first. When you do edit `components/ui/echo-reel.tsx`, keep these, which make it feel and behave right:
- Rows move by `transform` and `opacity` only. The ink wipes by sliding its clipping window one way and the word inside it the other by the same amount, on one `rollTransition`, so the word never shifts.
- Rows are keyed by absolute slot and the reel only turns the short way round, so each row keeps its element through a wrap; `reach` mounts enough rows that a jump never mounts one in view.
- On a turn the roller trails the reel slightly on an in-out curve like the reel's, so the ink is handed over while the rows travel. `print` times only the first inking on view, before any turn.
- Proof buttons are keyed by side, not by word, so focus stays put as the reel turns. A visitor's turn stops autoplay for good and is announced politely; autoplay turns are not.
- Reduced motion swaps the rows at once and fades the new ink in over its proof, which drops only once that fade ends. The reduced flag reads false while hydrating, so the markup matches.
Its timing (durations, delays, springs and easings) is all in the `TIMING` block at the top of the file; the timing props default to it.
## Source
```tsx title="components/ui/echo-reel.tsx"
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
/**
* Keep:
* - Rows move by `transform` and `opacity` only. The ink wipes by sliding its clipping window one
* way and the word inside it the other by the same amount, on one `rollTransition`, so the word
* never shifts.
* - Rows are keyed by absolute slot and the reel only turns the short way round, so each row keeps
* its element through a wrap; `reach` mounts enough rows that a jump never mounts one in view.
* - On a turn the roller trails the reel slightly on an in-out curve like the reel's, so the ink is
* handed over while the rows travel. `print` times only the first inking on view, before any turn.
* - Proof buttons are keyed by side, not by word, so focus stays put as the reel turns. A visitor's
* turn stops autoplay for good and is announced politely; autoplay turns are not.
* - Reduced motion swaps the rows at once and fades the new ink in over its proof, which drops only
* once that fade ends. The reduced flag reads false while hydrating, so the markup matches.
*/
const TIMING = {
/** The reel moving one row, in ms, on its strong in-out curve. */
turn: { duration: 700, ease: "cubic-bezier(0.77, 0, 0.175, 1)" },
/**
* The roller moving the ink across on a turn, in ms: its run, its lag behind the reel, its curve.
* On a turn the roller rides the reel's own curve, so the ink crosses while the rows travel
* instead of landing before they've moved.
*/
roll: { duration: 640, delay: 60, ease: "cubic-bezier(0.65, 0, 0.35, 1)" },
/** The first ink when the reel comes into view, in ms. */
print: { duration: 700, delay: 150, ease: "cubic-bezier(0.23, 1, 0.32, 1)" },
/** A word's proof going once the ink covers it, in ms: its fade, the wait first, its curve. */
proof: { duration: 300, hold: 450, ease: "ease-out" },
/** A row leaving or joining the visible stack, in ms, and its curve. */
fade: { duration: 400, ease: "ease-out" },
/** The ink fading in place under reduced motion, in ms, and its curve. */
reduced: { duration: 250, ease: "ease-out" },
/** Between turns by itself, in seconds (the `interval` prop). */
interval: 3,
/** How fast each turn plays, as a multiple of the default pace (the `speed` prop). */
speed: 1,
/** The slowest pace `speed` is held to, as a multiple of the default pace. */
minSpeed: 0.05,
} as const;
/* ─────────────────────────────────────────────────────────
* ECHO REEL STORYBOARD
*
* rest one giant word printed solid in the ink. The words
* before and after it in the list sit above and below
* as pale halftone proofs, each row overlapping the
* next, like the impressions round a print reel
* view the first time it shows, the middle word is still a
* proof. 150ms later a roller inks it, left to right,
* in 0.7s
* turn every `interval` seconds the reel turns one row in
* 0.7s (strong in-out). One roller pass, 60ms behind and
* on the same in-out curve, moves the ink across: it
* comes off the old word left to right as that word
* rises into the top proof, and goes onto the word rising
* into the middle at the same edge, so the ink is handed
* over in transit. The row leaving the top fades as it
* goes; the next word fades in below
* back a turn the other way runs in reverse: the reel drops
* and the roller travels right to left
* pick click a proof, or focus it and press ↑ ↓, and the reel
* turns to that word. A visitor's turn stops the
* autoplay for good and is announced politely; autoplay
* turns are not announced
* hover a proof under the pointer darkens a step, so it reads
* as something to press. Hover or focus on the reel
* holds the autoplay
* sleep autoplay waits while the reel is off screen or the tab
* is hidden
* reduced nothing travels and nothing wipes: the rows swap at
* once and the new word's ink fades in over its proof
* in 0.25s
* ───────────────────────────────────────────────────────── */
const REEL = {
step: 0.68, // em between one row and the next; rows are 1.32em tall, so they overlap
pad: { x: 0.08, y: 0.16 }, // em around each word, so a wipe never clips a glyph
fit: 0.94, // share of the width the longest word fills
far: 0.5, // opacity of the outer proofs with echoes={2}
measure: 100, // px the words are measured at
} as const;
const ROW = 1 + REEL.pad.y * 2; // em, one row's height
const STEP_PCT = (REEL.step / ROW) * 100; // a row's step as a share of its own height
const CAP_TOP = 0.29; // em from a row's top to its capitals
const BASELINE = 1.01; // em from a row's top to its baseline
const mod = (a: number, n: number) => ((a % n) + n) % n;
/** The signed shortest way round a reel of `n` from index `a` to `b`; a tie goes forward. */
function shortest(a: number, b: number, n: number) {
const d = mod(b - a, n);
return d > n / 2 ? d - n : d;
}
const REDUCED_QUERY = "(prefers-reduced-motion: reduce)";
function subscribeReduced(onChange: () => void) {
const query = window.matchMedia(REDUCED_QUERY);
query.addEventListener("change", onChange);
return () => query.removeEventListener("change", onChange);
}
/** Live, and false on the server and in the hydration render, so the markup matches. */
function usePrefersReducedMotion() {
return React.useSyncExternalStore(
subscribeReduced,
() => window.matchMedia(REDUCED_QUERY).matches,
() => false,
);
}
export interface EchoReelProps
extends Omit, "defaultValue" | "onChange"> {
/** The words on the reel, in order. The next word waits below the current one and the previous one sits above. A single word prints a still stack of itself. */
words: string[];
/** The index of the word in the middle, when the parent owns it. Pair it with `onValueChange`. */
value?: number;
/** The index the reel starts on when it runs by itself. */
defaultValue?: number;
/** Called with the new index each time the reel turns, and whether autoplay or the visitor turned it. */
onValueChange?: (index: number, reason: "auto" | "user") => void;
/** Seconds between turns by itself, or `false` to wait for the visitor. Hover and focus hold it, and the visitor's first turn stops it. */
interval?: number | false;
/** How many proofs sit on each side of the word. */
echoes?: 1 | 2;
/** How fast each turn plays, as a multiple of the default pace: the reel, the roller, the first print and the fades together. `2` is twice as fast. */
speed?: number;
}
/* ── Row ──────────────────────────────────────────────── */
// One word on the reel: its halftone proof, and the ink over it behind a
// window that slides across to roll the ink on or off.
type RowProps = {
word: string;
offset: number;
echoes: number;
inked: boolean;
first: boolean;
hot: boolean;
reduced: boolean;
speed: number;
};
const Row = React.memo(function Row({ word, offset, echoes, inked, first, hot, reduced, speed }: RowProps) {
const away = Math.abs(offset);
const solid = offset === 0 && inked;
// Where the ink's window sits: over the word, waiting to its left (rows still
// to come, below), or gone off to its right (rows already printed, above).
const gate = solid ? 0 : offset < 0 ? 100 : -100;
const roll = solid && first ? TIMING.print : TIMING.roll;
// Every move on a turn, scaled together by `speed`.
const ms = (t: number) => t / speed;
const rollTransition = reduced ? "none" : `transform ${ms(roll.duration)}ms ${roll.ease} ${ms(roll.delay)}ms`;
const pad = `${REEL.pad.y}em ${REEL.pad.x}em`;
return (
echoes ? 0 : away === 2 ? REEL.far : 1,
visibility: away > echoes + 1 ? "hidden" : undefined,
willChange: away <= 1 ? "transform" : undefined,
transition: reduced
? "none"
: `transform ${ms(TIMING.turn.duration)}ms ${TIMING.turn.ease}, opacity ${ms(TIMING.fade.duration)}ms ${TIMING.fade.ease}`,
...(hot
? ({ "--echo-reel-tint": "color-mix(in oklab, var(--echo-reel-ink) 62%, transparent)" } as React.CSSProperties)
: null),
}}
>
{word}
{/* The proof: a pale fill and a hairline, with a halftone over it. */}
{word}
{word}
{/* The ink, behind a window that slides across while the word stays put. */}
{word}
);
});
/* ── EchoReel ─────────────────────────────────────────── */
export function EchoReel({
words,
value,
defaultValue = 0,
onValueChange,
interval = TIMING.interval,
echoes = 1,
speed = TIMING.speed,
className,
style,
onPointerEnter,
onPointerLeave,
onFocus,
onBlur,
...props
}: EchoReelProps) {
const n = words.length;
const spins = n > 1;
const reduced = usePrefersReducedMotion();
const rootRef = React.useRef(null);
const reelRef = React.useRef(null);
const measureRef = React.useRef(null);
// The reel's absolute position: slot k shows words[k mod n]. It only ever
// moves the short way round, so each row keeps its element through a wrap.
const [slot, setSlot] = React.useState(() => value ?? defaultValue);
const [seen, setSeen] = React.useState(value);
if (spins && value !== undefined && value !== seen) {
setSeen(value);
setSlot(slot + shortest(mod(slot, n), value, n));
}
const index = n ? mod(slot, n) : 0;
const [printed, setPrinted] = React.useState(false);
const [turned, setTurned] = React.useState(false);
const [inView, setInView] = React.useState(false);
const [visible, setVisible] = React.useState(true);
const [hovered, setHovered] = React.useState(false);
const [focused, setFocused] = React.useState(false);
const [stopped, setStopped] = React.useState(false);
const [hot, setHot] = React.useState(null);
const [announce, setAnnounce] = React.useState("");
const inked = printed || reduced;
const turn = (delta: number, reason: "auto" | "user") => {
if (!spins || delta === 0) return;
const next = mod(slot + delta, n);
setSlot(slot + delta);
setTurned(true);
if (value !== undefined) setSeen(next);
if (reason === "user") {
setStopped(true);
setAnnounce(words[next]);
}
onValueChange?.(next, reason);
};
// The timer calls the latest `turn` without restarting on every render.
const turnRef = React.useRef(turn);
React.useLayoutEffect(() => {
turnRef.current = turn;
});
const every = interval === false ? 0 : interval;
const playing = spins && every > 0 && inked && inView && visible && !stopped && !hovered && !focused;
React.useEffect(() => {
if (!playing) return;
const id = window.setTimeout(() => turnRef.current(1, "auto"), every * 1000);
return () => window.clearTimeout(id);
}, [playing, every, slot]);
// Print on first view; autoplay sleeps off screen.
React.useEffect(() => {
const root = rootRef.current;
if (!root) return;
const io = new IntersectionObserver(
([entry]) => {
setInView(entry.isIntersecting);
if (entry.isIntersecting) setPrinted(true);
},
{ threshold: 0.25 },
);
io.observe(root);
return () => io.disconnect();
}, []);
React.useEffect(() => {
const sync = () => setVisible(!document.hidden);
document.addEventListener("visibilitychange", sync);
return () => document.removeEventListener("visibilitychange", sync);
}, []);
// Fit the longest word to the width once the font is in, and on every resize.
const key = words.join("\n");
React.useLayoutEffect(() => {
const root = rootRef.current;
const reel = reelRef.current;
const measure = measureRef.current;
if (!root || !reel || !measure) return;
let alive = true;
const fit = () => {
if (!alive) return;
let widest = 0;
for (const child of Array.from(measure.children)) {
widest = Math.max(widest, child.getBoundingClientRect().width);
}
const width = root.clientWidth;
if (!widest || !width) return;
reel.style.fontSize = `${((width * REEL.fit) / widest) * REEL.measure}px`;
};
fit();
const ro = new ResizeObserver(fit);
ro.observe(root);
document.fonts?.ready.then(fit);
return () => {
alive = false;
ro.disconnect();
};
}, [key]);
if (!n) return null;
const longest = Math.max(...words.map((word) => word.length), 1);
// Before measuring (and on the server): roughly 0.56em a letter at this weight.
const fallback = `${((REEL.fit * 100) / (longest * 0.56)).toFixed(2)}cqi`;
// Enough rows either side that a jump the short way round never mounts a
// row where it can be seen.
const reach = spins ? echoes + 1 + Math.floor(n / 2) : echoes;
const rows: number[] = [];
for (let k = slot - reach; k <= slot + reach; k++) rows.push(k);
const sides: number[] = [];
if (spins) for (let o = -echoes; o <= echoes; o++) if (o !== 0) sides.push(o);
const onKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "ArrowDown" || e.key === "ArrowRight") {
e.preventDefault();
turn(1, "user");
} else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
e.preventDefault();
turn(-1, "user");
}
};
return (