DOCSEARCHbyAlgolia
Submit Docs

Liquid Glass

repository·main·Indexed 20 days ago

https://github.com/archisvaze/liquid-glass

An interactive web demo showcasing an iOS 26-style liquid glass effect with physics-based refraction and specular highlights. It features two rendering engines: an SVG version using feDisplacementMap for Chromium browsers, and a WebGL version powered by Three.js for broad cross-browser compatibility.

Tokens
473
Snippets
0
Records
4
Agent score
22%

What's inside liquid-glass

  1. Overview of Liquid Glass

    main
    Liquid Glass is an interactive demonstration of an iOS 26-style Liquid Glass effect designed for the web. It provides highly realistic glass refraction, specular highlights, and shadow effects that can be customized in real-time. The project offers two distinct rendering engines to balance performance and browser compatibility.

  2. Compare the SVG and WebGL rendering engines

    main

    Liquid Glass provides two ways to render the effect. Choose the engine based on your browser requirements and desired level of physical accuracy:

    SVG Version (index.html)

    • Mechanism: Uses SVG feDisplacementMap combined with backdrop-filter.
    • Refraction: Physics-based displacement map with a configurable Index of Refraction (IOR).
    • Browser Support: Limited to Chrome / Chromium based browsers.
    • Controls: Glass shape, refraction, appearance, inner/outer shadow, and tint.

    WebGL Version (webgl.html)

    • Mechanism: Uses a full-screen Three.js shader.
    • Refraction: Real-time GLSL ray refraction.
    • Browser Support: Works on all modern browsers (including Firefox and Safari).
    • Controls: Glass shape, refraction, blur, specular, tint, and shadow.

  3. How to use Liquid Glass

    main

    To explore the effect locally:

    1. Clone the repository.
    2. Open index.html (for the SVG version) or webgl.html (for the WebGL version) in your browser.
    3. Use the control panel on the left to adjust parameters like thickness, bezel width, and IOR.
    4. Select a background from the thumbnail grid or provide a custom image URL.
    5. Click and drag the glass pane to observe how refraction changes against different background elements.

    Alternatively, you can visit the Live Demo.