text

TextReveal

Word-by-word, line-by-line, or character-by-character opacity reveal driven by scroll position. Creates a progressive reading effect as the user scrolls.

v1.0.0react >=18next >=14tailwind >=4motion >=12

textscrollrevealopacityprogressivereading

Preview

Loading preview...

Props

Prop	Type	Default	Description
`text*`	`string`	`—`	The text to progressively reveal on scroll
`splitBy`	`string`	`word`	How to split the text for staggered reveal
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`text`	`string`	Yes	The text content split and revealed progressively via the text prop

Layout

Display: block

Responsive: No

Renders as a block div. Give it enough vertical height (e.g., min-h-screen) for the scroll effect to have room to progress.

Examples

Word-by-word paragraph reveal

<div className="min-h-[200vh] flex items-center">
  <TextReveal
    text="We believe design should be effortless, expressive, and accessible to everyone."
    className="text-4xl font-bold leading-relaxed"
  />
</div>

Character-by-character dramatic reveal

<TextReveal
  text="WELCOME"
  splitBy="character"
  className="text-8xl font-black tracking-widest"
/>

Line-by-line section heading

<TextReveal
  text={"Design.\nBuild.\nShip."}
  splitBy="line"
  className="text-6xl font-bold"
/>

Paragraph with muted base opacity

<TextReveal
  text="Every pixel matters. Every interaction counts. Every moment is an opportunity to delight your users."
  className="text-2xl text-neutral-300 leading-loose max-w-2xl"
/>

AI Usage Hint

Use TextReveal for long-form text that progressively reveals as user scrolls. Split by 'word' for paragraph reveals, 'character' for dramatic single-word reveals, 'line' for section headings. Give the container enough height (min-h-[200vh]) for the scroll range to work well.

Works Well With

FadeUpGradientText