01
Readable core
Warp strength builds toward the rim instead of distorting the whole slab, preserving content through the center.
Open source · MIT licensed
Liquid glass that behaves like glass.
A canvas compositor for filleted refraction, shared blur, subtle chromatic splitting, and a readable center — without putting a CSS backdrop-filter on the pill.
Interactive demo
Move the glass. Watch the rim.
Drag the pill over the type. The center stays readable while the refraction, blur, and chromatic split build toward the edge.
Why this approach
Refraction first. Decoration second.
The compositor samples the real backdrop, blurs it once, then shapes the optical behavior with a rounded-rectangle signed distance field.
02
Shared blur field
The sampled backdrop is blurred once and reused by the glass pass, keeping the effect visually coherent.
03
Edge character
Chromatic separation and faint top/bottom hairlines appear at grazing angles instead of washing the entire surface.
Use it
Small API. Locked defaults.
Install directly from GitHub today, mount it onto a container, and provide the scene you want the glass to refract.
Installnpm
npm install github:XposeMarket/liquid-glass
Basic usageJavaScript
import { mountLiquidGlass, DEFAULT_SPEC } from "@xposemarket/liquid-glass";
mountLiquidGlass(document.querySelector("#stage"), {
spec: DEFAULT_SPEC,
drawScene(ctx, w, h) {
ctx.fillStyle = "#1a1e26";
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "#f0f4f8";
ctx.font = "600 42px -apple-system, sans-serif";
ctx.fillText("drag the glass over this line", w * 0.07, h * 0.3);
}
});
Under the hood
Seven steps from backdrop to glass.
The default compositor stays intentionally direct: sample, blur, shape, warp, split, shade.
- 01Sample the backdrop under the pill
- 02Box-blur the sampled field once
- 03Build the fillet from a rounded-rect SDF
- 04Warp only toward the rim so the core stays identity
- 05Pull refraction inward across the long edges
- 06Split RGB only at grazing angles
- 07Add the dark slab and faint top/bottom hairline