Creating a Particle Animation in React JS

"Particle animation" is a technique in game physics, motion graphics,
and computer graphics that uses many minute sprites, 3D models, or
other graphic objects to simulate certain kinds of "fuzzy" phenomena.
In this article, we will see how to make a popular particle animation in React JS. We will do this using a third-party package called "react-tsparticles".
First create a React project −
npx create-react-app tutorialpurpose
Go to the project directory −
cd tutorialpurpose
Download and install the "react-tsparticles" package −
npm install react-tsparticles react
We will use this package to add default particle animations with different styling elements. You can also add id and different options for different things like particle speed, particle color, background
color, particle numbers, particle size, etc.
Add the following lines of code in App.js −
import Particles from "react-tsparticles";
import React from "react";
export default class App extends React.Component {
   constructor(props) {
      super(props);
   }

   render() {
      return (
         <Particles
            id="tsparticles"
            options={{
               background: {
                  color: {
                     value: "#0000",
                  },
               },
               fpsLimit: 60,
               interactivity: {
                  detectsOn: "canvas",
                  events: {
                     onClick: {
                        enable: true,
                        mode: "push",
                     },
                     onHover: {
                        enable: true,
                        mode: "repulse",
                     },
                     resize: true,
                  },
                  modes: {
                    bubble: {
                       distance: 400,
                       duration: 2,
                       opacity: 0.8,
                       size: 40,
                   },
                   push: {
                      quantity: 4,
                   },
                   repulse: {
                      distance: 200,
                      duration: 0.4,
                   },
                },
             },
             particles: {
                color: {
                   value: "#fff",
                },
                links: {
                   color: "#ffffff",
                   distance: 150,
                   enable: true,
                   opacity: 0,
                   width: 1,
                },
                collisions: {
                   enable: true,
                 },
                 move: {
                    direction: "none",
                    enable: true,
                    outMode: "bounce",
                    random: false,
                    speed: 5,
                    straight: false,
                 },
                 number: {
                    density: {
                       enable: true,
                       value_area: 800,
                    },
                    value: 300,
                 },
                 opacity: {
                    value: 0.5,
                 },
                 shape: {
                    type: "circle",
                  },
                  size: {
                     random: true,
                     value: 5,
                  },
               },
               detectRetina: true,
            }}
         />
      );
   }
}
In options attribute, you will see many different types of editable value. You can tweak the values to get different kinds of effect, for example,
In shape, you can use "square" to make a square particle.
In shape, you can use "square" to make a square particle.
In size, you can define the size of the particles.
In size, you can define the size of the particles.
In number, you can define the value of particles, etc.
In number, you can define the value of particles, etc.
On execution, it will produce the following output −
Your browser does not support HTML5 video.