Build SDF Liquid Glass

Build SDF Liquid Glass

Create a bounded displacement lens with a sharp, accessible content layer.

Workflow

1. Inspect the existing component framework, card dimensions, background, and browser targets.
2. Install vaso with the repository's package manager.
3. Adapt assets/react/SDFLiquidGlass.tsx and sdf-liquid-glass.css for React projects. Preserve the same layer separation elsewhere.
4. Render Vaso as an absolute background layer and place text and controls in a sibling overlay. Do not let the displacement filter process readable content.
5. Measure the host with ResizeObserver instead of hard-coding responsive width.
6. Keep a translucent CSS background under the effect so unsupported browsers still show a usable card.
7. Verify light, dark, and detailed backgrounds. Drag or resize the surface and check that the map follows its bounds.

Default Tuning

Start with:

• radius: 16
• depth: 0.58
• blur: 0.4
• dispersion: 0.32
• Stable notification height: 86px

Read references/tuning.md before increasing depth or dispersion.

Quality Gates

• Keep foreground content crisp and outside the filtered layer.
• Reject doubled text, rainbow fringes across glyphs, stale canvas dimensions, and clipped rounded corners.
• Keep depth subtle for operational UI; use stronger distortion only for decorative surfaces.
• Test resize behavior, Chromium desktop, and a mobile viewport.
• Check the console and preserve readable CSS fallback colors.

Default Preference

If the user asks only for an optimized glass material without naming D/SDF/Vaso, use $build-webgl-liquid-glass instead.