Scroll word reveal
Text whose words brighten in sequence across a scroll range.
API reference
Components
<ScrollWordReveal />
Scroll-linked word reveal. By default the text's own viewport passage drives the sequence. Supply progress to distribute the same reveal over a parent section's scroll range. The element keeps one accessible name while its visual words are hidden from assistive technology.
children
Plain text whose words reveal in reading order.
as?
Element to render. Defaults to "p".
className?
Merged onto the text element.
id?
Forwarded to the text element.
startOpacity?
Opacity each word starts at. Defaults to 0.15.
spread?
Portion of progress across which word starts are distributed. Defaults to 0.8; the remaining range is available for the last word to settle.
wordDuration?
Portion of progress each individual word takes to settle. Defaults to 0.2.
offset?
Motion useScroll offsets used when the component tracks itself. Defaults to ["start 0.85", "end 0.35"].
progress?
Optional external scroll progress. Pass this when a larger section owns the scroll runway, for example a sticky text stage.
Functions
getWordProgressRange
Distributes word starts evenly across the available progress, while keeping every word's own reveal window the same length. The final word always lands by progress 1, even when the supplied spread and duration overlap it.
getWordProgressRange(index: number, count: number, spread = DEFAULT_SPREAD, wordDuration = DEFAULT_WORD_DURATION): WordProgressRangeReturns
start
end
getWordOpacity
Maps one word's reveal window to a cumulative opacity. Progress before the window leaves the word dimmed; progress after it keeps the word fully visible instead of fading it back out.
getWordOpacity(progress: number, options: WordProgressRange, startOpacity = DEFAULT_START_OPACITY): number