🔮 Liquid Glass Studio

The Ultimate Web Recreation of Apple’s Liquid Glass UI, powered by WebGL2 and shaders. 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

• WebGL-based 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

TODO

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