2
Liquid glass for web
I’ve been working on a project, a React component library built around realistic glassmorphism and modern optical effects.
The idea started from wanting glass UI to feel like an actual material rather than just a blurred background with some transparency. So I built the library around things like light, refraction, depth, reflections, and subtle surface details while keeping the components practical enough to use in real projects.
It comes with two rendering approaches:
1. CSS-based rendering for the everyday use case, using hardware-accelerated backdrop-filter, saturation, noise, and specular lighting to create the glass effect without relying on WebGL.
2. WebGL rendering through GlassStage for more advanced effects, including real-time light refraction and optical dispersion.
The library also includes a set of ready-to-use components:
- GlassSurface for creating the base glass material.
- Buttons with primary, secondary, and ghost variants.
- Cards with a flexible slot-based structure.
- Inputs with a recessed glass appearance.
- Switches and Tabs with smooth interactions and transitions.
- Navbar with a subtle scroll-based thickening effect.
- Modal with built-in focus trapping for accessibility.
- Tooltip that automatically adapts to the available viewport space.
Everything can be customized through CSS design tokens, so the material and components can be adapted to fit different projects without having to rebuild the whole system.
It’s also built as a proper npm package, with ESM and CommonJS builds, TypeScript definitions, and a separate documentation site for exploring the components.
Getting started
npm install @jole_0/liquidglass-web
or
pnpm add @jole_0/liquidglass-web
or
yarn add @jole_0/liquidglass-web
The project is open source and MIT licensed.
Official Page: https://liquid-glass-for-web-omega.vercel.app/
Repo: https://github.com/Jole-19/liquid-glass-for-web ⭐️
Add a comment
0/2000