Rotating Text for React

Rotating Text rolls one word of a sentence through its options like the reel of a slot machine: each letter of the outgoing word rolls up out of sight while the same letter of the next one rolls in behind it, one letter after the other, so a ripple runs along the word. The window fades out at its top and bottom edges, so the letters turn over a drum rather than drop off a cliff. It holds the width of its widest word, and it pauses while the pointer is over it.

Use it for the word of a headline that cycles: who a product is for, where it runs, what it does. For words that lift away and blur instead, use Flip Words; to grow a box around each word, Container Text Flip; to type them out, Typing Text. A small timer counts the turns and CSS keyframe animations the install adds to your stylesheet roll the letters, with no animation library; with reduced motion the words swap in place.

Installation

Usage

import { RotatingText } from "@/components/ui/rotating-text";

<h2>
  Made for <RotatingText texts={["designers", "developers", "everyone"]} />
</h2>

Demos

Direction

direction="down" rolls the reel the other way: the next word drops in from above and the last one falls out below, like a departures board.

Stagger

stagger is the time between one letter rolling and the next, 30 ms by default. 0 rolls the whole word at once; a longer one sends a slow ripple along it, so give it a longer duration too (how long each word stays, 2500 ms by default).

Accessibility

Screen readers read every word once, as a list (designers, developers, everyone), from a visually hidden copy; the rolling letters are hidden from them, so they never hear a word change mid-sentence. The words stop while the pointer is over them, for anyone reading slowly, and with reduced motion they swap without moving.

FAQ

API Reference