Week 45 · Future Architectures

Scrub to reveal

Treatment

TheEyeBelievesWhatMovesFirst

Words revealed

0 — — nothing yet —

The Words Arrive
Before You Read Them

Drag the bar below and the same six words assemble three different ways — shattered fragments locking together, a typewriter appending one letter-group at a time, a sentence that never moves but slowly gains weight. None of it plays by itself. You drive every word.

Predict

Scrub all three treatments through the same six words. Which one puts them in your head in the order they were written — reliably, the first time?

Experience

The Kinetic Bench

One headline, four levers, one honest measurement. Set the stagger, the distance, how much your scroll speed itself drives the reveal, and the easing — then scroll the small panel below the headline, start to finish, and watch what actually happened to your own reading order.

The panel is deliberately small and bounded — an overflow-y-scroll box with overscroll-behavior: contain, never the page itself. This is the same reveal a native CSS animation-timeline: view() produces (progress is position), reimplemented so its per-word timing can be captured, not just played.

The Kinetic Bench

scroll the small panel to reveal

The Eye Believes What Moves First

Reading order fidelity: —; modelled
Total reveal duration: —; measured
Words / second: —; measured
Smallest word-to-word gap: —; measured, vs 80ms floor

Reveal stagger120ms/word

BlockSequential

Motion distance24px

StillFar

Velocity coupling0%

Position onlySpeed-driven

Easing

Reading order fidelity is modelled: clamp(smallest real word-to-word gap ÷ 80ms, 0, 1), minus a penalty for an overshooting easing dragged a long visual distance (Kinetic Typography Claude.md, line 142 for the 80ms floor). Total reveal duration and words/second are measured — real timestamps captured the instant each word’s reveal crosses its threshold, not a formula. Set velocity coupling to 0% and scrub at any speed you like: the numbers barely move. Push it to 100% and scroll fast, and the same stagger you set collapses anyway — the wow this bench exists to produce.

Concept

Bass Directed Attention Before You Could Look Away

Saul Bass (1920–1996) got the main title of Otto Preminger’s The Man with the Golden Arm in 1955 — not the poster, the film’s own first sixty seconds — because a picture about heroin addiction needed the audience’s nervous system prepared before a single scene played.

Three consecutive commissions from Alfred Hitchcock followed: Vertigo (1958), where Bass and animator John Whitney built a hypnotic spiral out of analog-computer geometry rather than illustration; North by Northwest (1959), where a grid of intersecting lines corrals the titles into columns before dissolving into a real building facade — often called the first extensive use of kinetic typography, a claim this dossier flags as contested, since Bass had already animated moving type on Golden Arm four years earlier; and Psycho (1960), where sliding bars slice the title text into an anxious, mechanical rhythm. Across all three, Bass accepted less legible, delayed information — cast names you could not always parse mid-cut — in exchange for a faster emotional transfer. That trade only works when the audience does not urgently need the delayed information; a checkout button is not a film credit.

Reach for a simple, visual phrase that tells you what the picture is about and evokes the essence of the story.

Saul Bass, quoted by Wikipedia

The working system underneath all four sequences reduces to a short review checklist. Motion must be motivated — every property change answers a one-sentence “what does this represent” or it is decoration. One axis reads clearest — Bass’s vocabulary per sequence was narrow (a spiral; a grid; sliding bars), never five competing techniques at once. Hierarchy is timing, not just size — North by Northwest’s three-stage descent (abstraction, architecture, street) mirrors its protagonist’s own descent, and the minimum perceptible gap between stages is 80ms. And entrance, emphasis and exit are different jobs — reusing one easing curve for all three teaches the eye that none of them mean anything.

The web-native descendant is not a metaphor. OpenType 1.8 (announced jointly by Adobe, Apple, Google and Microsoft, September 2016) standardized variable fonts — a single file storing a continuous design space across axes like wght (weight), addressed through the animatable CSS property font-variation-settings. Paired with animation-timeline: view(), a headline’s own structural weight can now be driven by scroll position the way Whitney’s spiral was driven by an analog computer — the Bench above is that recipe, made measurable.

None of this is free. Rule 5 sets reading speed as a hard ceiling: a line of type meant to be read, not merely felt, needs a legible, static hold of at least 1.5s for a 6-word line (word count ÷ 4 seconds) — after the motion, not during it. And WCAG 2.2.2 requires a pause, stop or hide control for any auto-starting sequence longer than five seconds; every reveal on this page is scroll-driven by the learner’s own hand precisely so that requirement never has to be invoked. Nielsen Norman Group’s own research on scrolljacking is the reason the Bench’s panel is a small, bounded, contained box rather than the page itself — hijacking the reader’s own scroll gesture is the single most damaging misreading of “scroll-linked type,” not a stylistic risk worth taking for effect.

