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 very easy 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 properly set up a create-react-app project, 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
npm i react-tsparticles 
npm i tsparticles

For yarn users
yarn add react-tsparticles
yarn add tsparticles

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

$ create-react-app your_app –template particles
or
$ create-react-app your_app –template particles-typescript

If any legacy error shows, use –force for npm users as this will forcefully update everything

npm i react-tsparticles –force

npm i tsparticles –force

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;

Continue Reading.