Glass · Lab
Real refraction, not blur.
Three proofs of concept exploring genuine glass refraction. Instead of faking
depth with a frosted blur, each lens computes how light bends through a
convex squircle (Snell's law, refractive index 1.5) and bakes that
per-pixel displacement into an SVG feDisplacementMap. The
backdrop is copied and counter-positioned so the effect works across
Chromium, Safari and Firefox — not just where backdrop-filter: url() is supported.
Synthesised from Aave, Outpace Studios, samasante/liquid-glass and
Apple's iOS 26 reference shots. Respects prefers-reduced-transparency.
Refraction playground
Drag the lens across the grid and watch straight lines bow at the rim. Tune the optics live — strength, rim depth, dome curvature, chromatic dispersion and the squircle exponent — and toggle the reduced-transparency fallback to see the accessible opaque panel.
Traveling selection lens
One glass pane slides between nav items with spring easing, refracting the photo behind it as it moves — the way Apple's tab bar lights up the selected tab. Click between Home, Library and Settings.
Control-center slider
A volume pill whose thumb is a small lens, magnifying the track and the photo beneath it as you drag — stronger curvature and dispersion than the nav, to read as a thick little bead of glass.
Call-button cluster
Circular Regular-variant discs refracting the photo, the way
Apple's in-call screen does. Two buttons carry a selective tint to
read as active (Mute) and primary-destructive (End). Press one to feel
the gel-flex and the illumination that blooms from within — both eased
back under
prefers-reduced-motion.