Tool
Real-time glass refraction
for UI surfaces.
A standalone WebGL2 engine that renders physically-grounded glass distortion in real time. Every pixel inside the shape is refracted, blurred, and chromatic-aberrated based on its distance from the edge.
The Idea
When Figma shipped their glass material effect, the design community lit up, and the immediate question from developers was “how are we supposed to build this?” CSS backdrop-filter: blur() is flat. It treats every pixel identically regardless of position, producing a frosted pane with no sense of shape or materiality. Real glass has curvature: light bends more at the edges, chromatic fringes appear where the surface curves steeply, and the interior carries a subtle distortion that signals thickness.
I decided to answer the question. Glacias recreates these optical properties using signed distance fields to determine each pixel's relationship to the glass boundary, then applies physically-motivated displacement, multi-sample blur, and channel-separated chromatic aberration in a single fragment shader pass. It ships as a standalone package that any project can drop in.
The edge is the whole trick.
Without it, glass is just blur.
How It Works
The engine renders a fullscreen quad and samples a background texture through a distortion field. For each pixel, it computes the signed distance to the shape boundary (negative inside, positive outside) and then derives the surface normal from the SDF gradient.
The displacement vector is rotated 90° from the normal to run parallel to the nearest edge (the tangent direction), creating the characteristic light-bending of curved glass. A configurable falloff curve attenuates the effect from full strength at the boundary to zero at the center, with the curve exponent controlling how quickly it drops off.
SDF Shape Engine
Five built-in signed-distance-field primitives, plus support for any arbitrary SVG path converted to an SDF texture via Felzenszwalb–Huttenlocher distance transform.
Edge-Tangent Refraction
Displacement vectors run parallel to the nearest edge, not radially from center. The result reads as light bending through curved glass rather than a pinch distortion.
Chromatic Aberration
RGB channels sample at slightly different UV offsets, creating the prismatic fringing that makes the glass feel like a physical lens with dispersive properties.
Falloff Curve Control
Distortion is always zero at center and full at the edge. A single parameter controls the curve steepness between them, from gentle interior spread to sharp edge concentration.
Fill Tint
Shader-level color overlay with configurable opacity, blended after all refraction and blur passes for consistent tinting that respects the glass effect.
Capability Detection
Runtime checks for WebGL2 support, hardware capability, and reduced-motion preferences. Automatic fallback to CSS backdrop-filter blur on unsupported devices.
Any Shape
Beyond the five built-in SDF primitives, Glacias accepts any SVG path and converts it to a distance field texture at runtime. The conversion uses the Felzenszwalb–Huttenlocher distance transform, an O(n) algorithm that computes exact Euclidean distances for every pixel in the texture.
The resulting SDF texture is uploaded to the GPU, where the shader samples it for distance and derives normals via central differences. This means cloud shapes, organic blobs, text outlines, or any closed path can become a refractive glass surface with the same physically-motivated distortion as the built-in shapes.
On this site, the project cards use cloud-shaped clip paths converted to SDF textures, giving each label a unique organic glass silhouette.
Try It
Drag the sliders to see how each parameter shapes the glass effect in real time.
One shader. Zero dependencies.
Glacias is a standalone package with no runtime dependencies beyond an optional React peer dependency. The core engine is pure TypeScript and WebGL2: no Three.js, no post-processing libraries, no build-time shader compilation.
Built with