Floating Dock — Free HTML CSS JS macOS Dock Snippet

The macOS Dock's icon magnification is one of the most studied interaction effects in UI design — smooth, responsive, and physically intuitive. This snippet reproduces it in pure HTML, CSS, and JavaScript: a glassmorphism toolbar with coloured icon tiles that scale up toward the cursor using a Gaussian proximity formula, lift off the shelf, and bounce on click — with CSS custom properties driving every transform frame.

The macOS Dock icon magnification effect is one of the most recognisable and studied animations in software UI. It demonstrates a core principle: interactions should feel physical, as though the cursor is pushing objects rather than toggling states. This snippet reproduces the full effect — proximity-based magnification, smooth falloff, vertical lift, click bounce, label tooltip, glassmorphism container, and separator line — in pure HTML, CSS, and vanilla JavaScript with zero dependencies.

The magnification math: Gaussian proximity formula

The core of the effect is a distance-based scale calculation. When the cursor is at pixel X, for each dock icon the code computes dist = Math.abs(mouseX - iconCenter). It then computes t = 1 - dist / SPREAD — a linear falloff where t = 1 at the cursor and t = 0 at distance = SPREAD (120px by default). The scale is computed as 1 + (MAX_SCALE - 1) * t * t — squaring t makes the falloff nonlinear (Gaussian-like), so nearby icons grow large quickly while distant icons barely move. The vertical lift is LIFT * t * t — a negative value (−12px) that moves icons upward proportionally to their scale. Both are written to CSS custom properties (--scale and --ty) on each item element so the CSS transform expression reads them: transform: scale(var(--scale)) translateY(var(--ty)).

CSS custom properties as per-element animation state

Writing magnification data to CSS custom properties on individual elements (rather than inline transforms) has an important advantage: the CSS transition declaration on .icon-bg animates between the old and new custom property values automatically. When the cursor moves and --scale updates, the transition interpolates from the previous scale to the new one — giving the spring-ease feel without any JavaScript animation loop. The transition uses cubic-bezier(.34,1.56,.64,1), the same spring-overshoot easing used throughout the snippet collection, which gives the icons a slight bounce when they reach their peak.

The click bounce using Web Animations API

Clicking an icon triggers a programmatic keyframe animation using the Web Animations API (element.animate()). The three keyframes scale the icon up 15% and lift it an extra 8px before returning to the base value. The easing is the same spring cubic-bezier. Using element.animate() for the click bounce is preferable to adding/removing a CSS class because: it doesn't require a transitionend or animationend cleanup listener, it composes with the existing CSS transition without conflict, and it fires once and cleans itself up.

Glassmorphism container

The dock container uses background: rgba(255,255,255,0.08), backdrop-filter: blur(20px), and a 1px border: rgba(255,255,255,0.12) — the standard glassmorphism recipe. Icons are coloured <div> tiles with border-radius: 14px and individual linear-gradient backgrounds, matching the macOS icon aesthetic.

Customising the dock

Change MAX_SCALE (default 1.8) and SPREAD (default 120px) to tune magnification intensity and spread. Increase MAX_SCALE to 2.2 for a more dramatic effect. Change the icon SVGs and gradient colours to match your app. Add or remove .dock-item divs — the layout is display:flex; align-items:flex-end so all icons naturally bottom-align and taller magnified icons push upward rather than downward. Pair with a hamburger nav for a full navigation system.