Effects / Canvas 2D
Particle swarm
Hundreds of glowing points that swirl as a flock around a shape or the pointer.
Prompt to build it
Build a particle swarm forming a swirling ring in violet. Animate ~600 particles on canvas 2D that steer toward a rotating ring with noise and damping, drawn with globalCompositeOperation 'lighter'. Make it responsive, cap devicePixelRatio at 2, pause when off-screen, and show a still frame when prefers-reduced-motion is set. No external libraries.
Tested code
One self-contained HTML file with no libraries: the same code that runs above. Your AI gets it from Flow's get_effect tool.
Show the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Particle swarm | Flow effect</title>
<!--
Flow effect: Particle swarm (https://flow.donta.io/effects/particle-swarm)
Self-contained: no libraries. Copy the .fx-stage element, the CSS and the
script into your project and size .fx-stage however you like.
-->
<style>
:root { --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --body: ui-sans-serif, system-ui, sans-serif; }
html, body { margin: 0; min-height: 100%; background: #0e0e10; display: grid; place-items: center; }
.fx-stage { width: min(100vw, 960px); }
/* Stage that every effect fills. Container units (cqw/cqmin) size the art. */
.fx-stage {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 16px;
container-type: size;
background: #111;
isolation: isolate;
}
.fx-fill {
position: absolute;
inset: 0;
}
.fx-fallback {
position: absolute;
inset: 0;
}
.fx-center {
display: grid;
place-items: center;
}
@media (prefers-reduced-motion: reduce) {
.fx-stage *, .fx-stage *::before, .fx-stage *::after { animation-play-state: paused !important; }
}
</style>
</head>
<body>
<div class="fx-stage"><canvas class="fx-fill" aria-hidden="true" style="width:100%;height:100%;display:block"></canvas></div>
<script>
function flowLoop(el, frame, opts) {
opts = opts || {};
if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
for (let i = 0; i < (opts.stillFrames || 1); i++) frame(2 + i / 60);
return function () {};
}
let raf = 0, onScreen = true, last = 0;
const start = performance.now(), gap = opts.fps ? 1000 / opts.fps : 0;
const io = new IntersectionObserver(function (e) { onScreen = e[0].isIntersecting; });
io.observe(el);
function tick(now) {
raf = requestAnimationFrame(tick);
if (!onScreen || document.hidden || (gap && now - last < gap)) return;
last = now;
frame((now - start) / 1000);
}
raf = requestAnimationFrame(tick);
return function () { cancelAnimationFrame(raf); io.disconnect(); };
}
function flowCanvas(canvas, o) {
const ctx = canvas.getContext("2d");
const dpr = Math.min(devicePixelRatio || 1, 2);
function size() {
const w = o.fixed ? o.fixed : Math.max(1, Math.round(canvas.clientWidth * dpr));
const h = o.fixed ? o.fixed : Math.max(1, Math.round(canvas.clientHeight * dpr));
if (canvas.width !== w || canvas.height !== h) {
canvas.width = w; canvas.height = h;
if (o.init) o.init(ctx, w, h);
}
}
if (o.fixed) { canvas.style.imageRendering = "pixelated"; canvas.style.objectFit = "cover"; }
size();
new ResizeObserver(size).observe(canvas);
return flowLoop(canvas, function (t) { o.draw(ctx, t, canvas.width, canvas.height); }, o);
}
/** Canvas 2D effect: swarm. Self-contained; no imports. */
let swarm = [];
function initSwarm(_ctx , w , h ) {
const n = w < 500 ? 320 : 600;
swarm = Array.from({ length: n }, (_, i) => ({
x: Math.random() * w,
y: Math.random() * h,
vx: 0,
vy: 0,
a: (i / n) * Math.PI * 2,
}));
}
function drawSwarm(ctx , t , w , h ) {
if (!swarm.length) initSwarm(ctx, w, h);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8, 5, 20, 0.22)";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = "lighter";
const R = Math.min(w, h) * 0.3;
const s = Math.max(1, Math.min(w, h) / 260);
for (const p of swarm) {
const ang = p.a + t * 0.6;
const r = R * (1 + 0.18 * Math.sin(3 * p.a + t * 1.3));
const tx = w / 2 + Math.cos(ang) * r;
const ty = h / 2 + Math.sin(ang) * r;
p.vx = (p.vx + (tx - p.x) * 0.012 + (Math.random() - 0.5) * 0.9) * 0.9;
p.vy = (p.vy + (ty - p.y) * 0.012 + (Math.random() - 0.5) * 0.9) * 0.9;
p.x += p.vx;
p.y += p.vy;
ctx.fillStyle = "rgba(170, 110, 255, 0.55)";
ctx.fillRect(p.x, p.y, 1.6 * s, 1.6 * s);
}
ctx.globalCompositeOperation = "source-over";
}
flowCanvas(document.querySelector(".fx-stage canvas"), { draw: drawSwarm, init: initSwarm, stillFrames: 120 });
</script>
</body>
</html>
How it works
Each particle steers toward a target orbit with a little noise and drag, drawn with additive blending so overlapping points glow.
Guardrails
- Halve the particle count on small screens.
- Respect prefers-reduced-motion: show a still frame instead of the animation.
- Pause when off-screen or when the tab is hidden (IntersectionObserver + visibilitychange).
- Keep text off busy animated areas, or give it a solid backing that passes WCAG contrast.
- One showpiece effect per page. If everything moves, nothing stands out.