# Motion Typewriter

Landing hero headline cycling three product verbs.

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

## Install

```bash
agentic-ui add motion-typewriter
npx shadcn@4.17.0 add @agentic-ui/motion-typewriter
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** typed-text, blinking-caret, delete-and-retype-loop, single-variant, rotating-phrases-variant, prompt-variant, streaming-caret-variant, shared-prefix-delete, reserved-size, pause-control, pause-offscreen, accessible-full-text, reduced-motion-fallback
- **Intents:** communicate, navigate
- **Suits domains:** saas, ai-workspace, devtools, analytics, personal-productivity
- **Interaction:** pause-control, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing hero headline cycling three product verbs, Search placeholder that rotates through the things you can search, Command prompt demo that types sample queries after a leading glyph, Scripted assistant suggestion typed behind a block caret
- **Avoid when:** The text is a model response arriving over the network (use motion-streaming-text), The copy is long or the user needs to read it immediately, such as form labels, errors or data values, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** full-text-accessible-name, aria-hidden-typed-glyphs-and-caret, no-live-region, reserved-size, pause-control-for-loops, full-text-without-motion
- **Replace when adapting:** phrases, glyph, timing, caret-colour, variant
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button, card, select
- **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