The manifesto paragraph you see on studio sites: the text stays readable in a muted tone, and each word turns to full colour exactly as the reader reaches it.
Split by word, by letter or by line. Chain them tightly or let them all light up together. Blur, rise and scale on arrival are all optional and independent.
Two details that matter. The muted text and the bright text are two layers stacked to the pixel, so nothing reflows and there is no jitter — a common failure in this kind of effect. And when the page cannot scroll (a full-height hero, a preview, a single section), the reveal plays once over a set duration instead of freezing halfway through, which is what a scroll-driven component would otherwise do.
DOM and requestAnimationFrame, no dependencies. Honours prefers-reduced-motion. Free.
The manifesto paragraph you see on studio sites: the text stays readable in a muted tone, and each word turns to full colour exactly as the reader reaches it.
Split by word, by letter or by line. Chain them tightly or let them all light up together. Blur, rise and scale on arrival are all optional and independent.
Two details that matter. The muted text and the bright text are two layers stacked to the pixel, so nothing reflows and there is no jitter — a common failure in this kind of effect. And when the page cannot scroll (a full-height hero, a preview, a single section), the reveal plays once over a set duration instead of freezing halfway through, which is what a scroll-driven component would otherwise do.
DOM and requestAnimationFrame, no dependencies. Honours prefers-reduced-motion. Free.
