LiquidGlassJS — Liquid Glass for the whole web

01

A capability-tiered engine

Every other library picked one rendering lane and died in it. LiquidGlassJS probes what your browser can do and routes each surface to the best backend — under a single API.

your browser renders with detecting…

1. css-svglive backdrop displacement — Chromium
2. svg-contentcounter-positioned live copy — Safari & Firefox
3. webgl-scenefull GPU optics over owned scenes
4. webgl-overlayone shared canvas, page snapshot
5. css-fallbackgraceful blur + tint, everywhere

02

Physics you can feel

A mass–spring–damper system drives every surface: gel squash on press, wobbly release, magnetic hover. Runs on any backend, sleeps when idle, respects prefers-reduced-motion.

03

Lenses that melt together

The iOS 26 signature move: SDF smooth-min metaballs in a WebGL2 shader. Give two lenses the same merge group and they flow into each other — over your real page.

The same trick powers the tab bar: the pill rides a spring and bulges through the dock as it passes.

And whole controls morph: hand one glass its sibling and the material rides a spring between them.

04

Contrast that adapts itself

Glass samples the luminance beneath it and flips its own tint — plus a data-liquid-glass-tone hook for your text. No manual overLight flags. Zero competitors do this.

05

Feels like the real thing

Lock screen, tab bar, control center — rebuilt from library primitives over a live wallpaper. Move your pointer: the bezel light follows it, the way glass follows the room.

06

Playground

Tune the material, take the config with you.

07

One core, your framework