Masked Scroll Highlight

About this text effect

The scroll-linked reading highlight is a familiar effect with an unfamiliar amount of room to get wrong, and the mistake is almost always in the mapping. Driving each word from its index divided by the total quietly assumes that every line holds the same number of words; with a ragged right edge, or a short final line, the highlight runs ahead of the reader on some lines and behind on others, which is exactly the thing the effect exists to avoid. What matters is where a word sits in reading order across the block, so the words are measured, grouped into real lines by their rounded vertical position, and scored as their line number plus how far along that line they begin — then normalised by line count rather than word count. Two structural choices keep it robust. Progress comes from the section's own bounding rectangle rather than from a scroll position, so it behaves identically whether the page scrolls, an ancestor scrolls, or both, which is what lets it survive being dropped inside a modal or a split pane. And the animation frame loop is gated on an IntersectionObserver, because a scroll handler that fires for every block on a long page is how this pattern becomes the reason a site janks. Measurements are retaken once webfonts resolve, since metrics from the fallback face usually break lines somewhere else entirely.