# Motion Text Reveal Split

Hero headline on a product landing page that rises line by line on load.

- id: `motion-text-reveal-split`
- Page: https://agentic-ui-kit.com/components/motion-text-reveal-split
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-reveal-split

## Install

```bash
agentic-ui add motion-text-reveal-split
npx shadcn@4.17.0 add @agentic-ui/motion-text-reveal-split
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** split-by-word-line-or-character, masked-rise-reveal, fade-and-soft-rise-variants, token-stagger-within-400ms, in-view-or-mount-trigger, replay-with-once-false, line-split-recalculated-on-resize, original-text-kept-for-assistive-technology, reduced-motion-fallback
- **Intents:** navigate, communicate
- **Suits domains:** saas, ai-workspace, devtools, finance, ecommerce, analytics
- **Interaction:** scroll, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Hero headline on a product landing page that rises line by line on load, Feature section headings that reveal word by word as each section scrolls into view, Short onboarding step titles revealed character by character
- **Avoid when:** Body copy, table cells, form labels or any text people need to read immediately, More than one or two revealing headings visible on the same screen, Enterprise or data-dense dashboards (the enterprise personality blocks the text group)
- **Preserve when adapting:** original-text-as-accessible-name, aria-hidden-split-copy, stagger-within-400ms, plain-text-when-motion-is-off
- **Replace when adapting:** heading-text, heading-level, split-unit, variant, stagger
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** heading
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion