Skip to content
Type
js library
Verdict
Niche
Licence
Look only licence, not statednot-statedNot specified
Agent channels
none
Pricing
not stated
Reviewed

← Atlas · Topics: motion, components

Liquid Glass ​

Type
js library
Verdict
Niche
Licence
Look only licence, not statednot-statedNot specified
Agent channels
none
Pricing
not stated
Reviewed

What it is ​

Liquid Glass is a tool for visually manipulating DOM elements in real time, creating refractive and dynamic visual transformations. It works in all modern browsers and focuses on "liquid glass" effects that distort rendered content.

When to open it ​

Open this site when you need complex visual effects that distort or refract rendered content. It's useful for landing pages with striking effects, portfolios with advanced interactions, or components that require dynamic visual transformations.

Most useful ​

  • Direct manipulation of rendered DOM to create visual effects
  • Cross-browser compatibility guaranteed
  • Refraction effects that respond to user interaction

Using it with agents ​

The code is likely available on GitHub for AI agents to read and adapt effects. Agent prompts can request modifications to distortion intensity, speed, or type of deformation.

Watch out for ​

  • Public documentation is limited; you may need to review the repository to fully understand the API
  • Refraction effects can impact performance if used excessively
  • Requires JavaScript; doesn't work without it

Reusable ideas ​

  • Hero backgrounds that respond to mouse movement
  • Hover effects on images that distort like glass
  • Section transitions with visual deformation
  • Entrance effects for content elements
  • Overlays with blurred glass effect and dynamic transformation

Kinetics, CSS Text Effects, Anime.js