tsParticles palette for colored smoke amber.
#FFFFFF
|
#AAFFAA
|
#00FF44
|
#00CC33
|
#009922
|
#006611
|
#003308
|
|||
|
Background #000300
|
||||
Blend mode: screen | Fill: true
|
||||
@tsparticles/engine (or use the CDN bundle below)@tsparticles/basic) and call loadMatrixRainPalette 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-matrixRain@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 loadMatrixRainPalette(engine);
const options = {
particles: {
number: { value: 200 },
shape: { type: "circle" },
size: { value: { min: 10, max: 15 } },
move: {
enable: true,
speed: 2,
},
},
palette: "matrixRain",
};
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 loadMatrixRainPalette function.