Surface Equation
Each glass shape starts as a 1D surface profile. The curve defines how steep the edge is, which directly affects the way light bends across the bezel.
Documentation
How The Glass Works
This project treats liquid glass as a rendering pipeline, not a cosmetic blur. The effect is built from SVG displacement, specular reconstruction, DOM cloning, and motion tuning.
Refraction Sampling
The code samples the curve, computes normals, and approximates the refracted ray. That produces a horizontal displacement distance for every point on the edge.
2D Displacement Map
Those samples are expanded into an RG displacement texture. Red and green channels store directional offsets that the SVG filter later applies to blurred scene content.
Specular Highlight
A second raster pass generates the bright edge highlight. That layer is blended back into the displaced content to fake the polished rim of curved glass.
DOM Clone Strategy
Instead of true backdrop access, each exhibit clones the underlying DOM into a hidden layer, aligns it inversely, and filters that clone inside the glass bounds.
Interactive Tuning
Blur, saturation, specular alpha, refraction scale, geometry, and spring behavior are all exposed as controls so each component can feel materially different.
Generated Maps
Displacement Map
The renderer generates an RG texture where each channel stores directional offset. That map is what bends the cloned scene through the SVG displacement filter.
Specular Highlight
A second generated pass builds the bright rim and glossy edge response. Blending it back on top is what makes the glass read as polished instead of just distorted.
Reading The Surface
Liquid glass only works when distortion and highlight stay in balance. Too much displacement turns the surface muddy. Too little specular response makes it read like blurred plastic instead of polished glass.
These generated maps are the technical layer behind that balance. One controls how the background bends through the surface, and the other restores edge light so the material keeps its sharp, wet finish.