This is not a picture of type. It is live HTML — a real <div> with a real
typeface, laid out by the browser — pushed through a GPU shader as a texture and poured back
out molten. Select it. A screen reader still reads it.
Everything above the fold is one element and one texElementImage2D() call.
The Crucible
A specimen card goes into the melt: heading, definition list, a working button, a slider. The heat displacement is computed per-pixel from the card's own rendered pixels, so the distortion knows where the letters are. Press and hold to stoke it. Every control underneath stays clickable while it liquefies — the DOM never left.
The Lens
Two columns of real editorial copy, with a slab of ground glass resting on them. Drag the lens. It magnifies, bends and splits the text into its colour channels at the rim — and because the type underneath is still text, you can select a sentence straight through the glass.
The Ribbon
The broadsheet is a flat HTML document. The surface it is printed on is not. This is the WebGPU path — the element goes to a texture via copyElementImageToTexture(), then onto a ribbon of geometry that twists, catches a light and flexes as you scroll past it.
Quench
Cool it too fast and it fails. The panel is diced into four thousand instanced quads, each one carrying its own square of genuinely-rendered HTML, and thrown. Click to shatter — the shards remember their text the whole way down, then reassemble into a panel you can still read.
The Furnace Panel
No claims, just readings. This panel reports what your browser actually exposed when the page loaded, live frame cost, the worker-thread casting path, and — if your Chrome has the model — copy generated on-device with the temperature knob wired to the sampling-params trial.
Trial surface detected
Frame cost
Worker casting · captureElementImage
ElementImage. The main
thread never rasterises it — the worker does, then hands the position back by
postMessage.