01
Signed distance field
A rounded-box SDF gives the distance to the nearest edge. It's the backbone: distance drives the bezel height, and its gradient is the direction the surface tilts.
Physically-based · dependency-free · ~9 KB
A tiny engine that renders glass the way light actually behaves — a signed distance field shapes the bezel, its gradient gives the surface normal, and Snell's law bends the backdrop through it. One physics model, two backends.
Your browser doesn't apply SVG filters in backdrop-filter, so you're
seeing the frosted fallback. For the full refraction, open this in a Chromium
browser (Chrome, Edge, Brave).
Every slider maps to a real term in the model. Drag the panel across the colour field behind it — the middle stays readable, only the rim bends light.
The same maths runs on the CPU into an SVG displacement map on the web, and on the GPU as an SKSL shader on native. The function names match 1:1.
A rounded-box SDF gives the distance to the nearest edge. It's the backbone: distance drives the bezel height, and its gradient is the direction the surface tilts.
Inside the bezel band the height rises along a lens or smoothstep profile. The height gradient reconstructs the surface normal — steep at the rim, flat in the middle.
A view ray refracts at that normal by the index of refraction and travels down through the slab. The flat plateau bends nothing, so the centre stays perfectly readable.
Where the bent ray lands is the pixel offset — the backdrop shows through, shifted. A Blinn–Phong term adds the bright rim highlight that sells the glass.
Drag the circle across the text. The rim refracts; the middle reads clean.
LIQUID GLASS
SNELL'S LAW
REFRACTION
SDF NORMALS
DISPLACEMENT
The CPU rasterises the field into an RGBA displacement map, fed to <feDisplacementMap> through backdrop-filter. Chromium refracts the live backdrop; Safari and Firefox get the frosted fallback plus the rim highlight.
The identical physics ships to the GPU as a runtime shader for @shopify/react-native-skia, evaluated per pixel — with chromatic aberration splitting R/G/B at the rim.