Creating a Particle Animation in React JS

React JSJavascript LibraryFront End Technology

"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

Example

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,
            }}
         />
      );
   }
}

Explanation

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 size, you can define the size of the particles.

  • In number, you can define the value of particles, etc.

Output

On execution, it will produce the following output −

raja
Published on 29-Sep-2021 07:37:56
Advertisements