Deconstruction

Five Moves, One Grammar

A kinetic-type system is a small, named vocabulary, reused — not a fresh technique invented per headline.

Select a move below; each replays once so you can watch it, and each carries the one sentence that decides whether it belongs on your next headline or nowhere near it.

ORDERTHENMEANING

Move

StaggerMask

Stagger — delay between words

Use when order itself is the argument — a headline before its subhead, a cause before its effect (Rule 3: ≥80ms apart or it reads as simultaneous).

Real World

Same Six Words, Two Machines

Drag the divider. Identical copy, identical column, identical font — one arrives all at once, one resolves its weight over the first 700ms after it scrolls into view.

This is the dossier’s own worked example (Part 10, §1): one axis of change (weight), no position or opacity noise, an entrance with no matching exit while the hero is on screen, under 900ms — the “authoritative, not urgent” register a considered landing page wants.

The Eye Believes What Moves First

TheEyeBelievesWhatMovesFirst

Both sides are reduced-motion-safe: under prefers-reduced-motion, the kinetic hero renders at its final resolved weight immediately, with no transition — the dossier’s own reduced-motion contract (Part 7): land on the legible end state, never on a frozen mid-transform.

Experiment

Velocity Is Not Free

One variable this time, isolated: how much your own scroll speed, not just your scroll position, drives the reveal.

At 0% the reveal is a pure position mapping — scrub it in fits and starts, in one smooth pull, however you like, and the measured gaps barely change. Push it toward 100% and the same stagger you set starts to depend on how evenly your hand moves — scroll it in a hurry and words that were designed 150ms apart can land almost together. The panel also counts your own direction reversals as you go.

Velocity coupling

scroll however you naturally would

The Eye Believes What Moves First

Direction reversals: 0; measured jitter
Reading order fidelity: —; modelled

Velocity coupling50%

Position onlySpeed-driven

Direction reversals are counted directly from real scroll-delta sign changes — measured, not modelled. Fidelity uses the same formula as the Bench above. Nothing here claims human scroll gestures are literally “jittery” in general; it demonstrates, on your own hand, what velocity coupling does to a design that was never built to tolerate it.

Challenge · Read it in order, under 1.2s

Open

Set the stagger, the distance and the easing, then scroll the panel start to finish. The six words must resolve in order (modelled fidelity ≥ 85%) in under 1.2 measured seconds.

The Eye Believes What Moves First

Reveal stagger60ms/word

BlockSequential

Motion distance48px

StillFar

Easing

Fidelity: —
Duration: —

The starting values (fast stagger, long distance, a bouncing easing) are the failure case on purpose — a block of an entrance, not a sentence.

Insight

Motion is punctuation; too much and the sentence has no commas.

Every rule in this piece — the 80ms floor, one axis at a time, entrance and emphasis and exit as different jobs — is the same instruction restated: motion is not the sentence, it is what tells you where the sentence pauses. A comma placed everywhere reads as no comma at all. Bass understood this with four decades of near-total restraint — one shape, one idea, repeated and varied, never five competing techniques stacked because a library made stacking easy. Kinetic type earns its keep exactly where it adds punctuation the reader could not get from position and size alone, and costs the sentence everywhere else.

Mental model

Whenever a headline, hero or reveal is asked to look kinetic,

look for the real gap between when each piece of it becomes legible, not how it looks frozen on one frame,

because a stagger under roughly 80ms per word reads as one simultaneous block no matter how considered the easing curve is, and a legible line still needs its own static hold afterward before anyone can actually read it.

TomorrowFind one autoplaying entrance you shipped and pause it on a single frame. If that frame is not legible on its own, the animation was carrying weight the static design should have carried — and check it resolves in well under 1200ms.

End of experience

← Back to the constellation

The Words ArriveBefore You Read Them

The Kinetic Bench

Bass Directed Attention Before You Could Look Away

Five Moves, One Grammar

Same Six Words, Two Machines

Velocity Is Not Free

Where this idea goes next

The Words ArriveBefore You Read Them

The Kinetic Bench

Bass Directed Attention Before You Could Look Away

Five Moves, One Grammar

Same Six Words, Two Machines

Velocity Is Not Free

The Words Arrive
Before You Read Them

The Words Arrive
Before You Read Them