party.js

Out-of-the-box confetti and sparkles — and the particle engine behind them.

npm install party-js

Quick to start

One call is all it takes

Give party.js an element and let the confetti burst out of it! Every option has a sensible default, so your first call fits on a single line.

import { confetti } from "party-js";

confetti(button);

import { confetti, range } from "party-js";

confetti(button, {
    count: range(60, 90),
    spread: 100,
    startVelocity: range(1200, 2000),
});

Live Demo

Effects

Each built-in effect is one function with typed options. When none of them fits, build your own from the same parts.

Paper-like confetti that bursts in an upwards cone.

Golden sparkles that burst outwards and glint.

createEffect({
  origin: { x, y },
  schedule: { /* ... */ },
  particleInit: { /* ... */ },
  behaviors: [/* ... */],
});

The built-in effects are made with createEffect(). So is yours: pick an emitter, samplers and behaviors.

Why party.js

Samplers vary any value, behaviors change how particles move, and custom shapes draw whatever a canvas can.

Nothing else to install and nothing to keep up to date. It runs on the canvas your browser already has.

Written in TypeScript. Every option is typed and documented, right where you write your code.

Effects skip when a visitor's system asks for less motion. You decide per effect whether it should play anyway.

Playgrounds

Tune every option with a live preview, then copy the code it generates.

Count, angle, speed, colors and shapes, with a live burst on every change.

See a particle shape up close and at real size before you use it in an effect.

v2v3

v3 is a rewrite with a new API. The migration guide will help you to upgrade your code to the new version.

Install it, then follow the quickstart to fire your first effect!

npm install party-js