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
| Category | 3d-webgl |
|---|---|
| Tech | vgpu |
| Complexity | section |
| Performance cost | medium |
| Mobile-safe | yes |
Rebuild it with AI
To reproduce this animation in your own project, copy the prompt below into Claude Code, Cursor or any AI coding agent. The prompt is validated — it describes the exact structure, timing and easing, so the agent rebuilds the effect faithfully and you can then adapt colors, copy and layout to your design.
Prompt coming soon.