@tsparticles/preset-firefly
v3.2.0
Published
tsParticles firefly preset
Downloads
361
Keywords
Readme
tsParticles Firefly Preset
tsParticles preset for a mouse trail made with small fading particles like little fireflies.
Sample
How to use it
CDN / Vanilla JS / jQuery
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-firefly@3/tsparticles.preset.firefly.bundle.min.js"></script>
Usage
Once the scripts are loaded you can set up tsParticles
like this:
(async () => {
await loadFireflyPreset(tsParticles);
await tsParticles.load({
id: "tsparticles",
options: {
preset: "firefly",
},
});
})();
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: "firefly",
},
});
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 loadFireflyPreset
function instead of loadFull
, loadSlim
or similar functions.
The options shown above are valid for all the component libraries.
flowchart TD
subgraph i [Interactions]
subgraph ie [Externals]
iet[Trail]
end
end
bb[tsParticles Basic] --> i
subgraph pr [Presets]
prff[Firefly]
end
bb & iet --> prff