131,072 particles · live on your GPU
A field of light that knows where home is. Move through it and it parts around you. Scroll, and it becomes something else.
Shape 2 · any SVG path
Paste a logo or a product outline into the config and the swarm learns it. A third of the particles trace the edges, so the shape stays sharp even while it breathes.
Try it: sweep the cursor straight through the ring.
Shape 3 · built in
Between shapes, every particle leaves on its own schedule and swings out on a curved road, so a morph reads like a flock turning rather than a fade. This spiral keeps turning while you read.
Try it: press Scatter, then watch them find their way home.
Shape 4 · your call to action
A launch, a sale, a name. Click anywhere on the swarm to send a shockwave through it.
Each word is drawn once on a hidden canvas and each icon is filled from its SVG path. Every lit pixel becomes a possible home, and each of the 131,072 particles picks one. Galaxies and spheres are built from a few lines of geometry.
Every frame, a vertex shader moves all particles at once: a spring pulls each one home, a swirling current keeps it alive, the cursor pushes and spins it, and shockwave rings sweep outward. The results feed straight into the next frame.
Particles add light where they overlap, a small bloom pass spreads it, and the page watches its own frame rate. If a device slows down, it drops resolution first and particles second, and it stops entirely when you look away.
Every number in the control bar is measured live: the particle count really flying, the frames per second really drawn, and the share of particles within a hair of their home, counted on the GPU and read back without stalling a frame.
The page loads as ordinary HTML with a still image first. The particle engine is one small script with no libraries, and it only starts about a second after the page has loaded or when the visitor first scrolls or clicks. It watches its own frame rate and lowers its resolution, then its particle count, if a device struggles. It stops completely when the tab is hidden or the particle sections are scrolled away.
Yes. Phones get 65,536 particles instead of 131,072, and a finger works exactly like the cursor: drag through the swarm to part it, tap to send a shockwave. The page still scrolls normally because the canvas never captures touches.
Yes. One config file lists the shapes in order: a word, any SVG path, a galaxy or a sphere. Change the word, paste the path of your own logo or product outline, and the particles learn the new shapes when the page loads.
If the visitor's device asks for reduced motion, the swarm holds each shape perfectly still with no drifting, jumps between shapes as they scroll instead of flying, and only moves when they press one of the buttons themselves.
Yes. Sites you build with the template can be personal or commercial, for yourself or for clients. The template itself cannot be resold or redistributed as a template.
This browser cannot run WebGL2, so the swarm is shown as a still picture. Open the page in a current browser to play with it.
