Magnetic Field
A free magnetic hover effect wrapper for cursor-led interfaces.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Magnetic Field is a free magnetic hover effect for Next.js and React, styled with Tailwind, that makes a wrapped element lean toward the cursor with spring physics and snap back when the pointer leaves. Wrap any single element, typically a CTA link or button, and it gains the magnetic pull seen on award-winning landing pages.
The pull runs entirely on Motion values, so pointer movement never causes a React re-render, and displacement is capped at 24px so the element never runs away from the pointer. The effect activates for fine pointers only: on touch devices and under reduced motion the child never moves, and keyboard focus reaches the element exactly where it rests.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/cursor-magneticUsage
import { CursorMagnetic } from "@/components/ui/cursor-magnetic";
export default function Page() {
return (
<CursorMagnetic strength={0.35} radius={120}>
<a
href="/contact"
className="rounded-full bg-primary px-6 py-3 text-primary-foreground"
>
Start your project
</a>
</CursorMagnetic>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Single element made magnetic. It keeps its own semantics and focus styles. |
| strength | number | 0.35 | Displacement as a fraction of the pointer's offset from the wrapper centre. |
| radius | number | 120 | Activation radius in px beyond the element bounds. |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Magnetic Field has no themable CSS variables because it draws nothing of its own: the child supplies all colour and shape. Tune the feel through the two props instead. Raise strength for a heavier pull, widen radius so the element starts leaning earlier, and both springs come from the shared presets in lib/motion.ts.
<CursorMagnetic strength={0.5} radius={160}>
<a href="/contact">A stronger, earlier pull</a>
</CursorMagnetic>Frequently asked questions
- Is Magnetic Field free for commercial use?
- Yes. Magnetic Field is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Magnetic Field accessible and performant?
- Yes. The magnetic pull is pointer-only decoration: the wrapped element keeps its own role, name and focus styles, and keyboard focus never triggers displacement. Pointer tracking writes Motion values directly with zero React re-renders per move, and on touch devices or when the user prefers reduced motion no listeners attach, so the element stays static.
- How do I customise the magnetic pull?
- Use the strength prop to set how far the element leans as a fraction of the pointer offset, and the radius prop to set how many pixels beyond the element bounds the pull activates. Displacement is always capped at 24px, and the spring presets are shared design tokens from lib/motion.ts.