Scroll Text Reveal

Text Animations

A block of copy that illuminates word-by-word as it scrolls through the viewport — a reading highlighter driven by useScroll, each word cross-fading from muted to foreground over its own slice of scroll progress. The animated layer is aria-hidden with an intact screen-reader copy; under prefers-reduced-motion every word renders fully lit with no scroll mapping.

Inspired by Skiper UI — Horizontal / word text reveal (pattern) — independently built, not affiliated. Attribution policy

Great typography feels inevitable — each word arriving exactly when the eye reaches it, lighting up one by one as you read.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/scroll-text-reveal.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/scroll-text-reveal.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-md px-6">
    <ScrollTextReveal
      className="text-2xl font-medium leading-snug tracking-tight text-white"
      text="Great typography feels inevitable — each word arriving exactly when the eye reaches it, lighting up one by one as you read."
    />
  </div>

Props

ScrollTextRevealProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">

Prop	Type	Default	Description
text	string	—	The copy to reveal. Takes precedence over `children`.
children	React.ReactNode	—	Alternative to `text` — pass the sentence as children instead.
as	React.ElementType	—	Element/component to render as. Defaults to `p`.
dimColor	string	"color-mix(in srgb, currentColor 32%, transparent)"	Colour of the not-yet-read (dim) layer. Defaults to muted foreground.
litColor	string	"currentColor"	Colour of the illuminated (lit) layer. Defaults to the foreground.
stagger	number	0.8	Overlap between consecutive words' fade windows. `0` = crisp, strictly sequential; higher softens the sweep so several words light at once.
offset	string[]	—	`useScroll` offset band controlling where in the viewport the reveal runs (e.g. `["start 0.85", "end 0.5"]`). Two edge strings, entry then exit.

npm dependencies

motion