How to Create Liquid Glass

Liquid glass is a moving glass lens effect built with three parts:

1. A rendered texture for the content
2. A WebGL shader that distorts that texture
3. A small motion system that makes the lens feel alive

The result is a lens that follows the cursor, magnifies what is under it, bends the edges like glass, adds a little blur and chromatic split, and reacts to clicks with ripples.

1. Build the visual content first

Before you can distort anything, you need pixels to distort.
Render your text and background into an offscreen canvas.

const textCanvas = document.createElement("canvas")
const ctx = textCanvas.getContext("2d")

if (ctx) {
  ctx.fillStyle = "#fafafa"
  ctx.fillRect(0, 0, width, height)

  ctx.fillStyle = "#1d1d1f"
  ctx.font = "700 80px system-ui"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"

  ctx.fillText("Liquid", width / 2, height / 2 - 40)
  ctx.fillText("Glass", width / 2, height / 2 + 40)
}