particles.js alternatives and similar libraries

Based on the "Animations" category.
Alternatively, view particles.js alternatives based on common mentions on social networks and blogs.

animate.css

9.9 8.1 particles.js VS animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
anime.js

9.7 2.9 L3 particles.js VS anime.js

JavaScript animation engine

Embedded BI Dashboards- implement easily, customize with JavaScript SDK.

Save months of development time with Bold BI by Syncfusion. Add custom data sources. Tweak every detail. We help you customize every aspect. The embedded product will appear as your own.

Sponsored

velocity

8.8 0.1 L1 particles.js VS velocity

Accelerated JavaScript animation.
Mo.js

8.7 8.1 particles.js VS Mo.js

The motion graphics toolbelt for the web
GreenSock-JS

8.5 2.8 L1 particles.js VS GreenSock-JS

GreenSock's GSAP JavaScript animation library (including Draggable).
Effeckt.css

8.4 0.0 particles.js VS Effeckt.css

A Performant Transitions and Animations Library
jquery.transit

7.3 0.0 L2 particles.js VS jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
Dynamic.js

7.0 0.0 particles.js VS Dynamic.js

Javascript library to create physics-based animations
bounce.js

6.8 0.0 particles.js VS bounce.js

Create beautiful CSS3 powered animations in no time.
move.js

6.3 1.3 L4 particles.js VS move.js

CSS3 backed JavaScript animation framework
smoothState.js

6.1 0.2 particles.js VS smoothState.js

Unobtrusive page transitions with jQuery.
textillate

6.0 0.0 L5 particles.js VS textillate

A jquery plugin for CSS3 text animations.
animatable

5.4 0.1 particles.js VS animatable

One property, two values, endless possiblities
tsParticles

4.3 9.8 particles.js VS tsParticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
Odoo

2.8 0.0 L5 particles.js VS Odoo

Javascript and SVG odometer effect library with motion blur
motus

2.5 2.6 particles.js VS motus

Animation library that mimics CSS keyframes when scrolling.
particles-bg

2.3 3.8 particles.js VS particles-bg

React particles animation background component
Suave UI 0.3.1

2.1 0.0 particles.js VS Suave UI 0.3.1

UI Framework for AngularJS
shuffle-images

1.8 0.0 L4 particles.js VS shuffle-images

The Simplest Way to shuffle through images in a Creative Way
AniX

1.7 1.5 particles.js VS AniX

🐿 Super easy and lightweight(<3kb) JavaScript animation library
Scrawl-canvas Library

1.5 8.9 particles.js VS Scrawl-canvas Library

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!
TransitionEnd

1.1 5.4 L2 particles.js VS TransitionEnd

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.
the-cube

0.6 0.0 particles.js VS the-cube

The Cube is an experiment with CSS3 transitions.
js-loading-overlay

0.5 3.6 particles.js VS js-loading-overlay

Display loading overlay for your application easily and beautifully.

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.

Do you think we are missing an alternative of particles.js or a related project?

Add another 'Animations' Library

Popular Comparisons

README

particles.js

A lightweight JavaScript library for creating particles.

`Demo / Generator`

Configure, export, and share your particles.js configuration on CodePen: http://vincentgarreau.com/particles.js/

CodePen demo: http://codepen.io/VincentGarreau/pen/pnlso

`Usage`

Load particles.js and configure the particles:

index.html

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

<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

particles.json

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

`Options`

key	option type / notes	example
`particles.number.value`	number	`40`
`particles.number.density.enable`	boolean	`true` / `false`
`particles.number.density.value_area`	number	`800`
`particles.color.value`	HEX (string) RGB (object) HSL (object) array selection (HEX) random (string)	`"#b61924"` `{r:182, g:25, b:36}` `{h:356, s:76, l:41}` `["#b61924", "#333333", "999999"]` `"random"`
`particles.shape.type`	string array selection	`"circle"` `"edge"` `"triangle"` `"polygon"` `"star"` `"image"` `["circle", "triangle", "image"]`
`particles.shape.stroke.width`	number	`2`
`particles.shape.stroke.color`	HEX (string)	`"#222222"`
`particles.shape.polygon.nb_slides`	number	`5`
`particles.shape.image.src`	path link svg / png / gif / jpg	`"assets/img/yop.svg"` `"http://mywebsite.com/assets/img/yop.png"`
`particles.shape.image.width`	number (for aspect ratio)	`100`
`particles.shape.image.height`	number (for aspect ratio)	`100`
`particles.opacity.value`	number (0 to 1)	`0.75`
`particles.opacity.random`	boolean	`true` / `false`
`particles.opacity.anim.enable`	boolean	`true` / `false`
`particles.opacity.anim.speed`	number	`3`
`particles.opacity.anim.opacity_min`	number (0 to 1)	`0.25`
`particles.opacity.anim.sync`	boolean	`true` / `false`
`particles.size.value`	number	`20`
`particles.size.random`	boolean	`true` / `false`
`particles.size.anim.enable`	boolean	`true` / `false`
`particles.size.anim.speed`	number	`3`
`particles.size.anim.size_min`	number	`0.25`
`particles.size.anim.sync`	boolean	`true` / `false`
`particles.line_linked.enable`	boolean	`true` / `false`
`particles.line_linked.distance`	number	`150`
`particles.line_linked.color`	HEX (string)	`#ffffff`
`particles.line_linked.opacity`	number (0 to 1)	`0.5`
`particles.line_linked.width`	number	`1.5`
`particles.move.enable`	boolean	`true` / `false`
`particles.move.speed`	number	`4`
`particles.move.direction`	string	`"none"` `"top"` `"top-right"` `"right"` `"bottom-right"` `"bottom"` `"bottom-left"` `"left"` `"top-left"`
`particles.move.random`	boolean	`true` / `false`
`particles.move.straight`	boolean	`true` / `false`
`particles.move.out_mode`	string (out of canvas)	`"out"` `"bounce"`
`particles.move.bounce`	boolean (between particles)	`true` / `false`
`particles.move.attract.enable`	boolean	`true` / `false`
`particles.move.attract.rotateX`	number	`3000`
`particles.move.attract.rotateY`	number	`1500`
`interactivity.detect_on`	string	`"canvas", "window"`
`interactivity.events.onhover.enable`	boolean	`true` / `false`
`interactivity.events.onhover.mode`	string array selection	`"grab"` `"bubble"` `"repulse"` `["grab", "bubble"]`
`interactivity.events.onclick.enable`	boolean	`true` / `false`
`interactivity.events.onclick.mode`	string array selection	`"push"` `"remove"` `"bubble"` `"repulse"` `["push", "repulse"]`
`interactivity.events.resize`	boolean	`true` / `false`
`interactivity.events.modes.grab.distance`	number	`100`
`interactivity.events.modes.grab.line_linked.opacity`	number (0 to 1)	`0.75`
`interactivity.events.modes.bubble.distance`	number	`100`
`interactivity.events.modes.bubble.size`	number	`40`
`interactivity.events.modes.bubble.duration`	number (second)	`0.4`
`interactivity.events.modes.repulse.distance`	number	`200`
`interactivity.events.modes.repulse.duration`	number (second)	`1.2`
`interactivity.events.modes.push.particles_nb`	number	`4`
`interactivity.events.modes.push.particles_nb`	number	`4`
`retina_detect`	boolean	`true` / `false`