Key features options:

• 16 pre-defined presets (JSON).
• Circle, line, edge, triangle, polygon, star shapes.
• Or utilizing a customized picture.
• More transfer outmodes bounce, bounce-vertical, and bounce-horizontal.
• Bugs mounted.
• And extra customization choices.

How to make use of it:

1. Install & Download:

# NPM
$ npm install tsparticles --save

2. Load the tsparticles library from a CDN.

<script src="https://cdn.jsdelivr.net/npm/tsparticles/dist/tsparticles.min.js"></script>

3. Create a container the place you need to render the particles.

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

4. Initialize the tsparticles and cargo a preset of your alternative as follows:

tsParticles.loadJSON("tsparticles", "presets/bubble.json").then((container) => {
  console.log("callback");
}).catch((error) => {
  console.error(error);
});

5. You may create customized particles bypassing the next choices:

tsParticles.load("tsparticles", { 
  /**
   * Background options, these background options will be used to the canvas element, they are all CSS properties
   */
  background: {

    /**
     * The background color used by the canvas element, string or object
     * For Example: '#ffffff', 'rgb(255, 255, 255)', 'hsl(0, 100%, 100%)', 'random'
     */
    color: string or object,

    /**
     * The background opacity
     */
    opacity: number,

    /**
     * The background image used by the canvas element, its value will be used to set CSS property background-image
     */
    image: string,

    /**
     * The background position, it's used by the CSS property background-position
     */
    position: string,

    /**
     * The background position, it's used by the CSS property background-repeat
     */
    repeat: string,

    /**
     * The background size, it's used by the CSS property background-size
     */
    size: string,

  },

  /**
   * Background Mask options, what's behind the canvas will become hidden and particles will uncover it
   */
  backgroundMask: {

    /**
     * The color to use as a canvas background to cover
     */
    cover: {
      color: string or object,
      opacity: 0-1,
    },

    /**
     * This settings enables the cover and the particles behavior as unveiling elements
     */
    enable: boolean,

  },

  /**
   * Enables the retina detection, if disabled the ratio used by canvas will be always 1 and not the device setting.
   */
  detectRetina: boolean,

  /**
   * The Frame Per Second limit applied to all particles animations.
   * @deprecated use the new fpsLimit instead
   */
  fps_limit: number,

  /**
   * The F(rame)P(er)S(econd) limit applied to all particles animations.
   */
  fpsLimit: number,

  /**
   * The infection options
   */
  infection: {

    /**
     * if the infection can be cured, bringing back the particle to its normal state
    */
    cure: boolean,

    /**
     * the "symptoms" delay, after how many seconds the infected particle change its state
    */
    delay: 1,
    enable: boolean,

    /**
     * how many particles are infected at startup
    */
    infections: 1.
    stages: array   

  },

  /**
   * The particles interaction options
   */
  interactivity: {
    "detect_on": "canvas", // "canvas", "window","parent"
    "events": {
      "onhover": {
        "enable": false,
        /* 
          "grab"
          "bubble"
          "repulse"
          "connect"
          ["grab", "bubble"]
        */
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        /*
          "push"
          "remove"
          "bubble"
          "repulse"
          "pause"
          "emitter"
          "absorber"
        */
        "mode": "push"
      },
      "onDiv": {
        "enable": true,
        /*
          "bubble"
          "repulse"
        */
        "mode": "push",
        /*
          "circle"
          "rectangle"
        */
        "type": "rectangle",
        "ids": string or array
      },
      "resize": true
    },
    "modes": {
      "connect": {
        "distance": 400,
        "radius": 60,
        "lineLinked": {
          opacity: 0-1,
        }
      },
      "grab": {
        "distance": 400,
        "lineLinked": {
          "opacity": 0-1,
        }
      },
      "bubble": {
        "distance": 400,
        "duration": 2,
        "size": 40,
      },
      "push": {
        "quantity": 4
      },
      "remove": {
        "quantity": 4
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "emitter": object / array,
      "absorber": object / array
    }
  },

  /**
   * The particles options
   */
  particles: {
    "color": {
      "value": "#ffffff"
    },
    "links": {
      "distance": 150,
      "id": string,
      "color": string or object,
      "opacity": 0-1,
      "width": 1.5
    },
    "move": {
      "enable": true,
      "speed": 12,
      /*
        "none"
        "top"
        "top-right"
        "right"
        "bottom-right"
        "bottom"
        "bottom-left"
        "left"
        "top-left"
      */
      "direction": "none",
      "random": false,
      "straight": false,
      /*
        "out"
        "destroy"
        "bounce"
        "bounce-vertical"
        "bounce-horizontal"
      */
      "out_mode": "out",
      "collisions": false,
      "trail": {
        "enable": true,
        "length": 10,
        "fillColor": object
      }
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
    "rotate": {
      "value": 80,
      "random": true,
      "direction": "clockwise or counterclockwise"
      "animation": {
        "enable": true,
        "speed": 5,
        "sync": true
      }
    },
    "number": {
      "value": 80,
      "limit": 200,
      "density": {
        "enable": true,
        "area": 800
      }
    },
    "opacity": {
      "value": 0.5,
      "random": {
        "enable": true,
        "minimumValue": 10
      },
      "animation": {
        "enable": false,
        "speed": 1,
        "minimumValue": 0.1,
        "sync": false
      }
    },
    "shape": {
      /* "circle"
      "line"
      "edge"
      "triangle"
      "polygon"
      "star"
      "image"
      ["circle", "triangle", "image"]
      */
      "type": "circle", 
      "particles": {
        // Particles options here
      },
      "fill": true / false,
      "close": true / false,
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100,
        "replaceColor": false
      },
      polygon: {
        sides: 5
      },
      star: {
        sides: 5, 
        inset: 2
      },
      character: {
        value: "*",
        font: "Verdana",
        style: "",
        weight: ""
      }
    },
    "size": {
      "value": 10,
      "random": {
        "enable": true,
        "minimumValue": 10
      },
      "animation": {
        "enable": false,
        "speed": 80,
        "minimumValue": 0.1,
        "sync": false
      }
    },
    "stroke": {
      "width": 2,
      "color": object
    },
    "twinkle": {
      "particles": {
        "enable": false,
        "color": object,
        "frequency": 0-1,
        "opacity": 0-1,
      },
      "lines": object
    },
  },

  /**
   * Enables or disabled the animation on window blur
   */
  pauseOnBlur: boolean,

  /**
   * This property will be used to add specified presets to the options
   */
  preset: string | string[],

});

6. Load particles from an array.

tsParticles.loadFromArray("tsparticles", [{ /* options here */ }, { /* other options here */ }]);

7. Fire an event when all particles are loaded.

tsParticles.setOnClickHandler((e) => { 
  /* custom on click handler */ 
});

8. Control the animations.

const particles = tsParticles.domItem(0);
// play the animations
particles.play();
// pause the animations
particles.pause();

Lightweight JS Library For Creating Interactive Particles, How to Use Particle JS, How to Add Particle JS to Website, Particle Slider Free Download

See Demo And Download