tsParticles palette for colored smoke amber.
#1A1000
|
#3A2200
|
#6B3D00
|
#A65A00
|
#D98A1A
|
#FFC266
|
#090500
|
#0B0F08
|
#FFF8E1
|
#FFE0B2
|
#FFCC80
|
#E53935
|
#C62828
|
#AD2A2F
|
#6D4C41
|
|
Background #1A1000
|
||||
Blend mode: source-over | Fill: true
|
||||
@tsparticles/engine (or use the CDN bundle below)@tsparticles/basic) and call loadAppleRedPalette 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-apple-red@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 loadAppleRedPalette(engine);
const options = {
particles: {
number: { value: 200 },
shape: { type: "circle" },
size: { value: { min: 10, max: 15 } },
move: {
enable: true,
speed: 2,
},
},
palette: "apple-red",
};
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 loadAppleRedPalette function.