xiry.

Development · GitHub repo

Liquid DOM

WebGPU library rendering Apple-style liquid glass materials for the web.

From the Xiry library · Updated 10 October 2026

Visit github.com ↗

Liquid DOM is a TypeScript monorepo that brings Apple-style liquid glass visual effects to the web using WebGPU. It combines a custom layout engine with a real-time shader pipeline to render dynamic refraction, dispersion, specular highlights, and shape morphing. It provides both low-level imperative scene graphs and declarative bindings for React, Three.js, and React Three Fiber.

What it's for

  • Render realistic frosted and liquid glass UI elements over web applications
  • Composite interactive refractive glass interfaces over Three.js 3D scenes
  • Animate shape-morphing glass surfaces and menus using React components
  • Calculate SwiftUI-style measurement and placement across canvas and DOM layers

Features

  • WebGPU-powered rendering engine delivering real-time refraction, reflection, and dispersion
  • High-level React 19 bindings with declarative layout components
  • Full integration adapters for Three.js WebGPU renderer and React Three Fiber
  • Renderer-agnostic SwiftUI-style layout engine (@liquid-dom/layout)
  • Adaptive tinting and specular highlights that preserve backdrop contrast
  • Dynamic shape morphing and animatable index of refraction properties
  • Support for live DOM texturing via experimental HTML-in-Canvas APIs

Pricing

Open source. Free and open source under the MIT license.

Details

Type
GitHub repo
Category
Development
Topic
UI Components
Open source
Yes
Platforms
Web, Code library
For
Creative frontend developers, 3D web designers, and React developers building high-fidelity UI.
Tags
webgpu, react, threejs, shader, glassmorphism, creative coding

Why it was saved

  • @AndrewPrifer, 20 May 2026: Brings faithful, performant Liquid Glass effects (real refraction, specular highlights, dispersion, shape morphing) to web and React apps, including three.js/r3f integration and Android support.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated