Relay light lab

What you are looking at

The card is ordinary HTML: a black box, two borders and the word “relay”. Sitting exactly on top of it is a transparent <canvas>. Each frame, a small program on the graphics card, called a shader, decides the colour and see-through amount of every pixel of that canvas, about 60 times per second.

Wherever the shader says “fully see-through”, you see the card underneath. Wherever it says “a bit of light”, it paints warm off-white on top. That is the whole trick: there is no video and no image, just one formula run on every pixel.

Each pixel only asks two questions

1. How far am I from the moving front? The front is the bright vertical edge. Close to it, a pixel lights up a lot; far away, not at all.
2. How long ago did the front pass over me? If it passed half a second ago, the pixel is still warm and smoky. If it passed five seconds ago, it has cooled to black.

Every layer below is built from one of those two numbers. The first question gives the edge. The second gives the trail.

trySet playback speed to 0.1 and press “Send a message”. Watch the edge cross slowly, and watch the strip under the bench light up behind it.

The six layers

The shader computes each layer as a brightness number, adds them together, and that sum becomes how opaque the pixel is.

trySwitch off everything except “line”. Then add “glow”, then “wobble”, one at a time. You will see the effect assemble itself.

The memory strip, the one clever part

A shader has no memory. Every frame it starts from zero, so on its own it cannot know that the front crossed this spot a second ago. The trail needs that knowledge.

The fix lives in JavaScript. It keeps a row of 256 numbers, one for each thin vertical slice of the card. Think of 256 kitchen timers in a row. Whenever the front sweeps over a slice, that slice's timer is reset to “now”. Each frame, the row is handed to the graphics card as a tiny image, 256 pixels wide and 1 pixel tall, and the shader reads it to learn “how long since the front passed me”.

The strip on the bench above shows those 256 timers live: bright amber means “just crossed”, fading to black as it cools.

tryPause, then hover the strip. Each column tells you how many seconds ago a message crossed it. Then move the “cooling speed” slider and watch the trail shorten or stretch without anything moving.

The Siri colours

The original paints every layer in one warm off-white. The Siri version keeps the exact same shapes and only changes the colour each layer is painted in.

1. A colour loop. Five colours in a ring: blue, violet, pink, orange, cyan, then back to blue. Give the loop any number and it returns a colour, blended smoothly between its two neighbours.
2. Which colour each pixel gets. The number fed into the loop depends on the pixel's height on the card, plus the clock, plus a little smoke. So colour bands stack up the edge and slowly flow along it. The “colour bands” slider sets how many bands fit top to bottom.
3. Each layer sits one step over. The glow takes the next colour along from the edge, and the trail the one after that, and it keeps shifting as it cools. That offset is what makes it read as an iridescent wave and not one painted stripe.
4. A white-hot core. Where the line is at full brightness, its colour is pushed toward white, the way Siri's glow is near-white at the centre.

trySwitch off everything except “line” and “glow”, then drag “colour bands” from low to high.

Noise, the ingredient that makes it look natural

Without randomness, the edge would be a perfect line and the trail a flat grey. The shader uses fbm noise (“fractal Brownian motion”). It is a recipe for smoke-like patterns: take a blurry random pattern, add a smaller, fainter copy on top, then a smaller one again, four times. Big soft shapes with finer detail inside them, like clouds. Sliding that pattern over time makes it drift, which is what you see as shimmer.

What the JavaScript does each frame

1. Advance the scene clock by the time since the last frame, times the playback speed.
2. Move each message's front a little further across, using an ease-in-out curve so it speeds up then slows down.
3. Stamp “now” into every memory-strip slot the front has just crossed.
4. Upload the strip to the graphics card, pass in the front positions and the slider values.
5. Draw one triangle that covers the whole canvas. That triggers the shader once for every pixel.

Up to four messages can be on the card at once, which is why rapid clicks on “Send a message” give you several fronts chasing each other.

How this compares to the original

• Same technique: the six layers, the 256-slot memory strip, the wobble and the off-white colour.
• Rewritten here: the code and names are mine, and every number is wired to a slider so you can explore it.
• Not copied: on the real site the fronts are driven by the same animation clock as the dots travelling along the wires (Framer Motion), so the light and the diagram stay in sync. Here a simple timer drives it, which is enough to learn from.
• Their efficiency trick: the site stops drawing about 6 seconds after the last message, so it costs nothing while idle. This lab draws continuously so the controls always respond.

The shader, annotated

This is the exact code running on this page. Greyed lines are comments.