Volume 01 Optics
Up next
Rendered live
Light
through
glass.
Real refraction, a specular rim, and the iOS 26 controls. Web Components, with the same components for React, Vue, and Svelte.
npm install glassy-liquid
Drag the lens across the ice.
What ships in the library
- 01
- Eleven live demosButtons through sheets, the iOS 26 set, each one live.
- 02
- Four renderersPicked per browser. The rim, tint, and motion stay the same.
- 03
- No dependenciesAbout 35.7 kB gzip for every component and the WebGL path. No WebGPU.
Plates
Four ways the light moves.
-
01
Real refraction. The rim bends the lake, pixel by pixel, instead of frosting it flat.
-
02
Controls that turn to glass. Hold a thumb. It lifts into a lens, then settles.
-
03
Light that follows you. Press the player. The highlight gathers under your finger.
-
Home Saved Recent 04The same glass on iPhone. Inside a scene, Safari and Firefox refract too.
Measure
Fast, because the maps stay still.
Nine-slice shadows and rims never re-encode when a surface resizes. One shared ticker sleeps whenever nothing is moving.
35.7 kB
gzip for every component, all renderers and the WebGL path
@glass-sdk/liquid-glass: 99.8 kB DOM entry · 189.2 kB React entry, React itself excluded
60 fps
while content scrolls under 16 surfaces
@glass-sdk/liquid-glass: 15 fps · p95 frame 16.8 vs 83.4 ms
60 fps
while 16 surfaces resize every frame
@glass-sdk/liquid-glass: 10 fps · nine-slice maps never re-encode on resize
99 ms
to set up 16 glass surfaces
@glass-sdk/liquid-glass: 355 ms, generating maps with WebGPU on a real GPU
Headless Chrome 154.0.8037.92 with GPU and WebGPU enabled, 16 glass surfaces over a photo with live text, device pixel ratio 2, median of 3 runs, 2026-10-15. Frame rate is capped at the display refresh (60 Hz) on the measuring machine. Reproduce with npm run bench.
Begin
The web, seen through glass.
npm install glassy-liquid