LiquidGlass

LiquidGlass is a lightweight JavaScript/TypeScript library that adds realistic glass‑like visual effects to any HTML element by using WebGL shaders. It captures the DOM content behind each target element, runs it through a multi‑pass rendering pipeline, and composites the result in real time, producing refraction, blur, chromatic aberration, and lighting cues such as edge highlights and specular reflections.

The library works with any positioned container as a root and injects a canvas into each direct child marked as a glass element. It supports layered compositing, dynamic content updates, draggable floating panels, and responsive resizing, and it can be configured per element through JSON data attributes or globally via default options. Typical parameters include blur strength, refraction index, chromatic aberration amount, corner radius, and Fresnel reflection.

Developers who need pixel‑perfect, Apple‑style liquid glass visuals for web interfaces—such as frosted panels, dark glass buttons, or magnifying domes—can install the package via npm or load it from a CDN, then initialize it with a root element and a selector for the glass elements. The API provides a simple init method and a destroy call for cleanup.