TextReveal
Animates a string word by word, sliding each one into place with a staggered delay. Ideal for hero headlines and editorial moments.
Interactive Demo
Click replay to run the animations again.
Headline · stagger 0.08
Paragraph · stagger 0.03
Fast · stagger 0.02
Usage
import { TextReveal } from "@mantleui/react/motion";
<TextReveal stagger={0.08} className="text-3xl font-bold"> Interfaces that feel inevitable, built with intention.</TextReveal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | The text to animate word by word. |
stagger | number | 0.05 | Delay in seconds between each word. |
delay | number | 0 | Delay in seconds before the animation starts. |
childrenstringThe text to animate word by word.
stagger0.05numberDelay in seconds between each word.
delay0numberDelay in seconds before the animation starts.