What is liquid-glass-web-react?

liquid-glass-web-react is a React library that places a transparent lens over your page content, bending the pixels underneath to create the appearance of thick curved glass, similar to the visual style Apple introduced in recent versions of its operating systems. Unlike most similar libraries that only work in Chrome, this one uses an SVG displacement map technique that works in Chrome, Safari, and Firefox on both desktop and mobile, with no special settings required. The lens is a React component you wrap around any content. It bends the actual rendered pixels of whatever sits below it, so text stays selectable, links remain clickable, and video keeps playing underneath the glass. When you move the lens to a new position, only the filter region updates, not the displacement map itself. The map only regenerates when the shape of the lens changes, which keeps dragging smooth at a steady frame rate. You can adjust a range of optical properties: the refraction strength, the amount of chromatic aberration (color fringing at the edges), the curvature of the lens profile from flat to spherical dome, the inner specular glow, and the bright rim highlight. All have numeric defaults and can be changed through props. The library also exposes a lower-level LiquidGlassEngine class for use without React, plus a setPosition method available through a ref that lets you move the lens every frame without triggering a React re-render. This is useful for animation driven by external state. The package has no dependencies, bundles to about 5 kilobytes compressed, and is safe to use with server-side rendering frameworks like Next.js. Safari imposes a size limit on the content that SVG filters can process, so very large refracted regions may degrade on that browser. MIT licensed.