Creating a Welcome Page Using React Particles.js

I always wondered how websites created those cool, moving, constellation-looking, backgrounds. After some digging, I discovered react-particles-js, a React-ified version of the lightweight tsParticles library used for creating particle effects. tsParticles is a TypeScript library based off of Particles.js. It provides the same functionalities as Particles.js but wraps them nicely into components for some of the most popular frameworks, including the <Particles /> component we’ll be utilizing in our React project below.

While these libraries won’t necessarily add functionality to your project, they will make it more visually appealing. Let’s create a welcome page using the <Particles /> component from react-particles-js, some basic css, and an SVG. The first thing we’ll need to do is create a new React app by runningnpx create-react-app particles-welcome-page in the command line, then cd into the newly created folder. Were you to use this as part of an actual application, you would want to have this welcome page in its own file, but for the purposes of this simple project we’ll be creating and defining our particle parameters in App.js. The next step is to npm install react-particles-js. This will give us access to the <Particles /> component as well as all the other features we’ll need to customize our particles. Behind the scenes, the <Particles /> component acts as an HTLM canvas element. If you don’t know what a canvas element is, it’s commonly used for animations, and allows you to create and manipulate graphics using Javascript. Finally, we’ll need to import Particles from ‘react-particles-js’ into our App.js file. Now we’re up and running!

import React from 'react';
import './App.css';
import Particles from 'react-particles-js';
import undraw_welcome_cats_thqn from './undraw_welcome_cats_thqn.svg';
function App() {
    return (
        <Particles />
    )
}
export default App

Particles.js is fairly straightforward to use. Now that we have our <Particles /> component on the page, let’s first give it an id of “particles-js” so we can add some CSS to it and make it full screen later on. Next we can pass it params, which accepts nested objects that follow JSON formatting. We’ll pass it a key of particles which is where we’ll be defining and customizing our layout. It’s important to note that params accepts another key of “interactivity” on the same level as “particles”. "interactivity” is passed another object with keys of “detect-on” and “events” which allows you to interact with the particles based on DOM events, such as“onclick”. Because we’re using particles.js as a background and will need to place a div over the entire canvas, we won’t be able to use interactivity in this project.

import React from 'react';
import './App.css';
import Particles from 'react-particles-js';
import undraw_welcome_cats_thqn from './undraw_welcome_cats_thqn.svg';
function App() {
    return (
        <Particles id="particles-js"
            params={{
                particles: {
                }    
            }}    
        />
    )
}
export default App

Let’s start setting up our particles. The first value we’ll configure is number, which will determine how many particles are on the screen at any one time. Number points to yet another object which has a key value. The value of value will determine how many particles are on our canvas. Let’s set it to 400. We’ll also include a key of density which we’ll enable to true and set value area to 1000. These are for responsiveness based on screen size. We can next pass a key of color which points to an object that has a key of value. Since we’re going to keep the circles white we’ll pass value a value of “#fff”. Speaking of circles, the default shape is set to circle, but you can pass particles another key of shape, which will allow you to customize the shape of your particles and even set them to be an image. Next we’ll set the opacity to a maximum value of 0.5, and enable animation. This will create a blinking effect, by changing the opacity of the circles between 0 and 0.5 randomly. Next is size which we’ll set to a maximum value of 7. We’ll set random and anim to true which will create different size circles and dynamically change their size as they move around the canvas. You can include a speed as well to customize how quickly the particles change size. To create those cool constellation type animations, you’ll want to set line_linked to true, but since that’s not the effect were going for here, we’ll set enable to false. Lastly we’ll set the move key to an object that contains a key of speed. Since we want a night sky kind of effect we’ll set this to 0.2. You can also completely disable movement if you want your particles to be inactive. That’s it for our <Particles /> component! The code is below:

import React from 'react';
import './App.css';
import Particles from 'react-particles-js';
import undraw_welcome_cats_thqn from './undraw_welcome_cats_thqn.svg';
function App() {
    return (
        <Particles id="particles-js"
            params={{
                particles: {
                    number: {
                        value: 400,
                        density: {
                            enable: true,
                            value_area: 1000
                        }
                    },
                    color: {
                        value: '#fff'
                    },
                    opacity: {
                        value: 0.5,
                        anim: {
                            enable: true
                        }
                    },
                    size: {
                        value: 7,
                        random: true,
                        anim: {
                            enable: true,
                            speed: 3
                        }
                    },
                    line_linked: {
                        enable: false
                    },
                    move: {
                        speed: 0.2
                    }
                 }    
            }}    
        />
    )
}
export default App

The full documentation for Particles.js can be found here and includes a list of all the customizable parameters.

Now that we have our background let’s add the rest of our content and style it. I’ve already found an SVG from unDraw and have created a file for it in thesrc folder and imported it as shown above. First let’s wrap a div around our <Particles /> component. Now we can add another div within the div we just created above our <Particles /> component. We’ll be importing some CSS from Animista to animate the entrance of our SVG. The animation we’re using has a class name of “scale-in-center” so we’ll give our inner div a className= “scale-in-center” as well as an id of “welcome” so that we can give it some additional styling. Inside this inner div we want to create an img tag and set the source equal to the SVG file. Now all that’s left is the CSS! I’ll provide the CSS below but won’t go through it step by step. Essentially the CSS is

1. Setting a background color for the <Particles /> component and making sure it’s full screen
2. Adding the animation for the SVG entrance as well as setting its size
3. Setting the inner div to act as a full screen overlay with the SVG centered within it

// App.js
import React from 'react';
import './App.css';
import Particles from 'react-particles-js';
import undraw_welcome_cats_thqn from './undraw_welcome_cats_thqn.svg';
function App() {
    return (
        <div>
            <div className="scale-in-center" id="welcome">
                <img src={undraw_welcome_cats_thqn} 
                alt="welcome cats" />
            </div>
            <Particles id="particles-js"
              ...
            />
        </div>
    );
}
export default App;
// App.css
body {
    margin: 0;
}
img {
    width: 500px;
}
#particles-js {
    background: radial-gradient(circle, rgba(193, 196, 209, 1) 0%,
    rgba(3, 3, 29, 1) 100%);
    height: 100vh;
}
#welcome {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
.scale-in-center {
    -webkit-animation: scale-in-center 1.5s cubic-bezier(0.250,
    0.460, 0.450, 0.940) 1s both;
    animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460,
    0.450, 0.940) 1s both;
}
@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

Here’s the final outcome! Creating with particles.js is simple and can really add to your projects. Play around with it and have some fun!