Docs
Shuffle Button
Shuffle Button
A dynamic button that shuffles the characters of its text when hovered over, creating an engaging animation.
Installation
pnpm dlx shadcn@latest add https://badtz-ui.com/r/shuffle-button.json
Usage
import { ShuffleButton } from "@/components/ui/shuffle-button";<ShuffleButton>Hover Me</ShuffleButton>💡 Tip
For the best effect, we recommend using a monospace font or applying a fixed width.
Props
shuffle-button props.
| Prop | Type | Description | Default |
|---|---|---|---|
| children | string | The text to display and animate inside the button. | - |
| className | string | Additional custom classes for styling. | - |
| duration | number | Duration of the character shuffle animation (in seconds). | 1 |