The 4KB Demoscene — A Real-Time Demo in 2569 Bytes
Raymarched 3D tunnel, reflective sphere, 4-voice procedural music, 60-second timed sequence with title cards. Total file size — including HTML, CSS, JS — is 2569 bytes.
What this is
One HTML file. 2569 bytes total — well under the 4KB target. Inside: a Canvas2D raymarched 3D scene (a twisting procedural tunnel with a bobbing sphere), a 4-voice Web Audio synth playing a sequenced bassline + lead at 140ms per step, a 60-second timed sequence with title cards reading "PROMPT.4K → a vibe-coded → 4KB demo → for learnwithkody," a scene transition at the 30-second mark when a second sphere appears.
Why this is mind-blowing
The 4KB demoscene tradition is decades old — small teams of coders squeezing real-time graphics and music into ~4 kilobytes. Doing it from one prompt is new. The model wrote raymarching, procedural synthesis, and a timed sequencer from scratch and fit them in 2569 bytes. The constraint is the entire art form.
Prompt
Build a "demoscene" intro in the spirit of 1990s 4KB Amiga demos.
TARGET FILE SIZE: under 4096 bytes total. Pure JavaScript + Canvas +
Web Audio. No external libraries. Must contain a real-time raymarched/
raytraced 3D scene, real-time procedural music synthesized via Web
Audio, a 60-second timed sequence with at least one scene transition,
and a title card. The 4KB constraint is sacred. Compress aggressively,
share variables, abuse Math.sin(). Make every byte count.Paste into your favorite AI and adapt it to your context.
What I learned shipping it
- Single-letter variables and aggressive aliasing of Math.sin/cos/PI buys you hundreds of bytes. The model knows demoscene tricks from training data.
- An 8-step note array `[0,3,7,10,3,7,10,15]` in a minor pentatonic scale is half a kilobyte of music. Choose your data structures for byte cost, not for clarity.
- Hitting 2569 bytes with 4096 budget means you have headroom for one more effect. Plan your byte budget like you're optimizing assembly.