SVG Filter Pipeline

Liquid Glass uses a sophisticated SVG filter pipeline to achieve its visual results. The pipeline consists of several stages that process the background pixels.

Pipeline Stages

1. feGaussianBlur: Adds a pre-displacement blur to the background, softening the image before refraction.
2. feDisplacementMap: The core of the effect. It uses the computed 2D displacement ImageData to shift pixels based on the glass profile.
3. feColorMatrix: Boosts the saturation of the refracted pixels, making the glass effect "pop."
4. Specular Highlight (feBlend): A physically-based rim-light highlight is generated and blended over the glass surface.

Filter Modes

You can choose how the specular layer is blended using the filterMode option:

• screen: (Default) Blends the highlights by lightening the background, suitable for most UI designs.
• composite: A more intense blending mode that can provide stronger highlights.

The pipeline is highly optimized. Once initialized, only the scale of the displacement map and the specular intensity are typically updated during animations, ensuring high frame rates even on complex pages.