Button Effects

Our collection of advanced interactions.

Magnetic Button

The button follows your cursor with spring physics, creating a sticky, tactile feel.

Available configuration to customize the component.

Prop	Type	Default	Description
intensity	number	—	How much the outer button moves towards the cursor. Default: 0.3.
innerIntensity	number	—	How much the inner content moves towards the cursor. Default: 0.6.
stiffness	number	—	Spring stiffness for friction. Default: 150.
damping	number	—	Spring damping. Default: 20.
mass	number	—	Spring mass. Default: 0.5.

Super thick solid shadow-sm that squashes on click giving tactile feedback.

Available configuration to customize the component.

Prop	Type	Default	Description
depth	number	—	Depth of the solid shadow in pixels. Default: 10.
color	string	—	Background color of the button. Default: '#ccff00'.

Hides the base text and plays an infinite scrolling banner on hover.

Available configuration to customize the component.

Prop	Type	Default	Description
text	string	—	The text to display and repeat in the marquee.
speed	number	—	Duration of one full cycle in seconds. Default: 3.
separator	React.ReactNode	—	Element used to separate repeated words. Default: '•'.

Fluid physics effect using pure CSS. The wave rises on hover. Fully parametric color.

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
liquidColor	string	"#E26A4E"	Background color of the liquid waves
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes

Figma-style design. Unfolds two rotated and offset back panels on hover.

Capas

Available configuration to customize the component.

Prop	Type	Default	Description
offsetDistance	number	—	Distance the background panels spread out on hover in pixels. Default: 16.
rotateAngle	number	—	Angle the panels rotate on hover in degrees. Default: 6.

Dark button crossed by a diagonal band of light that acts as an infinite scanner.

Available configuration to customize the component.

Prop	Type	Default	Description
scanDuration	number	—	Duration of the scan animation in seconds. Default: 0.8.
scanColor	string	—	Color of the scanning light beam. Default: 'white'.

Dynamic inner border on a cream-colored button with modern styling.

Available configuration to customize the component.

Prop	Type	Default	Description
children	ReactNode	—	Button content
gradientClassName	string	"bg-[conic-gradient(...)] modern:bg-[conic-gradient(...)]"	Tailwind arbitrary class for the spinning conic gradient
className	string	—	Optional custom class name
...props	ButtonHTMLAttributes	—	All standard HTML button attributes