How to Add A React Animated Background to Your Site Quickly

Welcome! In this guide, we're going to be taking a look at how to add a React animated background to your site or web project. Adding a particle animation to your site shouldn't be too complex, since there's an excellent library to help you out, which is the tsParticles library! I'll be showing you how to install and add this to your project, and then include a cool particle effect.

Here's the animated background we'll be creating, but with the tsParticles library, there are hundreds of effects to create and choose from. This is just one example of the type of background you could create:

Let's get started!

1. Install React tsParticles

Firstly, open your npm terminal and run the following command to install tsParticles for React:

2. Import

Next up, it's time to add the imports required:

3. Add TsParticles component

Initialize the library like so:

Then, just add the tsParticles component to your JSX (within the component you would like to include it in), like so:

Then, we just need to add some styling, so that the background takes up the height and width of the screen. If you'd like the background to be of a different size, you can adjust the values here:

#tsparticles {
  height: 100vh;
  width: 100vw;

And you're ready to go!

This is what it should look like:

You could create variations of this animation by updating the gradient background, or by adding waves to the end of the screen also. There are lots of different types of backgrounds you could create, so I'd definitely recommend experimenting with different gradient backdrops, particle shapes and more.

If you'd like to see more background effects, I'd recommend taking a look at our background pack library, which has over 30 animated backgrounds to choose from.

If you have any comments or suggestions to improve this article, be sure to contact me! Thanks very much for reading this guide, hopefully you've found it useful. These types of animated backgrounds look truly stunning, and would be great for so many use cases, from landing pages (could be used for Next.js also) to loading screens and so much more.

Get cool web dev resources in your inbox, weekly

One more step: just confirm your email and you'll then receive your first resource ✉️
Hm… Please enter a valid email address and try again
Free resources
Good stuff
Unsubscribe any time

Explore topics