Flip Words
Cycles words with a springy blur-flip transition.
- 0.9 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Make it modern, animated, accessible
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/flip-words.jsonAdds components/velora/flip-words.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
words* | string[] | — |
durationms each word stays on screen | number | 2600 |
className | string | — |
Accessibility
- Reduced motion
- The first word stays on screen and the words don't cycle. With motion allowed, cycling pauses while the pointer is over the word or focus is inside it.
- 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.