Liquid glass
A pane of glass to drag over the page, bending what's behind it at its rim the way thick rounded glass does, with a drop beside it that melts in when they meet.
Drag the glass or the drop, or press anywhere to send the glass there. With the keyboard, the arrow keys move whichever has focus.
// The glass is a rounded box, melted into a round drop where they meet.
const glassAt = (p) => smin(pane(p), dropAt(p), MELT);
// Which way is out, from how the distance changes a pixel away.
const normal = normalize(vec2(glassAt(p.add(vec2(1, 0))).sub(d), glassAt(p.add(vec2(0, 1))).sub(d)));
// The rim bends the view outward, hardest at the edge and nothing on the flat face,
// which only magnifies a little.
const s = clamp(depth.div(bevel), 0, 1);
const bend = refraction.mul(bevel).mul(0.9).mul(pow(float(1).sub(s), 2));
const through = middle.add(p.sub(middle).div(magnification));
// Each colour bends a little differently, so they part at the rim.
const red = look(through.add(normal.mul(bend.mul(spread)))).r;
const green = look(through.add(normal.mul(bend))).g;
const blue = look(through.add(normal.mul(bend.div(spread)))).b;Where it bends
A sheet of glass with flat faces moves what's behind it hardly at all; what makes glass look thick is its edge. So the pane is flat across its face and rounds over at the rim, and that's where the bending happens. A TSL fragment shader works out, for every pixel, how far inside the glass it is. Across the flat face it shows what's straight behind, magnified a few per cent. Near the rim it looks a little further out instead, by an amount that's largest right at the edge and falls away over the bevel, so the backdrop just outside the pane is drawn in and squeezed around its edge, as a thick lens does.
The three colours are looked up a little apart, red bent furthest and blue least, so they part into a thin fringe at the rim where the bending is strongest, and nowhere else. Frost averages the view over a small disc of nine samples. Light from the upper left catches the rim, a little shade sits opposite, and a soft shadow falls just below the pane.
Liquid
The pane and the drop are one shape: their distances are combined with a smooth minimum, so as the drop nears the pane a bridge of glass swells between them, and the rim, the bending and the light all follow the new outline. The pane follows the pointer on a spring that wobbles a little as it arrives, and stretches along the way it moves while it's moving. Changing its shape springs its size, so a pill melts into a disc.
The backdrops are drawn into a 2D canvas the size of the stage, the type in the page's own faces once they've loaded, and uploaded as a texture. Nothing moves unless you move it: the loop runs while the glass is still settling and stops when it has, and under reduced motion it goes straight where it's put.