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) {

   render() {
      return (
               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 size, you can define the size of the particles.

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


On execution, it will produce the following output −

Updated on: 29-Sep-2021


Kickstart Your Career

Get certified by completing the course

Get Started