Magnetic Button
Button that subtly follows the cursor with a magnetic effect.
Installation
pnpm dlx shadcn add @smoothui/magnetic-buttonnpx shadcn@latest add @smoothui/magnetic-buttonyarn dlx shadcn add @smoothui/magnetic-buttonbunx shadcn add @smoothui/magnetic-buttonFeatures
- Cursor-following magnetic effect
- Configurable strength and activation radius
- Spring physics for natural movement
- Respects reduced motion preferences
- Touch device detection (effect disabled on touch)
- Disabled state support
- Polymorphic with
asChildprop - GPU-accelerated transforms
Props
Usage
import MagneticButton from "@/components/magnetic-button";
export default function Example() {
return (
<MagneticButton strength={0.3} radius={150}>
Hover near me
</MagneticButton>
);
}Examples
Default
<MagneticButton>Click me</MagneticButton>Custom Strength
Increase the magnetic pull strength (0-1):
<MagneticButton strength={0.5}>Strong magnetic effect</MagneticButton>Custom Radius
Adjust the activation radius in pixels:
<MagneticButton radius={200}>Large activation area</MagneticButton>Custom Spring Config
Fine-tune the spring animation:
<MagneticButton springConfig={{ duration: 0.6, bounce: 0.2 }}>
Bouncy
</MagneticButton>As Child (Polymorphic)
Use with any component using asChild:
<MagneticButton asChild>
<a href="/docs">Go to Docs</a>
</MagneticButton>