Morphing Text
Blurs one phrase out as the next resolves in.
- 0.9 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Animate, Measure, Ship
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/morphing-text.jsonAdds components/velora/morphing-text.tsx.
Props
| Prop | Type | Default |
|---|---|---|
texts* | string[] | — |
holdSeconds each phrase is held at full clarity | number | 2 |
morphSeconds spent blurring between phrases | number | 0.8 |
className | string | — |
Accessibility
- Reduced motion
- Only the first phrase is shown, statically, with no blur. With motion allowed, cycling pauses while the pointer is over the text, while focus is inside it, and while the tab is hidden.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- All phrases are exposed once, comma-separated, in an sr-only span; the morphing visual phrase is aria-hidden, so nothing is announced on change.