127 Components
Ripple Burst Button
ButtonsTactile impulse button that spawns dual concentric shockwave rings from the exact pointer click coordinate with spring recoil.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ripple-burst-button.json"
Props
TypeScript props supported by <RippleBurstButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Emit Shockwave Pulse" | Primary text label rendered inside the button. |
| stiffness | number | 400 | Hooke's Law spring stiffness for hover and tap recoil. |
| damping | number | 22 | Spring damping coefficient controlling recoil settling. |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | — | Standard button click handler callback |
Key Features
- Computes exact local pointer coordinates (x, y) on click to spawn dual staggered shockwave rings.
- Coupled Hooke's Law hover lift and tap compression.
- Built-in live pulse counter badge.
Keyboard & Accessibility
- Marks all expanding shockwave ring elements with aria-hidden='true'.
- Supports standard Enter and Space keyboard activation (spawning ripples from button center).
- Suppresses shockwave rings and scale transforms when prefers-reduced-motion is active.