# Liquid DOM

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

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.

Website: https://github.com/AndrewPrifer/liquid-dom

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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](https://x.com/AndrewPrifer/status/2056923983581446529): 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](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/liquid-dom

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.