Liquid Glass Web Component: a Vanilla JavaScript library that creates realistic glass morphism effects using SVG displacement filters.
Key features:
- Works in any framework (React, Vue, Angular, or vanilla)
- Automatic browser detection with graceful fallback
- Interactive depth changes on click
- Auto-sizing and responsive modes
- Zero dependencies
The component uses SVG displacement maps to distort the backdrop.
It works best in Chromium browsers but degrades cleanly in Firefox and Safari.
Just include two small JavaScript files and use the custom element in your markup.
Top comments (0)