How to use Particle.js in JavaScript project ?

Last Updated : 27 Dec, 2023

Particles.js is a lightweight JavaScript library used for creating particles that look like the vertices of a polygon. We can also interact by hovering over the particles and creating more particles by clicking on particles. We can use this library in our portfolios which will attract many users and will look good on the website.

Installation process

Download the particles.js library from the following link, unzip it, and copy it into your project folder. https://vincentgarreau.com/particles.js/
Create two files index.html and style.css.
import particles.js and app.js files
Save the above code in respective files and run the index.html file.

Note: If you are using node app, then we can simply download particles.js node module by following command.
npm install particles.js

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>particles.js</title>
 
    <!-- Import style.css from root directory -->
    <link rel="stylesheet" href="./style.css" />
</head>
 
<body>
    <!-- Particles.js div -->
    <div id="particles-js">
        <div class="heading">
            <h1>GeeksforGeeks</h1>
            <h3>
                A computer Science 
                portal for geeks
            </h3>
        </div>
    </div>
 
    <!-- Import Particles.js and app.js files -->
    <script src=
        "particles.js-master/particles.js">
    </script>
    <script src=
        "/particles.js-master/demo/js/app.js">
    </script>
</body>
 
</html>

CSS

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
}
.heading h1 {
    color: limegreen;
    font-size: 70px;
}
.heading h3 {
    color: wheat;
    font-size: 20px;
}
#particles-js {
    background: black;
    height: 100vh;
}