shadertown

Particle backgrounds, a hundred thousand at a time

A particles background is the oldest trick on the web and still the most effective: points of light, a wind to carry them, and a pointer they answer to. The only question is how many, and who does the arithmetic.

Where the count runs out

The canvas libraries — particles.js and the ones that followed it — step every particle in JavaScript and draw it with a canvas call. That is fine into the low thousands, and it is why those backgrounds are sparse: a few hundred dots joined by lines. Past that the main thread is the budget, and the page it is decorating is competing for the same thread.

A compute pass instead

These run the simulation in a WebGPU compute shader and draw the result as instanced points, so the particle count is a GPU number rather than a JavaScript one — a hundred thousand embers riding a turbulent wind, and the main thread stays free for the page. The pointer is another uniform, so pushing the field around costs nothing extra.

Not all of them are dots

The same machinery draws a sand sea crawling downwind, a dark pool of iron filings pulled into spikes under the pointer, a whirlpool seen from its rim, and a plate that sings and sorts its own particles into the pattern of the note. What varies is the field being sampled, not the pipeline.

Push a hundred thousand embers around

Open the shader and drag the pointer through it. Count, wind and colour are all on sliders, free in the browser.