# 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.

```ts
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)
}