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.
https://liquid-glass-studio.vercel.app/
For users in mainland China, please visit:
https://liquid-glass.iyinchao.cn/
 |
 |
 |
 |
 |
✨ 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
- 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
- Node.js (latest LTS version recommended)
- pnpm package manager
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build- More Glare Controls (hardness / color / size etc.)
- Custom Background
- Self-illumination
- HDR illumination
- Glass Presets
- Control parameter import / export
- Render Step view to show intermediate results
- UI Content inside of shape
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