Magnetic Button
As the cursor approaches the button, it translates toward the cursor, up to 8px in any direction. The pull is proportional to distance from centre. On mouseleave, it springs back using cubic-bezier(.23,1,.32,1) with a slight overshoot.
Magnetic Button
A button that deflects toward the cursor when it enters the proximity zone, then snaps back with a spring on leave. The pull is proportional to distance so the effect reads as physical attraction rather than a teleport.
Proximity mapping
On mousemove, we compute the cursor position relative to the button center and divide by a falloff radius (about 80px). That normalized offset — clamped to [-1, 1] — drives a translate(x, y) transform on the button element. Multiply by the max pull distance (typically 12px) to get the actual displacement.
const dx = (cursor.x - center.x) / radius
const dy = (cursor.y - center.y) / radius
setOffset({ x: dx * MAX_PULL, y: dy * MAX_PULL })
Spring release
On mouseleave, offset resets to { x: 0, y: 0 }. A CSS transition with a slight overshoot cubic-bezier handles the snap-back — cubic-bezier(0.34, 1.3, 0.64, 1) gives just enough bounce to feel physical without being distracting. The same transition is suppressed during active tracking so the button keeps up with the cursor.