Word Rotate
Whole phrases sit on a small drum that turns on a timer. The next phrase turns in from one side with a light blur while the last one turns away, and the words around it slide to the new width instead of jumping.
It stops turning while the pointer rests on it, while it is off screen and while the tab is hidden, so nobody loses a phrase they were reading.
Two other text pieces change their wording. Word Roll rolls only the words that changed when your state changes, such as a billing period. Text Loop loops any children with variants you write yourself. Word Rotate is the timed one, for whole phrases on marketing pages.
Examples
In a headline
The phrase changes width, and the end of the sentence slides with it.
Write release notes, weekly updates, design reviews and onboarding guides people finish reading
Whole sentences
Longer tips turn downward every four seconds. Rest the pointer on a tip to keep it.
Tips: press N to start a new note, drag a card to change its status, type @ to mention a teammate, press / to search every project
With a pause control
A line that keeps changing needs a way to stop it. paused holds the current phrase until it turns false again.
Shipping from Lisbon, Nairobi, Osaka, Toronto
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-word-rotate.jsonComponent API
WordRotate
| Prop | Type | Default | Description |
|---|---|---|---|
| words | readonly string[] | The phrases, in order. One phrase never turns. | |
| interval | number | 2.5 | Seconds each phrase stays. |
| direction | 'up' | 'down' | 'up' | Which way the drum turns. |
| paused | boolean | false | Holds the current phrase. |
| pauseOnHover | boolean | true | Holds the current phrase while the pointer rests on it. |
| onIndexChange | (index: number) => void | Called with the index of each new phrase. | |
| accessibleText | string | the phrases joined by commas | What screen readers hear in place of the turning phrase. |
| className | string | Classes for the outer span. |
Accessibility and motion
- Screen readers hear one stable sentence (
accessibleText) instead of a phrase that changes under them. The turning drum is hidden from them. - The drum turns only while it is on screen and the tab is visible, and holds still under the pointer. For a line that keeps changing on its own, add a pause control as in the third example.
- A phrase turns in over 500ms with a strong ease-out and leaves in 350ms, fading faster than it turns. The width eases with the same spring as
AnimatedSize. - With reduced motion, the phrases cross-fade and the width changes at once.
Credits
Inspired by the word rotate of Magic UI, rebuilt as a turning drum on motion and AnimatedSize.