xparticles.js v1.17.4

TypeScript Particles

tsParticles

API documentation and Development references here: https://particles.matteobruni.it/docs/

A lightweight TypeScript library for creating particles

Particles.js converted in TypeScript, improved with new cool features and various bugs fixed and it's currently under development!

Branch	Build Status
Master
Staging
Dev

Packages install

npm

npm install tsparticles

NuGet

Hosting / CDN

Please use this host or your own to load tsparticles on your projects

Usage

Load tsParticles and configure the particles:

index.html

<div id="tsparticles"></div>

<script src="tsparticles.min.js"></script>

app.js

// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected
/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */
tsParticles.loadJSON("tsparticles", "presets/default.json").then((container) => {
  console.log("callback - tsparticles config loaded");
}).catch((error) => {
  console.error(error);
});

//or

/* tsParticles.load(@dom-id, @options); */
tsParticles.load("tsparticles", { /* options here */ });

//or

/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */
tsParticles.loadFromArray("tsparticles", [ { /* options here */ }, { /* other options here */ }]); //random object
tsParticles.loadFromArray("tsparticles", [ { /* options here */ }, { /* other options here */ }], 1); //the second one
// Important! If the index is not in range 0...array.length, the index will be ignored.

// after initialization this can be used.

/* tsParticles.setOnClickHandler(@callback); */
/* this will be fired from all particles loaded */
tsParticles.setOnClickHandler((e) => { /* custom on click handler */ });

Demo / Generator

https://particles.matteobruni.it/

Characters as particles

Mouse hover connections

Polygon mask

Animated stars

Nyan cat flying on scrolling stars

Snow particles

COVID-19 SARS-CoV-2 particles

Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!

particles.json

{
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "number": {
      "value": 80,
      "limit": 200,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "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": {
      "connect": {
        "distance": 80,
        "lineLinked": {
          "opacity": 0.5
        },
        "radius": 60
      },
      "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,
  "fps_limit": 60,
  "polygon": {
    "debug": {
      "enable": true,
      "color": "#000000"
    },
    "type": "inside",
    "move": {
      "radius": 10
    },
    "url": "demo/svg/deer.svg"
  }
}

Options