Description
liquid-glass-js is an open source JavaScript library that recreates the Liquid Glass effect from Apple's current design language through WebGL in the browser. Instead of a simple CSS blur filter, the library computes multi-layer refraction with separate calculations for edge, rim, and base surface, plus shape-aware normals depending on the chosen element type and an adaptive Gaussian blur. Container and button components can be created in three shapes, a rounded rectangle, a circle, or a pill, and stacked into each other through a nested glass system: child elements sample the already rendered output of their parent container. For capturing the background that the refraction is based on, the library uses html2canvas, otherwise it has no further dependencies.
The target browser needs WebGL 2.0, ES6+ JavaScript, and the HTML5 Canvas API. There is no npm package yet; the library is integrated as pure vanilla JavaScript by copying the core files, the Container class, the Button class, and the associated stylesheets, directly into the project. Using it in React requires manual wrapping through useRef and useEffect. Because every glass instance requires WebGL rendering plus a page capture through html2canvas, frame rate drops noticeably once multiple instances are active at the same time, and a strict Content Security Policy blocks the CDN loading of html2canvas unless it is adjusted.
Compared to a plain CSS backdrop-filter or the equivalent Tailwind utility class, liquid-glass-js delivers genuine, shader-based light refraction instead of a plain blur, at a noticeably higher rendering cost. The library is therefore suited to deliberately placed premium accents such as hero CTAs or featured cards, not to widespread use across an entire page, where a lightweight blur solution remains the more practical choice.
