How to make Fireworks in React with Particle JS React

Have you ever thought about how some developers can create stunning background animations like fireworks, confetti, night sky with blinking stars, etc? At first, I thought it was just a video playing at the back, or come crazy developer with some crazy-ass experience made it, but I was wrong as after several hours of research I found a fantastic package that can solve this problem without writing any complex code. The name of the package is Particle JS React which is a lightweight, dependency-free, responsive, and flexible JavaScript plugin which is used to create 2D animations like the ones mentioned above.

In this blog, we will use this package in React with a little twist. The twist is that we will be using its typescript version which is created specifically for component-based frameworks like React, Angular, and Vue called React TsParticles which is even easier to handle than Particle JS. We will understand how to make a beautiful firework background animation with this TsParticle.JS library or package in React with the help of a Congratulations Page.

Lets Start…

Index

1. Introduction of Particle js 
2. Creating the React App
3. Installing Particle js library
4. Importing the library in our app 
5. Working on the UI part of the App
6. Working on the Animation of the App
7. Working on the functionality of the App
8. Conclusion
9. FAQ

Introduction of TSParticle.JS

Before moving forward with our app, let’s take an overview of the library – Tsparticle that we will be using in this app to make an excellent background animation.

Below is the GIF of the actual website of TSParticle where we can see all the stunning background animation in action and on the right-hand side on the top we have an options tab which we can use to play around and learn what different options are there and how to use them to get our desired result.

Creating the React App

It’s elementary to create a React app – just go to your working directory in your preferred IDE and enter the following command in the terminal:

npx create-react-app fireworks-app

If you are unsure how to set up a create-react-app project properly, you can refer to the official guide here at create-react-app-dev.‌‌

After the setup, run npm start in the same terminal to start localhost:3000 where our React app will be hosted. We can also see all our changes there.

Installing the Particle.Js library

To start using the Particles Js in React we have to first install its typescript version as this version is only made for React and is much simpler to use than the actual one. 

To install it, run the following command in the command prompt or terminal which is already running at the back of the project we have just created.

For npm users

For yarn users

We can also install the react-tsparticles while creating our react app with the below-given command

Importing the TSParticles Js Library in our App

Just like any other package, we first have to import the library from the node modules in the App.js file so that we can start using it.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
 
const App = () => {
  return <div>Hello</div>;
};
 
export default App;

Working on the UI part of the App.

This part will be further divided and discussed in two parts. The first part contains the text and the styling part of our app which we have done using some Vanilla CSS and Bootstrap, while in the other we will discuss how we have made the fireworks animation using the TSParticle.js package 

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
 
const App = () => {
  return (
    <>
      <h1 className="text-white display-3 fw-bold mt-5 text-center">
        Congratulations
      </h1>
      <h3 className="text-white fs-5 mt-3 mb-5 text-center">
        You are among the top 5% of the people who have reached here.
      </h3>
      <div className="trophy d-flex justify-content-center mt-5">
        <i className="fa-solid fa-award t-1"></i>
        <i className="fa-solid fa-award t-2"></i>
        <i className="fa-solid fa-award t-3"></i>
      </div>
      <div className="text-center mt-4 pt-4">
        <button className="btn btn-danger fs-3 fw-bold text-white">
          Keep Going ---->
        </button>
      </div>
    </>
  );
};
 
export default App;

Our main focus in this blog is to explain how we have made the fireworks animation with tsparticles and not on the UI part of this page, thus we will not be explaining the above code other than that we have used bootstrap and some vanilla CSS for styling and rest is complete HTML with Font Awesome for displaying the icons.

Our App will look like this 

Working on the Background animation of the App

Now that we are done with every prerequisite, we can start working on the background of the app. As we have already told the background of the app will display a fireworks animation in different colors. For this app, we have used a combination of pink, green and blue, but we can change them as we see fit.

Like every other npm package, we have taken out every property that the tsparticles package has to offer and stored it inside the Particle Component using which we will be making the fireworks animation in the background of the app.

Particle Component

