The macOS Dock's magnify-on-hover is one of the most copied UI effects ever — and it's just one idea: scale each icon by how close the cursor is to it. Here's a faithful, live rebuild in CSS + a few lines of JS.
🍎 Try it (move your mouse along the dock): https://dev48v.infy.uk/design/day12-macos-dock.html
The whole trick
On mousemove, for each icon compute the distance from the cursor to the icon's center. Turn that distance into a scale: close = big (e.g. 1.8×), far = normal (1.0×), with a smooth falloff in between. Neighbours ramp down gradually, giving the fisheye look.
Scale, never width
Animate transform: scale(...) with transform-origin: bottom — not width/height. Transforms are GPU-composited, so it stays buttery; animating layout properties would jank.
The frosted bar
backdrop-filter: blur() + a translucent background gives the glass dock. A tiny "running" dot under an app and a bounce keyframe on click finish the illusion.
🔨 Full build (distance→scale falloff, transitions, backdrop-filter, accessibility) on the page: https://dev48v.infy.uk/design/day12-macos-dock.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)