The Particles.js Library


The particles.js library really only does one thing (and the name is a pretty big giveaway), but it does that one thing well. If you want to create a really awesome looking demo involving randomly roaming particles — with or without connecting lines — well, then look no further. This is absolutely the library for you.

The demo below gives you a good feel for what this library is all about:

See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.

If you look at the demo’s JavaScript, they’re setting a bunch of values in an object, but I’ve got a pro tip for you. The library comes with a bunch of defaults pre-set and the demo above is setting almost all of the variables to their defaults.

To get started SUPER simply, you’d only need this JS:


Yup. That’s it. Edit the demo above to read that, and it’ll still work. So, assuming you have this somewhere in your HTML:

<div id="particles-js"></div>

You’re up and running.

Now, if you’re looking for a lot of documentation, it doesn’t really exist yet. This is a fairly new project, so maybe it’s forthcoming (and maybe not).


Rob has been building websites for more than half of his life. You'd think that'd make all this less interesting, but nope! There's a lot of awesome stuff going on webwards, and canvas is definitely one of them.

You may also like...

3 Responses

  1. Randy says:

    Hi Im actually very curious how you got particles.js to display in the background and the body content of the page in the foreground?

  2. Super Star says:

    Hi! How add this script to wordpress background, like on yours site?

  1. December 1, 2014

    […] becoming really fond of these tiny canvas libraries that do one thing well. And SineWaves.js definitely falls into that […]

Leave a Reply

Your email address will not be published. Required fields are marked *