Skip to content
Get packs

particles.js

A small JavaScript library that draws animated particle backgrounds on a web page.

GitHub Download 2.0.0
Stars
30.2k
Forks
4.8k
Licence
MIT
Language
JavaScript
Last update
2.6 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

particles.js is a JavaScript library that draws a canvas animation of moving dots (particles) and optional connecting lines behind or on top of a web page. You place a div on the page, point the library at a JSON config file, and it renders the animation. The README also links to an online generator where you can tune the settings and export a config.

  • Add an animated particle background to a website's header section
  • Tune particle count, color, size, and movement through a JSON file
  • Make particles react to mouse clicks or hover using the built-in interaction modes
  • Use a custom image or SVG as the particle shape

Great for

  • Web developers who want an animated background for a landing page or hero section
  • Designers prototyping particle effects without writing animation code
  • Developers who want a simple JSON-configured effect instead of a larger framework
  • People adding a light visual effect to a static site

Not ideal for

  • Projects that need complex 3D or high-performance game-style graphics, since the README describes only a lightweight 2D canvas effect
  • Readers who need detailed docs for every option, because the README's options table is a summary and may not match all behavior
  • Teams needing a current, actively maintained dependency, since the last push shown is March 2024
Step-by-step guide: how to use particles.jsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install from npm

    npm install particles.js
  2. 2

    Run it

    • Add a div with id particles-js to your HTML page.
    • Include the particles.js script in the page.
    • Create a particles.json config file, or start from the example in the README.
    • Call particlesJS.load('particles-js', 'assets/particles.json') in your JavaScript.
    • Open the page in a browser to see the animation.
  3. 3

    Get the most out of it

    • Use the online generator linked in the README to design a config and export it.
    • Set interactivity.events.onhover.mode to 'grab' or 'bubble' to react to the mouse.
    • Use shape.type 'image' with your own SVG or PNG to make branded particles.
    • Set particles.color.value to 'random' or an array of colors for variety.
    • Use the optional callback in particlesJS.load to run code once the config has loaded.

Downloads

Source code (.zip)master branch · straight from GitHubRelease 2.0.0Release notes and sourceOfficial website & docsvincentgarreau.com/particles.js/

Strengths

  • Simple setup: one div, one script, and one load call
  • Configuration is plain JSON, so non-programmers can adjust it
  • Large community adoption, with over 30,000 GitHub stars and an MIT license

Trade-offs

  • The README's last visible update is 2024 and the project's activity level is unclear from the metadata
  • The README is short and some option names differ between the usage example and the options table (for example, nb_sides vs nb_slides), so you may need to check behavior yourself
  • Heavy particle counts or many effects may affect page performance on slower devices (general canvas trade-off, not stated in the README)

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.