Browse components
Shuffle Text
Each letter spins like a slot-machine reel and lands on its final character, on view and on hover.
Installation
npx shadcn@latest add @glint-ui/shuffle-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/shuffle-text.json
Usage
import { ShuffleText } from "@/components/ui/shuffle-text";
<ShuffleText text="Jackpot" duration={900} stagger={45} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Jackpot" | Final text. |
| duration | number | 900 | Ms each reel spins. |
| stagger | number | 45 | Ms between reels starting. |
| spins | number | 8 | Random glyphs per reel before landing. |
| characters | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$#&%" | Glyphs used on the reels. |
| shuffleOnHover | boolean | true | Spin again on every hover. |
| className | string | — | Extra classes for the root element. |