Dynamic Scroll Island TOC Sub Select Toggle Cool checkbox Animated Blur Testimonials Family status indicator Squishy 3D Button Gooey Menu Swipeable sheets

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.

Animated Testimonials

A sexy testimonial component with smooth blur animations.

Dynamic Scroll Island

Apple style dynamic scroll island