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. …


Javascript can do a lot of cool things. The introduction of the canvas element in HTML5 expanded what we can do with Javascript even further. So what is a canvas element? It’s an element that acts as a container for javascript drawn graphics. Although we won’t demonstrate this here, you can take your animations a step further by interacting with them using event listeners and handlers. We’ll instead make a simple animation with some different size circles bouncing around the screen.

First let’s create and set up our canvas element in our index.html file:

index.html
....

<body>
<canvas></canvas>
<script src="canvas.js"></script> …

Rachael Ghorbani

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store