Particles
Balls fall, bounce and collide in a scene computed in WebAssembly.
- element
- webassembly
- physics
- balls
- playful
- since 0.1
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
Particles 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-particles cover count="70" seed="7"></axi0-particles>import { Particles } from "./motion/react/Particles";
<Particles /><script setup lang="ts">
import Particles from "./motion/vue/Particles.vue";
</script>
<template>
<Particles />
</template>const fx = document.createElement("axi0-particles");
document.querySelector("#hero").append(fx);The wrappers: Particles.tsx (React, TypeScript) and Particles.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
count | 70 | how many balls |
seed | 7 | the same seed always gives the same scene |
gravity | 1 | 1 is about 1,400 pixels per second squared |
bounce | 0.55 | how much speed a bounce keeps |
size | 1 | ball size factor (radius 6 to 16 pixels at 1) |
colors | #f6a04d,#ff6b8b,#8a7dff,#3ad0c1 | comma separated |
cover | false | fill the nearest positioned parent, behind its content |
Accessibility
The simulation steps only while the element is on screen and the tab visible, in fixed 1/120 s steps. Reduced motion: the scene settles at once (900 steps in WebAssembly) and is drawn once, still. A page with a strict script-src needs 'wasm-unsafe-eval' for this effect only.
Size
particles.js is 1.3 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.