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-overlayone shared canvas, page snapshot — metaball merging
4. webgl-scenefull GPU optics over owned scenes — opt-in only
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.

metaballs

morph

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

dock

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

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

The same engine ships five ways. Wrappers are thin — they mount the core and hand back the identical handle — so nothing about the optics changes when your stack does.

08

What your device got

The engine profiles the machine it lands on and spends accordingly. These are the live values for the browser reading this page, not a table someone typed.

Ten lenses scrolling on an M-series Mac open in the mid-30s of fps with dispersion at three passes and settle around 100 once the watchdog drops to one. Dispersion is most of the cost, and it is the part you can give up without losing the refraction — per surface with quality, or page-wide with configure().