Word rotatePro
Cycles words in place with a blur-slide while the width springs to fit.
Interfaces that feel fast, alive, obvious, premium
Made for founders, design engineers, product teams, agencies
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
Usage
Import it from @/components/ui/word-rotate after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/word-rotate/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt