Create Animated Background using React

Published by Pawan Sargar on

Create Beautiful Animated Background using React

Hello there, today’s post is quite small but fun. In this post, we’ll create a beautiful animated background using React and Particlejs.

Particlejs is a JavaScript library that helps us to create amazing animated particles in just a few lines of code. It’s also available as an NPM package that helps us to use this library directly in our React application.

This is what we’ll create,

Yeah, it’s simple and beautiful, you can use this in your portfolio or any suitable projects to make them attractive.

So, let’s get started!

Create React App –

If you’ve already used React then you know the drill, if you need help follow below steps.

  • Create a new folder, name it react-particle.
  • Open it inside any desired code editor and open a new terminal inside it.
  • Run code npx create-react-app .. The “dot” will install the React inside the folder.
  • That’s it.

Also check out,
How to create gradient animation in React

Install and Setup Particlejs –

Learn more about Particlejs at its official documentation.

Inside the terminal, paste the below code and install the package.

npm i react-tsparticles react

Now, let’s set up the package. Inside the app.js, paste the below code and run your React app using npm start.

import Particles from "react-tsparticles";

export default function App() {
  return (
    <div className="App">
      <Particles
        options={{
          background: {
            color: "#181A18"
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "canvas",
            events: {
              resize: true
            }
          },
          particles: {
            color: {
              value: "#ffffff"
            },
            number: {
              density: {
                enable: true,
                area: 1000
              },
              limit: 0,
              value: 300
            },
            opacity: {
              animation: {
                enable: true,
                minimumValue: 0.05,
                speed: 1,
                sync: false
              },
              random: {
                enable: true,
                minimumValue: 0.05
              },
              value: 1
            },
            shape: {
              type: "star"
            },
            size: {
              randmon: {
                enable: true,
                minimumValue: 0.5,
                value: 1
              }
            }
          }
        }}
      />
    </div>
  );
}

So, what are we doing here is, just passing the options inside the <Particles options={{}} /> tag. So, the options are just like simple CSS.

As you can see we’ve options like,

  • background – is key with a nested object which takes the color property.
  • fpsLimit you can define the FPS of your animation.
  • interactivity – you can define when the animation should run and can make it resizable.

Like that, there are more options you can define or change like shape, animation type, size of the particle, particle density, opacity, particle shape, etc.

So, make some interesting projects with it and let us know what you made in the comments below. I hope you enjoyed this post if you did, make sure to share it with your friends.

Also, make sure to subscribe the Coding Master official newsletter to never miss an update on latest post.

Pawan Sargar
Follow him
Spread the love
```html ```

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.