Recently, I worked on experiments implementing the well-known liquid glass effects on the web. Most of the implementations right now use a similar idea: clone the DOM content behind a glass element, distort that cloned layer, add blur, tint, highlights, and chromatic offsets, then place the result back under the glass surface.
But it breaks down when the thing behind the glass is a real canvas. Because a DOM clone can copy HTML, text, images, layout, and backgrounds. But it cannot naturally copy the actual pixels generated inside a WebGL canvas. A canvas is not a static DOM subtree. It is a framebuffer that changes every frame.
To make liquid-glass work on canvas, I would either need to capture the canvas every frame, which can become expensive and easy to desync, or move the glass refraction into the canvas/WebGL pipeline itself.
I needed a better WebGL demonstration
To test and demonstrate canvas-native liquid glass properly, I needed a background that was worth refracting. I wanted something alive: something with motion, attractive and visually pleasing.
Around that time, I saw a beautiful interactive water ripple demonstration on X by Konmari. The visual language was simple but very attractive: soft water motion, cursor-driven ripples, floating elements, and slightly poetic atmosphere.
I borrowed the core idea and built my own version:
Water Ripples
The result is an interactive WebGL water scene with realistic ripple physics, floating yellow plumeria flowers, sunlight glints, and a liquid-glass settings panel that refracts the live canvas underneath it.
The transparent and luminous visual effect is hard to describe in a few words, so I would suggest trying the demo directly.
The core idea
The demo is built around two parts: the water ripple scene, and the liquid-glass panel that refracts that scene.
The water uses a simple height-field ripple simulation. Pointer movement adds disturbances to a grid, the grid spreads those waves outward, and a WebGL shader turns the height changes into distortion and light. It is not a full fluid simulation, but for this kind of visual effect, a height map plus refraction and sunlight details is enough.
The flowers are rendered on a 2D canvas above the water. They are partly decoration, but they also help reveal the effect. When the glass bends something recognizable, like a flower, the refraction becomes much easier to read.
For the liquid glass part, the important detail is that the panel samples pixels instead of cloning DOM. The WebGL water canvas and the 2D flower canvas are first composited into one hidden source canvas. Then the glass shader samples that source and offsets the UVs inside the panel area.
In practice, the render flow is:
render WebGL water
render 2D flowers
composite both into one source canvas
sample that canvas in the glass shader
Inside the panel, the shader estimates a soft edge normal and uses it to bend the source texture. The center stays calmer, while the edges distort the scene more strongly. A little tint, highlight, and chromatic split make it feel thicker than a normal blurred card.
The goal is not physical accuracy, but to make the panel feel like a material sitting above a living canvas scene.
This is not the end
This demo is only an experiment for liquid glass inside canvas. It works because the scene is already pixels, so the shader can sample and bend them directly. A complete liquid-glass solution for the web is much harder, because real pages include DOM, text, images, video, scrolling, transforms, and many different rendering paths.
Many people are exploring this direction, and maybe we will eventually get a mature solution. But performance will always matter. This demo is not optimized as a production implementation; it is just a small exploration, and I will keep watching where this area goes.
