Scroll· 6 sites
Reference: CSS opacity, MDN contributors
How it works
A paragraph comes into full ink word by word as native scroll advances.In 5 steps.
Use progress as a reading guide, never as a gate on the words. The semantic paragraph stays intact; decorative word spans only change opacity. This is scroll-driven emphasis, distinct from the timed SplitText entrance technique.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Preserve one accessible paragraph
Keep a plain text paragraph for assistive technology and hide the decorative spans from it. Never announce every opacity change.
- 02
Split at word boundaries
Keep spaces and wrapping intact. Build the spans once, not while scrolling.
- 03
Advance a small brightening window
Each word clamps its distance from the progress frontier to the unit interval; softness sets how many words share the transition.
- 04
Show all ink in the still
Reduced motion removes the long runway and makes every word fully readable.
- 05
Dispose cleanly
Call destroy() when the view unmounts to disconnect resize and preference observers, remove scroll listeners and cancel pending frames.