Ever wondered why Apple’s iOS “liquid glass” effect feels so alive… yet we barely see anything similar on the web?
That subtle light distortion, the sense of depth, the almost physical interaction of layers — it always felt like something reserved for native UI systems.
So I decided to explore what it would take to bring that experience to the web.
The result: @avenra/liquid-glass ✨
An open-source library that brings iOS-style liquid glass effects to modern web applications.
👉 npm package: https://www.npmjs.com/package/@avenra/liquid-glass
📖 Documentation: https://docs.avenra.online/docs/liquid-glass/getting-started
🧩 React / shadcn components: https://docs.avenra.online/docs/liquid-glass/components
🧠 What is Liquid Glass?
At its core, Liquid Glass is a visual effect system that simulates light refraction through a surface — like real glass bending light.
Instead of a static blur, it introduces:
Dynamic distortion
Light-based displacement
Physics-inspired interaction
Smooth animated transitions
The goal is simple:
Make UI elements feel like physical materials instead of flat layers.
⚙️ How it works (high level)
Under the hood, Liquid Glass uses a combination of:
SVG displacement maps
CSS filters
Spring-based animation curves
Lightweight runtime orchestration
This allows us to simulate:
Refraction
Depth-based distortion
Motion-aware visual response
All while keeping performance in mind and avoiding heavy runtime dependencies.
🧩 React / Shadcn Integration
One of the biggest goals was developer experience.
So instead of only providing low-level primitives, the library also ships with ready-to-use React components inspired by shadcn/ui patterns.
You can install and start using it like any modern UI kit — no complex setup required.
📖 https://docs.avenra.online/docs/liquid-glass/components
🌐 Browser Support
Currently, Liquid Glass is optimized for Chromium-based browsers.
Why?
Because they provide the best consistency for:
SVG filter rendering
Performance of layered compositing
Animation smoothness
For non-Chromium browsers, a graceful fallback is provided so the UI remains usable and visually stable — just without advanced refraction effects.
🚀 Why I built this
Modern UI design has become incredibly polished — but also a bit too flat in some places.
I wanted to explore:
What if UI elements behaved like real materials?
What if blur wasn’t just visual, but interactive?
What if web interfaces felt slightly more physical again?
This project is my experiment in that direction.
🙏 Credits
This project was heavily inspired by the foundational ideas explored here:
https://kube.io/blog/liquid-glass-css-svg/
Huge respect to the original exploration that made this direction possible.
🔓 Open Source
This project is fully open-source.
That means:
Contributions are welcome
Ideas are welcome
Bugs are welcome 😄
Experiments are absolutely encouraged
If you build something with it, I’d genuinely love to see it.
🔮 What’s next?
This is just the beginning. Future improvements may include:
More interaction-driven distortion models
Better cross-browser fallback strategies
Expanded component library
Performance optimizations for large-scale UIs
💬 Final thought
The web is slowly moving beyond flat design into something more material-aware — interfaces that don’t just look good, but behave like physical systems.
Liquid Glass is one small step in that direction.
Top comments (0)