Physics Engine

Liquid Glass uses a custom physics engine to simulate the way light bends through glass, known as refraction.

Snell's Law Refraction

The core of the refraction effect is based on Snell's Law. The library computes a 1D displacement map by sampling 128 points along the bezel radius of the element. For each point, it calculates the lateral displacement that light would undergo as it passes through a virtual glass surface.

These 1D samples are then wrapped into a 2D ImageData (via compute2D), which serves as an SVG feDisplacementMap. This allows for realistic, non-linear distortion of the background.

Surface Profiles

The shape of the glass surface is defined by PROFILES. These are functions that describe the curvature of the lens. Liquid Glass comes with several built-in profiles:

• convexSquircle: (Default) A smooth, squircle-based convex lens that provides a modern, soft look.
• convexCircle: A standard circular convex lens.
• concave: An inward-curving lens that creates a "sunken" glass effect.

You can also provide custom profile functions to create unique lens shapes. A custom profile is a function that takes a value x (from 0 to 1) and returns a displacement value.