tsParticles palette for colored smoke amber.
#ff0000
|
#ff8800
|
#ffff00
|
|
Background #000000
|
||
Blend mode: screen | Fill: true
|
||
@tsparticles/engine (or use the CDN bundle below)@tsparticles/basic) and call loadSeedPalette before tsParticles.load(...)A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.
<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-seed@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>
Once the scripts are loaded you can set up tsParticles like this:
(async engine => {
await loadBasic(engine);
await loadSeedPalette(engine);
const options = {
particles: {
number: { value: 200 },
shape: { type: "circle" },
size: { value: { min: 10, max: 15 } },
move: {
enable: true,
speed: 2,
},
},
palette: "seed",
};
await engine.load({
id: "tsparticles",
options,
});
})(tsParticles);
Important ⚠️
You can override all the options defining the properties like in any standard tsParticles installation.
Checkout the documentation in the component library repository and call the loadSeedPalette function.