Rotating Text
A free rotating text effect that cycles one word of a headline with React and Motion.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Rotating Text is a free React rotating text animation component for Next.js, built with Motion and styled with Tailwind. One word in your headline cycles on a timer: the outgoing word exits upward through a clipped slot while the incoming word rises in from below, each holding for 2.5 seconds by default.
The slot reserves the width of the longest word with an invisible sizer, so the sentence never reflows and layout shift is zero. The server HTML carries the complete sentence with the first word, the loop pauses while the headline is offscreen, screen readers hear one stable string from a screen-reader-only copy of the static sentence, and with prefers-reduced-motion enabled the first word renders statically with no timer and no movement.
Template Empire
Build faster with your team
One word in the headline cycles every 2.5 seconds: the old word exits up, the new one rises in, and the slot is already as wide as the longest word so nothing around it ever moves. Scroll it out of view and the loop pauses; enable reduced motion and the first word simply stays put.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-rotateUsage
import { TextRotate } from "@/components/text-rotate";
export function Example() {
return (
<h1 className="text-5xl font-semibold tracking-tight">
<TextRotate
prefix="Build "
suffix=" with your team"
words={["faster", "smarter", "together"]}
/>
</h1>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | required | The words that cycle through the slot, 2 to 6 of them. The first is the SSR/static word. |
| prefix | string | undefined | Text rendered before the rotating slot. |
| suffix | string | undefined | Text rendered after the rotating slot. |
| interval | number | 2.5 | Seconds each word holds before cycling to the next. |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Rotating Text declares no tokens of its own; the swap timing mirrors the --dur-2 and --ease-out-expo motion tokens through the shared lib/motion.ts presets, and the type inherits whatever heading styles surround it. Tune the pace with the interval prop and restyle the rotating slot from the className prop with the same semantic tokens the rest of the library uses:
<h1 className="text-5xl font-semibold">
<TextRotate
interval={4}
className="text-brand"
prefix="Ship "
suffix=" today"
words={["templates", "sections", "pages"]}
/>
</h1>Frequently asked questions
- Is Rotating Text free for commercial use?
- Yes. Rotating Text is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Rotating Text cause layout shift or hurt accessibility?
- No. An invisible sizer renders the longest word inside the slot so its width is reserved before any animation runs, which keeps cumulative layout shift at zero while words change. The swap animates transform and opacity only, the wrapper exposes one stable screen-reader-only string with the static sentence while the rotating machinery stays hidden from assistive technology, and with prefers-reduced-motion enabled the first word renders statically with no timer at all.
- How do I change the words, the pace or the styling?
- Pass 2 to 6 strings through the words prop; the first is the word crawlers and no-JS visitors see. Set the interval prop to the number of seconds each word should hold, 2.5 by default, and merge your own Tailwind classes onto the wrapper through the className prop to control size, weight and colour.