Magnetic Buttons

Buttons that lean toward the cursor, with a separate spring for the label (parallax inside the button).

sketchMotion

Pointer offset from the button centre feeds two useSpring MotionValues; the label gets 1.5× the offset for depth.

Pointer/drag values live in MotionValues — they update the DOM directly and never trigger a React render.

Effect is pointer-only; keyboard focus shows a strong ring and no motion.

Playgroundspring

settle 0.49sovershoot 5%ζ 0.82

Stiffness180

Damping14

Mass0.40

Initial velocity0.00

Pull strength0.40

Export

transition={{ type: 'spring', stiffness: 180, damping: 14, mass: 0.4 }}