tsParticles Confetti Falling Preset

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

Sample

Quick checklist

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

How to use it

CDN / Vanilla JS / jQuery

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

Usage

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

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

  await engine.load({
    options: {
      preset: "confettiFalling", // or "confetti-falling"
    },
  });
})(tsParticles);

Customization

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

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 loadConfettiFallingPreset 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:

| Package | Role in this preset | README | | ------------------------------- | --------------------------------------------- | ------------------------------------------------------------- | | @tsparticles/basic | Base runtime bundle used by the preset | https://www.npmjs.com/package/@tsparticles/basic | | @tsparticles/engine | tsParticles engine and preset registration | https://www.npmjs.com/package/@tsparticles/engine | | @tsparticles/palette-confetti | Default confetti color palette | https://www.npmjs.com/package/@tsparticles/palette-confetti | | @tsparticles/plugin-motion | Handles reduced-motion accessibility settings | https://www.npmjs.com/package/@tsparticles/plugin-motion | | @tsparticles/shape-square | Adds square particle shape | https://www.npmjs.com/package/@tsparticles/shape-square | | @tsparticles/updater-roll | Adds rolling spin motion | https://www.npmjs.com/package/@tsparticles/updater-roll | | @tsparticles/updater-rotate | Adds rotation animation | https://www.npmjs.com/package/@tsparticles/updater-rotate | | @tsparticles/updater-tilt | Adds tilt animation | https://www.npmjs.com/package/@tsparticles/updater-tilt | | @tsparticles/updater-wobble | Adds side-to-side wobble motion | https://www.npmjs.com/package/@tsparticles/updater-wobble |

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

Common pitfalls

• Calling tsParticles.load(...) before loadConfettiFallingPreset(engine)
• The effect uses a transparent background; set background.color if you need a solid backdrop
• Overriding move.direction without checking that the particles still fall as expected

Related docs

• All presets catalog: https://github.com/tsparticles/presets
• Color formats: https://github.com/tsparticles/tsparticles/blob/main/markdown/Color.md
• 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 Falling]
  end

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