Text Reveal

Pro

Headline reveal where words, lines or letters brighten and rise in reading order. Includes a rotating word slot that swaps words in place and resizes to fit each one.

Preview

Installation

npx @lumioui/cli add pro/text-reveal

Usage

import { TextReveal, RotatingWord } from "@/components/ui/text-reveal/text-reveal";
<TextReveal />

Also exported: RotatingWord.

Examples

Onboarding headline

A hiking app's onboarding.

Paywall rotating word

A recipe planner's paywall.

Splash handoff

A journaling app's launch handoff.

Success message

A studio booking confirmed on the booking itself.

API reference

TextReveal

Prop Type Default
text* string —
by TextRevealBy

Reveal unit. Default "word".

 "word"
delay number

Wait before the first unit (ms) — sequence a headline after a hero lands.

 0
stagger number

Override the per-unit stagger (ms).

 —
animate boolean

Play the reveal. false renders the text settled (static, no motion). Default true.

 true
onDone () => void

Fires once the last unit has landed.

 —
accessibilityRole "header" | "text"

Accessibility role of the headline. Default "header".

 "header"
align "left" | "center"

Alignment of lines. Default "left".

 "left"
textClassName string

Type classes for every unit — size, weight, leading AND a text- colour.

 —
className string —

RotatingWord

Prop Type Default
words* string[]

Words to cycle through, in order.

 —
interval number

Time each word holds (ms). Default 2200.

 2200
paused boolean

Freeze on the current word.

 false
index number

Controlled index — drive the slot yourself (e.g. from a carousel).

 —
onIndexChange (index: number) => void

Fires when the shown word changes.

 —
textClassName string

Type classes for the word — size, weight, leading AND a text- colour.

 —
className string —