Installation
terminal
npx shadcn@latest add https://ui.thilina.dev/r/magnetic.jsonUsage
app/page.tsx
import { Magnetic } from "@/components/magnetic";
import { Button } from "@/components/ui/button";
export default function Page() {
return (
<Magnetic intensity={0.5} range={120}>
<Button>Hover near me</Button>
</Magnetic>
);
}Wrap any element; it leans toward the cursor on a spring once the pointer is
within range pixels. Use it sparingly, on one or two primary actions, so the
pull stays a delight instead of a theme.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
intensity | number | 0.6 | How strongly the element follows the cursor. 0 is static, 1 tracks it fully. |
range | number | 100 | Distance in pixels at which the pull starts. |
actionArea | "self" | "parent" | "global" | "self" | What counts as hovering: the element itself, its parent, or the whole page. |
springOptions | SpringOptions | - | Custom spring physics for the follow motion. |
Accessibility
The effect is pointer-only decoration: keyboard users and touch devices get
the unmodified child, and prefers-reduced-motion disables the pull entirely
while keeping the child fully interactive.