tsParticles preset creating a squares effect with falling particles.
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-squares@3/tsparticles.preset.squares.bundle.min.js"></script>
Once the scripts are loaded you can set up tsParticles
like this:
(async () => {
await loadSquaresPreset(tsParticles);
await tsParticles.load({
id: "tsparticles",
options: {
preset: "squares",
},
});
})();
Important tsParticles
installation.
tsParticles.load({
id: "tsparticles",
options: {
particles: {
shape: {
type: "circle", // starting from v2, this require the circle shape script
},
},
preset: "squares",
},
});
Like in the sample above, the circles will be replaced by squares.
Checkout the documentation in the component library repository and call the loadSquaresPreset
function instead
of loadFull
, loadSlim
or similar functions.
The options shown above are valid for all the component libraries.
flowchart TD
e[tsParticles Engine]
subgraph pl [Plugins]
ple[Emitters]
end
e --> pl
subgraph s [Shapes]
ssq[Square]
end
e --> s
subgraph u [Updaters]
urot[Rotate]
usi[Size]
usc[Stroke Color]
end
e --> u
subgraph pr [Presets]
prsn[Squares]
end
e & ple & ssq & urot & usi & usc --> prsn