AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Andrew PriferShaders & WebGPU

Liquid DOM Showcase

Andrew Prifer built a liquid-glass scene where markup, CSS, and interaction stay real while the shell bends light around them. Most liquid glass on the web is visual trickery. This one asks what happens when actual DOM nodes participate in GPU composition. Chrome with WebGPU and the canvas-draw-element flag for full HTML-in-canvas. Experimental today, but it stretches what browser UI can look like.

What's interesting

  • Controls stay real HTML inside the glass
  • The shell bends light around live markup
  • Forkable repo, not a preview you can only screenshot

Use in your project

  1. Scope to hero-only or full panel before you fork.
  2. Chrome + WebGPU for the DOM-in-glass path. Plan a static fallback.
  3. Keep forms and controls as real HTML inside the scene.

Prompt your agent

From AI UX Playground: https://aiuxplayground.com/inspirations/liquid-dom-showcase
Liquid DOM Showcase by Andrew Prifer

Andrew Prifer built a liquid-glass scene where markup, CSS, and interaction stay real while the shell bends light around them. Most liquid glass on the web is visual trickery. This one asks what happens when actual DOM nodes participate in GPU composition. Chrome with WebGPU and the canvas-draw-element flag for full HTML-in-canvas. Experimental today, but it stretches what browser UI can look like.

Adapt for our [screen: e.g. settings panel]. Stack: React + Tailwind.
Keep real HTML controls inside the effect.
Plan a simplified fallback for Safari or browsers without WebGPU.

Tags

WebGPUCanvasDOMGlassExperimentReact