How it works

The effect is a small ray tracer that runs once per size change, following Maxime Kubryk's write-up of the technique.

1. The surface

The bezel is described by a height function over x ∈ [0, 1], where 0 is the outer edge and 1 is where the glass goes flat. The surface prop picks between four of them — a circular arc, a squircle, the concave complement, and a smootherstep blend of convex and concave that produces a raised lip.

2. The refraction

Incident rays are assumed orthogonal to the background, so the angle of incidence is just the surface tilt — the derivative of the height function, scaled by thickness / bezelWidth. Snell's law (n₁·sin θ₁ = n₂·sin θ₂) gives the refracted angle, and the ray then crosses the glass before landing on the background, so the lateral shift is height · tan(θ₁ − θ₂). Convex profiles keep the landing point inside the panel; concave ones push it out past the border, where there is nothing to sample.

3. The displacement map

Displacement magnitude only depends on distance from the border, so it is computed once along a single radius and then rotated around the shape — a rounded-rect signed distance field supplies both the distance and the normal to point the vector along. The vectors are normalised by the largest magnitude, then written into a canvas with the X component in red and the Y component in green, 128 being neutral. Exactly 128 samples are taken, because an 8-bit channel cannot express any more.

That maximum magnitude comes back as the filter's scale, which is what converts the normalised map into real pixel offsets. Because scale is just an attribute, refraction and aberration can be animated freely — everything else changes the baked geometry and forces a rebuild.

4. The specular rim

A second image encodes a rim light: brightest where the tilted bezel faces specularAngle, fading out on its own as the surface flattens toward the interior. It is screened over the refracted backdrop.

Installation

npx raya-ui@latest add liquid-glass

File Structure

Performance notes

• Building the maps is a full per-pixel pass over the panel, so it is coalesced into one requestAnimationFrame and only runs when the size or the baked geometry changes.
• Moving, scaling by transform, or animating refraction and aberration costs nothing extra — none of them rebuild the map.
• Resizing the panel every frame does rebuild it every frame. Prefer transform: scale() for animated size changes.
• aberration above 0 runs three displacement passes instead of one. Leave it at 0 unless you want the dispersion.

API Reference

Props

Slots