Squishy 3D Button
A button bespoke, that upon thy gentle click doth play sweet sounds and conjure forth particles in joyous dance. It weaves a three-dimensional splash, set forth by spring’s lively motion, and may be stilled when thou wishest, forsooth. Styled and crafted to thy liking.
Installation
Understanding the Component
The Splash3dButton component renders a button that visually responds when clicked. When a user clicks the button:
- An audio click sound is played.
- A set of small, randomly sized circles (particles) is dynamically created at the click position.
- These particles animate outward using a spring motion before being removed from the DOM.
- The button’s inner content shifts position slightly on hover and press, creating a 3D effect.
- The component uses a custom hook (usePress) to manage the active state with a debounce effect, ensuring quick successive clicks are handled gracefully.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | none | Disables the button and prevents click interactions when true. |
| children | React.ReactNode | none | The content displayed inside the button. |
| className | string | none | Additional CSS classes to customize the button’s styling. |
| onClick | (e: React.MouseEvent<HTMLButtonElement>) => void | none | Callback function triggered when the button is clicked. |