# Hopping headline — complete build prompt Build a display headline that **arrives letter by letter** and then **answers the pointer**. Sweep the cursor across it and each letter hops as the cursor passes over it: higher the faster you move, lower the heavier the letter. Each one blushes its own colour for a moment, then cools back to ink. Click and the whole line arrives again. Inside a non-interactive preview it sweeps itself on a loop. ``` Where small details ← letters fall in from 0.1em above, 14ms apart meet good interfaces ← sweep across: each letter hops + lights, springs back ``` Stack: **React 19 + TypeScript + Tailwind + Next.js** (for `next/font`). No animation library. CSS keyframes for the entrance, a tiny spring simulation in `requestAnimationFrame` for the hop. Three files: 1. `headline-cascade.module.css` — the entrance keyframes. 2. `headline-cascade.tsx` — `"use client"`. The component. 3. A stage that uses it, with its lines as module constants. --- # The decisions that shape everything else **Every letter is its own element, nested two deep.** The outer span belongs to the physics (`transform`, `color` written directly by JS). The inner span belongs to the CSS entrance. Put both on one element and the entrance keyframe, with `fill-mode: both`, keeps owning `transform` after it has finished, and the physics can never move the letter. **The entrance class comes off once the wave has landed.** After the last letter's delay plus duration, the inner span loses its animation class. From then on the letters are plain and the physics has them. **A letter hops when the pointer *crosses* it, not when it is near.** On each pointer move, a letter is struck if its centre x lies between the previous and current pointer x, and the pointer y is within its line. A pointer resting on a letter therefore does nothing: each pass is one hop, like running a finger along a row of keys. **Mass makes it a row of objects.** Each letter gets a random mass from 0.45 to 1.3 and hops `height / mass`. When every letter jumps the same height, it looks like a transform applied to a string. **Physics lives outside React.** Positions, velocities and heat are `Float32Array`s in a ref, written straight to `el.style`. The loop runs only while something moves and stops itself at rest. **Kerning is put back.** Separate boxes lose the font's kerning pairs. After `document.fonts.ready`, measure each pair with canvas `measureText` (`width("ab") - width("a") - width("b")`) and apply it as `margin-right` in em on the first letter. --- # The numbers | What | Value | |---|---| | Entrance | 720ms, `cubic-bezier(0.4, 0, 0.2, 1)`, delay `90ms + i × 14ms`, from `translateY(-0.1em)` and opacity 0 | | Lit words | About half their letters (one per pair, seeded) arrive in colour and cool to ink by 58% of the entrance | | Palette | coral `#ff7a45`, honey `#ffc933`, emerald `#2fcf72`, sky `#1fc2f2`, periwinkle `#8aa2ff`, orchid `#f47bd9`, cycled by letter index | | Mass | `0.45 + 0.85 × random`, seeded (mulberry32, seed 17) so it is stable | | Hop height | `fontSize × min(0.3, 0.035 + speed/4000 × 0.22) / mass` | | Spring | `k = 260`, damping ratio 0.34 (underdamped, so a hard hop overshoots), 240Hz substeps | | Launch velocity | `-height × √k × 1.25` | | Colour heat | `min(1, 0.45 + speed/2500)`, decaying with a 0.9s time constant, mixed `color-mix(in oklab, colour heat%, ink)` | | Rest | `|y| < 0.05px`, `|v| < 0.5`, heat `< 0.01`: clear inline styles | | Self-sweep | Behind `[inert]`: after landing, strike letter `i` at `i × 18ms` with speed 1800, repeat after 1s | --- # `headline-cascade.module.css` ```css /* The entrance, and only the entrance. Each letter fades in from a tenth of an em above its place, 14ms behind the one before it, so the line arrives as a wave rather than all at once. The hop afterwards is JavaScript — it depends on where the pointer went and how fast, which a keyframe cannot know. The class comes off once the wave has landed. With `fill-mode: both` the last keyframe would otherwise keep owning `transform` and `color`, and the physics writing to the same element would be overridden by an animation that finished seconds ago. */ .letter { display: inline-block; opacity: 0; animation: enter 720ms cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(90ms + var(--i) * 14ms); } /* Arrives in its colour and cools to ink. The last keyframe names no colour, so it animates toward whatever the letter inherits — the headline works in any ink without this file knowing what it is. */ .letter[data-magic] { animation-name: enter-magic; } @keyframes enter { from { opacity: 0; transform: translateY(-0.1em); } to { opacity: 1; transform: none; } } @keyframes enter-magic { 0% { opacity: 0; transform: translateY(-0.1em); color: var(--magic); } 58% { opacity: 1; transform: none; color: var(--magic); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .letter { opacity: 1; animation: none; } } ``` --- # `headline-cascade.tsx` ```tsx "use client"; import { Newsreader } from "next/font/google"; import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react"; import styles from "./headline-cascade.module.css"; // A headline that arrives letter by letter and answers the pointer. Sweep // across it and each letter hops as the cursor passes over it — higher the // faster you go, lower the heavier the letter — and blushes its colour for a // moment before cooling back to ink. Click it and the whole line arrives again. // // Every letter is its own element, which costs the browser its kerning: pairs // like "Wh" or "Te" stop tucking together once they are separate boxes. So the // pairs are measured once, after the font loads, and put back as margins. // A display serif, loaded for this piece alone. The effect is mostly the // typeface: sturdy wedge-serifed letters are what make a two-pixel hop read as // an object moving rather than a glyph flickering. Newsreader at 500 is the // free face closest to the heavy text serif the original was set in — its // optical sizing draws the display cut at this size, with tighter spacing // and more contrast than the text cut would have. const serif = Newsreader({ subsets: ["latin"], weight: "500", display: "swap", }); const PALETTE = [ "#ff7a45", // coral "#ffc933", // honey "#2fcf72", // emerald "#1fc2f2", // sky "#8aa2ff", // periwinkle "#f47bd9", // orchid ]; // Seeded, so a replay can pick a different set of coloured letters while the // same replay always picks the same ones. function mulberry32(seed: number) { let t = seed >>> 0; return () => { t += 0x6d2b79f5; let r = Math.imul(t ^ (t >>> 15), 1 | t); r ^= r + Math.imul(r ^ (r >>> 7), 61 | r); return ((r ^ (r >>> 14)) >>> 0) / 4294967296; }; } type Letter = { char: string; index: number; color: string; magic: boolean; // How much a letter resists the hop, 0.45 to 1.3. Random rather than // derived from the glyph, and the randomness is the point: a line where every // letter jumps the same height is a transform on a string, and one where they // disagree is a row of objects. mass: number; }; type Word = { letters: Letter[]; magic: boolean }; function build(lines: string[], magicWords: string[], seed: number) { const magicSet = new Set(magicWords.map((w) => w.toLowerCase())); const rand = mulberry32(seed + 1); const massRand = mulberry32(17); let index = 0; const parsed: Word[][] = lines.map((line) => line.split(" ").map((word) => { const magic = magicSet.has(word.toLowerCase()); const letters = [...word].map((char) => ({ char, index: index, color: PALETTE[index++ % PALETTE.length], magic: false, mass: 0.45 + 0.85 * massRand(), })); // About half the letters of a magic word, one from each pair, so the // colour is spread across the word and never lands in a clump. if (magic) { const n = Math.round(letters.length / 2); for (let b = 0; b < n; b++) { const from = Math.floor((b * letters.length) / n); const to = Math.floor(((b + 1) * letters.length) / n); letters[from + Math.floor(rand() * Math.max(1, to - from))].magic = true; } } return { letters, magic }; }), ); return { lines: parsed, count: index }; } export function HeadlineCascade({ lines, magicWords, className, }: { lines: string[]; magicWords: string[]; className?: string; }) { const [playId, setPlayId] = useState(0); // Which play the wave has finished landing for. Compared rather than reset, // so a replay is "not entered" the moment its id changes, with no second // render to flip a flag back. const [landed, setLanded] = useState(-1); const entered = landed === playId; const [kerns, setKerns] = useState([]); const model = useMemo( () => build(lines, magicWords, playId), [lines, magicWords, playId], ); const text = lines.join(" "); const rootRef = useRef(null); const letterRefs = useRef<(HTMLSpanElement | null)[]>([]); // Physics lives outside React: forty letters at 60fps is not something to // route through state. Plain arrays, written to the DOM directly, and a loop // that only runs while something is still moving. const sim = useRef({ y: new Float32Array(0), v: new Float32Array(0), heat: new Float32Array(0), raf: 0, last: 0, ink: "", reduced: false, px: NaN, py: NaN, pt: 0, }); useEffect(() => { const s = sim.current; s.y = new Float32Array(model.count); s.v = new Float32Array(model.count); s.heat = new Float32Array(model.count); s.reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; }, [model.count]); // The wave's own length, then hand the letters to the physics. useEffect(() => { const ms = 90 + (model.count - 1) * 14 + 720 + 40; const id = window.setTimeout(() => setLanded(playId), ms); return () => window.clearTimeout(id); }, [playId, model.count]); // Kerning, put back. Canvas `measureText` applies the font's kerning, so the // width of "Wh" minus the widths of "W" and "h" is exactly how much the pair // wants to tuck in — measured in the real font, at the real size, once it has // actually loaded. useEffect(() => { const root = rootRef.current; if (!root) return; let cancelled = false; document.fonts.ready.then(() => { if (cancelled) return; const cs = getComputedStyle(root); const size = parseFloat(cs.fontSize); const ctx = document.createElement("canvas").getContext("2d"); if (!ctx || !size) return; ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`; const next: number[] = new Array(model.count).fill(0); for (const line of model.lines) { for (const word of line) { for (let i = 0; i < word.letters.length - 1; i++) { const a = word.letters[i].char; const b = word.letters[i + 1].char; const kern = ctx.measureText(a + b).width - ctx.measureText(a).width - ctx.measureText(b).width; next[word.letters[i].index] = kern / size; } } } setKerns(next); }); return () => { cancelled = true; }; }, [model]); // The spring every letter rides back down on. Underdamped, so a hard hop // overshoots and settles instead of sliding home — the bounce is what makes // it read as a thing with weight and not an easing curve. const K = 260; const C = 2 * 0.34 * Math.sqrt(K); const step = (now: number) => { const s = sim.current; const dt = s.last ? Math.min((now - s.last) / 1000, 1 / 30) : 1 / 60; s.last = now; let moving = false; const sub = Math.ceil(dt * 240); const h = dt / sub; for (let i = 0; i < s.y.length; i++) { let y = s.y[i]; let v = s.v[i]; for (let n = 0; n < sub; n++) { v += (-K * y - C * v) * h; y += v * h; } // Slow on purpose: the colour outlives the hop by a second, so a sweep // leaves a trail across the line rather than a flash under the cursor. const heat = s.heat[i] * Math.exp(-dt / 0.9); const el = letterRefs.current[i]; const rest = Math.abs(y) < 0.05 && Math.abs(v) < 0.5 && heat < 0.01; if (rest) { s.y[i] = 0; s.v[i] = 0; s.heat[i] = 0; if (el) { el.style.transform = ""; el.style.color = ""; } continue; } moving = true; s.y[i] = y; s.v[i] = v; s.heat[i] = heat; if (el) { el.style.transform = `translateY(${y.toFixed(2)}px)`; const letter = el.dataset.color; el.style.color = `color-mix(in oklab, ${letter} ${(heat * 100).toFixed(1)}%, ${s.ink})`; } } s.raf = moving ? requestAnimationFrame(step) : 0; if (!moving) s.last = 0; }; const kick = () => { const s = sim.current; if (!s.raf) s.raf = requestAnimationFrame(step); }; useEffect(() => { const s = sim.current; return () => { if (s.raf) cancelAnimationFrame(s.raf); s.raf = 0; }; }, []); // One letter, struck at a given pointer speed: a hop scaled down by its // mass, and its colour lit. const hop = (i: number, speed: number, size: number) => { const s = sim.current; const el = letterRefs.current[i]; if (!el) return; const mass = Number(el.dataset.mass) || 1; const height = (size * Math.min(0.3, 0.035 + (speed / 4000) * 0.22)) / mass; // Initial velocity for a peak of about `height` on this spring. s.v[i] = Math.min(s.v[i], -height * Math.sqrt(K) * 1.25); s.heat[i] = Math.max(s.heat[i], Math.min(1, 0.45 + speed / 2500)); }; // A sweep with nobody's hand on it: every letter struck in turn, left to // right, as if a pointer ran along the line at a brisk 1800px/s. const sweep = useEffectEvent((i: number) => { const root = rootRef.current; if (!root) return; if (!sim.current.ink) sim.current.ink = getComputedStyle(root).color; hop(i, 1800, parseFloat(getComputedStyle(root).fontSize)); kick(); }); // Behind glass — the `inert` preview on the index, where nothing can sweep // across it — the headline sweeps itself: once it has landed, a wave of // colour runs along the line, rests, and runs again. useEffect(() => { if (!entered || sim.current.reduced) return; if (!rootRef.current?.closest("[inert]")) return; let timers: number[] = []; const wave = () => { // Every timer from the last wave has fired by now; start a fresh list // rather than growing one for as long as the page stays open. timers = []; for (let i = 0; i < model.count; i++) { timers.push(window.setTimeout(() => sweep(i), i * 18)); } timers.push(window.setTimeout(wave, model.count * 18 + 1000)); }; timers.push(window.setTimeout(wave, 300)); return () => timers.forEach((t) => window.clearTimeout(t)); }, [entered, model.count]); const onPointerMove = (e: React.PointerEvent) => { const s = sim.current; const root = rootRef.current; if (!entered || s.reduced || !root) return; const x = e.clientX; const y = e.clientY; const t = e.timeStamp; if (!Number.isNaN(s.px)) { const dt = Math.max((t - s.pt) / 1000, 1 / 240); const speed = Math.hypot(x - s.px, y - s.py) / dt; const size = parseFloat(getComputedStyle(root).fontSize); if (!s.ink) s.ink = getComputedStyle(root).color; // A letter hops when the pointer crosses its centre line on this move, // within its own line's height. Crossing rather than proximity, so a // pointer resting on a letter does not keep pumping it — each pass is // one hop, the way running a finger along a row of keys is. letterRefs.current.forEach((el, i) => { if (!el) return; const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2; if ((s.px - cx) * (x - cx) > 0) return; if (y < r.top - r.height * 0.15 || y > r.bottom + r.height * 0.15) return; hop(i, speed, size); }); kick(); } s.px = x; s.py = y; s.pt = t; }; const onPointerLeave = () => { sim.current.px = NaN; }; return (

