Swarm
A liquid swarm of particles flows after the pointer, curls into eddies and pours around buttons.
- element
- canvas
- pointer
- particles
- cursor
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Swarm example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<axi0-swarm cover></axi0-swarm>import { Swarm } from "./motion/react/Swarm";
<Swarm /><script setup lang="ts">
import Swarm from "./motion/vue/Swarm.vue";
</script>
<template>
<Swarm />
</template>const fx = document.createElement("axi0-swarm");
document.querySelector("#hero").append(fx);The wrappers: Swarm.tsx (React, TypeScript) and Swarm.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
count | 1 | Particle density |
flow | 1 | How much the swarm curls |
avoid | button, a, [data-swarm-avoid] | What the swarm pours around (a CSS selector, searched in the parent) |
colors | auto | Colors, comma separated (empty: the palette for the page's theme) |
background | auto | Background color (empty: the theme's) |
speed | 1 | How fast it moves |
theme | auto | Light or dark palette (auto: from the page behind it) |
cover | false | Fill the nearest positioned parent, behind its content |
Accessibility
Decorative: the canvas is aria-hidden and takes no focus; with cover it ignores the pointer, so the content above it stays clickable and readable. The pointer only adds to the motion; touch and keyboard users see the same scene. Drawn on a 2D canvas (device pixel ratio capped at 2); it starts when it comes within 300 px of the screen, the frame loop stops off screen and in hidden tabs, and reduced motion draws the resting state once, with no movement.
Size
swarm.js is 1.3 KB gzip, with backgrounds-kit.js 3.4 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.