Chapter 27 · scroll-scrubbed narrative
A story told in type
Four chapters, one number. Scroll writes it, the timeline writes it, the arrow keys write it — and the whole page reads it. There is no video file here, so the story can be scrubbed backwards as precisely as forwards.
Drag the timeline or scroll · H folds the dock away
What is doing the work
Four chapters, one number. Scroll writes it, the timeline writes it, the arrow keys write it — and the whole page reads it. There is no video file here, so the story can be scrubbed backwards as precisely as forwards.
The usual way to build a page like this is to render a film and give it a playhead. That is a recording with a scrub bar drawn on top, and it inherits everything a recording is bad at: it cannot be responsive because it was baked at one size, it cannot be re-timed, and scrubbing backwards shows you the frames you already saw rather than the same moment at t−0.1.
This page has no film. Each chapter is real text in the document, and the scrub value drives its opacity, its transform and a word-by-word reveal — every word is a span, and the number of words lit is a function of the same scalar that positions the chapter. Because the type is real type, it rewraps at every width, it is selectable, it is read correctly by a screen reader, and it scales with the reader's own settings.
Scroll is one driver among three. The timeline in the dock writes the same number, Play walks it forward on its own, and the arrow keys step it. Whichever input moved last is reported in the dock, so a reader can always tell whether the story is running by itself or is waiting for them — which is the difference between an interactive sequence and an animation nobody can take the wheel of.
- 01 IntroThe type arrives word by word and the room is cold. Nothing has happened yet and the page says so.
- 02 DiscoveryThe first turn. The wash warms, the headline lifts, and the same words are re-set larger.
- 03 RevealThe point of the piece. The ground goes to the burn hue and the headline runs in the accent.
- 04 ExplanationThe turn back. Everything is stated plainly, and the page offers the contact.
The honest part
Frame rate is reported, not promised. The number in the dock is a real reading from a rolling window, and under a software rasteriser it will be low — which is the truth about this page rather than a failure of it. What costs almost nothing here is fill rate: there are four text layers and a background, and the expensive part of a narrative is usually the film that this one does not have.
Under reduced motion, no loop runs at all. The scrub is still a working control, but Play is disabled and the choreography settles to its first state: the same four chapters in the same order, the same palette, the first one composed and the rest held ready. A reader who asks for stillness gets a still story, not a blank page.
- Technique
- Scroll-scrubbed narrative · typography choreography · chapter transitions in CSS transforms
- What it does
- Carries a reader through a four-part story with a single scrub value that any input can drive, in either direction
- Live demo
- Four chapters in the viewport above, driven by scroll, by the timeline, or by Play
- Good for
- Brand stories · product launches · case studies · automotive · fashion · heritage brands
- Combines with
- Scroll choreography · type · 3D · scroll-driven video · sound design
- Complexity
- Intermediate — one scalar and a table, once the decision not to use video is made
- Performance
- CPU transforms and opacity, no media decode. Degrades to a settled static composition under
prefers-reduced-motion