The Demoscene card

Make a show using just code! A short film, a music visualizer, anything you’d sit back and watch. Bonus points if the music is made with code too.

What’s the demoscene?

Back in the 80s, groups cracking games would stick a little intro in front of them with their name, some scrolling text and a tune. Those intros kept getting fancier until they became their own thing, and people started competing to make the most impressive show their computer could run.

It’s still going! Parties like Revision (every Easter in Germany) hold competitions every year, and you can watch most of the entries online.

Revision 2025 kicking off. Everyone brings their own computer, and the entries play on the big screen! Photo by OpenCatMap, CC BY 4.0, via Wikimedia Commons.

pouet.net and demozoo.org have an enormous archive. A few to start with:

• Second Reality by Future Crew (1993), the classic PC demo.
• fr-041: debris. by farbrausch (2007), a whole city falling apart in 177 KB.
• Elevated by RGBA and TBC (2009), a flight over mountains in 4 KB. Yes, four kilobytes, music included!

What “just code” means

Everything on screen should be made by your program: shapes, textures, 3D scenes, effects. Using a font for your text is fine, but pre-made images, 3D models and video clips aren’t.

The card asks for an audiovisual show, so it does need sound! Making the music with code is the bonus, so a track made somewhere else is okay. If you didn’t make it yourself, make sure you’re allowed to use it, and credit it.

The easiest thing that counts

A web page with a <canvas> and some JavaScript drawing shapes that move to a song. Line a few changes up with the beat, give it a beginning and an end, and you’ve got a demo!

The ending matters more than you’d think. It’s what turns a looping animation into a show. Plan out a few scenes, even if each one is simple.

Going further

• Shaders. Most modern demos are basically one big shader. The Shader card guide and Shadertoy are a good place to start.
• Fantasy consoles. TIC-80 and PICO-8 have their own little demoscenes, and the limits help you focus. There’s even a whole party for tiny ones, called Lovebyte.
• Size limits. Intros are demos squeezed into 4 KB or 64 KB. Lots of the tricks in the Lightweight guide apply here!
• Native. C or C++ with OpenGL (or raylib) gets you a real executable, like the classics.

Making the music with code

• Strudel (strudel.cc) lets you write music as patterns, live, in your browser.
• The Web Audio API has oscillators and filters built in, so you can build a synth in plain JavaScript.
• Bytebeat is a whole song in one line of maths. Be warned, it’s a rabbit hole!
• 4klang and Sointu are synths made for 4k intros, if you’re going small.

Staying in sync

Drive your animation from the audio’s clock (audioContext.currentTime in the browser) rather than counting frames. Frame rates are different on every machine, and a demo that slowly drifts out of sync on a reviewer’s laptop is a sad thing to watch.

For bigger demos, look up GNU Rocket. It’s a sync tracker the scene uses to keyframe values against the music.

Shipping one

• Demo: a web page is the easiest thing for everyone to watch. Browsers won’t play sound until someone clicks, so add a “click to start” screen! For native demos, link a release with the executable.
• Screenshot: your best frame.
• README: how you made it and which effects you’re proudest of. A video capture in there is nice for anyone who can’t run it.