Magnetic · paneui

Installation

pnpm dlx shadcn@latest add @paneui/magnetic

Usage

import { Magnetic } from "@/components/ui/magnetic"

<Magnetic>
  <a href="/pricing">Pricing</a>
</Magnetic>

Examples

Strength

Range

Spring and Disabled

Motion

Only fine pointers (mouse, pen) on hover-capable devices get the effect, and it is off entirely under prefers-reduced-motion: reduce. The wrapper never moves, only its inner span, so layout is unaffected.

Wrap a Button, or any other element, to make it lean toward the cursor.

API Reference

Magnetic

Wraps any element so it leans toward a nearby cursor, then springs home. Also accepts every prop of span.

children*: ReactNode; Content that moves.
strength= 0.3: number; Fraction of the cursor's offset from centre the content follows.
range= 24: number; Extra pull zone around the element, in px.
disabled= false: boolean; Turn the effect off.
spring= { stiffness: 220, damping: 16, mass: 0.35 }: { stiffness?: number; damping?: number; mass?: number }; Spring for the follow and the snap back, merged over the default.

Prop	Type	Default	Description
children*	ReactNode	—	Content that moves.
strength	number	0.3	Fraction of the cursor's offset from centre the content follows.
range	number	24	Extra pull zone around the element, in px.
disabled	boolean	false	Turn the effect off.
spring	{ stiffness?: number; damping?: number; mass?: number }	{ stiffness: 220, damping: 16, mass: 0.35 }	Spring for the follow and the snap back, merged over the default.

data-slot: "magnetic"

Data attribute	Description
data-slot	"magnetic"