yiliansource/party-js

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

Quickstart  ·  Documentation  ·  Playground  ·  Migrating from v2

---

party.js allows you to add various particle effects to your website, such as confetti or sparkles. With just a few lines of code, clicking a button can produce a rain of confetti, rewarding your users with visual feedback to a successful action. Effects have plenty of randomization options, so no two button presses are alike.

If the built-in effects are not enough, the library exposes everything you need from the underlying particle engine to build your own effects!

Installation

Using your favorite package manager:

npm install party-js

Alternatively you can use a script tag, which exposes everything on a global party object:

<script src="https://cdn.jsdelivr.net/npm/party-js@3/bundle/party.min.js"></script>

Usage

import { confetti } from "party-js";

const button = document.querySelector("#my-button");
button.addEventListener("click", () => {
    confetti(button);
});

That's it! If you want to customize the visuals, every effect takes an options object, and most options accept either a fixed value or a sampler:

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

confetti(button, {
    count: range(40, 60),
    spread: 70,
    colors: ["#FF5A5F", "#FFB400", "#00A699", "#7B61FF"],
});

Effects start playing once you call them and clean up themselves once they are done. If you need further control over their lifecycle, just keep the handler:

const effect = confetti(button);
effect.stop(); // or .pause(), or .resume()

Built-in effects

Effect	Description
confetti	Paper-like confetti that bursts in an upwards cone.
sparkles	Golden sparkles that burst outwards and glint.

Still not customizable enough? createEffect allows you to configure the emitter, particle setup and behaviors directly (it's what the built-in effects are built on). The playgrounds let you try shapes and effects live in the browser.

Contributing

Bug reports, ideas and pull requests are welcome! See CONTRIBUTING.md for how to set up the repository, how to work with it and the contribution guidelines.

License

MIT © Ian Hornik