Word Rotate
Swaps a single word on a quiet vertical roll.
- 0.9 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Build faster, lighter, calmer
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/word-rotate.jsonAdds components/velora/word-rotate.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
words* | string[] | — |
intervalSeconds each word is held | number | 2.5 |
className | string | — |
Accessibility
- Reduced motion
- The first word stays on screen and the words don't rotate. With motion allowed, rotation pauses while the pointer is over the word, while focus is inside it, and while the tab is hidden.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- All words are exposed once, comma-separated, in an sr-only span; the rotating visual word is aria-hidden, so nothing is announced on change.