## Word Morph (S—040)

Rotating words in a headline. Letters blur in with a stagger and the slot animates its width so nothing jumps.

- URL: https://sundaeui.dev/components/word-morph
- Category: Animations & interactions · Art direction: Expressive
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/word-morph.json`
- Tags: tailwind, headline, typography, hero, animated, text, react

The classic rotating headline, done carefully. Each new word arrives letter by letter, rising out of a soft blur with a short stagger. The slot measures the incoming word and animates its width, so the rest of the sentence slides smoothly instead of snapping when “you” becomes “record labels”.
Screen readers get one full sentence listing every word instead of a stream of changes. With reduced motion, words swap instantly and widths don’t animate.
Use it for hero headlines that need to speak to several audiences. Keep it to three to six words.

### Usage

```tsx
import { WordMorph } from '@/components/sundae/word-morph'

<h1>
  <WordMorph before="Software for " after="." words={['studios', 'clinics', 'restaurants']} />
</h1>
```

### Props

- `words` (`string[]`, required): Words to rotate.
- `interval` (`number`, default `2400`): Time on each word, in ms.
- `before / after` (`string`): Surrounding text, included in the accessible sentence.
- `className` (`string`): Style the visible word via [aria-hidden] > span.

### Accessibility

- Visible animation is aria-hidden. Assistive technology reads a single static sentence.
- Reduced motion disables blur, stagger and width animation.