# Text Reveal

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.

> Composed · Pro · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/text-reveal
```

## Import

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

## Variants

- `onboarding` — Onboarding headline: `npx @lumioui/cli add pro/text-reveal-onboarding`
- `paywall` — Paywall rotating word: `npx @lumioui/cli add pro/text-reveal-paywall`
- `splash` — Splash handoff: `npx @lumioui/cli add pro/text-reveal-splash`
- `success` — Success message: `npx @lumioui/cli add pro/text-reveal-success`

## Props

### TextReveal

| Prop | Type | Notes |
| --- | --- | --- |
| `text` | `string` | — |
| `by?` | `TextRevealBy` | Reveal unit. Default "word". |
| `delay?` | `number` | Wait before the first unit (ms) — sequence a headline after a hero lands. |
| `stagger?` | `number` | Override the per-unit stagger (ms). |
| `animate?` | `boolean` | Play the reveal. false renders the text settled (static, no motion). Default true. |
| `onDone?` | `() => void` | Fires once the last unit has landed. |
| `accessibilityRole?` | `"header" | "text"` | Accessibility role of the headline. Default "header". |
| `align?` | `"left" | "center"` | Alignment of lines. Default "left". |
| `textClassName?` | `string` | Type classes for every unit — size, weight, leading AND a text- colour. |
| `className?` | `string` | — |

### RotatingWord

| Prop | Type | Notes |
| --- | --- | --- |
| `words` | `string[]` | Words to cycle through, in order. |
| `interval?` | `number` | Time each word holds (ms). Default 2200. |
| `paused?` | `boolean` | Freeze on the current word. |
| `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` | — |

Source: https://lumioui.com/components/text-reveal