Wrap a control and it leans toward the pointer, then settles back when you leave. Tune the pull strength and the field size.
Button
0.35
40px
tsx
import { Magnetic } from "@/components/motion/magnetic"import { Button } from "@/components/ui/button"export function Example() { return ( <Magnetic strength={0.35} range={40} > <Button>Get started</Button> </Magnetic> )}Icon
0.35
40px
tsx
import { Magnetic } from "@/components/motion/magnetic"import { Button } from "@/components/ui/button"import { PiSparkleBold } from "react-icons/pi"export function Example() { return ( <Magnetic strength={0.35} range={40} > <Button variant="outline" size="icon" aria-label="Spark"> <PiSparkleBold /> </Button> </Magnetic> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add magneticUsage
import { Magnetic } from "@/components/motion/magnetic"import { Button } from "@/components/ui/button"<Magnetic> <Button>Get started</Button></Magnetic>API Reference
Magnetic
| Prop | Type | Default |
|---|---|---|
| strength | number | 0.35 |
| range | number | 40 |
| className | string | — |
| children | ReactNode | — |
Also accepts the other native div attributes.