Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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 −
792 Views
