WebGL · Shaders · GSAP · Glassmorphism
A navigation bar with three hover menus (Product, Resources, Company). A single WebGL glass panel slides between them. Behind it, a loop of tall panoramas scrolls without end and blends from one picture into the next, and the glass refracts whatever passes under it, including the nav labels.
How it got there
The session started as a test bench for a CSS and SVG-filter glass material. Early passes fixed a seam down the middle of the lens, then added dome curvature so straight lines bow along the shape, plus Fresnel and a two-light bevel adapted from an open-source shader. Comparing that against a WebGL approach that captures the page into a texture led to switching renderers entirely. Several fixes made the WebGL version work reliably:
- The glass element needs a positive
z-index, or the shader's canvas gets painted behind the backdrop. - Images must be single-resource (no
srcset), or the texture crop samples the wrong region. - Every geometry or setting change has to be paired with a manual re-render call.
The dropdown took the most iterations. Animating the width made the sides jitter, because the lens gets redrawn at each new size. The fix was to give all three menus one shared width, so switching menus only moves the panel sideways, animated with GSAP. The items fade out, the empty glass moves, and the new items fade in once it stops.
Later rounds moved the material toward Apple's clean look: no grain or shine, a CSS hairline edge, a correction that removes the darker center, and a second, invisible glass layer underneath that slightly magnifies the backdrop.