This Component acts just like an HTML Canvas Element as we can make and manipulate any type of animation with the help of JavaScript, which we will take full advantage of.

Before working on this Particle Component, one thing to note is that here we can only give data in the JSON format that is in the form of key and value pairs. But even before that, we have to pass some props to our Particle component to link it with our react-tsparticles and tsparticles library.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
 
const App = () => {
  return (
    <>
 <h1 className="text-white display-3 fw-bold mt-5 text-center">
        Congratulations
      </h1>
      <h3 className="text-white fs-5 mt-3 mb-5 text-center">
        You are among the top 5% of the people who have reached here.
      </h3>
      <div className="trophy d-flex justify-content-center mt-5">
        <i className="fa-solid fa-award t-1"></i>
        <i className="fa-solid fa-award t-2"></i>
        <i className="fa-solid fa-award t-3"></i>
      </div>
      <div className="text-center mt-4 pt-4">
        <button className="btn btn-danger fs-3 fw-bold text-white">
          Keep Going ---->
        </button>
      </div>
      <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
      />
    </>
  );
};
 
export default App;

Let’s begin entering the data in the form of key and value pairs as told and make the most beautiful fireworks animation with React and Particle JS.

This Particle Component has options attribute that marks the beginning of an object which takes the data in key and value pairs and sometimes in even objects.

Let’s start animating the background of the app by enabling the fullScreen effect and detectRatina property of the animation followed by the fpsLimit and the background object of the app which we have set to 60 and black. FPS is just the rate at which we want our app to calculate and display the animations that we have given it.

By default the value of fullScreen and detectRatina are true and both are boolean values, while the default value of fpsLimit is 120 and as for the background, it is transparent.

We can just remove the background object from here and use it as a CSS property to give gradients effect as well.

import React from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
 
const App = () => {
  return (
    <>
 <h1 className="text-white display-3 fw-bold mt-5 text-center">
        Congratulations
      </h1>
      <h3 className="text-white fs-5 mt-3 mb-5 text-center">
        You are among the top 5% of the people who have reached here.
      </h3>
      <div className="trophy d-flex justify-content-center mt-5">
        <i className="fa-solid fa-award t-1"></i>
        <i className="fa-solid fa-award t-2"></i>
        <i className="fa-solid fa-award t-3"></i>
      </div>
      <div className="text-center mt-4 pt-4">
        <button className="btn btn-danger fs-3 fw-bold text-white">
          Keep Going ---->
        </button>
      </div>
      <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
  options={{
          fullScreen: {
            enable: true,
          },
          detectRetina: true,
          background: {
            color: "#000",
          },
          fpsLimit: 60,
  }}
      />
    </>
  );
};
 
export default App;

After setting up the background of the app, it’s time to proceed with our main attraction- the fireworks particle. Starting with an object known as emitters which will display the particles or fireworks in the white color – default on the black background of the app. With emitters, we can decide the direction, life, rate, size, and position of the particle.

Working on the Emitters Property of the particle.

Let’s start with the direction, we have set it to the top as it means the direction in which the fireworks will go and give us that KABOOM effect. Next, we have the life property which is an object containing the count property which is again set to its default value – 0, as we don’t want the fireworks to end any time soon followed by the duration and delay property which has been set to 0.1 each and does the same things as it says – sets the max duration a firework will last for and after how much time will the KABOOM effect will happen 

Coming to the rate property which allows us to set properties for individual particles, and has two key and value pairs each for quantity and delay. The quantity property deals with the number of fireworks we want to see at a time – in one frame. It is advised to keep it to its default value of 1 to avoid overlapping particles. While as for the delay, we have set it to 0.03.

After the rate property, we have the size property of the emitter object. Using this property we can set how wide and high we want the particle to spread across the screen of the device, which in this case we have set to 100 and 0 respectively. And ending this object we have the position property which allows us to set the position in terms of x and y coordinates from where we want our fireworks to start. In this case, we have set them to 50 and 100 respectively. 

