# Text reveal

> Text that rises out of a blur, word by word, as it scrolls into view.

Component · Free · https://lodeui.com/components/text-reveal

## When to use

- Hero headings and section titles.

## When not to use

- Body copy and anything people need to read immediately.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/text-reveal.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TextReveal } from "@/components/ui/text-reveal";

export function Hero() {
  return <TextReveal as="h1" text="Ship product UI at platform speed." className="text-5xl font-semibold" />;
}
```

## API reference

### TextReveal

Words or characters rise and unblur when scrolled into view.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| text | `string` | – | The text. |
| as | `"h1" \| "h2" \| "h3" \| "p" \| "span"` | `"p"` | Element. |
| by | `"word" \| "char"` | `"word"` | Unit. |
| delay | `number` | `0` | Seconds. |
| repeat | `boolean` | – | Replay on every entry. |

## Accessibility

- The element has aria-label with the full text; pieces are aria-hidden.
- Shown at once under reduced motion.

## Motion

- Each unit fades up from 0.35em with a blur.

## Responsive behavior

- Wraps naturally.

## Performance

- One span per unit; prefer by="word" for long text.

## Notes for AI

- Use as="h1" for hero headings so the outline stays right.

## Related

- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.
- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.