Liquid Glass

@avenra/liquid-glass is a zero-dependency, physics-based SVG displacement lens library for the web that simulates real glass optics. It leverages Snell's law refraction, specular highlights, and spring animations to create beautiful, realistic glass UI components.

Why Liquid Glass?

Standard CSS blurs often lack the depth and realism of true glass. Liquid Glass solves this by:

• Simulating Snell's Law: Computing 1D and 2D displacement maps to mimic how light actually bends through glass.
• Physics-Based Animations: Using damped spring physics for all interactions, making components feel tactile and responsive.
• Performance First: It is a zero-dependency library, tree-shakeable, and available in ESM, UMD, and CJS builds.

Key Features

• One Import, Zero Dependencies: Small footprint and easy to integrate.
• SVG Filter Pipeline: Uses high-performance SVG filters for refraction, saturation, and specular blending.
• TypeScript-First: Written in TypeScript with full type declarations for a robust development experience.
• Zero-JS API: Wire up components using simple data-liquid-* attributes.

Browser Support

Liquid Glass is designed to work across all modern browsers.

• Chrome: Provides full support for SVG backdrop-filter, allowing for the most realistic refraction effects.
• Firefox & Safari: Fall back to CSS blur and saturate where certain SVG filter features are limited, ensuring a consistent user experience.