Cycles through a list of words, each sliding up and out while the next flips in from below, letter by letter.
npx shadcn@latest add https://hyperblur.dev/r/rotating-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/rotating-text.tsx.
import { RotatingText } from "@/components/hyperblur/rotating-text"
<RotatingText words={["fast", "bold", "smooth"]} interval={2200} />| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | required | Words to cycle through. |
| interval | number | 2200 | Milliseconds each word stays before the next transition. |
| stagger | number | 0.02 | Seconds of delay between letters in a transition. |
| loop | boolean | true | Return to the first word after the last. When false it stops on the last word. |
| ariaPrefix | string | "" | Text read by screen readers before the current word. |