Each letter is a two-sided tile that turns over in a cascade to show the next word, with a small overshoot as it lands. Works on the horizontal or vertical axis and pauses on hover.
npx shadcn@latest add https://hyperblur.dev/r/text-letter-flip.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-letter-flip.tsx.
import { TextLetterFlip } from "@/components/hyperblur/text-letter-flip"
<TextLetterFlip words={["BUILD", "SHIP", "GROW"]} className="font-mono text-4xl font-bold" />| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["DESIGN", "DEPLOY", "DELIGHT"] | Words to cycle through. Shorter words are padded with spaces. |
| interval | number | 2.6 | Seconds between flips. |
| duration | number | 0.8 | Seconds one letter takes to turn over. |
| stagger | number | 0.06 | Delay between neighbouring letters in seconds. |
| axis | "x" | "y" | "x" | Flip around the horizontal or the vertical axis. |
| pauseOnHover | boolean | true | Stop cycling while the pointer is over the text. |
| paused | boolean | false | Stop cycling. |