celebrate-js 🎉

A lightweight, zero-dependency JavaScript library to add beautiful celebration effects to your website — confetti, fireworks, balloons, emoji rain, and more.

Perfect for success screens, onboarding, achievements, or fun UI moments.

Features

• Multiple celebration effects
• Customizable colors 🎨
• Lightweight and fast
• Simple API
• Tree-shakable
• TypeScript support
• Optional reduced-motion support

Installation

npm install celebrate-js

or

yarn add celebrate-js

Usage

import { celebrate } from "celebrate-js";

// Default effect (confetti)
celebrate();

// Specific effects
celebrate.confetti();
celebrate.fireworks({ count: 6 });
celebrate.balloons({ particleCount: 20 });

Custom Colors

You can customize colors for supported effects by passing a colors array.

Example:

celebrate.confetti({
  colors: ["#ff1744", "#2979ff", "#00e676"],
});

Supported effects:

• confetti
• balloons
• popper
• fireworks
• stars

Color behavior:

• Confetti → per particle
• Balloons → per balloon
• Fireworks → per burst
• Popper → per particle

Available Effects

• confetti
• balloons
• popper
• fireworks
• bubbles
• emojis
• stars
• snowfall

API

celebrate(options?)

celebrate({
  effect: "confetti",
  duration: 5000,
  particleCount: 100,
  colors: ["#ff0", "#0ff"],
});

Effect Shortcuts

celebrate.confetti(options);
celebrate.balloons(options);
celebrate.popper(options);
celebrate.fireworks(options);
celebrate.bubbles(options);
celebrate.emojis(options);
celebrate.stars(options);
celebrate.snowfall(options);

Options

type CelebrateOptions = {
  effect?: "confetti" | "balloons" | "popper" | "fireworks" | "bubbles" | "emojis" | "stars" | "snowfall";
  duration?: number;
  particleCount?: number;

  /**
   * Colors used by supported effects (confetti, balloons, fireworks, popper, stars)
   */
  colors?: string[];

  respectReducedMotion?: boolean;

  // Fireworks only
  count?: number;
  interval?: number;

  // Emoji rain only
  emojis?: string[];
};

Reduced Motion

If respectReducedMotion is enabled and the user has prefers-reduced-motion set, animations will be skipped.

celebrate({
  respectReducedMotion: true
});

Demo

A demo is available in the repository under the demo/ directory.

License

MIT © Akshay Yadav