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.
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 this into Claude, Cursor, or Copilot. Change one thing that matters to you.
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.