setPlayId((n) => n + 1)} // Vertical scroll stays the browser's; a horizontal drag across the // line is the sweep, on a phone as well as with a mouse. style={{ touchAction: "pan-y" }} className={`${serif.className} w-max cursor-default text-center leading-[1.05] tracking-[-0.02em] select-none ${className ?? ""}`} > {text} {model.lines.map((line, li) => ( // A line is a line. The sentence is broken where it was written, // never where a container happens to run out, so the size is what // gives way on a narrow screen rather than the shape. {line.map((word, wi) => ( {wi > 0 && " "} {word.letters.map((l) => ( { letterRefs.current[l.index] = el; }} data-color={l.color} data-mass={l.mass} className="inline-block will-change-transform" style={{ marginRight: `${kerns[l.index] ?? 0}em` }} > {l.char} ))} ))} ))}

); } ``` --- # The stage ```tsx "use client"; import { HeadlineCascade } from "./headline-cascade"; // The stage the piece stands on. The lines and the lit words live out here as // module constants: the headline builds its letters from them in a memo, so // they have to be the same arrays on every render, not fresh literals. const LINES = ["Where small details", "meet good interfaces"]; const MAGIC = ["details", "interfaces"]; export function HeadlineStage() { return ( ); } ``` `lines` and `magicWords` **must be stable references** (module constants or `useMemo`). The component builds its letters in a `useMemo` keyed on them, and fresh array literals every render would rebuild every letter every render. Swap `text-dark` for your ink colour. The component reads the ink back from computed style and mixes toward it, so any colour works, on light or dark. --- # Customising | To change | Edit | |---|---| | The font | The `next/font` import. Pick a sturdy display face: thin or condensed letters make a two-pixel hop read as flicker. Without Next.js, load it any way and set `font-family` on the root. | | Which words light up on entrance | `magicWords` | | Colours | `PALETTE` | | Hop size | The `0.3` cap and `0.22` slope in `hop` | | Bounce | `K` (stiffness) and `0.34` (damping ratio). Raise the ratio to about 0.7 for no overshoot. | | How long the colour trails | `0.9` in the heat decay | | Self-sweep speed | `18` (ms between letters) and `1000` (pause) in the loop effect | | Entrance speed | `720ms` and `14ms` in the CSS **and** in the landing timeout in the component, which must match | --- # Traps - **One element for both animations.** The finished keyframe keeps owning `transform`. Nest two spans. - **Leaving the entrance class on.** Same problem. Remove it after the wave lands. - **Proximity instead of crossing.** A resting pointer pumps a letter forever. - **Routing the physics through state.** Forty re-renders per frame. - **`setState` to reset "entered" in an effect.** Store which play id has landed and compare, so a replay is un-landed the moment the id changes. - **Letting the lines wrap.** Keep each line `whitespace-nowrap` and the root `w-max`, and let the font size shrink on narrow screens (`clamp`), so the sentence breaks where it was written. - **Reading kerning before the font loads.** You measure the fallback font. Wait for `document.fonts.ready`. - **Hiding the text from screen readers.** Letters are `aria-hidden`, so keep a `sr-only` copy of the whole sentence. --- # Acceptance - On load, the line arrives as a left-to-right wave, with some letters of the lit words arriving in colour. - A slow sweep gives small hops; a fast one sends light letters noticeably higher than heavy ones, with a bounce. - A pointer held still over a letter does nothing. - Colour trails behind a sweep and fades within about a second. - Clicking replays the entrance with a different set of lit letters. - Inside an `inert` container, it sweeps itself every ~1.6s. - Two lines at every width, no horizontal scroll at 375px. - Reduced motion: letters just appear, and there are no hops and no loop.