# Word rotate

> Cycles words in place with a blur-slide while the width springs to fit.

Component · Pro · https://lodeui.com/components/word-rotate

## When to use

- Rotating one word in a headline: audiences, benefits, product names.

## When not to use

- Whole sentences: use a typewriter or a carousel.

## Installation

```bash
npx shadcn@latest add @lode/word-rotate
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { WordRotate } from "@/components/ui/word-rotate";

<h1>
  Interfaces that feel <WordRotate className="text-brand-text" words={["fast", "alive", "premium"]} />
</h1>
```

## API reference

### WordRotate

An inline span that swaps words on an interval; its width springs to fit each word.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | – | Words in order. |
| interval | `number` | `2200` | ms each word stays. |
| className | `string` | – | Style the rotating word, e.g. a brand color. |

## Accessibility

- Screen readers hear the full list once; the animated word is aria-hidden.
- Pauses while hovered.
- Under reduced motion words cross-fade without moving.

## Motion

- Words slide up and unblur in, slide up and blur out (spring 260 / 26).
- The width animates with layout, so surrounding text glides.

## Responsive behavior

- Inline; wraps with the sentence.

## Performance

- One interval; only the word re-renders.

## Notes for AI

- Words must be unique; they are used as keys.

## Related

- [Typewriter](https://lodeui.com/components/typewriter) — Types phrases out, deletes them and moves on, with a blinking caret.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.
- [Shimmer text](https://lodeui.com/components/shimmer-text) — Text with a light sweep, for thinking and loading states.