ClawHub
Other
#webgl#liquid-glass#react#refraction

Build WebGL Liquid Glass

Build high-fidelity GPU liquid glass surfaces

woodfishhhh@woodfishhhh

Install

openclaw skills install @woodfishhhh/build-webgl-liquid-glass

Build WebGL Liquid Glass

Create a real refractive material while keeping text and controls crisp above the lens.

Workflow

  1. Inspect the existing framework, styling conventions, target background, and browser support.
  2. Install liquid-gl with the repository's package manager.
  3. Adapt assets/react/WebGLLiquidGlass.tsx, webgl-liquid-glass.css, and liquid-gl.d.ts for React projects. Preserve the same DOM layering in other frameworks.
  4. Keep the WebGL target empty. Put readable content in a sibling overlay; never place text inside the rasterized lens target.
  5. Point snapshotSelector at the real visual background, not the glass card or the whole app when avoidable.
  6. Initialize after the target and background assets exist. Register animated or replaceable backgrounds with liquidGL.registerDynamic().
  7. Preserve a CSS backdrop-filter fallback and legible foreground colors when WebGL is unavailable.
  8. Verify the result over light, dark, and high-frequency backgrounds. Drag or scroll the surface and confirm refraction stays aligned.

Default Tuning

Start with the asset defaults:

  • resolution: 1.5
  • refraction: 0.007
  • aberration: 0.03
  • bevelDepth: 0.075
  • bevelWidth: 0.18
  • frost: 2.2
  • magnify: 1.006
  • shadow: false, specular: true, tilt: false

Read references/tuning.md before changing these values or adding several lenses.

Quality Gates

  • Keep content as DOM text above the lens. Reject duplicated, blurred, or chromatically split text.
  • Avoid hard clipping, detached refraction, stale snapshots, black canvases, and visible shader seams.
  • Keep the surface dimensions stable during loading and interaction.
  • Reduce resolution and disable expensive options before replacing the WebGL approach.
  • Respect prefers-reduced-motion; do not add tilt or elastic motion by default.
  • Test Chromium desktop and a mobile viewport. Check the console and confirm the fallback remains usable.

Fallback Choice

Use $build-sdf-liquid-glass only when the user explicitly selects D/SDF, WebGL is unavailable, or many simultaneous glass surfaces make the shared GPU renderer inappropriate.