Magnetic
Pulls any element toward the pointer when it comes near, then springs back. Mark an inner node with data-magnetic-inner for parallax.
pointerspring3 files · 102 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/magnetic.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs magneticUsage
import { Magnetic } from "@/components/opus/effects/magnetic";
<Magnetic strength={0.4}>
<button><span data-magnetic-inner>Hover</span></button>
</Magnetic>API
| Prop | Type | Default | Description |
|---|---|---|---|
| range | number | 60 | Reach beyond the element edge (px). |
| strength | number | 0.35 | Fraction of the pointer offset followed. |
| innerStrength | number | 0.2 | Extra travel for [data-magnetic-inner]. |