[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
# tsParticles Firefly Preset
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
[tsParticles](https://github.com/matteobruni/tsparticles) preset for a mouse trail made with small fading particles like
little fireflies.
[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles")
## Sample
[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)
## How to use it
### CDN / Vanilla JS / jQuery
The first step is installing [tsParticles](https://github.com/matteobruni/tsparticles) following the instructions for
vanilla javascript in the main project [here](https://github.com/matteobruni/tsparticles)
Once installed you need one more script to be included in your page (or you can download that
from [jsDelivr](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly):
```html
```
This script **MUST** be placed after the `tsParticles` one.
#### Bundle
A bundled script can also be used, this will include every needed plugin needed by the preset.
```html
```
### Usage
Once the scripts are loaded you can set up `tsParticles` like this:
```javascript
(async () => {
await loadFireflyPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
preset: "firefly",
});
})();
```
#### Customization
**Important ⚠️**
You can override all the options defining the properties like in any standard `tsParticles` installation.
```javascript
tsParticles.load("tsparticles", {
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.
### React.js / Preact / react-particles
_The syntax for `React.js`, `Preact` and `react-particles` is the same_.
This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
```typescript jsx
import Particles from "react-particles";
import type { Engine } from "tsparticles-engine";
import { loadFireflyPreset } from "tsparticles-preset-firefly";
export class ParticlesContainer extends React.PureComponent {
// this customizes the component tsParticles installation
async customInit(engine: Engine): Promise {
// this adds the preset to tsParticles, you can safely use the
await loadFireflyPreset(engine);
}
render() {
const options = {
preset: "firefly",
};
return ;
}
}
```
### Vue (2.x and 3.x)
_The syntax for `Vue.js 2.x` and `3.x` is the same_
```vue
```
```ts
let particlesOptions = {
preset: "firefly",
};
async function particlesInit(engine: Engine): Promise {
await loadFireflyPreset(engine);
}
```
### Angular
```html
```
```ts
const particlesOptions = {
preset: "firefly",
};
async function particlesInit(engine: Engine): Promise {
await loadFireflyPreset(engine);
}
```
### Svelte
```sveltehtml
```
```js
let particlesOptions = {
preset: "firefly",
};
let particlesInit = async (engine) => {
await loadFireflyPreset(main);
};
```
---
```mermaid
flowchart TD
subgraph i [Interactions]
subgraph ie [Externals]
iet[Trail]
end
end
i --> ie
e[tsParticles Engine] --> i
subgraph m [Movers]
mb[Base]
end
e --> m
subgraph s [Shapes]
sc[Circle]
end
e --> s
subgraph u [Updaters]
uc[Color]
uop[Opacity]
uou[Out Modes]
usi[Size]
end
e --> u
subgraph pr [Presets]
prff[Firefly]
end
e --> pr
iet & mb & sc & uc & uop & uou & usi --> prff
```