ybouane

ybouane / liquidglass

Public

A liquid glass effect library for the web. Apply realistic glass refraction, blur, chromatic aberration, and lighting effects to any HTML element using WebGL shaders.

liquid-glass.ybouane.com chromatic-aberration effect filter glass glassmorphism
81
2
100% credibility
Found Apr 16, 2026 at 81 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

LiquidGlass is a web library that applies realistic glass-like visual effects such as refraction, blur, chromatic aberration, and dynamic lighting to HTML elements.

How It Works

1
👀 Discover the magic

You stumble upon a stunning live demo of realistic liquid glass panels that bend, blur, and shine like real glass on a webpage.

2
📋 Bring it to your page

You copy one simple line into your webpage to add the glass effect tool.

3
🪟 Pick your glass panels

You choose a main container on your page and mark the boxes that should turn into glassy panels.

4
✨ Turn on the glass

With a short instruction, you wake up the effect, and your panels instantly transform into beautiful, refractive glass.

5
🎨 Customize the look

You tweak settings like blur strength, shine, edge glow, or make panels draggable and button-like for fun interactions.

6
🔄 Handle moving parts

For counters or videos behind the glass, you flag them so they update smoothly without glitches.

🌟 Enjoy stunning results

Your webpage now features lifelike liquid glass elements that refract, light up, and feel incredibly real and interactive.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 81 to 81 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is liquidglass?

LiquidGlass is a TypeScript library that applies realistic liquid glass effects—refraction, blur, chromatic aberration, and dynamic lighting—to any HTML element via WebGL shaders. It captures underlying DOM content, including images and videos, and renders it distorted through a glassy lens, solving the hassle of hand-coding complex shader effects for glassmorphism UIs. Install via npm or CDN, then init on a root container with glass elements configured via data attributes.

Why is it gaining traction?

It stands out with per-element JSON configs for tweaking blur, refraction, edge highlights, and even floating drag or button interactions, plus smart handling of dynamic content like counters or videos via data-dynamic. The live demo showcases aberration and lighting that feel native, unlike basic CSS backdrops or mobile ports like github liquid glass swift or liquid glass android. Devs dig the optimization: skips renders when nothing changes, keeping FPS high.

Who should use this?

Frontend devs crafting interactive dashboards, liquid glass wallpapers, or app overlays inspired by liquid glass iphone designs. Ideal for UI kits needing draggable glass panels over charts/videos, or anyone applying liquid glass design to WhatsApp-style chats without shader expertise. Skip if your stack avoids WebGL.

Verdict

Worth a spin for glass effects—solid docs, demo, and API make it dev-friendly despite 81 stars and 1.0% credibility score signaling early maturity. Test in your layout; limitations like direct-child glass elements mean it's not production-ready for complex nesting yet.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.