# web-glass

> Glass surfaces and controls for React and the DOM that refract the live page
> (text, images, any DOM content) with SVG filters. A fork of
> Glass-HQ/liquid-glass (MIT) with the same API and look: in Chromium every
> glass surface draws its own backdrop filter instead of one filter over the
> whole scene, the material maps render on the CPU when WebGPU is unavailable,
> and the material filter graph is shorter.

Made by Luka Löhr — https://lukaloehr.com

## Measurements

Chrome on an Apple-silicon Mac, 1180x820 CSS px at 2x, full control set, 3 s
per animation, upstream's scene filter vs web-glass's per-surface backdrop:

- GPU utilisation while glass moves: 72-90% -> 34-40%
- Chrome GPU main thread: 566-1007 ms/s -> 82-117 ms/s
- Dropped frames, final run of 12 animations: 23 -> 0
- Same UI states drawn by both paths: SSIM 0.987-0.998
- CPU-rendered maps vs WebGPU maps: SSIM 1.000, max difference 3/255
- WebKit, moving glass panel: 16.8 ms/frame in an 820x700 scene, 30.4 ms at
  1180x820, 39.0 ms at 1640x1200; static glass costs nothing.

## Components

GlassScene, GlassContent, GlassSurface, GlassButton, GlassTabs, GlassSwitch,
GlassSlider, GlassMenu, GlassToolbar, GlassShape, GlassProgressiveBlur.
Package name @glass-sdk/liquid-glass (version 0.0.3-webglass.1), installed from
a tarball; the source is available on request. React 19.

## Notes for use

- Keep scenes small and the content under glass static: Safari re-filters that
  content in software on every frame the glass moves.
- Put transform: translateZ(0) on a scene that sits far down a page; WebKit
  otherwise may paint it blank.
- Fall back to CSS glass for prefers-reduced-transparency and forced colours.