liquid-glass-html-in-canvas

This TypeScript library applies a frosted glass visual effect, similar to the translucent panels in Apple's design language, to HTML elements rendered inside a browser canvas. The effect includes background blur, light refraction, chromatic aberration (a subtle color fringing that mimics real glass), edge highlights, and drop shadows, all configurable through standard CSS variables.

The approach relies on two experimental browser features that are not yet in standard web specifications. The first is an experimental canvas API that lets HTML elements live inside a canvas element and be drawn using a special drawing command. The second is WebGPU, a newer graphics API that gives web pages direct access to the graphics card for high-performance rendering. As of this repository, the html-in-canvas feature requires Chrome with an experimental flag turned on; WebGPU works by default in Chrome 113 or later and Edge 113 or later, and is behind a flag in Firefox Nightly.

To add the effect to a page element, you place HTML inside a canvas with a special attribute, add the class liquid-glass to any element you want to look like frosted glass, and call a render method on each animation frame. Each glass element can be individually tuned using CSS custom properties: for example, --lg-blur controls how much the background blurs through the panel, --lg-refraction controls how much the glass bends the light, and --lg-corner-radius sets the roundness of the corners.

The library exports a single class, LiquidGlassCanvas, which handles WebGPU setup and provides a render() method for use in the canvas paint callback. A destroy() method cleans up GPU resources when the component is no longer needed.

Installation is via npm: run npm install and npm run dev to start the development server. The README includes a full working HTML example and a reference table for all available CSS properties with their default values and descriptions.