Magnetic Button
A button that attracts the cursor with a smooth spring effect.
Preview
Interactive Preview
Installation
Usage
tsx
import { MagneticButton } from "@/components/ui/magnetic-button"
export default function Demo() {
return (
<MagneticButton strength={40} distance={80}>
Hover Me
</MagneticButton>
)
}Dependencies
framer-motion
Props
| Prop | Type | Default |
|---|---|---|
| strength | number | 30 |
| distance | number | 60 |