A sentence with one slot that flips through a list of words in 3D while the line resizes to fit each one.
npx shadcn@latest add https://hyperblur.dev/r/text-flip-words.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-flip-words.tsx.
import { TextFlipWords } from "@/components/hyperblur/text-flip-words"
<TextFlipWords text="Turn ideas into {}" words={["dashboards", "prototypes"]} className="text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Build {} faster" | Sentence with {} marking where the word goes. Without it the word is appended. |
| words | string[] | ["interfaces", "dashboards", "landing pages"] | Words the slot flips through. |
| interval | number | 2.4 | Seconds each word stays. |
| duration | number | 0.6 | Flip duration in seconds. |
| accent | string | "#7fb3ff" | Color of the flipping word. |
| pauseOnHover | boolean | true | Hold the current word while hovered or focused. |