JavaScript – How to create beautiful fireworks effects with tsParticles

mobanto August 15, 2022

Fireworks preset

Starting from v2.2.0 the tsParticles fireworks preset has a new configuration, for a more realistic effect.

A demo can be seen here

<br />

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.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.fireworks.bundle.min.js"></script>

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

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

React.js

For React.js you have to install these packages:

npm install react-particles tsparticles-preset-fireworks

yarn add react-particles tsparticles-preset-fireworks

And the script can be loaded like this:

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

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

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:

npm install vue2-particles tsparticles-preset-fireworks

yarn add vue2-particles tsparticles-preset-fireworks

and in the app.js

import Particles from "vue2-particles";

Vue.use(Particles);

Vue 3.x

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

npm install vue3-particles tsparticles-preset-fireworks

yarn add vue3-particles tsparticles-preset-fireworks

and in the app.js

import Particles from "vue3-particles";

createApp(App).use(Particles)

Angular

For Angular you have to install these packages:

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

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

And add this tag to the HTML file

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

and in the relative TypeScript file this code

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

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

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

and the properties in the JavaScript code

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

Social contacts

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

Or you can open an issue or a discussion on GitHub

tsParticles – Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with
React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components