← All effects

Dock Magnify

NavigationVanilla JS · zero dependenciesone influence curve per icon
-- fps
prefers-reduced-motion detected — the dock is shown flat

X-ray · layers

icons swell near the cursor (off = flat)
the swollen icons rise out of the dock
click an icon and it bounces

Parameters

Max scale1.8×
Spread90 px
Ease0.25
Icon size48 px
your version · updates as you tinker

How this effect works

Every icon computes one number from the cursor: an influence that's 1 when the cursor is right over it and fades to 0 by SPREAD pixels away, on a smooth bell curve. That one value drives both moves: the icon's scale goes from 1 up to MAX, and — because each icon grows from its bottom edge — it also appears to lift out of the dock. The neighbours get a smaller slice of the same curve, so the whole row swells into that familiar dock hump instead of one icon popping alone.

The motion is smoothed with a chase (value += (target - value) * EASE) so it feels springy, not snappy. Bounce is separate: clicking an icon kicks off a little decaying hop. Turn lift off and the icons only scale; turn magnify off and the dock goes flat so you can see what the curve was doing. Move across it, or watch it demo itself.

Production notes: respects prefers-reduced-motion (flat dock) · each icon is one transformed element; no layout thrash · on touch, drag along the dock · the copied snippet is self-contained HTML + CSS + JS.