emitters: {
  direction: "top",
  life: {
    count: 0, //no. of fireworks
    duration: 0.1,
    delay: 0.1,
  },
  rate: {
    delay: 0.03,
    quantity: 1,
  },
  size: {
    width: 100,
    height: 0,
  },
  position: {
    y: 100,
    x: 50,
  },
},

Working on the main Firework Particle

Next in line, we have the particle object as already told will be responsible for setting different properties of the fireworks particle as a whole and not individually the emitters.

The first property in this particle object is the number which is again an object denoting the number of fireworks we want our app to display in the background which has been set to its default value which is 0 denoting a random number of fireworks. Following it with the same rank is the destroy property which as its name suggests will be responsible to give us the KABOOM effect – the split effect, which again is an object with the mode as key and split as its value, and the number of splits set to 100.

After dealing with the number and destroy property, it’s time to set the properties of the particles we see after the splitting of the fireworks particle. Let’s start with the color of the particles. We have made an array of colors like pink, green, and blue, and given it the value key of color as its value in order to have the multicolored fireworks. Next comes the shape and the size property of the particles. As for the shape, we have given it the star shape while keeping the size to 1, as any more than that, and we will lose the fireworks touch.

Next comes the opacity and the life properties of the particles. We know what opacity means and we want to see the shower of fireworks, thus a value of 1 has been given with the animation property set to true so that we can get the effect that they are getting burnt out after some time say 0.1 as its minimumValue and with a speed of 0.2. As for the life property, it is the same as we have seen in the emitters property – after how much time will the particle disappear which again has been kept to 1, and it is advised not to change it to avoid multiple collisions and also to maintain the fireworks effect.

The last property of the split particle is the move. This property is responsible for connecting both the firework particle and the split particle which we have set to true as we want them to connect. Followed by the gravity property which as the name suggests will pull the particles upward if enabled. Following the gravity property with the same rank, we have the direction and the overMode property. The direction property is responsible for setting the direction in which the particle will go after splitting, and its default value is top which we have set to none as we want the particle to spread in all directions and not just in one direction while the overMode property is set to destroy which connects the move property to the destroy property of the fireworks particle and avoids overlapping.

Now that we have set all the properties of the particles after splitting, let’s complete the properties of the fireworks particle. The properties of both the particles will remain the same but their values might change like the shape property for the split particle was a star but for the fireworks particle it is a line. And as for the size, we have given it a range of 1 to 100 while enabling the synchronization of all the particles and also enabling the animation property.

As for the color, we have chosen a dark grey color which will contrast with the black background. The lifetime of the firework particle will be 1 and as for the moving object, it contains the same properties with yes different values. But some property is extra in this moving object. The trail property is again an object and is used to give the split particle a trail of length 10 just like in the fireworks show, the most beautiful thing is its route or trail. And inverse property under gravity which is set to true so that the firework particle goes in a straight line and not in a projectile.

import React from "react";
import Particle from "react-tsparticles";
 
