WebGPU ASCII Hero

What it does

Full-bleed hero whose subject is a raymarched twisted torus quantised to monospaced characters entirely on the GPU — the first WebGPU component in the catalogue. Two passes and no mesh: an SDF scene shader raymarches the solid with tetrahedral normals and a Fresnel rim, then an ASCII pass reads it and picks one of ten 5x6 glyphs bit-packed into a u32 each, so there is no font, no atlas and no asset to load. The scene is drawn at the resolution of the character grid — one texel per glyph — which is why a 1600x1000 hero only raymarches ~13.000 pixels, under 1% of the canvas, and holds 60fps on integrated graphics. The key light hangs off the pointer with an exponentially damped follow, a click sends a rim pulse that decays on its own, and the whole ramp from sparse dots to dense asterisks IS the shading: at ten levels the tonal range is the modelling. A static poster is the LCP and never leaves the DOM, a real capability gate (it requests the adapter, it does not sniff navigator.gpu) decides whether the canvas is ever created, and an IntersectionObserver stops the loop the moment the hero leaves the screen.

How it's built

webgpu wgsl ascii raymarching sdf shader hero poster monospace vgpu

Rebuild it with AI

This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.

Prompt coming soon.