Scroll Text

Text that reveals as it scrolls through the viewport, following the scroll position. Scroll the page to play the examples.

Examples

By word

A board should answer one question before lunch: who is waiting on whom. Everything else on the screen is there to help you act on that answer.

By character

Ship the small version on Friday

Highlight

Most handoffs stall for the same reason. The next person never learns that the work is ready for them. A status that changes on its own closes that gap.

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-scroll-text.json

Component API

ScrollText

Prop	Type	Default	Description
children	string		The text to reveal.
mode	'word' \| 'character' \| 'highlight'	'word'	Reveal word by word, character by character, or fill a highlight behind each line as it is read.
as	'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'blockquote' \| 'div' \| 'span'	'p'	The element to render. Use `span` to reveal one phrase inside a paragraph.
offset	UseScrollOptions['offset']	['start 0.85', 'end 0.5']	When the reveal starts and ends: here it starts as the top of the text passes 85% of the viewport and ends when its bottom reaches the middle.
containerRef	RefObject<HTMLElement \| null>		A scrolling element to follow instead of the page. It needs a position other than static.
className	string		Optional CSS class for the text element.

The reveal follows the scroll position through motion values, so scrolling back hides the text again and nothing re-renders while you scroll. Screen readers get the whole text at once. Under reduced motion the text shows fully and the highlight is already filled.

Scroll pieces belong on marketing pages. Keep the character mode for short headlines: every character follows the scroll on its own.

Credits

The effect is inspired by the scroll text of UI Layouts, rebuilt as a scroll-linked reveal.