Particle Lab: 11 Interactive Particle Systems on One Canvas
Supreme Dream
Most particle effects on the web are one trick on a loop. We wanted the opposite: one engine that can be a spiral galaxy, a flock of birds, a gravity well under your cursor, or your logo, and morph between them while you watch.
Particle Lab is chapter 12 of the GiveMePrompts Lab, live on the studio site. It is studio R&D, not client work.
The brief
Answer one question properly: what else is a particle system for? The chapter had to run in any modern browser with no install, react to a mouse or a thumb, and stay honest about its numbers. Every figure printed on the page is measured live or read from a constant in the code.
The chapter as a visitor sees it: the galaxy running behind the title, the system dock along the bottom and the live controls on the right
The idea
One canvas, one sprite, eleven integrators. Flow, Attract, Pack, Bloom, Lattice, Galaxy, Flock, Vortex, Strange, Wordmark and N-body all share the same pool of 26,000 particles and the same draw call. Switching systems does not reload anything: the particles travel from one shape to the next.
All 11 systems, captured live from the chapter: each tile is the same 26,000 particles under a different rule
Your hand is part of the piece. Move to push, click for a shockwave, hold to open a gravity well that drags the field into orbit around the cursor.
Holding the pointer on the Attract system: a gravity well pulls the purple field into a bright core
How it is built
The chapter is a single HTML file running WebGL with a fixed-step simulation, so the same seed and the same number of steps give the same picture every time. We tested that directly: all 11 systems produced a bit-identical particle state and an identical canvas image in two separate browser sessions. A functional suite of 51 real clicks and key presses passes 51 of 51.
The Strange system: a Thomas attractor traced by particles, the camera orbiting as a function of time
It also behaves well on real devices. A frame-time governor lowers the particle count and render scale when frames run long, a hidden tab stops the loop, reduced-motion settings start it paused, and the microphone is only ever requested after a visitor presses the button for it. Visitors can save a PNG or record a 5 second WebM straight from the page.
The Wordmark system: the same particles settle into a lockup, then scatter on a click
The Vortex system in its Crown variant: dye-striped tracer particles carried by the flow
What a client gets
A hero moment that belongs to your brand: your mark built from particles, a launch page that reacts to the visitor, or a background system for a product site. It ships as plain web code, it scales itself down on a slower phone, and it degrades gracefully when it has to.
Work with us
If you want a site people play with before they read it, tell us what it is for.
Try it live: Particle Lab on givemeprompts.com. It runs on a phone too.
More work: givemeprompts.com/work
Like this project
Posted Oct 4, 2026
A browser chapter where 26,000 particles become a galaxy, a flock, a strange attractor or a wordmark. Your cursor steers it. Studio R&D.
