# Text Reveal

> Reveal text by word or character with stagger, blur, and spring motion.

Source: https://www.honestui.com/docs/animated/text-reveal

```tsx
import { TextReveal } from "@/registry/default/animated/text-reveal";

export function TextRevealDemo() {
  return (
    <TextReveal
      text={["Ideas made tangible.", "Craft built to last."]}
      as="p"
      className="px-6 text-center text-3xl font-semibold leading-tight sm:text-5xl"
      stagger={0.08}
    />
  );
}

```

## Overview [#overview]

Text Reveal introduces one or more lines in reading order. Use word splitting for headings and statements; reserve character splitting for short decorative text.

## Installation [#installation]

<CliBlock commands="[&#x22;text-reveal&#x22;]" />

## Usage [#usage]

```tsx
import { TextReveal } from "@/components/animated/text-reveal"

<TextReveal text={["Ideas made tangible.", "Craft built to last."]} as="h2" />
```

## Accessibility [#accessibility]

The content remains real text in document order. Reduced motion keeps a short opacity transition, and `whileInView` can defer the effect until the text is visible.

## API Reference [#api-reference]


  ### `text`

type: `string | string[]`

One line or an ordered list of lines.

  ### `as`

type: `ElementType` · default: `&#x22;span&#x22;`

Rendered element.

  ### `split`

type: `&#x22;word&#x22; | &#x22;char&#x22;` · default: `&#x22;word&#x22;`

Animation unit.

  ### `stagger`

type: `number` · default: `0.09`

Delay between units.

  ### `delay`

type: `number` · default: `0`

Delay before the first unit.

  ### `blur`

type: `number` · default: `12`

Starting blur in pixels.

  ### `yOffset`

type: `string | number` · default: `&#x22;40%&#x22;`

Starting vertical offset.

  ### `whileInView`

type: `boolean` · default: `false`

Waits for viewport entry.