Text Reveal

TextReveal splits text into words and reveals them one by one when the element scrolls into the viewport.

ExamplesCodeUsageChangelog

Basic usage

This text reveals word by word as you scroll it into view.

Tailwind v4

<TextReveal text="This text reveals word by word as you scroll it into view." />

Larger text

Build beautiful interfaces with animations that feel natural and purposeful.

Tailwind v4

<TextReveal
  text="Build beautiful interfaces with animations that feel natural and purposeful."
  style="font-size:1.5rem;font-weight:700;"
/>

Custom threshold

A higher threshold means more of the element must be visible before triggering.

Tailwind v4

<TextReveal
  text="A higher threshold means more must be visible before triggering."
  :threshold="0.5"
/>

Props

Prop	Type	Default	Description
text	string	—	The text to reveal word by word
threshold	number	0.1	IntersectionObserver threshold (0–1)