.magnet / .magnet3d

Magnetic elements are attracted to the cursor: they translate toward the pointer while slightly growing, then spring back on leave. The 3D variant additionally tilts to face the cursor.

Demo - move your cursor across these

.magnet

.magnet3d

Tunables

amount-NAttraction strength (fraction of cursor offset)

mgrow-NScale while attracted (default 1.1)

mtime-NTween duration per mousemove (default 0.4s)

mtilt-NMax tilt degrees for magnet3d (default 12)

html

<button class="magnet amount-40">pull me</button>
<div class="magnet3d mtilt-18 mgrow-1.05">card</div>

Magnets disable themselves automatically on touch devices via a hover: none media query, and rebind if that changes at runtime.