4.3.1 • Published yesterday

@tsparticles/palette-rainbow

Licence

MIT

Version

4.3.1

Deps

Size

204 kB

Vulns

Weekly

Stars

8.9K

Summary Dependency Versions

tsParticles Rainbow Palette

tsParticles palette for colored smoke amber.

Sample

Colors

`#FF0000`	`#FF1500`	`#FF2B00`	`#FF4000`	`#FF5500`
`#FF6A00`	`#FF8000`	`#FF9500`	`#FFAA00`	`#FFBF00`
`#FFD500`	`#FFEA00`	`#FFFF00`	`#EAFF00`	`#D4FF00`
`#BFFF00`	`#AAFF00`	`#95FF00`	`#80FF00`	`#6AFF00`
`#55FF00`	`#40FF00`	`#2BFF00`	`#15FF00`	`#00FF00`
`#00FF15`	`#00FF2A`	`#00FF40`	`#00FF55`	`#00FF6A`
`#00FF80`	`#00FF95`	`#00FFAA`	`#00FFBF`	`#00FFD5`
`#00FFEA`	`#00FFFF`	`#00EAFF`	`#00D5FF`	`#00BFFF`
`#00AAFF`	`#0095FF`	`#0080FF`	`#006AFF`	`#0055FF`
`#0040FF`	`#002AFF`	`#0015FF`	`#0000FF`	`#1500FF`
`#2B00FF`	`#4000FF`	`#5500FF`	`#6A00FF`	`#8000FF`
`#9500FF`	`#AA00FF`	`#BF00FF`	`#D400FF`	`#EA00FF`
`#FF00FF`	`#FF00EA`	`#FF00D4`	`#FF00BF`	`#FF00AA`
`#FF0095`	`#FF0080`	`#FF006A`	`#FF0055`	`#FF0040`
`#FF002B`	`#FF0015`
Background `#000000`
Blend mode: `screen` \| Fill: `true`

Quick checklist

Install @tsparticles/engine (or use the CDN bundle below)
Load a base package (for example @tsparticles/basic) and call loadRainbowPalette before tsParticles.load(...)
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>

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);