tsparticles

I've seen this Library being used before in the wild. It was previously used by an older version of Pterodactyl Panel, an open-source game server management panel. tsParticles was used on the login page, and I always thought it was neat and looked interesting.

Some good examples of places where this plugin can be used are single pages, like login pages, landing pages, portfolios/contact info like Link Tree, 404 pages, etc. It can also be used on pages that scroll and have more content on the site. But containing the particles to specific parts of a page wont be included in this guide. Here's a good example of that being done: example of particles being contained

The first step to using tsparticles, it to load JQuery, the plugin, and the JQuery wrapper. For you, just uncomment it out. But if you're not using the included zip, you can check out their GitHub repo on how to get it all started here: Installation steps and use the from jsDelivr installation method.

This is what your HTML should look like to properly load up tsparticles

Download the starter archive

To start, you'll need to add this div to your HTML file, it's a good idea to load it right after the body tag unless you're trying to do something a bit more advanced like trying to contain the particle effects using css, But that is beyond the scope of this tutorial.

uncomment this div or add it to your HTML file:

I have included the start inside the script.js file included in the archive.
When you open it up you'll be greeted with this:

The first thing to add here is:

and

add these lines to the top in between the curly braces where the comment "Adding Particles Here" is.
This will set the FPS of the particles to 120 and also set the particles to take up the fullscreen of the website.

Your code should look something like this now

After that, add this to the code right after the fullScreen property

then inside the particles property add these

Your code should look like this

]]

Now lets add some values to all these properties

lets first setup a particle shape, you can do this by adding this to the shape property

What it should look like

then set the color or the particles by adding this to the color property

Which will look like this

then lets add how much particles will generate using the number property with

Which will look like this

Now you will see that some triangles have generated on the website

But they are kind of small. Lets make them a bit bigger.

Size
We can do that by adding this to the size property

which will look like this

But what if you want them to be a random assortment of sizes? well set it like this

which will look like this now

Well now them all being upright looks kinda weird. Lets make them randomly rotated

You can do that by setting this inside the rotate property

Okay now it's looking a lot better! but maybe we should add some opacity to the particles!
Add to the opacity property this

This will only generate particles with an opacity between 0.5 and 1

Now the website is looking really awesome!

But lets add some moment to the particles, that way they will actually be particles.

on the move property add

to enable the particles to have movent

then set the speed of the particles

Now they are moving! But they are overlapping, lets make them bounce off each other

set the collision property to