Scroll me.

The glass panel in the middle of the screen simulates glass, iOS/macOS Liquid Glass-style. Everything in this column scrolls behind it — and the lens bends the real headings, paragraphs, and color blocks like liquid at its edges.

Real DOM, refracted

molten-glass snapshots the actual page with html2canvas, uploads it as a WebGL texture, and offsets the sample by your scroll position. The center stays clear; the rim melts.

Text bends too

Big type is the easiest way to see the refraction. As these lines pass under the lens, watch the letters stretch and pinch toward the curved edges while staying readable through the middle.

Because scrolling only changes a sample offset — not the snapshot — it stays smooth even on a long page.

Color fields

Gradients make the melt and the specular rim pop. Tweak the sliders on the right to dial the look in.

One more screen

Keep scrolling to feed more content through the lens. If you change the DOM, call glass.recapture() to refresh the snapshot.