glass.js

Liquid glass for canvas in one file. Lensing on the rim, blur and zoom in the body, a bevel, a hotspot and a chromatic fringe. No WebGL, no shaders, works in Safari. Drag the pieces above. This is the effect from the Snooze lock screen.

Use it

<script src="glass.js"></script>
const g = createGlass(ctx);
g.setBackdrop(wallpaperCanvas);        // what sits behind the glass
g.glass(g.rect(80, 80, 420, 140, 44), { tint: 0.12 });
g.glass(g.circle(300, 500, 90), { dark: 0.35 });
g.glass(g.text('7:00', 600, 700, '800 300px Inter'));

Options

thick    rim lens width          mag      body zoom (1.06)
tint     white wash (0.1)        edgeMag  rim zoom (1.32)
caustic  light thrown below      spec     hotspot on/off
rim      rim line width          dark     smoked glass 0..1

The prompt

Paste this into Claude to get the same effect in your own stack.

MIT. Made by @f0rgent.