[](https://particles.js.org)
# tsParticles Fireworks Preset
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [](https://www.npmjs.com/package/tsparticles-preset-fireworks) [](https://www.npmjs.com/package/tsparticles-preset-fireworks) [](https://github.com/sponsors/matteobruni)
[tsParticles](https://github.com/matteobruni/tsparticles) preset for fireworks effect.
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Sample
[](https://particles.js.org/samples/presets/fireworks)
## 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-fireworks):
```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 loadFireworksPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
preset: "fireworks",
});
})();
```
#### 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: "fireworks",
});
```
Like in the sample above, the circles will be replaced by squares.
### React.js / Preact / Inferno
_The syntax for `React.js`, `Preact` and `Inferno` 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 { loadFireworksPreset } from "tsparticles-preset-fireworks";
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 loadFireworksPreset(engine);
}
render() {
const options = {
preset: "fireworks",
};
return ;
}
}
```
### Vue (2.x and 3.x)
_The syntax for `Vue.js 2.x` and `3.x` is the same_
```vue
```
```ts
const particlesOptions = {
preset: "fireworks",
};
async function particlesInit(engine: Engine): Promise {
await loadFireworksPreset(engine);
}
```
### Angular
```html
```
```ts
const particlesOptions = {
preset: "fireworks",
};
async function particlesInit(engine: Engine): Promise {
await loadFireworksPreset(engine);
}
```
### Svelte
```sveltehtml
```
```js
let particlesOptions = {
preset: "fireworks",
};
let particlesInit = async (engine) => {
await loadFireworksPreset(engine);
};
```
---
```mermaid
flowchart TD
subgraph m [Movers]
mb[Base]
end
e[tsParticles Engine] --> m
subgraph pl [Plugins]
ple[Emitters]
end
e --> pl
subgraph s [Shapes]
sc[Circle]
sl[Line]
end
e --> s
subgraph u [Updaters]
uc[Color]
ud[Destroy]
ul[Life]
uop[Opacity]
uou[Out Modes]
ur[Rotate]
usi[Size]
ust[Stroke Color]
end
e --> u
subgraph pr [Presets]
prfw[Fireworks]
end
e --> pr
mb & ple & sc & sl & ua & uc & ud & ul & uop & uou & usi & ust --> prfw
```