GitHub repositoryComponents, Motion
Liquid Glass JS
Apple's Liquid Glass look on the web: real-time refraction, blur and masking in WebGL.
What it is
Liquid Glass JS recreates the refractive glass effect from Apple's Liquid Glass design language for the browser. It renders buttons and containers in rounded, circular and pill shapes with real-time refraction, nested glass layers and adjustable tint. Plain JavaScript with WebGL; MIT licensed, with a live demo and full API reference in the README.
Why it’s here
Listed because it's the most faithful web recreation of the effect, not because you should cover a page in it. Glass on glass on glass is exactly the kind of thing this site's name warns about. One control, one moment, on a busy background where refraction has something to bend.
Best for
- a single glass control or card
- Apple-style visual references
- studying refraction shaders
Can my agent use this?
Agent excellent agent friendlinessYes. The README is the documentation and includes quick-start code and an API reference. Ask your agent to use it for one element and to provide a non-WebGL fallback.
Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods
- GitHub
- Docs
- Copy/paste
Related resources
Liquid Logo 
Liquid Logo
Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
ToolFreegood agent friendlinessStaff pickShaderGradient 
ShaderGradient
Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.
PackageFreeOpen sourceexcellent agent friendlinessDesign Spells 
Design Spells
A collection of the tiny, delightful details that make products feel loved.
GalleryFreelimited agent friendlinessAceternity UI 
Aceternity UI
Showy, copy-paste React components for landing pages that need a moment.
Component librarygood agent friendliness