Posted onJan 25, 2023 • Edited onMar 28, 2023 • Originally published atcode.pieces.app

Create Beautiful Animations by Integrating Particles.js With React

#react #animations

Have you ever wondered how some programmers are able to produce beautiful backdrop animations like fireworks, confetti, or a night sky with twinkling stars? I initially assumed it was just a video playing in the background, or that some rockstar developer had spent hours creating it manually. However, after doing a lot of research, I discovered a great package for creating nice background animations without the need for any complicated code. The JavaScript plugin used to make 2D animations like the ones mentioned above is called Particles.js.

Particles.js is a dependency-free, lightweight, responsive JavaScript plugin for the kind of adaptable, reactive particle design that can be used for different projects.

Usingreact-tsparticles, you can incorporate Particles.js into your React app, creating beautiful animations that will undoubtedly draw in more viewers.

Prerequisites

Knowledge of JavaScript
Node.js
React.js
Knowledge of command-line syntax

Create a React Project

Usenpx create-react-app my-app to start a fresh React app, or keep working on an existing one if you've already started.

The work will be done in theApp.js file, which can be found in your app:

import logo from './logo.svg';import './App.css';function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>          Edit <code>src/App.js</code> and save to reload. </p> <a          className="App-link"          href="https://reactjs.org"                   rel="noopener noreferrer"        >          Learn React </a> </header> </div>  );}export default App;

You’ll have to edit theApp.js file to remove some unnecessary code bases. Below isApp.js after editing:

import './App.css';function App() { return ( <div className="App"> <h1>Welcome!</h1> </div>  );}export default App;

Integrating Particle.js with a React Project

Next, you must first install bothtsparticles andreact-tsparticles in your project as dependencies. Both packages will enable your app to run Particles in the right order.

npm install react-tsparticles

npm install tsparticles

After that, import Particles fromreact-tsparticles and{ loadFull } fromtsparticles:

import './App.css';import Particles from "react-tsparticles";import { loadFull } from "tsparticles";function App() { return ( <div className="App"> <h1>Welcome!</h1> </div>  );}export default App;

You can use the Particles component by passing some props such asinit andid, which will be initialization functions. Also, you’ll use theoptions prop, which will be the configurations for particles that we want to display:

import './App.css';import Particles from "react-tsparticles";import { loadFull } from "tsparticles";function App() { return ( <div className="App"> <h1>Welcome!</h1> <Particles           init={particlesInit}      options={ // display config      }/> </div>  );}export default App;

You’re almost done! You just have to configure your particles/objects in order of animation, interaction, direction, opacity, etc. For this illustration, you’ll be using an already preset configuration from thetsparticles repository, but you can always tweak it to your own style or create one from scratch if you’d like.

Below is the particle configuration for the project:

import './App.css';import Particles from "react-tsparticles";import { loadFull } from "tsparticles";function App() {  return (    <div className="App">     <h1>Welcome!</h1>     <Particles           init={particlesInit}      options={{ "fullScreen": { "enable": true, "zIndex": 1        }, "detectRetina": true, "fpsLimit": 120, "interactivity": { "events": { "onClick": { "enable": true, "mode": "push"                }, "onDiv": { "elementId": "repulse-div", "enable": false, "mode": "repulse"                }, "onHover": { "enable": true, "mode": "connect", "parallax": { "enable": false, "force": 60, "smooth": 10                    }                }, "resize": true            }, "modes": { "bubble": { "distance": 400, "duration": 2, "opacity": 0.8, "size": 40, "speed": 3                }, "connect": { "distance": 80, "lineLinked": { "opacity": 0.5                    }, "radius": 60                }, "grab": { "distance": 400, "lineLinked": { "opacity": 1                    }                }, "push": { "quantity": 4                }, "remove": { "quantity": 2                }, "repulse": { "distance": 200, "duration": 0.4                }            }        }, "particles": { "color": { "value": "random"            }, "lineLinked": { "blink": false, "color": "#ffffff", "consent": false, "distance": 150, "enable": false, "opacity": 0.4, "width": 1            }, "move": { "attract": { "enable": false, "rotate": { "x": 600, "y": 1200                    }                }, "bounce": false, "direction": "none", "enable": true, "outMode": "out", "random": false, "speed": 6, "straight": false            }, "number": { "density": { "enable": true, "area": 800                }, "limit": 500, "value": 300            }, "opacity": { "animation": { "enable": false, "minimumValue": 0.1, "speed": 1, "sync": false                }, "random": false, "value": 0.5            }, "shape": { "type": "circle"            }, "size": { "animation": { "enable": false, "minimumValue": 0.1, "speed": 40, "sync": false                }, "random": true, "value": 5            }        }, "polygon": { "draw": { "enable": false, "lineColor": "#ffffff", "lineWidth": 0.5            }, "move": { "radius": 10            }, "scale": 1, "type": "none", "url": ""        }, "background": { "color": "#000000", "image": "", "position": "50% 50%", "repeat": "no-repeat", "size": "cover"        }    }      }/>    </div>  );}export default App;

As a result, you’ll have this nice animation:

Now that you have options for different preset configurations, play with them! Below is a link to a GitHub repository that contains a list of various settings for different particles.