# Text Animate

> Animated text for headlines and copy that reveals by word, character or line with a fade, blur, slide, scale or typewriter effect.

- Type: React component (Text & Effects)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add text-animate`
- Docs: https://wingo-ui.com/components/text-animate

## Interaction

Scroll the text into view and it reveals itself piece by piece: words blur into focus, lines slide up, characters fade in one after another, or a typewriter types it out with a blinking caret. The space is reserved before it plays, so nothing around it shifts. Screen readers get the full sentence once, never letter by letter, and with reduced motion on the text simply appears.

## Installation

```bash
npx wingo-ui@latest add text-animate
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/text-animate` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/ui/text-animate.tsx`

npm dependencies: `npm i motion`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
import { TextAnimate } from "@/components/ui/text-animate"

export function Hero() {
  return (
    <section className="mx-auto max-w-2xl text-center">
      <TextAnimate as="h1" effect="blur" by="word" trigger="mount" className="text-5xl font-semibold tracking-tight">
        Ship polished interfaces in an afternoon
      </TextAnimate>
      <TextAnimate effect="slide-up" by="line" trigger="mount" delay={400} stagger={100} className="mt-4 text-lg text-muted-foreground">
        {"Copy the source, keep full control.\nEvery component works on phones first."}
      </TextAnimate>
    </section>
  )
}

// A typewriter with a caret:
// <TextAnimate effect="typewriter" speed={40}>npx wingo-ui add text-animate</TextAnimate>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `string` | `"Interfaces that feel alive"` | The text, as a plain string. Line breaks (\n) start a new line and mark the segments for by="line". |
| `as?` | `"h1" \| "h2" \| "h3" \| "p" \| "span" \| "div"` | `"p"` | The element to render, so a headline stays a real heading for SEO and screen readers. |
| `effect?` | `"fade" \| "blur" \| "slide-up" \| "slide-down" \| "scale" \| "typewriter"` | `"blur"` | How each piece enters. blur sharpens from an 8px blur while rising slightly; typewriter types character by character with a caret. |
| `by?` | `"word" \| "char" \| "line"` | `"word"` | The unit that animates. char keeps whole words together so a line never breaks mid-word. Ignored by the typewriter, which always types by character. |
| `trigger?` | `"mount" \| "in-view"` | `"in-view"` | mount plays as soon as the page loads; in-view waits until the text scrolls into view. |
| `once?` | `boolean` | `true` | With in-view, plays the first time only. Turn it off to hide the text again when it leaves the screen and replay it on the way back. |
| `amount?` | `number` | `0.4` | With in-view, how much of the text (0 to 1) has to be visible before it plays. |
| `delay?` | `number` | `0` | Milliseconds before the first piece starts. Handy for a subtitle that follows its headline. |
| `stagger?` | `number` | `40` | Milliseconds between one piece and the next. Try 15 to 25 for characters and 80 to 120 for lines. |
| `speed?` | `number` | `35` | Typewriter only: milliseconds per character, spaces included. |
| `caret?` | `boolean` | `true` | Typewriter only: shows a caret that follows the last typed character and stays at the end. |
| `caretBlink?` | `boolean` | `true` | Typewriter only: makes the caret blink. It never blinks with reduced motion on. |
| `animate?` | `boolean` | `""` | Controls playback yourself and ignores trigger: false hides the text instantly, true plays it. Turn it off and on again to replay. Unset (Default in the playground) follows trigger. |
| `onComplete?` | `() => void` |  | Called once the last piece has finished entering, again after every replay. |
| `classNames?` | `Partial<Record<"segment" \| "caret", string>>` |  | Extra classes for each animated piece and for the typewriter caret. |
| `className?` | `string` |  | Extra classes for the root element: font size, weight, color and alignment go here. |
| `ref?` | `Ref<HTMLElement> (a useRef object or an (el) => void callback)` |  | The root element (the h1, p or whichever tag as picks). |

## Parts

### TextAnimateEffect (type)

The effect names: "fade" | "blur" | "slide-up" | "slide-down" | "scale" | "typewriter".

### TextAnimateBy (type)

The animated unit: "word" | "char" | "line".

### TextAnimateTrigger (type)

When it plays: "mount" | "in-view".

### TextAnimateTag (type)

The elements the as prop accepts: "h1" | "h2" | "h3" | "p" | "span" | "div".

### TextAnimateSlot (type)

The keys of classNames: "segment" | "caret".

### TextAnimateState (type)

The playback state, also written to the root as data-state: "idle" before it plays, "animating", then "done".

### TextAnimateProps (type)

The props of TextAnimate, plus every attribute of the rendered element.

## Examples

- **Hero headline**: An h1 that blurs in word by word, with a subtitle sliding up after a 450ms delay.
- **Line by line**: by="line" splits on line breaks; a longer stagger lets each line land before the next one.
- **Typewriter**: Types one character every 45ms while the caret follows along, then keeps blinking at the end.
- **Character fade**: by="char" with a short stagger; words never break across lines while they fade in.
- **Controlled replay**: The animate prop starts it on demand, and onComplete reports when the last word has landed.

## See also

- [Text Rotate](https://wingo-ui.com/components/text-rotate) ([Markdown](https://wingo-ui.com/components/text-rotate.md))
- [Gravity Letters](https://wingo-ui.com/components/gravity-letters) ([Markdown](https://wingo-ui.com/components/gravity-letters.md))
- [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md))
- [Hero Section](https://wingo-ui.com/components/hero-section) ([Markdown](https://wingo-ui.com/components/hero-section.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))

---

Canonical: https://wingo-ui.com/components/text-animate
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt