A lightweight JavaScript library for creating particles
Clone or download
Latest commit d01286d Mar 25, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo init particles.js 2.0.0 May 9, 2015
.gitignore fix triangle positioning Nov 19, 2014
LICENSE.md Update LICENSE.md May 9, 2015
README.md Update README.md Mar 25, 2017
bower.json Remove moot `version` property from bower.json Jun 11, 2015
package.json fix for release May 9, 2015
particles.js init particles.js 2.0.0 May 9, 2015
particles.min.js add particles.min.js 2.0.0 May 9, 2015

README.md

particles.js

A lightweight JavaScript library for creating particles.


Demo / Generator

particles.js 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

Packages install

npm

https://www.npmjs.com/package/particles.js

npm install particles.js
Bower
bower install particles.js --save
Rails Assets
gem 'rails-assets-particles.js'
Meteor

https://atmospherejs.com/newswim/particles

meteor add newswim:particles

Hosting / CDN

Please use this host or your own to load particles.js on your projects

http://www.jsdelivr.com/#!particles.js