scroll-scrubbed-word-reveal

Split text nodes into word spans using TreeWalker, then map a normalized section scroll progress value to each word's opacity, blur, and vertical offset through CSS custom properties. Use GSAP ScrollTrigger with scrub or a requestAnimationFrame scroll loop for the progress measurement.

Walk text nodes with TreeWalker instead of using textContent or innerHTML, which flatten markup. Replace only non-whitespace tokens with spans while preserving whitespace nodes, so links, em, strong, and marks keep their semantics and styling.

Use GSAP ScrollTrigger with scrub when you need precise start and end positions, refresh handling, or a shared timeline. Use a dependency-free scroll measurement with requestAnimationFrame for a standalone section, as shown in the included demo.

Yes, under prefers-reduced-motion: reduce the implementation shows every word immediately, removes blur and transforms, and removes any pinning. The final text must remain fully readable and meet normal contrast requirements.

Line-based splitting breaks when browser line wraps change with container width, language, zoom, or font loading. Word-level splitting keeps wrapping free to reflow responsively, and re-splitting is only needed when the source text itself changes.