./jerome{m}

~/Labs/Intro Lab.md · lab · 5 min · updated

Intro Lab

2026 · Rust · WebAssembly · WebGL2 · Web Audio · How this site works

In the demoscene, a demo can be any size, but an intro has to fit a limit: 64 kilobytes, 4, sometimes 256 bytes, picture and music together. The Intro Lab makes intros whose limit is a link. A fragment shader draws each frame, a scroller runs across it, the Chiptune Lab's synth plays the music and the Dither Lab's engine brings every frame down to a handful of colours. Pick an intro, press ♪ for sound or party for the full screen, then open the code and make it yours. Copy link shares all of it, the shader as you wrote it included.

intro · liveClick the picture to pause, ♪ for sound, party for the full screen. Open the code to change the shader, pick a song or paste a Chiptune Lab link, type over the scroller, and take it away as a video, a GIF or a still. Copy link shares the whole intro.open ↗

The music drives the picture

What makes a demo a demo is sync: the picture moves with the music, not beside it. Here the shader is handed the music as numbers, every frame:

  • iBeat, beats since the start: fract(iBeat) goes from 0 to 1 across each beat, so anything can pulse in time.
  • iLevel, how loud the lead, the harmony, the bass and the drums are right now, each from 0 to 1.
  • iHit, the kick, the snare, the hats and the crash: 1 the moment they're struck, falling back to 0 within a third of a second. Good for flashes.
  • iCount, how many of each have been struck so far, each one easing in. Good for motion.

That last one came from a mistake. The first street flew forward on the kick by adding iHit to its depth, and every kick snapped it ahead and pulled it back, which reads as a cut, not a push. Adding iCount instead moves it by one step per kick, eased in, never back: the street surges on the beat. A pulse is for light, a count is for travel.

All of it comes from the same place as the sound. When you pick a song, the Chiptune Lab's synth renders it ahead of time, twice through, and the lab keeps the second time round, so the first bar hears the last bar's tails as it would going round. From that one buffer come the sound, how loud each channel is sixty times a second, and from the score, when every note and drum is struck. While there's sound, the clock is the audio's own, less the time the speakers take, so what you see is what you hear, and a recording is in sync by construction. Time doesn't wrap with the song, either: the beat keeps counting through every loop, so nothing jumps back when the music starts over.

Seven intros

  • neon, down a street between towers at night, in the rain, to a keygen tune: each pixel casts a ray, and draws the tower or the wet road it meets first, windows, shop fronts, signs and reflections. A crash tears it into strips.
  • sunset, the synthwave postcard: a sun cut by sliding slots, mountains, and a grid floor coming at you a line a beat.
  • aurora, curtains of light over a lake that holds them upside down; the lead lights them, the bass ripples the water.
  • copper, raster bars, the trick the Amiga's copper chip was made for, swinging over a starfield and a checkerboard floor.
  • cube, a glenz vector: a cube with see-through faces, eight corners, twelve edges, over stars flying at you.
  • sea, Seascape by Alexander Alekseev, aka TDM, ported and set to the blackout tune: the sea is a height map of choppy waves folded out of sines, and each ray closes in on it from a point above the water and one below, a cousin of ray marching. Each kick carries you over the swell, and the snare throws the sun's glitter about. Like the original, the port is under CC BY-NC-SA 3.0.
  • plasma, four sines and sixteen colours, the oldest effect there is, and the shortest place to start.

Two labs' engines, no new one

There is no new Rust here. The lab is a page that borrows the two engines the other labs already ship: chiptune.wasm for the sound and dither.wasm for the picture, the same modules, loaded from where those labs keep them, with the Chiptune Lab's songs shared through one script. Each frame, WebGL2 runs the shader at the intro's own resolution, 320 by 180 to begin with; the scroller's letters, cut from JetBrains Mono and outlined so they read over anything, are drawn on top; then the Rust dither engine turns the frame into palette colours, in a few milliseconds, and paints it at a whole multiple of its pixels where the screen allows.

The palettes are the machines': a Commodore 64's sixteen colours, a PICO-8's, CGA's four, a Game Boy's greens, and a few of my own, polar and sunset among them, and one in the site's own colours.

The link holds what you changed from the intro you started from: an untouched intro is just its name, and an edited one is the difference, deflated. Under the export button the lab also counts what a demoparty would: the whole intro, shader source, song, palette and scroller, deflated, and which size class it fits. The intros here come to a couple of kilobytes, so they'd fit in a 4k, whether or not a 4k compo would let a browser do the work.

Download records the song once through as it plays, with its sound, as an MP4 where the browser can make one and a WebM where it can't. A GIF comes out of the Dither Lab's encoder instead, a few seconds from the playhead, without sound; a PNG is the frame on screen.

Back to Labs · write a song in the Chiptune Lab · make some pixels in the Dither Lab · see how this site works.