Experiment 02
Typography in motion.
Five reveal behaviours, one easing vocabulary. Every one of them degrades to plain, readable text under reduced motion — scroll down with the preference enabled and nothing here disappears.
01
Line mask
The default for body copy and multi-line headings.
Each line is wrapped in a clipping box and pushed up from underneath, so the type appears to rise out of the page rather than fade onto it.
02
Character stagger
Headlines only. On body copy it reads as a typewriter gimmick.
One character at a time.
03
Word stagger
The middle ground. Good for pull quotes.
“A beautiful site that runs badly has failed.”
04
Scrubbed
Tied to scroll position, not triggered by it. Reversible.
The reader controls the light. Characters brighten as this block crosses the viewport and dim again on the way back, because the animation is bound to scroll progress rather than fired once by it.
05
Velocity skew
Driven by Lenis velocity from the shared frame store.
Scroll fast.
Then stop.
Implementation note
SplitText runs only after document.fonts.ready. Splitting before the webfont swaps measures the fallback and bakes in the wrong line breaks — the most common bug in this effect. Splits are reverted on cleanup so the DOM returns to plain text instead of accumulating nested spans on every resize.