MotionAnimated
Magnetic
Magnetic hover: elements lean toward the cursor and spring back.
Magnetic makes a button or icon lean toward the pointer as it approaches and spring back elastically when it leaves. It suits a primary call to action on a landing page.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/magnetic.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/magnetic.
Builds on: motion
Usage
import { Magnetic } from "@/components/ui/magnetic";
<Magnetic><Button>Get started</Button></Magnetic>Motion
How it moves
GSAP quickTo for the pull and an elastic tween for the release.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Magnetic
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | number | 0.35 | How far it follows (0–1). |
| reach | number | 24 | Extra px where the pull starts. |
Accessibility
- Purely visual; the child keeps its semantics and focus.
- Disabled with reduced motion.
FAQ
Also searched as: magnetic button · magnetic hover effect · gsap magnetic · cursor follow effect · interactive button animation