Component Library

Magnetic Container

Cursor-reactive wrapper that gently pulls content and optionally tilts it. Built using framer-motion and class-variance-authority.

Default

Live controls for strength, radius, tilt, perspective, and layout variant; strength/radius default like MagneticPresets.subtle, block variant fills the preview for centering

Controls

magnetic-button.tsx

1<Magnetic
2  strength={20}
3  radius={100}
4  tilt={false}
5  tiltStrength={10}
6  perspective={900}
7  variant="block"
8  disabled={false}
9>
10
11  <div className="flex min-h-[160px] w-full items-center justify-center">
12    <Button variant="outline">Hover me</Button>
13  </div>
14</Magnetic>

Controls

strength

radius

tilt

tiltStrength

perspective

variant

disabled

Props

Name	Type	Default	Description
strength	number	40	Maximum pull distance toward cursor in pixels
radius	number	150	Activation distance from center in pixels
tilt / tiltStrength	boolean / number	false / 10	Enable and tune subtle 3D tilt toward pointer movement
perspective	number	900	3D camera depth in pixels when tilt is enabled
variant (CVA)	"default" \| "block"	"default"	Wrapper layout variant from CVA
springConfig / disabled / as	object / boolean / ElementType	default spring / false / div	Control animation feel, disable behavior, and element type