JavaScript - How to create beautiful fireworks effects with tsParticles
Tags: showdev, javascript, typescript, tutorial
Published: 2022-08-15 00:11:00

## Fireworks preset

[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)

Starting from v2.2.0 the [tsParticles fireworks preset](https://github.com/matteobruni/tsparticles/tree/main/presets/fireworks#readme) has a new configuration, for a more realistic effect.

A demo can be seen [here](https://codepen.io/matteobruni/full/wvmEgBQ)

{% codepen https://codepen.io/matteobruni/pen/wvmEgBQ %}

Try the preview at 0.5x if the particles are going outside of the canvas, it's better to see it on CodePen.

## How to use the fireworks preset

### Vanilla JavaScript

There are two ways for installing the fireworks presets, as you can see in the readme of the package, but I'll describe the easier one.

```html
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>
```

After that just add this JavaScript code for loading it and start the effect

```javascript
(async () => {
  await tsParticles.load("tsparticles", {
    preset: "fireworks",
  });
})();
```

### React.js

For React.js you have to install these packages:

```shell
npm install react-particles tsparticles-preset-fireworks
```

or 

```shell
yarn add react-particles tsparticles-preset-fireworks
```

And the script can be loaded like this:

```jsx
import Particles from "react-particles";
import { loadFireworksPreset } from "tsparticles-preset-fireworks";

function fireworks(props) {
  // this customizes the component tsParticles installation
  const customInit = async (engine) => {
    // this adds the preset to tsParticles, you can safely use the
    await loadFireworksPreset(engine);
  };

  const options = {
    preset: "fireworks"
  };

  return <Particles options={options} init={customInit} />;
}

export default fireworks;
```

### Preact / Inferno

There are also packages for Preact and Inferno, just replace `react` with `preact` or `inferno` in the package name and usage.

### Vue.js (2.x and 3.x)

Since Vue.js 2.x and 3.x packages have different instructions, before I'll show the code needed

```html
<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
```

```javascript
const particlesOptions = {
  preset: "fireworks",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireworksPreset(engine);
}
```

#### Vue 2.x

For Vue.js 2.x you have to install these packages:

```shell
npm install vue2-particles tsparticles-preset-fireworks
```

or

```shell
yarn add vue2-particles tsparticles-preset-fireworks
```

and in the app.js

```javascript
import Particles from "vue2-particles";

Vue.use(Particles);
```

#### Vue 3.x

For Vue.js 3.x you have to install these packages:

```shell
npm install vue3-particles tsparticles-preset-fireworks
```

or

```shell
yarn add vue3-particles tsparticles-preset-fireworks
```

and in the app.js

```javascript
import Particles from "vue3-particles";

createApp(App).use(Particles)
```

## Angular

For Angular you have to install these packages:

```shell
npm install ng-particles tsparticles-engine tsparticles-preset-fireworks
```

or

```shell
yarn add ng-particles tsparticles-engine tsparticles-preset-fireworks
```

And add this tag to the HTML file

```html
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
```

and in the relative TypeScript file this code

```typescript
import { loadFireworksPreset } from "tsparticles-preset-fireworks"; // top of file, with other imports

const particlesOptions = {
  preset: "fireworks",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireworksPreset(engine);
}
```

and in the app module file add this import and usage

```typescript
import { NgParticlesModule } from "ng-particles"; // top of the file, with other imports

@NgModule({
  declarations: [
    /* AppComponent */
  ],
  imports: [
    /* other imports */ NgParticlesModule /* NgParticlesModule is required*/
  ],
  providers: [],
  bootstrap: [
    /* AppComponent */
  ]
})
export class AppModule {
}
```

## Svelte

The tag to add to the HTML

```html
<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>
```

and the properties in the JavaScript code

```javascript
import Particles from "svelte-particles";
import { loadFireworksPreset } from "tsparticles-preset-fireworks";

let particlesOptions = {
  preset: "fireworks",
};

let particlesInit = async (engine) => {
  await loadFireworksPreset(engine);
};
```

## Other UI frameworks

Packages are available also for: Riot.js, Solid, Web Components and jQuery. You can find more setup instructions [here](https://github.com/matteobruni/tsparticles#Official-components-for-some-of-the-most-used-frameworks)

## Social contacts

For any other information or help here are our official social channels

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

Or you can open an issue or a discussion on GitHub

{% github matteobruni/tsparticles %}