Rotating Text
Cycling words that roll letter by letter, with width easing.
Rotating Text cycles through words in place, as in "Components for dashboards / landing pages / docs". The old word rolls away letter by letter, the new one rolls in, and the box eases to the new width so the sentence never jumps.
Preview
Components for dashboards
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/rotating-text.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/rotating-text.
Builds on: motion
Usage
import { RotatingText } from "@/components/ui/rotating-text";
Built for <RotatingText words={["dashboards", "docs"]} />Motion
Per-letter staggered roll plus a width tween so surrounding text glides.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
RotatingText
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | — | Words to cycle. |
| interval | number | 2400 | ms per word. |
Accessibility
- Pauses on hover.
- With reduced motion it shows the first word only.
FAQ
Also searched as: rotating text react · word rotate animation · text loop · animated words hero · flip words