# Motion Word Rotate

Landing hero headline naming the teams a product serves, one at a time.

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

## Install

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

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** rotating-word, vertical-slide-fade, slide-variant, fade-variant, flip-x-variant, flip-width-reflow, pause-on-hover, pause-control, pause-offscreen, cycle-limit, accessible-word-list, static-list-fallback, reduced-motion-fallback
- **Intents:** communicate, navigate
- **Suits domains:** saas, analytics, ai-workspace, devtools, ecommerce
- **Interaction:** hover-pause, pause-control, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Landing hero headline naming the teams a product serves, one at a time, Feature strip that cycles the audiences or use cases of a plan, Onboarding welcome line that rotates the kinds of work a workspace supports
- **Avoid when:** The word carries data or status the user must read, such as values, errors or form labels, More than one rotating element is visible at the same time, Protected enterprise screens where the personality does not allow the text group
- **Preserve when adapting:** accessible-text-lists-every-word-once, aria-live-off, pause-on-hover-and-pause-control, cycle-limit-when-preference-unknown, first-word-without-motion, transform-opacity-only
- **Replace when adapting:** words, sentence-copy, variant, timing, word-colour
- **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