Skip to content
Mohammad Sharifi
Back

VisionOS Glass Dock

Volumetric glassmorphic dock icons with real-time specular highlights.

ExplorationsvisionOS

Context

An exploration of what Apple's visionOS dock would feel like if the glass actually refracted. Most glassmorphism on the web is a static blur. I wanted the material to respond: specular highlights should travel with the pointer, like light on real glass.

The interesting part

Each dock icon is a layered stack: base blur, saturation boost, a Fresnel rim light baked as a radial gradient, and a specular layer that tracks the cursor. The pointer position is routed through a single CSS custom property shared by the icons, so the whole dock reacts to one pointer listener instead of one per icon.

Show it

Edge Fresnel rim light and cursor-tracked specular highlight.

A detail

The rim light intensity peaks at the grazing angle: the gradient stop positions follow each icon's border-radius, so the highlight hugs the edge the way physical glass does, instead of sitting at a fixed offset.

What I learned

Believable glass is not one effect, it is several cheap effects stacked in the right order.