A one-minute demoscene production, beat-synced to a tune synthesized from code.
Seven classic effects play as one production cut to a 120 BPM tune: a warp starfield with a typed-in title, a palette-cycled rotozoomer, a voxel logo that lands letter by letter on the kick, a sine plasma under a sine scroller, a lookup-table tunnel, nested glenz solids over a checker floor, and an end scroller with a water reflection. One song clock drives it all. An arrangement table says which voices play in each bar, the synthesizer schedules oscillator and noise voices from it a tenth of a second ahead, and the visuals read the same table, so flashes, zoom kicks and screen shakes land on the actual drum hits even with the sound off. Every frame is drawn into a 200-line frame buffer (the per-pixel effects write a Uint32Array), then scaled up with smoothing off and dressed with scanlines.
Try it. Click for sound; once it plays, the visuals follow the audio clock. Drag along the timeline at the bottom to scrub, press 1 to 7 or the arrow keys to jump between parts, L to loop the current part, F to flash and S to shake on the next beat, C to toggle scanlines, Space to pause and M to mute.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tiny demoscene intro with JavaScript, the HTML canvas element and the Web Audio API. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window. Draw every frame into a small 320x200 offscreen canvas, then scale it up to the window with imageSmoothingEnabled set to false, so it has chunky retro pixels.
- Write a song clock: a single number of seconds since the start, at 120 BPM, so one beat is 0.5 seconds and one bar is 2 seconds. Split one minute into four parts of a few bars each.
- Write two classic effects that switch on the bar line: a 3D starfield (stars with x, y, z, divided by z to project) and a sine plasma (sum three or four sine waves per pixel into a palette index, write the pixels with ImageData).
- Make the visuals react to the beat: use an exponential decay of the time since the last beat to pulse brightness or zoom, and flash white at every part change.
Once that works, make it a production:
- Add a rotozoomer (rotate and scale texture coordinates per pixel) and a sine scroller that draws a line of text one pixel column at a time with a sine offset. Draw the font yourself from 5x7 bitmaps.
- Add music. Only create the AudioContext after a click, and show a small "Click for sound" hint. Schedule kick, snare, hi-hat and bass notes slightly ahead of time from a step pattern, using oscillators with gain envelopes and a noise buffer.
- Make the visuals and the music read the same pattern table, so the flashes hit on the drums, and once sound is on, derive the song clock from the audio clock.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a texture-mapped tunnel, a scrubbable timeline, or a vertical end scroller with copper bars.
