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.

children

string

The text to animate word by word.

stagger0.05

number

Delay in seconds between each word.

delay0

number

Delay in seconds before the animation starts.