tsparticles
tsParticles Fireworks Preset
tsParticles preset for fireworks effect.
Sample
How to use it
CDN / Vanilla JS / jQuery
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-fireworks@3/tsparticles.preset.fireworks.bundle.min.js"></script>Usage
Once the scripts are loaded you can set up tsParticles like this:
(async () => {
await loadFireworksPreset(tsParticles);
await tsParticles.load({
id: "tsparticles",
options: {
preset: "fireworks",
},
});
})();Customization
Important ⚠️
You can override all the options defining the properties like in any standard tsParticles installation.
tsParticles.load({
id: "tsparticles",
options: {
particles: {
shape: {
type: "square", // starting from v2, this require the square shape script
},
},
preset: "fireworks",
},
});Like in the sample above, the circles will be replaced by squares.
Frameworks with a tsParticles component library
Checkout the documentation in the component library repository and call the loadFireworksPreset function instead of loadFull, loadSlim or similar functions.
The options shown above are valid for all the component libraries.
flowchart TD
subgraph pl [Plugins]
ple[Emitters]
pls[Sounds]
end
bb[tsParticles Basic] --> pl
subgraph s [Shapes]
sl[Line]
end
bb --> s
subgraph u [Updaters]
ud[Destroy]
ul[Life]
ur[Rotate]
ust[Stroke Color]
end
bb --> u
subgraph pr [Presets]
prfw[Fireworks]
end
bb & ple & pls & sl & ud & ul & ur & ust --> prfw