Oct 2025

macOS Dock

Scale is computed as 1 + (maxScale − 1) × e^(−dist² / σ²). The Gaussian falloff means adjacent icons grow proportionally — the icon under the cursor peaks at 1.8, its neighbours at ~1.4. σ controls the spread width. On mouseleave, everything springs back with a gentle overshoot.

dock magnification

The macOS Dock magnification is one of those interactions that looks simple until you try to replicate it. A naive version — scale the hovered icon to 1.8 — produces a jerky, isolated zoom with no relationship between adjacent icons. Apple's version feels like pushing a bubble through water: the disturbance propagates outward.

The Gaussian. Scale at position i is:

scale(i) = 1 + (MAX − 1) × e^(−distance² / σ²)

e^(−x²) is the standard normal distribution curve. At distance zero, scale is MAX (1.72). At distance σ, scale drops to 1 + (MAX − 1) / e — about 1.26 for this σ. At 2σ it's nearly 1. The icons don't zoom discretely; they participate in a continuous field.

Choosing σ. σ = 58px gives a spread roughly two icon-widths wide. Set it to 30 and the falloff is so steep the effect looks like the naive version. Set it to 100 and the whole dock shifts simultaneously. 58 is where it starts feeling like a physical material.

The vertical offset. Icons scale from their bottom edge, not their centre — transform-origin: bottom center on each, plus translateY(-(scale - 1) × size × 0.5) to lift the icon so its bottom stays on the shelf. Without this, scaling from centre causes the bottom to move down and the icon appears to sink into the shelf.

On mouseleave. The transition during hover is 60ms ease — fast enough to track without lag. On leave, it switches to 220ms cubic-bezier(.23, 1, .32, 1) — a gentle spring return. The asymmetry is deliberate: the response time should match the input device's expected latency.