← All effects
Text Highlight on Scroll
scroll inside ↓
-- fps
prefers-reduced-motion detected — the marker follows your scroll directly
X-ray · layers
the highlight background
off = the whole text at once
read words turn bright
Parameters
Marker hue255°
Marker opacity0.30
Fade width3 words
Finish at0.85
your version · updates as you tinker
How this effect works
The paragraph is split into word spans, and the scroll progress is mapped to a reading frontier: frontier = progress × wordCount. Words behind the frontier get the marker background and the bright ink; words ahead stay dim. It's the Decrypt Reveal architecture wearing a highlighter — one number, and every word just asks "am I before or after it?"
The fade width makes the frontier a gradient rather than a cliff: the few words around it get partial opacity, so the marker appears to sweep rather than stamp. And finish at ends the reading before the scroll ends (85% by default) — readers never quite reach the bottom pixel of a section, and a highlight that completes just before they leave feels finished instead of cut off.
Production notes: prefers-reduced-motion: fine — the motion is your own scroll · styles are only written to words whose state changed · works on headline-to-paragraph scale; for whole articles, highlight per-section · the copied snippet is self-contained with its own demo scroll box.