---
title: "How to Create Interactive Animated Backgrounds in React with tsParticles | CoderPad"
description: "Interactive animations made with the tsParticles library add more spice to a UI application. In this article, you will learn how you can create interactive animated backgrounds in React with tsParticles. Prepare to have your mind blown with this fantastic animation library."
canonical: "https://coderpad.io/blog/development/interactive-animated-backgrounds-react-tsparticles/"
last_modified: "2026-04-15 16:21:08"
---
[Back to blog](https://coderpad.io/blog/)
# How to Create Interactive Animated Backgrounds in React with tsParticles
October 4, 2022 7 Minute Read
By Taminoturoko Briggs
[Development](https://coderpad.io/blog/development/)
Adding animations to a site is a great way to make it stand out on the web, even better when it’s interactive. However, depending on the complexity, achieving these effects can require a lot of time and experience.
Unless, of course, you utilize [tsParticles](https://particles.js.org/).
This lightweight library helps you build stunning interactive animations with a few lines of code. It includes customization features that help you achieve animations far more advanced than just floating particles on the screen:
Source: [Matteo Bruni](https://codepen.io/collection/DPOage?cursor=eyJjb2xsZWN0aW9uX2lkIjoiRFBPYWdlIiwiY29sbGVjdGlvbl90b2tlbiI6bnVsbCwibGltaXQiOjQsIm1heF9pdGVtcyI6MTYxLCJvZmZzZXQiOjAsInBhZ2UiOjEsInNvcnRfYnkiOiJwb3NpdGlvbiIsInNvcnRfb3JkZXIiOiJBc2MifQ==)
In this tutorial, we will show you how to use tsParticles in React to create interactive animated backgrounds. To follow along, you should be familiar with React and have Node installed on your system.
>
 You can use the CoderPad sandboxes located throughout this page or [as a new browser window](https://app.coderpad.io/sandbox?question_id=229542) to run the code in this tutorial.
## Introduction to tsParticles
tsParticles is a successor of [particles.js](https://vincentgarreau.com/particles.js/), an older library with similar functionality whose development is no longer active. It is backward-compatible with particles.js and has similar configuration options, so you can easily migrate from one to the other.
tsParticles has lots of new features, like first-party integrations with leading frameworks, a frame per second (fps) limiter so as not to overwork the CPU, and the ability to use Font Awesome icons and images as particles.
tsParticles might take some time to get used to due to the numerous [configuration options](https://particles.js.org/docs/classes/Options_Classes_Options.Options.html#options) available for creating your desired particle animation. To help with this we will be exploring a few particle animations you can create with this library.
## Get started by setting up React and tsParticles
For some of the popular frameworks there are ready-to-use tsParticle components available. In our case, we will be using the [official tsParticles React component](https://github.com/matteobruni/tsparticles/tree/main/components/react). We will also use [tsParticles Full Bundle](https://www.npmjs.com/package/tsparticles), which has more features available than the [tsParticles Slim Bundle](https://www.npmjs.com/package/tsparticles-slim).
Type in the following command in the terminal to set up a React app, install the needed dependencies, and start up the development server.
```
npx create-react-app particle-background
cd particle-background
npm i react-particles tsparticles
npm start
```
Now let’s initialize tsParticles and render the Particles component in the src/App.js file. Here is what the file will look like:
```
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { useCallback } from "react";
const App = () => {
const options = {
//...
};
const particlesInit = useCallback(async (engine) => {
await loadFull(engine);
}, []);
return (
);
};
export default AppCode language: JavaScript (javascript)
```
The Particles component accepts [several properties](https://github.com/matteobruni/tsparticles/tree/main/components/react#props) among which is the options prop. This is where we will be passing the configurations for creating the particle animation.
## Understand the configuration options
To demonstrate how the configuration options work, we’ll start with [this example](https://codepen.io/matteobruni/pen/ZExLYyg) created by [Matteo Bruni](https://codepen.io/matteobruni). It features a particle animation with floating circles in the brand colors of the popular communication software [Slack](https://www.slack.com). The circles link together when they get close to each other and link with a nearby mouse hover. A click creates an extra four particles.
Here are the configuration options:
```
const options = {
particles: {
number: {
value: 80,
density: {
enable: true,
area: 800
}
},
color: {
value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
},
shape: {
type: "circle"
},
opacity: {
value: 1
},
size: {
value: { min: 1, max: 8 }
},
links: {
enable: true,
distance: 150,
color: "#808080",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 5,
direction: "none",
random: false,
straight: false,
outModes: "out"
}
},
interactivity: {
events: {
onHover: {
enable: true,
mode: "grab"
},
onClick: {
enable: true,
mode: "push"
}
},
modes: {
grab: {
distance: 140,
links: {
opacity: 1
}
},
push: {
quantity: 4
}
}
}
};Code language: JavaScript (javascript)
```
Here is the result of the above configs:
There are lots of different options that go into the animation–most of them are self-explanatory from their names. But if you’re unfamiliar they might still seem a bit perplexing. Here are two in particular that often cause confusion:
- [particles](https://particles.js.org/docs/classes/Options_Classes_Particles_ParticlesOptions.ParticlesOptions.html): This option handles everything that has to do with the display and behavior of the particles. In the above config, we set the number of particles, their colors, the shape (“circle”), as well as the particles’ opacity, size range, and movement type. We also set the details of the links, which are the lines connecting the particles when they are close.
- [interactivity](https://particles.js.org/docs/classes/Options_Classes_Interactivity_Interactivity.Interactivity.html): This option controls what happens when click and hover events are triggered, and when a particle intersects with a div element. In the above config, when a hover occurs we are calling the grab mode which links nearby particles. When a click occurs we call the push mode which adds four more particles.
There are even more options and properties than we covered above, all of which can be explored in the [official documentation](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) and by playing around with the [available demos.](https://codepen.io/collection/DPOage?cursor=eyJjb2xsZWN0aW9uX2lkIjoiRFBPYWdlIiwiY29sbGVjdGlvbl90b2tlbiI6bnVsbCwibGltaXQiOjQsIm1heF9pdGVtcyI6MTYxLCJvZmZzZXQiOjAsInBhZ2UiOjEsInNvcnRfYnkiOiJwb3NpdGlvbiIsInNvcnRfb3JkZXIiOiJBc2MifQ==)
## Create more advanced effects using the Emitters and Absorbers plugins
As the name implies, emitters are for releasing/giving off particles while absorbers are for absorbing particles. These are advanced options that can be used to create particle animation like confetti, fireworks, black hole effects, and more.
The docs don’t currently include helpful information regarding these options – but you can figure out how they work from the available demos that I’ve outlined below.
Let’s create a black hole animation where particles are released using emitters and sucked up using absorbers. Here is a GIF showing what we want to create.
Black hole effect
Start by adding the configurations using the`particles`option. We will make the particles:
- Be a circle
- Be semi-transparent (`opacity`)
- Have random colors and sizes within a set range
- Bounce when they hit the side of the page
```
const options = {
background: {
color: "#fff",
},
particles: {
shape: {
type: "circle"
},
number: {
value: 0
},
color: {
value: "random"
},
opacity: {
value: 0.3
},
size: {
value: {min: 5, max: 20}
},
move: {
enable: true,
speed: 6,
random: false,
outModes: "bounce",
}
},
};Code language: JavaScript (javascript)
```
Since we have set`number.value`to 0, no particle will be displayed on the screen. This is exactly what we want since we want all particles to come from the emitter. Now let’s add the`emitters`option.
```
const options = {
// …
emitters: [{
direction: "top-right",
position: {
x: 0,
y: 100
},
rate: {
delay: 0.3,
quantity: 4,
},
},
]
};Code language: JavaScript (javascript)
```
The above will create an emitter position at the bottom left of the screen which releases particles to the top-right direction at the rate of 4 particles every 0.4 seconds.
Emitter in action
If we wanted, we could easily create another emitter by adding another object within the`emitters`array property. Particles emitted by the added emitters will be the same as the first since they are both working with the same`particles`option. To change the emitted particles, we can define a`particles`property within the new emitter object.
Now to add an absorber at the middle of the screen with a size that changes as particles are absorbed, add the following configuration within the options object:
```
const options = {
// …
absorbers: [{
position: { x: 50, y: 50 },
size: {
value: 50,
limit: 100,
}
}
],
};Code language: JavaScript (javascript)
```
With this the intended particle animation has been achieved. We can view it and its configurations below:
## Make the most of presets
Rather than creating a particle animation from scratch, we can use the official presets or use the configurations from the available demos and then do some fine-tuning to achieve our desired effect.
To show how we can use the [official presets](https://github.com/matteobruni/tsparticles#presets), we’ll be using the confetti preset.
First, let’s install the [preset package](https://www.npmjs.com/package/tsparticles-preset-confetti) using the following command:
```
npm i tsparticles-preset-confetti
```
Now to load the preset, we need to modify the src/App.js file to look like the following:
```
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { useCallback } from "react";
import { loadConfettiPreset } from "tsparticles-preset-confetti";
const App = () => {
const options = {
preset: "confetti",
};
const particlesInit = useCallback(async (engine) => {
await loadConfettiPreset(engine)
await loadFull(engine)
}, []);
return (
);
};
export default AppCode language: JavaScript (javascript)
```
Above in`options`, we specified the preset by its name using the`preset`option. Then we loaded in the callback function passed to the`init`prop. Below is the result:
To customize the preset like changing the background color, increasing the number of particles emitted, changing the particle shape, etc, we can just add other options to the options object.
For example, to change the color of the confetti, here is what the configuration options look like:
```
const options = {
particles: {
color: {
value: ["#0000ff", "#00ff00"],
},
},
preset: "confetti",
};Code language: JavaScript (javascript)
```
## Explore other customization plugins
tsParticles allows even more advanced customization through plugins, which can be used to [create custom shapes](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html#creating-a-custom-shape) and [presets](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html#creating-a-custom-preset) using the`addShape`and`addPreset`method respectively.
Let’s look at how we can use the`addShape`method to create a pentagon and use it to replace the circles emitted in the black hole example above.
```
const loadPentagonShape = (engine) => {
engine.addShape("pentagon", (context, particle, radius) => {
const angle = (2 * Math.PI) / 6;
context.beginPath();
for (let i = 0; i < 5; i++) {
context.lineTo(
radius * Math.cos(angle * i),
radius * Math.sin(angle * i)
);
}
context.closePath();
context.stroke();
});
};Code language: JavaScript (javascript)
```
The`addShape`method accepts multiple arguments, but the most important is the shape name and the draw function callback..
The draw function callback helps you create your desired shape, and we’ve passed multiple arguments to it to help us tweak the shape that is being drawn.
- `context`is the HTML canvas context
- `particle`contains the value of the properties passed in the`particles`options, discussed above
- `radius`, as the name implies, is the radius of the shape.
Now, to make the pentagon shape available for use, you need to call it before the`loadFull`function is called and our tsParticles are initialized, like this:
```
const particlesInit = useCallback(async (engine) => {
loadPentagonShape(engine)
await loadFull(engine)
}, []);Code language: JavaScript (javascript)
```
With this, you can start using this shape by passing its name as a value to`shape.type`in the`particles`option. Below is the result of using this shape in the black hole example:
As mentioned earlier, tsParticles also allows us to create our own presets using the`addPreset`method, which takes in the preset name and configuration options as arguments. In the same way we created a custom shape, we also need to create a load which will be called to make the preset available for use.
```
const options = {
// preset options
};
const loadCustomPreset = (engine) => {
engine.addPreset("customPreset", options);
};Code language: JavaScript (javascript)
```
Using a custom preset is exactly the same as using an official one, where you need to call the preset before initializing tsParticles and specify the preset name in the`preset`option of the particle configurations.
## Play with tsParticles in the CoderPad sandbox
tsParticles makes it easier than ever before to create and customize particle animations for your website. In my view, it’s pretty great! Try implementing some of the tricks you learned today in the [CoderPad sandbox](https://app.coderpad.io/sandbox).
Taminoturoko Briggs is an enthusiastic software developer and technical writer. Core languages include JavaScript and Python.
## Subscribe for more CoderPad insights
## Trending Articles
Previous slide Next slide [Development
## What is Prompt Engineering?
Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.
Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development
## A Guide To Using React’s useCallback() Hook
Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.
Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development
## MySQL vs. PostgreSQL: How Do They Compare?
A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.
Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development
## PostgreSQL LIKE Operator: A Detailed Guide
When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.
Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development
## How To Use DataProvider In TestNG With Examples
When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.
Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development
## How To Get Up And Running With Django Migrations: A Guide
Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.
Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development
## Writing A Parameterized Test In JUnit With Examples
A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.
Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development
## How To Use Assert In JUnit With Examples
The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.
Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development
## A Simple Guide To TypeORM: What It Is And How To Use It
Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.
Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development
## Using PreparedStatement in JDBC With Examples
In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.
Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development
## React vs React Native: The Differences Explained
React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.
Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development
## Logging in Django
The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.
Read the post](https://coderpad.io/blog/development/logging-in-django/)
## Hire with confidence.
See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.
[Request a demo](https://coderpad.io/sales/)