const Fireworks = ({ particlesInit, particlesLoaded }) => {
  return (
    <div>
      <h1 className="text-white display-3 fw-bold mt-5 text-center">
        Congratulations
      </h1>
      <h3 className="text-white fs-5 mt-3 mb-5 text-center">
        You are among the top 5% of the people who have reached here.
      </h3>
      <div className="trophy d-flex justify-content-center mt-5">
        <i className="fa-solid fa-award t-1"></i>
        <i className="fa-solid fa-award t-2"></i>
        <i className="fa-solid fa-award t-3"></i>
      </div>
      <div className="text-center mt-4 pt-4">
        <button className="btn btn-danger fs-3 fw-bold text-white">
          Keep Going ---->
        </button>
      </div>
      <Particle
        id="tsparticles"
        className="fireworks"
        init={particlesInit}
        loaded={particlesLoaded}
        options={{
          fullScreen: {
            enable: true,
          },
          detectRetina: true,
          background: {
            color: "#000",
          },
          fpsLimit: 60,
          emitters: {
            direction: "top",
            life: {
              count: 0, //no. of fireworks
              duration: 0.1,
              delay: 0.1,
            },
            rate: {
              delay: 0.03,
              quantity: 1,
            },
            size: {
              width: 100,
              height: 0,
            },
            position: {
              y: 100,
              x: 50,
            },
          },
          particles: {//properties of the main firework particle
            number: {
              value: 0, //to randomiser the number of particles
            },
            destroy: {
              mode: "split", //to get the fireworks effect
              split: {
                rate: {
                  value: 100, //amount of splits
                },
                particles: {
                  // setting properties of those particles formed after splitting
                  color: {
                    value: [
                      "#FFC0CB" /*Pink*/,
                      "#FFB6C1" /*LightPink*/,
                      "#FF69B4" /*HotPink*/,
                      "#FF1493" /*DeepPink*/,
                      "#DB7093" /*PaleVioletRed*/,
                      "#C71585" /*MediumVioletRed*/,
                      "#00FFFF", //acqua
                      "rgb(124, 252, 0)", //grassy green
                    ],
                  },
                  opacity: {
                    value: 1,
                    animation: {
                      enable: true,
                      speed: 0.2,
                      minimumValue: 0.1,
                      sync: false,
                      startValue: "max", //multiple fireworks
                      destroy: "min",
                    },
                  },
                  shape: {
                    type: "star",
                  },
                  size: {
                    value: 1,
                    animation: {
                      enable: false, //to get the sparkly feeling
                    },
                  },
                  life: {
                    count: 1, //amount of time
                    duration: {
                      value: {
                        min: 1,
                        max: 2,
                      },
                    },
                  },
                  move: {
                    //all about firework showers
                    enable: true, // to get the fireworks effect
                    gravity: {
                      enable: false, //stops gravity from pulling them up
                    },
                    speed: 3, //speed of the fireworks
                    direction: "none", //direction of the fireworks
                    outMode: "destroy", // avoids overlapping of fireworks
                  },
                },
              },
            },
            life: {
              count: 1,
            },
            shape: {
              type: "line",
            },
            size: {
              value: { min: 1, max: 100 },
              animation: {
                enable: true,
                sync: true,
                speed: 150,
                startValue: "random",
                destroy: "min",
              },
            },
            stroke: {
              color: {
                value: "#383838",
              },
              width: 1,
            },
            rotate: {
              path: true,//single path
            },
            move: {
              enable: true,
              gravity: {
                acceleration: 15,
                enable: true,
                inverse: true,//to avoid projectiles and follow a st line
                maxSpeed: 100,
              },
              speed: { min: 10, max: 20 },
              outModes: {
                default: "destroy",
              },
              trail: {// to give the split particle a trail so that we can see its dirn
                enable: true,
                length: 10,
              },
            },
          },
        }}
      />
    </div>
  );
};
 
export default Fireworks;

This marks the ending of the UI component of the app but we still need the engine to connect all these codes with the tsparticles and get our fireworks to effect in the background.

Working on the functionality of our App

At the beginning of the Ui part of our app, we used some props to connect the app with the tsparticles package but never did so. In this section, we will see how very easily we can connect the app with the package and get our animations working without writing any complex code.

As we are fetching these data from a JSON file, we have to use the async and await feature to asynchronously call every piece of data from this file and use it as we see fit. We not only call the data from the JSON file but the engine as well which is the key component of the animation as this will put everything in motion according to its name. This engine will be called from the loadFull feature of the tsparticles package which we have installed with the react-tsparticles package.

But that is not all we also need a container to wrap these animations and everything else to ensure that everything is in its proper place and is running properly as we have coded it to run.

 const particlesInit = async (main) => {
    console.log(main);
 
    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };
 
  const particlesLoaded = (container) => {
    console.log(container);
  };

Finally, our App looks like this

Conclusion

In the end, I would just like to say this, with packages like particles js and tsparticle js, making animation like fireworks, confetti, etc has biome much easier than it used to be. Now it has come down to whether we have the right set of tools for the write work or not, if we have then anything is possible even animation like this is possible.

Here is the complete source code and the live representation of our page.

Frequently Asked Questions