Magnetic Button
A button that subtly drifts toward the cursor as you hover, with a spring-based return when you leave.
Installation
Run the following command
npx shadcn@latest add @aceternity/magnetic-buttonProps
MagneticButton Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The element to wrap with the magnetic effect. Pass any button or interactive element. |
strength | number | 0.8 | How strongly the child follows the cursor. 1 matches the cursor 1:1; lower values produce a softer pull. |
maxDistance | number | 100 | Maximum distance, in pixels, that the child can drift from its resting position regardless of how far the cursor moves. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
