🔮 Liquid Glass Studio

English | 简体中文 | O‘zbekcha

The Ultimate Web Recreation of Apple’s Liquid Glass UI, powered by WebGL2 & WebGPU. Includes most Liquid Glass features with fine-grained controls for detailed customization.

Online Demo

https://liquid-glass-studio.vercel.app/

For users in mainland China, please visit:
https://liquid-glass.iyinchao.cn/

ScreenShots

Features

✨ Apple Liquid Glass Effects:

• Refraction
• Dispersion
• Fresnel reflection
• Superellipse shapes
• Blob effect (shape merging)
• Glare with customizable angle
• Gaussian blur masking
• Anti-aliasing

⚙️ Interactive Controls:

• Comprehensive real-time parameter adjustments via an intuitive UI

🖼 Background Options:

• Support for both images and videos as dynamic backgrounds

🎞 Animation Support:

• Spring-based shape animations with configurable behavior

Technical Highlights

• WebGL2 / WebGPU dual-backend rendering for high-performance graphics
• Multipass rendering for high-quality & performant Gaussian blur
• Using SDF Defined shapes and smooth merge function
• Custom shader implementations for realistic glass effects
• Custom Leva UI components for intuitive parameter controls

Getting Started

Prerequisites

• Node.js (latest LTS version recommended)
• pnpm package manager

Installation

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

TODO

• More Glare Controls (hardness / color / size etc.)
• Custom Background
• Render with WebGPU
• Editor mode
• Glass Text Rendering
• Glass Presets
• Self-illumination
• HDR illumination
• Control parameter import / export
• Render Step view to show intermediate results
• UI Content inside of shape

Credits

Thanks to the following resources and inspirations:

• SDF functions and smooth merge function by Inigo Quilez
• Sample photo (Buildings) by Adrian Newell on Unsplash
• Sample video (Fish / Traffic) by Tom Fisk from Pexels
• Sample video (Flower) by Pixabay from Pexels
• Sample Photo by Apple and Tim Cook

License

MIT License