Liquid Glass dock

Demo

A floating dock that bends the page behind it like a lens, with a lit rim and macOS-style magnification.

How it works

Hover· 10 sites

Reference: Materials: Liquid Glass (Human Interface Guidelines), Apple

How it works

A floating dock that bends the page behind it like a lens, with a lit rim and macOS-style magnification.In 6 steps.

Apple's Liquid Glass refracts instead of scattering: content behind a control bends at its rim, as if through a thick lens, and a bright edge catches the light. On the web, Chromium can do the bending for real, by pointing backdrop-filter at an SVG displacement map drawn for the surface's exact shape. Other browsers keep a frosted blur. Pinned to the bottom as a dock, with icons that swell under the pointer, it becomes the floating navigation several sites in the library use.

01
Draw a lens for the shape

For every pixel of the dock, find its distance to the rounded edge and the edge's direction. Inside a bezel of about 20 px, store an offset that grows towards the rim, following a circular profile: flat in the middle, steep at the edge. Red holds x, green holds y, 128 means none.
02
Refract the backdrop with it

An SVG filter blurs the backdrop slightly (feGaussianBlur), then moves each pixel by the map (feDisplacementMap with the map in an feImage). backdrop-filter: url(#glass) saturate(1.6) applies it behind the dock. Redraw the map only when the dock's size changes.
03
Light the rim

Two inset shadows (a 1 px white line at the top, a faint dark one at the bottom) and a diagonal highlight in soft-light read as a thick, curved edge.
04
Fall back to frost

Safari and Firefox ignore url() in backdrop-filter; give them blur() with more saturation. Under prefers-reduced-transparency, make the surface solid.
05
Magnify under the pointer

Each icon's target scale falls off with a quarter cosine of its distance to the pointer (up to about 150 px). Every frame, each scale eases towards its target, so a jumping pointer still gives a smooth wave. Scale from the bottom, and lift the icon a little as it grows.
06
Touch

A finger sliding along the dock magnifies the same way; lifting it lets the icons settle.

Code

The code

The engine is the file the demo above runs, framework-agnostic; the Svelte and React tabs wire it into a component.

Pro

Copy the engine, React or Svelte version.

Unlock code with Pro

US$60/year or US$8/month. Cancel anytime.

Prompt

Prompt pack

A floating dock that bends the page behind it like a lens, with a lit rim and macOS-style magnification.

1 prompts in Pro Generated 25 Sep 2026

Build it with a coding agentA refracting glass dock, as a brief for any coding agent.

Pro opens every prompt, with the measured values filled in and ready to paste into your coding agent.

Unlock prompts with Pro

US$60/year or US$8/month. Cancel anytime.

Performance & accessibility

Performance

The displacement map is drawn once per size (a few milliseconds for a dock), never per frame. The backdrop filter re-runs whenever what is behind the dock changes, which on a scrolling page is every frame; that is fine for a dock-sized area on phones, but do not put refracting glass over the whole viewport. Magnification writes only transforms, reads positions once per frame before writing, and stops its loop when the icons are still.

Reduced motion

Under prefers-reduced-motion, keep the glass and drop the magnification wave: icons stay their size and show their labels on hover or focus. Under prefers-reduced-transparency (and prefers-contrast: more), make the dock solid with a visible border and never load the refraction.

Source

Source, credited

Apple's Human Interface Guidelines describe the material: lensing rather than scattering, a lit edge, adaptive tint, and controls that grow under the finger. The SVG displacement technique and the lens profile here are an independent web implementation; the magnification follows the macOS Dock. The linked sites use glass pills and docks for navigation; most are frosted rather than refracting.