Docs
Stagger Button
Stagger Button
A dynamic button that animates on hover, where each letter of the text flips in 3D with a staggered effect.
Installation
pnpm dlx shadcn@latest add https://badtz-ui.com/r/stagger-button.json
Usage
import { StaggerButton } from "@/components/ui/stagger-button";<StaggerButton>
Hover Me
</StaggerButton>Props
StaggerButton props.
| Prop | Type | Description | Default |
|---|---|---|---|
children | ReactNode | The text or elements to display and animate inside the button. | - |
className | string | Additional custom classes for styling. | - |
duration | number | Duration of the animation for each character flip (in seconds). | 0.2 |
staggerDelay | number | Delay between the animations of each character (in seconds). | 0.05 |
height | number | The height of the button, affecting the 3D flip effect. | 26 |