tsParticles Rainbow Palette

tsParticles palette for colored smoke amber.

Sample

Colors

Quick checklist

1. Install @tsparticles/engine (or use the CDN bundle below)
2. Load a base package (for example @tsparticles/basic) and call loadRainbowPalette before tsParticles.load(...)
3. Apply the palette plus a minimal particles configuration in your options

A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

How to use it

CDN / Vanilla JS / jQuery

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-rainbow@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
Copy

Usage

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

(async engine => {
  await loadBasic(engine);
  await loadRainbowPalette(engine);

  const options = {
    particles: {
      number: { value: 200 },
      shape: { type: "circle" },
      size: { value: { min: 10, max: 15 } },
      move: {
        enable: true,
        speed: 2,
      },
    },
    palette: "rainbow",
  };

  await engine.load({
    id: "tsparticles",
    options,
  });
})(tsParticles);
Copy

Customization

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

Frameworks with a tsParticles component library

Checkout the documentation in the component library repository and call the loadRainbowPalette function.

Related docs

• Presets and palettes catalog: https://github.com/tsparticles/palettes
• Main docs: https://particles.js.org/docs/