Void Canvas

The spark field running behind this site’s hero, extracted into something reusable.

What it does

Simulates metallic debris drifting through a void: sparks are born, take velocity from a scroll-driven parallax field, accumulate into hot cores where they overlap, and burst outward on click.

How it’s built

• Flat Float32Array storage — one array per property, indexed by particle. No per-spark objects, so no allocation in the frame loop and nothing for the GC to reclaim.
• Swap-on-death — dead particles are swapped with the last live one and the counter decrements. O(1) removal, no reindexing.
• Pre-blurred sprite — the glow is rendered once to an offscreen canvas at init and blitted per particle. shadowBlur never runs inside the loop.
• lighter compositing — overlapping sprites sum into blown-out cores for free.
• Pixel-derived budget — particle count scales with viewport area and clamps at a ceiling, so a phone and a 4K panel both hold frame budget at equal visual density.

Then throwing most of it away

The engine will do ten thousand. The design shouldn’t, and the first build that hit frame budget proved it — a blizzard, with body copy fighting confetti for every pixel. The shipped field is a fraction of what the loop can carry, dimmed to roughly 40% alpha, because the brief is 90% black and sparks are punctuation, not weather.

The optimisation still mattered. It bought restraint instead of density.

Constraints

Respects prefers-reduced-motion by never starting. Initializes on idle, after first paint, so it costs nothing on the critical path. It also boots on first visibility, because a page opened in a background tab can be starved of idle slices forever.

The same particle engine powers the Driftwork hero spark field — tuned for density, click bursts, and scroll-linked parallax without dropping frames.