Typography / text · 4.6
Scroll-linked per-word illumination
A sentence read aloud by a spotlight.
A paragraph whose words each start dim and brighten as you scroll through them.
4 knobs
How it actually works
Copying this is copying the thing we are copying: it is on our playground model's own feature pages, and the first research pass missed it entirely because the fetch tool strips the spans. It only appeared when someone rendered the page. That is the whole methodology in one feature.
Each word wrapped in its own inline-block span at a low rest opacity, brightening on scroll progress. The rendered source uses rgba(255,255,255,0.1) as the rest state, verbatim. Vanilla via one view-timeline per span, or IntersectionObserver plus the shared rAF, which is what ours does.
The knobs, named
Rest opacity, lead/lag window, brighten curve. The lead/lag window is a genuinely novel control: it is how many words are lit at once, which is to say, how fast you are supposed to be reading.
| Knob | Source | What it teaches |
|---|---|---|
| Rest opacity | sourced | The unlit state. 0.1 is verbatim from the rendered DOM. Push it to 0 and the paragraph is genuinely unreadable ahead of the spotlight, which is a content decision, not a motion one. |
| Lead/lag window | ours | How many words are mid-brighten at once. Narrow is a laser; wide is a sunrise across the paragraph. |
| Brighten curve | ours | How a word travels from rest to lit. step is worth one look: it proves the window is doing the work, not the curve. |
| Trigger offset | ours | Where in the stage the spotlight sits. Low means words light before you reach them. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (rendered)
grep -oE '<span[^>]{0,120}>(Drop|stone|ripples)</span>' on gradientlab.co/features/wave-warp. Found on the second research pass only; WebFetch missed it entirely on pass 1. Driven by a GSAP-powered animation engine on the observed site (their FAQ schema's claim).
- Seen on
- gradientlab.co/features/wave-warp.
- Dependencies
- GSAP as seen; vanilla-possible (ours)
- Difficulty
- moderate (splitting text into spans without breaking selection or screen readers is the craft)
- Performance
- Cheap: opacity only.
- Accessibility and the floor
- Per-word spans fragment screen-reader output, so the sentence is kept in one accessible node via aria-label on the parent with the spans aria-hidden. Under reduced motion, all words at full opacity.
Notes
Composability. It is a spotlight, not a text effect. Point it at the ring's (1.13) card text, or at a funnel's (12.2) labels.