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.
Read Also: 30 Cool CSS Animations You Have To See
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.
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
- 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.
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