Every letter slides through a few other letters before it lands on its own. Plays when the text enters the viewport and again on hover or focus.
npx shadcn@latest add https://hyperblur.dev/r/text-shuffle-in.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-shuffle-in.tsx.
import { TextShuffleIn } from "@/components/hyperblur/text-shuffle-in"
<TextShuffleIn text="Midnight Sun" className="text-5xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| shuffles | number | 4 | How many other letters each letter passes before it settles. |
| duration | number | 0.9 | Seconds each letter spends sliding. |
| stagger | number | 0.045 | Delay in seconds between one letter and the next. |
| trigger | "view" | "mount" | "view" | Play when the text scrolls into view, or right after mount. |
| hover | boolean | true | Replay on pointer enter and on keyboard focus. Makes the element focusable. |
| replayEvery | number | 0 | Replay on its own every N seconds while visible. 0 turns it off. |
| charset | string | Pool the in-between letters are drawn from. Defaults to the letters of `text` itself. | |
| accent | string | "#2f7bff" | Color of the letters while they are still sliding. |