3D / WebGL

WebGPU ASCII Hero

by Vanguardia · motionprompts.dev

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) dec

Type: Web motion
Framework: Vanilla JS
Trigger: pointer
Duration: 0.09–0.6s

Suggest a promptSave with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: webgpu-raf
Easing: custom
Complexity: 4/5
Pinned: no
Reduced motion: handled
Libraries: vgpu

rAF loop with exponentially damped pointer follow driving a WGSL uniform; two-pass raymarch to a grid-sized target, then GPU glyph quantisation

Community prompts

The creator hasn't shared a prompt.

Recreated it? Share the prompt that got you closest — with a link to your render.

Community prompts

The creator hasn't shared a prompt.

More like this

A pixel wizard casting spells

Rainbow Road Pixel Animation

One-File Generative Visual Demo

Pixel-art rabbit archer sprite animation loop

Vibe-Coded Pixel Wizard Game

Realistic 3D Taj Mahal Model

Fresh recipes, every week.