Every letter position is a reel that rolls to the next word at its own speed, and each reel resizes to the exact width of its new letter. The cycle wraps without rewinding.
npx shadcn@latest add https://hyperblur.dev/r/text-roll-words.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-roll-words.tsx.
import { TextRollWords } from "@/components/hyperblur/text-roll-words"
<h2 className="text-5xl font-semibold"><TextRollWords words={["Plan", "Build", "Launch"]} /> with us</h2>| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Ship", "Scale", "Shine"] | Words to cycle through. |
| interval | number | 2.2 | Seconds between rolls. |
| duration | number | 0.9 | Base seconds for a reel to roll. Each reel varies slightly around it. |
| stagger | number | 0.045 | Delay between neighbouring reels in seconds. |
| pauseOnHover | boolean | true | Stop cycling while the pointer is over the word. |
| paused | boolean | false | Stop cycling. |