tsParticles Confetti Explosions Preset

tsParticles preset for draggable confetti explosions, using the confetti palette.

Sample

Quick checklist

1. Install @tsparticles/engine (or use the CDN bundle below)
2. Call loadConfettiExplosionsPreset(engine) before tsParticles.load(...)
3. Set preset: "confettiExplosions" in options

How to use it

CDN / Vanilla JS / jQuery

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-confetti-explosions@4/tsparticles.preset.confettiExplosions.bundle.min.js"></script>
Copy

Usage

Once the scripts are loaded you can set up tsParticles like this:

(async engine => {
  await loadConfettiExplosionsPreset(engine);

  await engine.load({
    options: {
      preset: "confettiExplosions", // or "confetti-explosions"
    },
  });
})(tsParticles);
Copy

Customization

tsParticles.load({
  id: "tsparticles",
  options: {
    particles: {
      color: {
        value: ["#0000ff", "#00ff00"],
      },
    },
    preset: "confettiExplosions", // or "confetti-explosions"
  },
});
Copy

Like in the sample above, the white and red colors will be replaced by blue and lime.

Frameworks with a tsParticles component library

Checkout the documentation in the component library repository and call the loadConfettiExplosionsPreset function instead of loadFull, loadSlim or similar functions.

The options shown above are valid for all the component libraries.

Dependencies

This preset loads and combines the following packages:

If you want to customize one specific behavior, start from the related package README above.

Common pitfalls

• Calling tsParticles.load(...) before loadConfettiExplosionsPreset(engine)
• Overriding emitters with an empty array and expecting default explosion behavior
• Setting life.count to 1 but forgetting that life.duration controls how long the explosion lasts

Related docs

• All presets catalog: https://github.com/tsparticles/presets
• Emitter options: https://particles.js.org/docs/classes/Plugins_Emitters_Options_Classes_Emitter.Emitter.html
• Main tsParticles docs: https://particles.js.org/docs/

flowchart TD
  subgraph b [Bundles]
    bb[tsParticles Basic]
  end

  subgraph pl [Plugins]
    ple[Emitters]
    pli[Interactivity]
    plm[Motion]
  end

  bb --> pl

  subgraph s [Shapes]
    ssq[Square]
  end

  bb --> s

  subgraph u [Updaters]
    ul[Life]
    urol[Roll]
    urot[Rotate]
    uti[Tilt]
    uw[Wobble]
  end

  bb --> u

  subgraph pr [Presets]
    prcc[Confetti Explosions]
  end

  bb & ple & pli & plm & ssq & ul & urol & urot & uti & uw --> prcc
Copy