Draggable Liquid Glass Effect with JavaScript and SVG Filters

liquid-glass.js is a tiny JavaScript library that creates a draggable, SVG filter-based liquid glass effect over your webpage. Inspired by Apple’s new Liquid Glass design concept.

Features:

• Zero Dependencies: Pure vanilla JavaScript implementation
• SVG Filter-Based: Uses displacement mapping for hardware-accelerated rendering
• Draggable Interface: Interactive glass lens with mouse control
• Viewport Constraints: Automatic boundary detection to prevent off-screen positioning
• Real-time Rendering: Live shader updates based on mouse position
• Customizable Dimensions: Configurable width and height parameters
• Automatic Cleanup: Built-in destroy methods for memory management
• Cross-browser Compatible: Works with modern browsers supporting SVG filters

See it in action:

How to use it:

Download and include the main script liquid-glass.js. This will automatically create a draggable glass effect centered on the page.

<script src="liquid-glass.js"></script>

How It Works

This library’s technique is a combination of three web technologies: a visible DOM element, a hidden SVG filter, and a hidden canvas.

The visible part is a div with its position set to fixed. The key CSS property on this div is backdrop-filter. Instead of using a standard filter like blur(), it points to a custom SVG filter by its ID: backdrop-filter: url(#some_unique_id).

The script then generates an <svg> element and injects it into the DOM. Inside this SVG is a <filter> definition that contains an feDisplacementMap primitive. This filter takes the content behind the div (SourceGraphic) and displaces its pixels based on the color data of a second image input.

This is where the canvas comes in. The second input for feDisplacementMap is an <feImage> element, which references a hidden <canvas>. The updateShader function in the JavaScript code programmatically draws onto this canvas. It iterates through every pixel, running a fragment function to determine how much that pixel should be displaced on the X and Y axes. The resulting displacement values are encoded into the Red (for X) and Green (for Y) channels of the canvas image data. This image, which is essentially a map of distortion vectors, is what feDisplacementMap uses to create the final effect.

The smooth, lens-like distortion comes from a Signed Distance Function (roundedRectSDF) inside the default fragment shader. SDFs are a way to represent a shape by calculating the shortest distance from any given point to the surface of that shape. This math produces the clean, continuous curve of the distortion.

FAQs

Q. Can I customize the shape and size of the glass?
A. Yes. You can change the width and height parameters when initializing the Shader. To change the shape of the distortion itself, you would need to modify the math inside the fragment function, specifically the parameters passed to the roundedRectSDF function.

Q. Can I customize the distortion shape?
A. Yes, by providing a custom fragment function in the Shader constructor. The function receives UV coordinates and should return texture coordinates for the displacement. You’ll need to understand signed distance functions and UV mapping to create custom shapes effectively.

Q. Can I apply this effect to specific page elements instead of the full viewport?
A. The current implementation applies the filter to content behind the glass position. To limit it to specific elements, you would need to modify the backdrop-filter target or implement element-specific clipping masks in the SVG filter definition.