# Motion Text Blur In

Hero headline that blurs into focus word by word when the page loads.

- id: `motion-text-blur-in`
- Page: https://agentic-ui-kit.com/components/motion-text-blur-in
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-blur-in?piece=motion-text-blur-in

## Install

```bash
agentic-ui add motion-text-blur-in
npx shadcn@4.17.0 add @agentic-ui/motion-text-blur-in
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** blur-in-reveal, per-word-split, per-character-split, in-view-trigger, mount-trigger, replay-trigger, run-once-or-every-entry, capped-stagger, accessible-text-once, no-script-fallback, reduced-motion-fallback
- **Intents:** communicate, generate-content
- **Suits domains:** marketing, saas, devtools, ai-workspace, ecommerce, media
- **Interaction:** scroll-trigger
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** hero headline that blurs into focus word by word when the page loads, paragraph that resolves character by character as it scrolls into view, blur fade-in text animation for section headings on a landing page, text reveal that replays every time the heading re-enters the viewport
- **Avoid when:** Body copy that must be readable the moment the page opens, such as forms, errors and legal text, A masked rise or line-by-line reveal is wanted (use motion-text-reveal-split), Streaming model output (use motion-streaming-text), More than one blurring block in the same viewport
- **Preserve when adapting:** text-in-dom-once, aria-hidden-split-layer, plain-text-without-motion, box-size-unchanged
- **Replace when adapting:** text, split-unit, blur-strength, duration, stagger, trigger, element
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **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