Liquid Glass — engine playground
SVG-filter refraction on live DOM. Reference: aave.com — Building Glass for the Web. Zero per-frame JS; maps regenerate on shape change only.
1 · Draggable lenses (per-lens GlassMirror filters — aave's size rule; drag them)
Per-lens filters (GlassMirror)— each lens filters ONLY its own lens-sized element, so a drag frame re-rasterizes ~170px of pixels, not the whole 860×420 pane. That's aave's rule: they never filter a large element (their pill is 340×110). The scene is CSS paint; each lens slices it via background-size = the pane's measured size and background-position = −(lens offset) — the wide pill must continue the scene seamlessly at any position. Probe cell Y mounts this exact component.
Rim inversion: at the new defaults the outer ~16px of the round lens wraps and mirrors the backdrop (the water-droplet edge). Dial it: refraction = magnitude, curvature = rim steepness, edge falloff = smaller is a sharper flip. Compare against stage 1b below.
1b · REFERENCE — ybouane WebGL (vendored engine, slow by design — refraction-quality yardstick only, ships nowhere)
ybouane's enginere-captures the DOM into a WebGL texture and refracts with a circular-bevel height field whose gradient diverges at the rim — the strongest "upside down around the edges" fold. Same lens sizes and starting positions as stage 1: drag both and compare rims. It does NOT follow the sliders (its knobs live in the stage source; zRadius ≈ our curvature + edge falloff, u_refract ≈ our refraction scale). Being DOM-capture-per-change + rAF, it is slow and stays a reference.
2 · Static regions (GlassPane — whole-pane filter, reserved for non-moving chrome)
GlassPane regions over live DOM— ONE filter on the pane; each lens is an objectBoundingBox region with a neutral map outside and a hole-punch (probe cell A's construction; cell X mounts these exact components). The text under the glass is real, selectable DOM. The filter covers the whole pane, so it's reserved for STATIC, never-moving lenses: idle is free, but any change re-rasterizes the entire pane — draggable lenses live in stage 1's small per-lens mirrors instead.
3 · Chat chrome (GlassFrost pills — honest fallback; scroll the thread)
GlassFrost pills — NO refraction, by design.Live scrolling DOM cannot be SVG-refracted on iOS: the filter can't contain the scroller (probe S) and can't contain an oversized duplicate even clipped (probe V/W). These pills are backdrop blur + saturation + the map's specular rim as an overlay — honest degradation, like aave dropping to WebGL for video.
4 · Scroll mirror (GlassMirror — background-position paint; drag the lens, scroll the pane)
GlassMirror + scroll sync— the lens's backdrop is CSS paint: background-size= the pane's measured size, background-position= −(lens offset + scroll). Zero descendants inside the filter (backgrounds create no layout), so it's the box-fitting equivalent of probe cell T. True refraction that stays glued while the pane scrolls. Works for any CSS-paintable backdrop.
5 · QR press (WebGL — canvas/video path; press it)
WebGL path — the QR is a <canvas>; the same displacement map drives a shader instead of an SVG filter. This is aave's route for <video>and canvas (surfaces Safari won't SVG-filter). Press it.