particles

Simulate particles from spawners and behaviors, then draw them on a canvas driven by the GSAP timeline.

import {
  createParticles,
  createGravity,
  bind,
} from "hyperbits/helpers";

const simulator = createParticles({
  fps: 30,
  spawners: [{ id: "fountain", rate: 4, burst: 12, lifespan: 45 }],
  behaviors: [{ id: "gravity", handler: createGravity({ y: 0.15 }) }],
});

simulator.bind(timeline, canvas, { color: "#f8fafc", size: 6 });
// equivalent: bind(timeline, canvas, simulator, { color: "#f8fafc", size: 6 });

Simulation

createParticles({ spawners, behaviors?, fps? }) returns { fps, stateAt, bind }. stateAt(time) is seek-safe. simulateParticles({ frame, fps, spawners, behaviors }) is the frame-level engine behind it.

Spawner fields: id, rate, burst, startFrame (lookback, as if the spawner had already been running), delayFrame (wait this many frames before spawning), max, position, area, velocity, lifespan, lifespanVariance.

Behaviors

movement integrates acceleration into position. Factories: createGravity, createDrag, createWiggle, createOpacityOverLife, createScaleOverLife.

Canvas

renderParticles(canvas, particles, { color, size, glow, shape, clear }) draws dots or rects. color and size may be constants or (particle) => value. glow paints a radial falloff around each particle; shape: "rect" is for confetti. bind(timeline, canvas, simulator, options) (also simulator.bind(timeline, canvas, options)) redraws on onUpdate using timeline.time().