idlesequence-draws0colorMix0hover-

0123456789

Per-LED weight. The dashed line is rest (1.0); hovering boosts one LED to 3 and pushes the rest to 0. draws stops climbing the moment everything settles - there is no idle loop.

Hero animation

Ten LEDs, one fragment shader, two animated numbers. Move the pointer over the ▲ to light one; click to flip the palette and relight from where you clicked.

Scene

Per-LED weight is shown live over the stage. The dashed line is rest (1.0); hovering boosts one LED to 3 and pushes the rest to 0. The draw counter stops the moment everything settles - there is no idle loop.

Colour scheme

Palette

Relight from LED

Guides

Overlays drawn in the shader's own 1200 × 800 space, so they land exactly on what the GPU is doing.

LED centresthe ten lights, in draw orderHover radius120px - the pointer hit testColour triangleone RGB primary per edgeBloom quadsthe entire second passDistortion ramp420px, where grain jitters lookupsVirtual gridthe fixed 1200 × 800 space

Bloom

Ten instanced quads, additively blended. Not a blur - each LED gets one small quad shaded by an editable falloff curve, which is why it costs almost nothing.

EnabledQuad radius3pxWhite strength1RGB strength1

Turn on Bloom quads under Guides to see the actual geometry - the entire second pass is those ten squares.

Noise

A 400 × 400 hash baked once on the GPU at startup. It jitters atlas lookups outside the ▲ and adds a little multiplicative grain, which is what stops the huge soft gradients from banding.

EnabledSample offset±13.5px lookup jitterMultiplicative grain±4% on the graded colourShow the distortion bufferrenders the ramp instead of the scene

Interaction

Hover easing is authored as time-to-arrive, not as a time constant - the curve is tuned to cover 99.8% of the distance in exactly this long.

Brighten850msDim1650ms

Light mode

Light mode is a different render, not a palette swap: the shader emits premultiplied alpha plus a shadow model so the glow reads on a near-white page. Switch the scheme to Light to see these do anything.

White palette

Glow strength1.41Ambient occlusion0.31Radial shadow0.42Shadow outer radius545px

RGB palette

Glow strength1.25Ambient occlusion0.21Radial shadow0.38Shadow outer radius399px

Layout

Pure CSS - a transform on the stage, not a uniform.

Scale120%Vertical offset2.5%

Photographic grade · recompiles

These are baked into the GLSL as constants, not passed as uniforms. Moving one compiles new shader source and rebuilds the renderer, so the intro replays every time. Everything above is a live uniform and does not.

White exposure-1.2EVRGB exposure0.15EVSaturation1.31Black point0.003

Choreography

Sampled from the same pure functions the frame loop calls - no GPU involved. The playhead tracks the live sequence.

0123456789

Light atlas

Three lights were baked. Seven are recovered by symmetry.

All three baked lights at once - the packed atlas as it ships.

945 × 630 lossless WebP · encoded at gamma 2, peaking at 4.25 linear irradiance

Pipeline

1
Grain bakeonce, at startup
An integer hash of gl_FragCoord into a 400 × 400 texture. Never runs again.
2
Main1 draw call / frame
One fullscreen triangle. Reconstructs all ten lights from the atlas in linear HDR, sums them, draws the LED cores, then a single shared tone map.
3
Bloom1 instanced draw / frame
Ten 11px quads, additively blended, each shaded by a cubic-Bezier point-spread function. Touches about 1% of the framebuffer.