Create Beautiful Animated Particles with This Javascript Library

By . in Toolkit. Updated on .

There are tons of free animation libraries all with different effects and specialties. But, the new Particles.js library goes a totally new direction by creating animated particles that move in real time all over the page.

This easy-to-use library is completely free and open-sourced on GitHub. It certainly won’t help you improve the UX of your site but it can help you add some interlaced particle effects to the background.

On the main page, you’ll find a live interactive demo where you can play around with the library’s features. This lets you adjust the particle size, speed, shape, color, position, you name it.

Read Also: 30 Cool CSS Animations You Have To See

Particles.js default animation

As this is such a detailed library, it does require a good understanding of JavaScript to get it working. That’s why this live demo is so valuable because it lets anyone play around with these settings to see what’s possible in JavaScript.

And, if you’re okay with exporting these graphics you can save the images directly from the web app demo page. You can export a raw PNG or even save all your custom settings into a JSON file which then imports directly into the Particles.js script.

By default, you can pick from a small handful of themes with different particle styles:

  • NASA stars
  • Bubbles
  • Snow
  • Nyan cat stars
  • Default geometric shapes

With these defaults, you can still edit all the main settings to refine colors, positions, speeds, and everything else.

Particles.js NASA theme

The best part of this whole library is the live customization feature right on the main page. If you want to get into the nitty-gritty details you really need to understand JavaScript and frontend coding.

But, even a beginner could work through the interface, pick the settings they want, and export everything as a JSON file.

A brilliant library for anyone looking to create dynamic particles on the web. To learn more, visit the GitHub repo and you can share your thoughts with the creator Vincent Garreauon on Twitter @VincentGarreau.

Read Also: 10 CSS3 Animation Tools You Should Bookmark

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail