Scroll Mask Reveal

Create a scroll mask text reveal. A pinned paragraph whose lines start ghosted (text color at ~15% opacity) and light up to full ink one line after another as the user scrolls, so reading pace is driven by the scrollbar. Implementation: pin the text block inside a tall section (sticky container, ~2.4x viewport). Compute progress 0-1 from the section's scroll offset. For each line i of N, derive lineProgress = clamp(progress * (N + 1) - i, 0, 1), and switch the line to full color when its lineProgress passes 0.5, with a 250ms color transition so the switch feels soft. For per-word or per-character granularity, split the text and apply the same formula with a smaller step. Styling: display-weight text; the final line can land in the accent color as the payoff. Split lines manually (one element per line) rather than relying on wrapping, so the reveal boundaries are stable across screen sizes. Under prefers-reduced-motion, show the whole text at full color with no linkage. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.