tsparticles 2.0.0-beta.2 → 2.0.0-beta.3

package/tsparticles.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v2.0.0-beta.2
+ * v2.0.0-beta.3
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -20,7 +20,7 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 737:
+/***/ 967:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 
@@ -29,10 +29,356 @@ __webpack_require__.d(__webpack_exports__, {
   "R": () => (/* binding */ loadFull)
 });
 
-// EXTERNAL MODULE: ../slim/dist/index.js + 65 modules
-var dist = __webpack_require__(8996);
+// EXTERNAL MODULE: ../slim/dist/index.js + 68 modules
+var dist = __webpack_require__(7330);
 // EXTERNAL MODULE: ../../engine/dist/index.js
 var engine_dist = __webpack_require__(9685);
+;// CONCATENATED MODULE: ../../updaters/tilt/dist/TiltUpdater.js
+
+
+function updateTilt(particle, delta) {
+  var _a;
+
+  if (!particle.tilt) {
+    return;
+  }
+
+  const tilt = particle.options.tilt;
+  const tiltAnimation = tilt.animation;
+  const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+  const max = 2 * Math.PI;
+
+  if (!tiltAnimation.enable) {
+    return;
+  }
+
+  switch (particle.tilt.status) {
+    case engine_dist.AnimationStatus.increasing:
+      particle.tilt.value += speed;
+
+      if (particle.tilt.value > max) {
+        particle.tilt.value -= max;
+      }
+
+      break;
+
+    case engine_dist.AnimationStatus.decreasing:
+    default:
+      particle.tilt.value -= speed;
+
+      if (particle.tilt.value < 0) {
+        particle.tilt.value += max;
+      }
+
+      break;
+  }
+}
+
+class TiltUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const tiltOptions = particle.options.tilt;
+    particle.tilt = {
+      enable: tiltOptions.enable,
+      value: (0,engine_dist.getRangeValue)(tiltOptions.value) * Math.PI / 180,
+      sinDirection: Math.random() >= 0.5 ? 1 : -1,
+      cosDirection: Math.random() >= 0.5 ? 1 : -1
+    };
+    let tiltDirection = tiltOptions.direction;
+
+    if (tiltDirection === engine_dist.TiltDirection.random) {
+      const index = Math.floor(Math.random() * 2);
+      tiltDirection = index > 0 ? engine_dist.TiltDirection.counterClockwise : engine_dist.TiltDirection.clockwise;
+    }
+
+    switch (tiltDirection) {
+      case engine_dist.TiltDirection.counterClockwise:
+      case "counterClockwise":
+        particle.tilt.status = engine_dist.AnimationStatus.decreasing;
+        break;
+
+      case engine_dist.TiltDirection.clockwise:
+        particle.tilt.status = engine_dist.AnimationStatus.increasing;
+        break;
+    }
+
+    const tiltAnimation = particle.options.tilt.animation;
+
+    if (tiltAnimation.enable) {
+      particle.tilt.velocity = tiltAnimation.speed / 360 * this.container.retina.reduceFactor;
+
+      if (!tiltAnimation.sync) {
+        particle.tilt.velocity *= Math.random();
+      }
+    }
+  }
+
+  isEnabled(particle) {
+    const tilt = particle.options.tilt;
+    const tiltAnimation = tilt.animation;
+    return !particle.destroyed && !particle.spawning && tiltAnimation.enable;
+  }
+
+  update(particle, delta) {
+    if (!this.isEnabled(particle)) {
+      return;
+    }
+
+    updateTilt(particle, delta);
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/tilt/dist/index.js
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+
+function loadTiltUpdater(tsParticles) {
+  return __awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("tilt", container => new TiltUpdater(container));
+  });
+}
+;// CONCATENATED MODULE: ../../updaters/roll/dist/RollUpdater.js
+
+
+function updateRoll(particle, delta) {
+  const roll = particle.options.roll;
+
+  if (!particle.roll || !roll.enable) {
+    return;
+  }
+
+  const speed = particle.roll.speed * delta.factor;
+  const max = 2 * Math.PI;
+  particle.roll.angle += speed;
+
+  if (particle.roll.angle > max) {
+    particle.roll.angle -= max;
+  }
+}
+
+class RollUpdater {
+  init(particle) {
+    const rollOpt = particle.options.roll;
+
+    if (rollOpt.enable) {
+      particle.roll = {
+        angle: Math.random() * Math.PI * 2,
+        speed: (0,engine_dist.getRangeValue)(rollOpt.speed) / 360
+      };
+
+      if (rollOpt.backColor) {
+        particle.backColor = (0,engine_dist.colorToHsl)(rollOpt.backColor);
+      } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+        const alterType = Math.random() >= 0.5 ? engine_dist.AlterType.darken : engine_dist.AlterType.enlighten;
+        particle.roll.alter = {
+          type: alterType,
+          value: alterType === engine_dist.AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value
+        };
+      } else if (rollOpt.darken.enable) {
+        particle.roll.alter = {
+          type: engine_dist.AlterType.darken,
+          value: rollOpt.darken.value
+        };
+      } else if (rollOpt.enlighten.enable) {
+        particle.roll.alter = {
+          type: engine_dist.AlterType.enlighten,
+          value: rollOpt.enlighten.value
+        };
+      }
+    } else {
+      particle.roll = {
+        angle: 0,
+        speed: 0
+      };
+    }
+  }
+
+  isEnabled(particle) {
+    const roll = particle.options.roll;
+    return !particle.destroyed && !particle.spawning && roll.enable;
+  }
+
+  update(particle, delta) {
+    if (!this.isEnabled(particle)) {
+      return;
+    }
+
+    updateRoll(particle, delta);
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/roll/dist/index.js
+var dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+
+function loadRollUpdater(tsParticles) {
+  return dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("roll", () => new RollUpdater());
+  });
+}
+;// CONCATENATED MODULE: ../../updaters/wobble/dist/WobbleUpdater.js
+
+
+function updateWobble(particle, delta) {
+  var _a;
+
+  const wobble = particle.options.wobble;
+
+  if (!wobble.enable || !particle.wobble) {
+    return;
+  }
+
+  const speed = particle.wobble.speed * delta.factor;
+  const distance = ((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor / (1000 / 60);
+  const max = 2 * Math.PI;
+  particle.wobble.angle += speed;
+
+  if (particle.wobble.angle > max) {
+    particle.wobble.angle -= max;
+  }
+
+  particle.position.x += distance * Math.cos(particle.wobble.angle);
+  particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
+}
+
+class WobbleUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const wobbleOpt = particle.options.wobble;
+
+    if (wobbleOpt.enable) {
+      particle.wobble = {
+        angle: Math.random() * Math.PI * 2,
+        speed: (0,engine_dist.getRangeValue)(wobbleOpt.speed) / 360
+      };
+    } else {
+      particle.wobble = {
+        angle: 0,
+        speed: 0
+      };
+    }
+
+    particle.retina.wobbleDistance = (0,engine_dist.getRangeValue)(wobbleOpt.distance) * this.container.retina.pixelRatio;
+  }
+
+  isEnabled(particle) {
+    return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
+  }
+
+  update(particle, delta) {
+    if (!this.isEnabled(particle)) {
+      return;
+    }
+
+    updateWobble(particle, delta);
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/wobble/dist/index.js
+var wobble_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+
+function loadWobbleUpdater(tsParticles) {
+  return wobble_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("wobble", container => new WobbleUpdater(container));
+  });
+}
 ;// CONCATENATED MODULE: ../../interactions/external/trail/dist/TrailMaker.js
 
 class TrailMaker extends engine_dist.ExternalInteractorBase {
@@ -97,17 +443,50 @@ class TrailMaker extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/trail/dist/index.js
+var trail_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalTrailInteraction(tsParticles) {
-  tsParticles.addInteractor("externalTrail", container => new TrailMaker(container));
+  return trail_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalTrail", container => new TrailMaker(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/AbsorberInstance.js
 
 
-
 class AbsorberInstance {
   constructor(absorbers, container, options, position) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
 
     this.absorbers = absorbers;
     this.container = container;
@@ -119,16 +498,22 @@ class AbsorberInstance {
     this.size = (0,engine_dist.getRangeValue)(options.size.value) * container.retina.pixelRatio;
     this.mass = this.size * options.size.density * container.retina.reduceFactor;
     const limit = options.size.limit;
-    this.limit = limit !== undefined ? limit * container.retina.pixelRatio * container.retina.reduceFactor : limit;
+    this.limit = typeof limit === "number" ? {
+      radius: limit * container.retina.pixelRatio * container.retina.reduceFactor,
+      mass: 0
+    } : {
+      radius: ((_a = limit === null || limit === void 0 ? void 0 : limit.radius) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio * container.retina.reduceFactor,
+      mass: (_b = limit === null || limit === void 0 ? void 0 : limit.mass) !== null && _b !== void 0 ? _b : 0
+    };
     const color = typeof options.color === "string" ? {
       value: options.color
     } : options.color;
-    this.color = (_a = (0,engine_dist.colorToRgb)(color)) !== null && _a !== void 0 ? _a : {
+    this.color = (_c = (0,engine_dist.colorToRgb)(color)) !== null && _c !== void 0 ? _c : {
       b: 0,
       g: 0,
       r: 0
     };
-    this.position = (_c = (_b = this.initialPosition) === null || _b === void 0 ? void 0 : _b.copy()) !== null && _c !== void 0 ? _c : this.calcPosition();
+    this.position = (_e = (_d = this.initialPosition) === null || _d === void 0 ? void 0 : _d.copy()) !== null && _e !== void 0 ? _e : this.calcPosition();
   }
 
   attract(particle) {
@@ -181,11 +566,13 @@ class AbsorberInstance {
         this.updateParticlePosition(particle, v);
       }
 
-      if (this.limit === undefined || this.size < this.limit) {
+      if (this.limit.radius <= 0 || this.size < this.limit.radius) {
         this.size += sizeFactor;
       }
 
-      this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
+      if (this.limit.mass <= 0 || this.mass < this.limit.mass) {
+        this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
+      }
     } else {
       this.updateParticlePosition(particle, v);
     }
@@ -193,7 +580,7 @@ class AbsorberInstance {
 
   resize() {
     const initialPosition = this.initialPosition;
-    this.position = initialPosition && (0,engine_dist.isPointInside)(initialPosition, this.container.canvas.size) ? initialPosition : this.calcPosition();
+    this.position = initialPosition && (0,engine_dist.isPointInside)(initialPosition, this.container.canvas.size, engine_dist.Vector.origin) ? initialPosition : this.calcPosition();
   }
 
   draw(context) {
@@ -224,9 +611,10 @@ class AbsorberInstance {
     const canvasSize = container.canvas.size;
 
     if (particle.needsNewPosition) {
-      const pSize = particle.getRadius();
-      particle.position.x = (canvasSize.width - pSize * 2) * (1 + (Math.random() * 0.2 - 0.1)) + pSize;
-      particle.position.y = (canvasSize.height - pSize * 2) * (1 + (Math.random() * 0.2 - 0.1)) + pSize;
+      particle.position.x = Math.floor(Math.random() * canvasSize.width);
+      particle.position.y = Math.floor(Math.random() * canvasSize.height);
+      particle.velocity.setTo(particle.initialVelocity);
+      particle.absorberOrbit = undefined;
       particle.needsNewPosition = false;
     }
 
@@ -270,14 +658,38 @@ class AbsorberInstance {
 }
 // EXTERNAL MODULE: ../../engine/dist/Options/Classes/ValueWithRandom.js
 var ValueWithRandom = __webpack_require__(5572);
+;// CONCATENATED MODULE: ../../plugins/absorbers/dist/Options/Classes/AbsorberSizeLimit.js
+class AbsorberSizeLimit {
+  constructor() {
+    this.radius = 0;
+    this.mass = 0;
+  }
+
+  load(data) {
+    if (!data) {
+      return;
+    }
+
+    if (data.mass !== undefined) {
+      this.mass = data.mass;
+    }
+
+    if (data.radius !== undefined) {
+      this.radius = data.radius;
+    }
+  }
+
+}
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/Options/Classes/AbsorberSize.js
 
+
 class AbsorberSize extends ValueWithRandom.ValueWithRandom {
   constructor() {
     super();
     this.density = 5;
     this.random.minimumValue = 1;
     this.value = 50;
+    this.limit = new AbsorberSizeLimit();
   }
 
   load(data) {
@@ -291,12 +703,10 @@ class AbsorberSize extends ValueWithRandom.ValueWithRandom {
       this.density = data.density;
     }
 
-    if (data.limit !== undefined) {
-      this.limit = data.limit;
-    }
-
-    if (data.limit !== undefined) {
-      this.limit = data.limit;
+    if (typeof data.limit === "number") {
+      this.limit.radius = data.limit;
+    } else {
+      this.limit.load(data.limit);
     }
   }
 
@@ -499,6 +909,38 @@ class Absorbers {
 
 }
 ;// CONCATENATED MODULE: ../../plugins/absorbers/dist/index.js
+var absorbers_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 
@@ -587,8 +1029,10 @@ class Index {
 }
 
 function loadAbsorbersPlugin(tsParticles) {
-  const plugin = new Index();
-  tsParticles.addPlugin(plugin);
+  return absorbers_dist_awaiter(this, void 0, void 0, function* () {
+    const plugin = new Index();
+    yield tsParticles.addPlugin(plugin);
+  });
 }
 ;// CONCATENATED MODULE: ../../plugins/emitters/dist/Options/Classes/EmitterSize.js
 
@@ -655,7 +1099,6 @@ var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded;
 
 
 
-
 class EmitterInstance {
   constructor(emitters, container, emitterOptions, position) {
     var _a, _b, _c, _d, _e, _f;
@@ -706,6 +1149,12 @@ class EmitterInstance {
     })();
     this.lifeCount = (_f = this.emitterOptions.life.count) !== null && _f !== void 0 ? _f : -1;
     this.immortal = this.lifeCount <= 0;
+    engine_dist.tsParticles.dispatchEvent("emitterCreated", {
+      container,
+      data: {
+        emitter: this
+      }
+    });
     this.play();
   }
 
@@ -748,7 +1197,7 @@ class EmitterInstance {
 
   resize() {
     const initialPosition = this.initialPosition;
-    this.position = initialPosition && (0,engine_dist.isPointInside)(initialPosition, this.container.canvas.size) ? initialPosition : this.calcPosition();
+    this.position = initialPosition && (0,engine_dist.isPointInside)(initialPosition, this.container.canvas.size, engine_dist.Vector.origin) ? initialPosition : this.calcPosition();
   }
 
   update(delta) {
@@ -801,6 +1250,9 @@ class EmitterInstance {
       this.currentSpawnDelay += delta.value;
 
       if (this.currentSpawnDelay >= this.spawnDelay) {
+        engine_dist.tsParticles.dispatchEvent("emitterPlay", {
+          container: this.container
+        });
         this.play();
         this.currentSpawnDelay -= this.currentSpawnDelay;
         delete this.spawnDelay;
@@ -833,6 +1285,12 @@ class EmitterInstance {
 
   destroy() {
     this.emitters.removeEmitter(this);
+    engine_dist.tsParticles.dispatchEvent("emitterDestroyed", {
+      container: this.container,
+      data: {
+        emitter: this
+      }
+    });
   }
 
   calcPosition() {
@@ -1292,6 +1750,38 @@ class SquareShape {
 
 }
 ;// CONCATENATED MODULE: ../../plugins/emitters/dist/index.js
+var emitters_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 
@@ -1371,17 +1861,19 @@ class EmittersPlugin {
 }
 
 function loadEmittersPlugin(tsParticles) {
-  const plugin = new EmittersPlugin();
-  tsParticles.addPlugin(plugin);
+  return emitters_dist_awaiter(this, void 0, void 0, function* () {
+    const plugin = new EmittersPlugin();
+    yield tsParticles.addPlugin(plugin);
 
-  if (!tsParticles.addEmitterShape) {
-    tsParticles.addEmitterShape = (name, shape) => {
-      ShapeManager.addShape(name, shape);
-    };
-  }
+    if (!tsParticles.addEmitterShape) {
+      tsParticles.addEmitterShape = (name, shape) => {
+        ShapeManager.addShape(name, shape);
+      };
+    }
 
-  tsParticles.addEmitterShape(EmitterShapeType.circle, new CircleShape());
-  tsParticles.addEmitterShape(EmitterShapeType.square, new SquareShape());
+    tsParticles.addEmitterShape(EmitterShapeType.circle, new CircleShape());
+    tsParticles.addEmitterShape(EmitterShapeType.square, new SquareShape());
+  });
 }
 
 ;// CONCATENATED MODULE: ../../plugins/polygonMask/dist/Enums/InlineArrangement.js
@@ -1776,7 +2268,7 @@ function segmentBounce(start, stop, velocity) {
   velocity.y -= d * wallNormalY;
 }
 ;// CONCATENATED MODULE: ../../plugins/polygonMask/dist/PolygonMaskInstance.js
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var PolygonMaskInstance_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
@@ -1813,6 +2305,7 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _argument
 
 
 
+
 class PolygonMaskInstance {
   constructor(container) {
     this.container = container;
@@ -1826,7 +2319,7 @@ class PolygonMaskInstance {
   }
 
   initAsync(options) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
       this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
       const polygonMaskOptions = this.options;
       this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
@@ -1849,7 +2342,7 @@ class PolygonMaskInstance {
       clearTimeout(this.redrawTimeout);
     }
 
-    this.redrawTimeout = window.setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+    this.redrawTimeout = window.setTimeout(() => PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
       yield this.initRawData(true);
       container.particles.redraw();
     }), 250);
@@ -1992,7 +2485,7 @@ class PolygonMaskInstance {
     }
 
     if (!this.raw) {
-      throw new Error(engine_dist.Constants.noPolygonFound);
+      throw new Error(engine_dist.noPolygonFound);
     }
 
     const canvasSize = container.canvas.size;
@@ -2062,7 +2555,7 @@ class PolygonMaskInstance {
   }
 
   downloadSvgPath(svgUrl, force) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
       const options = this.options;
       const url = svgUrl || options.url;
       const forceDownload = force !== null && force !== void 0 ? force : false;
@@ -2134,7 +2627,7 @@ class PolygonMaskInstance {
 
   getRandomPoint() {
     if (!this.raw || !this.raw.length) {
-      throw new Error(engine_dist.Constants.noPolygonDataLoaded);
+      throw new Error(engine_dist.noPolygonDataLoaded);
     }
 
     const coords = (0,engine_dist.itemFromArray)(this.raw);
@@ -2150,7 +2643,7 @@ class PolygonMaskInstance {
     const options = this.options;
 
     if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
-      throw new Error(engine_dist.Constants.noPolygonDataLoaded);
+      throw new Error(engine_dist.noPolygonDataLoaded);
     }
 
     const path = (0,engine_dist.itemFromArray)(this.paths);
@@ -2167,7 +2660,7 @@ class PolygonMaskInstance {
 
     const options = this.container.actualOptions;
     const polygonMaskOptions = this.options;
-    if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) throw new Error(engine_dist.Constants.noPolygonDataLoaded);
+    if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) throw new Error(engine_dist.noPolygonDataLoaded);
     let offset = 0;
     let point;
     const totalLength = this.paths.reduce((tot, path) => tot + path.length, 0);
@@ -2192,7 +2685,7 @@ class PolygonMaskInstance {
 
   getPointByIndex(index) {
     if (!this.raw || !this.raw.length) {
-      throw new Error(engine_dist.Constants.noPolygonDataLoaded);
+      throw new Error(engine_dist.noPolygonDataLoaded);
     }
 
     const coords = this.raw[index % this.raw.length];
@@ -2248,7 +2741,7 @@ class PolygonMaskInstance {
   }
 
   initRawData(force) {
-    return __awaiter(this, void 0, void 0, function* () {
+    return PolygonMaskInstance_awaiter(this, void 0, void 0, function* () {
       const options = this.options;
 
       if (options.url) {
@@ -2269,12 +2762,15 @@ class PolygonMaskInstance {
       }
 
       this.createPath2D();
+      engine_dist.tsParticles.dispatchEvent("polygonMaskLoaded", {
+        container: this.container
+      });
     });
   }
 
 }
 ;// CONCATENATED MODULE: ../../plugins/polygonMask/dist/index.js
-var dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var polygonMask_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
@@ -2344,33 +2840,73 @@ class Plugin {
 }
 
 function loadPolygonMaskPlugin(tsParticles) {
-  return dist_awaiter(this, void 0, void 0, function* () {
+  return polygonMask_dist_awaiter(this, void 0, void 0, function* () {
     if (!(0,engine_dist.isSsr)() && !window.SVGPathSeg) {
       yield __webpack_require__.e(/* import() */ 107).then(__webpack_require__.t.bind(__webpack_require__, 9107, 23));
     }
 
     const plugin = new Plugin();
-    tsParticles.addPlugin(plugin);
+    yield tsParticles.addPlugin(plugin);
   });
 }
 
 ;// CONCATENATED MODULE: ./dist/index.js
+var dist_awaiter_0 = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+
+
+
 
 
 
 
 
 function loadFull(tsParticles) {
-  (0,dist/* loadSlim */.S)(tsParticles);
-  loadExternalTrailInteraction(tsParticles);
-  loadAbsorbersPlugin(tsParticles);
-  loadEmittersPlugin(tsParticles);
-  loadPolygonMaskPlugin(tsParticles);
+  return dist_awaiter_0(this, void 0, void 0, function* () {
+    yield (0,dist/* loadSlim */.S)(tsParticles);
+    yield loadTiltUpdater(tsParticles);
+    yield loadRollUpdater(tsParticles);
+    yield loadWobbleUpdater(tsParticles);
+    yield loadExternalTrailInteraction(tsParticles);
+    yield loadAbsorbersPlugin(tsParticles);
+    yield loadEmittersPlugin(tsParticles);
+    yield loadPolygonMaskPlugin(tsParticles);
+  });
 }
 
 /***/ }),
 
-/***/ 8996:
+/***/ 7330:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 
@@ -2431,7 +2967,7 @@ class Attractor extends engine_dist.ExternalInteractorBase {
   interact() {
     const container = this.container,
           options = container.actualOptions,
-          mouseMoveStatus = container.interactivity.status === engine_dist.Constants.mouseMoveEvent,
+          mouseMoveStatus = container.interactivity.status === engine_dist.mouseMoveEvent,
           events = options.interactivity.events,
           hoverEnabled = events.onHover.enable,
           hoverMode = events.onHover.mode,
@@ -2508,9 +3044,43 @@ class Attractor extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/attract/dist/index.js
+var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalAttractInteraction(tsParticles) {
-  tsParticles.addInteractor("externalAttract", container => new Attractor(container));
+  return __awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalAttract", container => new Attractor(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/bounce/dist/Bouncer.js
 
@@ -2532,7 +3102,7 @@ class Bouncer extends engine_dist.ExternalInteractorBase {
     const container = this.container,
           options = container.actualOptions,
           events = options.interactivity.events,
-          mouseMoveStatus = container.interactivity.status === engine_dist.Constants.mouseMoveEvent,
+          mouseMoveStatus = container.interactivity.status === engine_dist.mouseMoveEvent,
           hoverEnabled = events.onHover.enable,
           hoverMode = events.onHover.mode,
           divs = events.onDiv;
@@ -2583,26 +3153,60 @@ class Bouncer extends engine_dist.ExternalInteractorBase {
   processBounce(position, radius, area) {
     const query = this.container.particles.quadTree.query(area);
 
-    for (const particle of query) {
-      if (area instanceof engine_dist.Circle) {
-        (0,engine_dist.circleBounce)((0,engine_dist.circleBounceDataFromParticle)(particle), {
-          position,
-          radius,
-          mass: Math.pow(radius, 2) * Math.PI / 2,
-          velocity: engine_dist.Vector.origin,
-          factor: engine_dist.Vector.origin
-        });
-      } else if (area instanceof engine_dist.Rectangle) {
-        (0,engine_dist.rectBounce)(particle, (0,engine_dist.calculateBounds)(position, radius));
+    for (const particle of query) {
+      if (area instanceof engine_dist.Circle) {
+        (0,engine_dist.circleBounce)((0,engine_dist.circleBounceDataFromParticle)(particle), {
+          position,
+          radius,
+          mass: Math.pow(radius, 2) * Math.PI / 2,
+          velocity: engine_dist.Vector.origin,
+          factor: engine_dist.Vector.origin
+        });
+      } else if (area instanceof engine_dist.Rectangle) {
+        (0,engine_dist.rectBounce)(particle, (0,engine_dist.calculateBounds)(position, radius));
+      }
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ../../interactions/external/bounce/dist/index.js
+var dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
       }
     }
-  }
 
-}
-;// CONCATENATED MODULE: ../../interactions/external/bounce/dist/index.js
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalBounceInteraction(tsParticles) {
-  tsParticles.addInteractor("externalBounce", container => new Bouncer(container));
+  return dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalBounce", container => new Bouncer(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/bubble/dist/ProcessBubbleType.js
 var ProcessBubbleType;
@@ -2870,7 +3474,7 @@ class Bubbler extends engine_dist.ExternalInteractorBase {
             ratio = 1 - pointDistance / distance;
 
       if (pointDistance <= distance) {
-        if (ratio >= 0 && container.interactivity.status === engine_dist.Constants.mouseMoveEvent) {
+        if (ratio >= 0 && container.interactivity.status === engine_dist.mouseMoveEvent) {
           this.hoverBubbleSize(particle, ratio);
           this.hoverBubbleOpacity(particle, ratio);
           this.hoverBubbleColor(particle, ratio);
@@ -2879,7 +3483,7 @@ class Bubbler extends engine_dist.ExternalInteractorBase {
         this.reset(particle);
       }
 
-      if (container.interactivity.status === engine_dist.Constants.mouseLeaveEvent) {
+      if (container.interactivity.status === engine_dist.mouseLeaveEvent) {
         this.reset(particle);
       }
     }
@@ -2952,9 +3556,43 @@ class Bubbler extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/bubble/dist/index.js
+var bubble_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalBubbleInteraction(tsParticles) {
-  tsParticles.addInteractor("externalBubble", container => new Bubbler(container));
+  return bubble_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalBubble", container => new Bubbler(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/connect/dist/Connector.js
 
@@ -3013,9 +3651,43 @@ class Connector extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/connect/dist/index.js
+var connect_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalConnectInteraction(tsParticles) {
-  tsParticles.addInteractor("externalConnect", container => new Connector(container));
+  return connect_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalConnect", container => new Connector(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/Grabber.js
 
@@ -3040,7 +3712,7 @@ class Grabber extends engine_dist.ExternalInteractorBase {
           options = container.actualOptions,
           interactivity = options.interactivity;
 
-    if (interactivity.events.onHover.enable && container.interactivity.status === engine_dist.Constants.mouseMoveEvent) {
+    if (interactivity.events.onHover.enable && container.interactivity.status === engine_dist.mouseMoveEvent) {
       const mousePos = container.interactivity.mouse.position;
 
       if (!mousePos) {
@@ -3084,9 +3756,43 @@ class Grabber extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/index.js
+var grab_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalGrabInteraction(tsParticles) {
-  tsParticles.addInteractor("externalGrab", container => new Grabber(container));
+  return grab_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalGrab", container => new Grabber(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/pause/dist/Pauser.js
 
@@ -3248,7 +3954,7 @@ class Repulser extends engine_dist.ExternalInteractorBase {
   interact() {
     const container = this.container,
           options = container.actualOptions,
-          mouseMoveStatus = container.interactivity.status === engine_dist.Constants.mouseMoveEvent,
+          mouseMoveStatus = container.interactivity.status === engine_dist.mouseMoveEvent,
           events = options.interactivity.events,
           hoverEnabled = events.onHover.enable,
           hoverMode = events.onHover.mode,
@@ -3375,9 +4081,43 @@ class Repulser extends engine_dist.ExternalInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/external/repulse/dist/index.js
+var repulse_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadExternalRepulseInteraction(tsParticles) {
-  tsParticles.addInteractor("externalRepulse", container => new Repulser(container));
+  return repulse_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("externalRepulse", container => new Repulser(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/attract/dist/Attractor.js
 
@@ -3424,16 +4164,79 @@ class Attractor_Attractor extends engine_dist.ParticlesInteractorBase {
 
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/attract/dist/index.js
+var attract_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadParticlesAttractInteraction(tsParticles) {
-  tsParticles.addInteractor("particlesAttract", container => new Attractor_Attractor(container));
+  return attract_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("particlesAttract", container => new Attractor_Attractor(container));
+  });
 }
-;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/Collider.js
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/Absorb.js
+
+function absorb(p1, p2, fps, pixelRatio) {
+  if (p1.getRadius() === undefined && p2.getRadius() !== undefined) {
+    p1.destroy();
+  } else if (p1.getRadius() !== undefined && p2.getRadius() === undefined) {
+    p2.destroy();
+  } else if (p1.getRadius() !== undefined && p2.getRadius() !== undefined) {
+    if (p1.getRadius() >= p2.getRadius()) {
+      const factor = (0,engine_dist.clamp)(p1.getRadius() / p2.getRadius(), 0, p2.getRadius()) * fps;
+      p1.size.value += factor;
+      p2.size.value -= factor;
+
+      if (p2.getRadius() <= pixelRatio) {
+        p2.size.value = 0;
+        p2.destroy();
+      }
+    } else {
+      const factor = (0,engine_dist.clamp)(p2.getRadius() / p1.getRadius(), 0, p1.getRadius()) * fps;
+      p1.size.value -= factor;
+      p2.size.value += factor;
 
+      if (p1.getRadius() <= pixelRatio) {
+        p1.size.value = 0;
+        p1.destroy();
+      }
+    }
+  }
+}
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/Bounce.js
 
 function bounce(p1, p2) {
   (0,engine_dist.circleBounce)((0,engine_dist.circleBounceDataFromParticle)(p1), (0,engine_dist.circleBounceDataFromParticle)(p2));
 }
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/Destroy.js
 
 function destroy(p1, p2) {
   if (!p1.unbreakable && !p2.unbreakable) {
@@ -3452,6 +4255,34 @@ function destroy(p1, p2) {
     }
   }
 }
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/ResolveCollision.js
+
+
+
+
+function resolveCollision(p1, p2, fps, pixelRatio) {
+  switch (p1.options.collisions.mode) {
+    case engine_dist.CollisionMode.absorb:
+      {
+        absorb(p1, p2, fps, pixelRatio);
+        break;
+      }
+
+    case engine_dist.CollisionMode.bounce:
+      {
+        bounce(p1, p2);
+        break;
+      }
+
+    case engine_dist.CollisionMode.destroy:
+      {
+        destroy(p1, p2);
+        break;
+      }
+  }
+}
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/Collider.js
+
 
 class Collider extends engine_dist.ParticlesInteractorBase {
   constructor(container) {
@@ -3465,10 +4296,10 @@ class Collider extends engine_dist.ParticlesInteractorBase {
   reset() {}
 
   interact(p1) {
-    const container = this.container;
-    const pos1 = p1.getPosition();
-    const radius1 = p1.getRadius();
-    const query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
+    const container = this.container,
+          pos1 = p1.getPosition(),
+          radius1 = p1.getRadius(),
+          query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
 
     for (const p2 of query) {
       if (p1 === p2 || !p2.options.collisions.enable || p1.options.collisions.mode !== p2.options.collisions.mode || p2.destroyed || p2.spawning) {
@@ -3476,79 +4307,62 @@ class Collider extends engine_dist.ParticlesInteractorBase {
       }
 
       const pos2 = p2.getPosition();
+      const radius2 = p2.getRadius();
 
-      if (Math.round(pos1.z) !== Math.round(pos2.z)) {
+      if (Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) > radius1 + radius2) {
         continue;
       }
 
       const dist = (0,engine_dist.getDistance)(pos1, pos2);
-      const radius2 = p2.getRadius();
       const distP = radius1 + radius2;
 
-      if (dist <= distP) {
-        this.resolveCollision(p1, p2);
+      if (dist > distP) {
+        continue;
       }
+
+      resolveCollision(p1, p2, container.fpsLimit / 1000, container.retina.pixelRatio);
     }
   }
 
-  resolveCollision(p1, p2) {
-    switch (p1.options.collisions.mode) {
-      case engine_dist.CollisionMode.absorb:
-        {
-          this.absorb(p1, p2);
-          break;
-        }
-
-      case engine_dist.CollisionMode.bounce:
-        {
-          bounce(p1, p2);
-          break;
-        }
+}
+;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/index.js
+var collisions_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
 
-      case engine_dist.CollisionMode.destroy:
-        {
-          destroy(p1, p2);
-          break;
-        }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
     }
-  }
-
-  absorb(p1, p2) {
-    const container = this.container;
-    const fps = container.fpsLimit / 1000;
-
-    if (p1.getRadius() === undefined && p2.getRadius() !== undefined) {
-      p1.destroy();
-    } else if (p1.getRadius() !== undefined && p2.getRadius() === undefined) {
-      p2.destroy();
-    } else if (p1.getRadius() !== undefined && p2.getRadius() !== undefined) {
-      if (p1.getRadius() >= p2.getRadius()) {
-        const factor = (0,engine_dist.clamp)(p1.getRadius() / p2.getRadius(), 0, p2.getRadius()) * fps;
-        p1.size.value += factor;
-        p2.size.value -= factor;
-
-        if (p2.getRadius() <= container.retina.pixelRatio) {
-          p2.size.value = 0;
-          p2.destroy();
-        }
-      } else {
-        const factor = (0,engine_dist.clamp)(p2.getRadius() / p1.getRadius(), 0, p1.getRadius()) * fps;
-        p1.size.value -= factor;
-        p2.size.value += factor;
 
-        if (p1.getRadius() <= container.retina.pixelRatio) {
-          p1.size.value = 0;
-          p1.destroy();
-        }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
       }
     }
-  }
 
-}
-;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/index.js
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadParticlesCollisionsInteraction(tsParticles) {
-  tsParticles.addInteractor("particlesCollisions", container => new Collider(container));
+  return collisions_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("particlesCollisions", container => new Collider(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/Linker.js
 
@@ -3664,8 +4478,116 @@ class Linker extends engine_dist.ParticlesInteractorBase {
   }
 
 }
+;// CONCATENATED MODULE: ../../interactions/particles/links/dist/Utils.js
+
+function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
+  let drawn = false;
+
+  if ((0,engine_dist.getDistance)(begin, end) <= maxDistance) {
+    (0,engine_dist.drawLine)(context, begin, end);
+    drawn = true;
+  } else if (warp) {
+    let pi1;
+    let pi2;
+    const endNE = {
+      x: end.x - canvasSize.width,
+      y: end.y
+    };
+    const d1 = (0,engine_dist.getDistances)(begin, endNE);
+
+    if (d1.distance <= maxDistance) {
+      const yi = begin.y - d1.dy / d1.dx * begin.x;
+      pi1 = {
+        x: 0,
+        y: yi
+      };
+      pi2 = {
+        x: canvasSize.width,
+        y: yi
+      };
+    } else {
+      const endSW = {
+        x: end.x,
+        y: end.y - canvasSize.height
+      };
+      const d2 = (0,engine_dist.getDistances)(begin, endSW);
+
+      if (d2.distance <= maxDistance) {
+        const yi = begin.y - d2.dy / d2.dx * begin.x;
+        const xi = -yi / (d2.dy / d2.dx);
+        pi1 = {
+          x: xi,
+          y: 0
+        };
+        pi2 = {
+          x: xi,
+          y: canvasSize.height
+        };
+      } else {
+        const endSE = {
+          x: end.x - canvasSize.width,
+          y: end.y - canvasSize.height
+        };
+        const d3 = (0,engine_dist.getDistances)(begin, endSE);
+
+        if (d3.distance <= maxDistance) {
+          const yi = begin.y - d3.dy / d3.dx * begin.x;
+          const xi = -yi / (d3.dy / d3.dx);
+          pi1 = {
+            x: xi,
+            y: yi
+          };
+          pi2 = {
+            x: pi1.x + canvasSize.width,
+            y: pi1.y + canvasSize.height
+          };
+        }
+      }
+    }
+
+    if (pi1 && pi2) {
+      (0,engine_dist.drawLine)(context, begin, pi1);
+      (0,engine_dist.drawLine)(context, end, pi2);
+      drawn = true;
+    }
+  }
+
+  if (!drawn) {
+    return;
+  }
+
+  context.lineWidth = width;
+
+  if (backgroundMask) {
+    context.globalCompositeOperation = composite;
+  }
+
+  context.strokeStyle = (0,engine_dist.getStyleFromRgb)(colorLine, opacity);
+
+  if (shadow.enable) {
+    const shadowColor = (0,engine_dist.colorToRgb)(shadow.color);
+
+    if (shadowColor) {
+      context.shadowBlur = shadow.blur;
+      context.shadowColor = (0,engine_dist.getStyleFromRgb)(shadowColor);
+    }
+  }
+
+  context.stroke();
+}
+function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
+  (0,engine_dist.drawTriangle)(context, pos1, pos2, pos3);
+
+  if (backgroundMask) {
+    context.globalCompositeOperation = composite;
+  }
+
+  context.fillStyle = (0,engine_dist.getStyleFromRgb)(colorTriangle, opacityTriangle);
+  context.fill();
+}
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/LinkInstance.js
 
+
 class LinkInstance {
   constructor(container) {
     this.container = container;
@@ -3741,10 +4663,11 @@ class LinkInstance {
       return;
     }
 
-    const pos1 = p1.getPosition();
-    const pos2 = p2.getPosition();
-    const pos3 = p3.getPosition();
     container.canvas.draw(ctx => {
+      const pos1 = p1.getPosition();
+      const pos2 = p2.getPosition();
+      const pos3 = p3.getPosition();
+
       if ((0,engine_dist.getDistance)(pos1, pos2) > container.retina.linksDistance || (0,engine_dist.getDistance)(pos3, pos2) > container.retina.linksDistance || (0,engine_dist.getDistance)(pos3, pos1) > container.retina.linksDistance) {
         return;
       }
@@ -3761,7 +4684,7 @@ class LinkInstance {
         return;
       }
 
-      (0,engine_dist.drawLinkTriangle)(ctx, pos1, pos2, pos3, options.backgroundMask.enable, options.backgroundMask.composite, colorTriangle, opacityTriangle);
+      drawLinkTriangle(ctx, pos1, pos2, pos3, options.backgroundMask.enable, options.backgroundMask.composite, colorTriangle, opacityTriangle);
     });
   }
 
@@ -3801,12 +4724,44 @@ class LinkInstance {
 
       const width = (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
       const maxDistance = (_b = p1.retina.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
-      (0,engine_dist.drawLinkLine)(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
+      drawLinkLine(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
     });
   }
 
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/plugin.js
+var plugin_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 class Index {
@@ -3827,18 +4782,56 @@ class Index {
 }
 
 function loadPlugin(tsParticles) {
-  const plugin = new Index();
-  tsParticles.addPlugin(plugin);
+  return plugin_awaiter(this, void 0, void 0, function* () {
+    const plugin = new Index();
+    yield tsParticles.addPlugin(plugin);
+  });
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/index.js
+var links_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 function loadInteraction(tsParticles) {
-  tsParticles.addInteractor("particlesLinks", container => new Linker(container));
+  return links_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addInteractor("particlesLinks", container => new Linker(container));
+  });
 }
 function loadParticlesLinksInteraction(tsParticles) {
-  loadInteraction(tsParticles);
-  loadPlugin(tsParticles);
+  return links_dist_awaiter(this, void 0, void 0, function* () {
+    yield loadInteraction(tsParticles);
+    yield loadPlugin(tsParticles);
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/CircleDrawer.js
 class CircleDrawer {
@@ -3852,12 +4845,46 @@ class CircleDrawer {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/index.js
+var circle_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadCircleShape(tsParticles) {
-  tsParticles.addShape("circle", new CircleDrawer());
+  return circle_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addShape("circle", new CircleDrawer());
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/image/dist/Utils.js
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+var Utils_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
@@ -3913,7 +4940,7 @@ function loadImage(source) {
   });
 }
 function downloadSvgImage(source) {
-  return __awaiter(this, void 0, void 0, function* () {
+  return Utils_awaiter(this, void 0, void 0, function* () {
     if (!source) {
       throw new Error("Error tsParticles - No image.src");
     }
@@ -4243,11 +5270,45 @@ class ImageDrawer {
 }
 _ImageDrawer_images = new WeakMap();
 ;// CONCATENATED MODULE: ../../shapes/image/dist/index.js
+var image_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadImageShape(tsParticles) {
-  const imageDrawer = new ImageDrawer();
-  tsParticles.addShape("image", imageDrawer);
-  tsParticles.addShape("images", imageDrawer);
+  return image_dist_awaiter(this, void 0, void 0, function* () {
+    const imageDrawer = new ImageDrawer();
+    yield tsParticles.addShape("image", imageDrawer);
+    yield tsParticles.addShape("images", imageDrawer);
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/line/dist/LineDrawer.js
 class LineDrawer {
@@ -4262,9 +5323,43 @@ class LineDrawer {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/line/dist/index.js
+var line_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadLineShape(tsParticles) {
-  tsParticles.addShape("line", new LineDrawer());
+  return line_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addShape("line", new LineDrawer());
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/PolygonDrawerBase.js
 class PolygonDrawerBase {
@@ -4351,17 +5446,55 @@ class TriangleDrawer extends PolygonDrawerBase {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/index.js
+var polygon_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 
 function loadGenericPolygonShape(tsParticles) {
-  tsParticles.addShape("polygon", new PolygonDrawer());
+  return polygon_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addShape("polygon", new PolygonDrawer());
+  });
 }
 function loadTriangleShape(tsParticles) {
-  tsParticles.addShape("triangle", new TriangleDrawer());
+  return polygon_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addShape("triangle", new TriangleDrawer());
+  });
 }
 function loadPolygonShape(tsParticles) {
-  loadGenericPolygonShape(tsParticles);
-  loadTriangleShape(tsParticles);
+  return polygon_dist_awaiter(this, void 0, void 0, function* () {
+    yield loadGenericPolygonShape(tsParticles);
+    yield loadTriangleShape(tsParticles);
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/square/dist/SquareDrawer.js
 const fixFactor = Math.sqrt(2);
@@ -4376,11 +5509,45 @@ class SquareDrawer {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/square/dist/index.js
+var square_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadSquareShape(tsParticles) {
-  const drawer = new SquareDrawer();
-  tsParticles.addShape("edge", drawer);
-  tsParticles.addShape("square", drawer);
+  return square_dist_awaiter(this, void 0, void 0, function* () {
+    const drawer = new SquareDrawer();
+    yield tsParticles.addShape("edge", drawer);
+    yield tsParticles.addShape("square", drawer);
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/StarDrawer.js
 class StarDrawer {
@@ -4409,9 +5576,43 @@ class StarDrawer {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/index.js
+var star_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadStarShape(tsParticles) {
-  tsParticles.addShape("star", new StarDrawer());
+  return star_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addShape("star", new StarDrawer());
+  });
 }
 ;// CONCATENATED MODULE: ../../shapes/text/dist/TextDrawer.js
 var TextDrawer_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -4523,13 +5724,47 @@ class TextDrawer {
 
 }
 ;// CONCATENATED MODULE: ../../shapes/text/dist/index.js
+var text_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadTextShape(tsParticles) {
-  const drawer = new TextDrawer();
+  return text_dist_awaiter(this, void 0, void 0, function* () {
+    const drawer = new TextDrawer();
 
-  for (const type of validTypes) {
-    tsParticles.addShape(type, drawer);
-  }
+    for (const type of validTypes) {
+      yield tsParticles.addShape(type, drawer);
+    }
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/life/dist/LifeUpdater.js
 
@@ -4610,9 +5845,43 @@ class LifeUpdater {
 
 }
 ;// CONCATENATED MODULE: ../../updaters/life/dist/index.js
+var life_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadLifeUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("life", container => new LifeUpdater(container));
+  return life_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("life", container => new LifeUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/opacity/dist/OpacityUpdater.js
 
@@ -4753,9 +6022,43 @@ class OpacityUpdater {
 
 }
 ;// CONCATENATED MODULE: ../../updaters/opacity/dist/index.js
+var opacity_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadOpacityUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("opacity", container => new OpacityUpdater(container));
+  return opacity_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("opacity", container => new OpacityUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/size/dist/SizeUpdater.js
 
@@ -4833,22 +6136,56 @@ class SizeUpdater {
   isEnabled(particle) {
     var _a, _b, _c;
 
-    return !particle.destroyed && !particle.spawning && particle.size.enable && (((_a = particle.size.loops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.size.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.size.maxLoops) !== null && _c !== void 0 ? _c : 0));
-  }
+    return !particle.destroyed && !particle.spawning && particle.size.enable && (((_a = particle.size.loops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.size.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.size.maxLoops) !== null && _c !== void 0 ? _c : 0));
+  }
+
+  update(particle, delta) {
+    if (!this.isEnabled(particle)) {
+      return;
+    }
+
+    updateSize(particle, delta);
+  }
+
+}
+;// CONCATENATED MODULE: ../../updaters/size/dist/index.js
+var size_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
 
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
 
-    updateSize(particle, delta);
-  }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 
-}
-;// CONCATENATED MODULE: ../../updaters/size/dist/index.js
 
 function loadSizeUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("size", () => new SizeUpdater());
+  return size_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("size", () => new SizeUpdater());
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/angle/dist/AngleUpdater.js
 
@@ -4915,272 +6252,28 @@ class AngleUpdater {
       case engine_dist.RotateDirection.counterClockwise:
       case "counterClockwise":
         particle.rotate.status = engine_dist.AnimationStatus.decreasing;
-        break;
-
-      case engine_dist.RotateDirection.clockwise:
-        particle.rotate.status = engine_dist.AnimationStatus.increasing;
-        break;
-    }
-
-    const rotateAnimation = particle.options.rotate.animation;
-
-    if (rotateAnimation.enable) {
-      particle.rotate.velocity = rotateAnimation.speed / 360 * this.container.retina.reduceFactor;
-
-      if (!rotateAnimation.sync) {
-        particle.rotate.velocity *= Math.random();
-      }
-    }
-  }
-
-  isEnabled(particle) {
-    const rotate = particle.options.rotate;
-    const rotateAnimation = rotate.animation;
-    return !particle.destroyed && !particle.spawning && !rotate.path && rotateAnimation.enable;
-  }
-
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
-    }
-
-    updateAngle(particle, delta);
-  }
-
-}
-;// CONCATENATED MODULE: ../../updaters/angle/dist/index.js
-
-function loadAngleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("angle", container => new AngleUpdater(container));
-}
-;// CONCATENATED MODULE: ../../updaters/tilt/dist/TiltUpdater.js
-
-
-function updateTilt(particle, delta) {
-  var _a;
-
-  if (!particle.tilt) {
-    return;
-  }
-
-  const tilt = particle.options.tilt;
-  const tiltAnimation = tilt.animation;
-  const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
-  const max = 2 * Math.PI;
-
-  if (!tiltAnimation.enable) {
-    return;
-  }
-
-  switch (particle.tilt.status) {
-    case engine_dist.AnimationStatus.increasing:
-      particle.tilt.value += speed;
-
-      if (particle.tilt.value > max) {
-        particle.tilt.value -= max;
-      }
-
-      break;
-
-    case engine_dist.AnimationStatus.decreasing:
-    default:
-      particle.tilt.value -= speed;
-
-      if (particle.tilt.value < 0) {
-        particle.tilt.value += max;
-      }
-
-      break;
-  }
-}
-
-class TiltUpdater {
-  constructor(container) {
-    this.container = container;
-  }
-
-  init(particle) {
-    const tiltOptions = particle.options.tilt;
-    particle.tilt = {
-      enable: tiltOptions.enable,
-      value: (0,engine_dist.getRangeValue)(tiltOptions.value) * Math.PI / 180,
-      sinDirection: Math.random() >= 0.5 ? 1 : -1,
-      cosDirection: Math.random() >= 0.5 ? 1 : -1
-    };
-    let tiltDirection = tiltOptions.direction;
-
-    if (tiltDirection === engine_dist.TiltDirection.random) {
-      const index = Math.floor(Math.random() * 2);
-      tiltDirection = index > 0 ? engine_dist.TiltDirection.counterClockwise : engine_dist.TiltDirection.clockwise;
-    }
-
-    switch (tiltDirection) {
-      case engine_dist.TiltDirection.counterClockwise:
-      case "counterClockwise":
-        particle.tilt.status = engine_dist.AnimationStatus.decreasing;
-        break;
-
-      case engine_dist.TiltDirection.clockwise:
-        particle.tilt.status = engine_dist.AnimationStatus.increasing;
-        break;
-    }
-
-    const tiltAnimation = particle.options.tilt.animation;
-
-    if (tiltAnimation.enable) {
-      particle.tilt.velocity = tiltAnimation.speed / 360 * this.container.retina.reduceFactor;
-
-      if (!tiltAnimation.sync) {
-        particle.tilt.velocity *= Math.random();
-      }
-    }
-  }
-
-  isEnabled(particle) {
-    const tilt = particle.options.tilt;
-    const tiltAnimation = tilt.animation;
-    return !particle.destroyed && !particle.spawning && tiltAnimation.enable;
-  }
-
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
-    }
-
-    updateTilt(particle, delta);
-  }
-
-}
-;// CONCATENATED MODULE: ../../updaters/tilt/dist/index.js
-
-function loadTiltUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("tilt", container => new TiltUpdater(container));
-}
-;// CONCATENATED MODULE: ../../updaters/roll/dist/RollUpdater.js
-
-
-function updateRoll(particle, delta) {
-  const roll = particle.options.roll;
-
-  if (!particle.roll || !roll.enable) {
-    return;
-  }
-
-  const speed = particle.roll.speed * delta.factor;
-  const max = 2 * Math.PI;
-  particle.roll.angle += speed;
-
-  if (particle.roll.angle > max) {
-    particle.roll.angle -= max;
-  }
-}
-
-class RollUpdater {
-  init(particle) {
-    const rollOpt = particle.options.roll;
-
-    if (rollOpt.enable) {
-      particle.roll = {
-        angle: Math.random() * Math.PI * 2,
-        speed: (0,engine_dist.getRangeValue)(rollOpt.speed) / 360
-      };
-
-      if (rollOpt.backColor) {
-        particle.backColor = (0,engine_dist.colorToHsl)(rollOpt.backColor);
-      } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
-        const alterType = Math.random() >= 0.5 ? engine_dist.AlterType.darken : engine_dist.AlterType.enlighten;
-        particle.roll.alter = {
-          type: alterType,
-          value: alterType === engine_dist.AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value
-        };
-      } else if (rollOpt.darken.enable) {
-        particle.roll.alter = {
-          type: engine_dist.AlterType.darken,
-          value: rollOpt.darken.value
-        };
-      } else if (rollOpt.enlighten.enable) {
-        particle.roll.alter = {
-          type: engine_dist.AlterType.enlighten,
-          value: rollOpt.enlighten.value
-        };
-      }
-    } else {
-      particle.roll = {
-        angle: 0,
-        speed: 0
-      };
-    }
-  }
-
-  isEnabled(particle) {
-    const roll = particle.options.roll;
-    return !particle.destroyed && !particle.spawning && roll.enable;
-  }
-
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
-    }
-
-    updateRoll(particle, delta);
-  }
-
-}
-;// CONCATENATED MODULE: ../../updaters/roll/dist/index.js
-
-function loadRollUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("roll", () => new RollUpdater());
-}
-;// CONCATENATED MODULE: ../../updaters/wobble/dist/WobbleUpdater.js
-
-
-function updateWobble(particle, delta) {
-  var _a;
-
-  const wobble = particle.options.wobble;
-
-  if (!wobble.enable || !particle.wobble) {
-    return;
-  }
-
-  const speed = particle.wobble.speed * delta.factor;
-  const distance = ((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor / (1000 / 60);
-  const max = 2 * Math.PI;
-  particle.wobble.angle += speed;
-
-  if (particle.wobble.angle > max) {
-    particle.wobble.angle -= max;
-  }
+        break;
 
-  particle.position.x += distance * Math.cos(particle.wobble.angle);
-  particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
-}
+      case engine_dist.RotateDirection.clockwise:
+        particle.rotate.status = engine_dist.AnimationStatus.increasing;
+        break;
+    }
 
-class WobbleUpdater {
-  constructor(container) {
-    this.container = container;
-  }
+    const rotateAnimation = particle.options.rotate.animation;
 
-  init(particle) {
-    const wobbleOpt = particle.options.wobble;
+    if (rotateAnimation.enable) {
+      particle.rotate.velocity = rotateAnimation.speed / 360 * this.container.retina.reduceFactor;
 
-    if (wobbleOpt.enable) {
-      particle.wobble = {
-        angle: Math.random() * Math.PI * 2,
-        speed: (0,engine_dist.getRangeValue)(wobbleOpt.speed) / 360
-      };
-    } else {
-      particle.wobble = {
-        angle: 0,
-        speed: 0
-      };
+      if (!rotateAnimation.sync) {
+        particle.rotate.velocity *= Math.random();
+      }
     }
-
-    particle.retina.wobbleDistance = (0,engine_dist.getRangeValue)(wobbleOpt.distance) * this.container.retina.pixelRatio;
   }
 
   isEnabled(particle) {
-    return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
+    const rotate = particle.options.rotate;
+    const rotateAnimation = rotate.animation;
+    return !particle.destroyed && !particle.spawning && !rotate.path && rotateAnimation.enable;
   }
 
   update(particle, delta) {
@@ -5188,14 +6281,48 @@ class WobbleUpdater {
       return;
     }
 
-    updateWobble(particle, delta);
+    updateAngle(particle, delta);
   }
 
 }
-;// CONCATENATED MODULE: ../../updaters/wobble/dist/index.js
+;// CONCATENATED MODULE: ../../updaters/angle/dist/index.js
+var angle_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
 
-function loadWobbleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("wobble", container => new WobbleUpdater(container));
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+
+function loadAngleUpdater(tsParticles) {
+  return angle_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("angle", container => new AngleUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/color/dist/ColorUpdater.js
 
@@ -5277,9 +6404,43 @@ class ColorUpdater {
 
 }
 ;// CONCATENATED MODULE: ../../updaters/color/dist/index.js
+var color_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("color", container => new ColorUpdater(container));
+  return color_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("color", container => new ColorUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/StrokeColorUpdater.js
 
@@ -5379,9 +6540,43 @@ class StrokeColorUpdater {
 
 }
 ;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/index.js
+var strokeColor_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadStrokeColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container));
+  return strokeColor_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/Utils.js
 
@@ -5443,165 +6638,264 @@ function bounceVertical(data) {
     }
   }
 }
-;// CONCATENATED MODULE: ../../updaters/outModes/dist/OutOfCanvasUpdater.js
+;// CONCATENATED MODULE: ../../updaters/outModes/dist/BounceOutMode.js
 
 
-class OutOfCanvasUpdater {
+class BounceOutMode {
   constructor(container) {
     this.container = container;
+    this.modes = [engine_dist.OutMode.bounce, engine_dist.OutMode.bounceVertical, engine_dist.OutMode.bounceHorizontal, "bounceVertical", "bounceHorizontal", engine_dist.OutMode.split];
   }
 
-  init() {}
+  update(particle, direction, delta, outMode) {
+    if (!this.modes.includes(outMode)) {
+      return;
+    }
 
-  isEnabled(particle) {
-    return !particle.destroyed && !particle.spawning;
+    const container = this.container;
+    let handled = false;
+
+    for (const [, plugin] of container.plugins) {
+      if (plugin.particleBounce !== undefined) {
+        handled = plugin.particleBounce(particle, delta, direction);
+      }
+
+      if (handled) {
+        break;
+      }
+    }
+
+    if (handled) {
+      return;
+    }
+
+    const pos = particle.getPosition(),
+          offset = particle.offset,
+          size = particle.getRadius(),
+          bounds = (0,engine_dist.calculateBounds)(pos, size),
+          canvasSize = container.canvas.size;
+    bounceHorizontal({
+      particle,
+      outMode,
+      direction,
+      bounds,
+      canvasSize,
+      offset,
+      size
+    });
+    bounceVertical({
+      particle,
+      outMode,
+      direction,
+      bounds,
+      canvasSize,
+      offset,
+      size
+    });
   }
 
-  update(particle, delta) {
-    var _a, _b, _c, _d;
+}
+;// CONCATENATED MODULE: ../../updaters/outModes/dist/DestroyOutMode.js
 
-    const outModes = particle.options.move.outModes;
-    this.updateOutMode(particle, delta, (_a = outModes.bottom) !== null && _a !== void 0 ? _a : outModes.default, engine_dist.OutModeDirection.bottom);
-    this.updateOutMode(particle, delta, (_b = outModes.left) !== null && _b !== void 0 ? _b : outModes.default, engine_dist.OutModeDirection.left);
-    this.updateOutMode(particle, delta, (_c = outModes.right) !== null && _c !== void 0 ? _c : outModes.default, engine_dist.OutModeDirection.right);
-    this.updateOutMode(particle, delta, (_d = outModes.top) !== null && _d !== void 0 ? _d : outModes.default, engine_dist.OutModeDirection.top);
+class DestroyOutMode {
+  constructor(container) {
+    this.container = container;
+    this.modes = [engine_dist.OutMode.destroy];
   }
 
-  updateOutMode(particle, delta, outMode, direction) {
-    switch (outMode) {
-      case engine_dist.OutMode.bounce:
-      case engine_dist.OutMode.bounceVertical:
-      case engine_dist.OutMode.bounceHorizontal:
-      case "bounceVertical":
-      case "bounceHorizontal":
-      case engine_dist.OutMode.split:
-        this.bounce(particle, delta, direction, outMode);
-        break;
+  update(particle, direction, delta, outMode) {
+    if (!this.modes.includes(outMode)) {
+      return;
+    }
 
-      case engine_dist.OutMode.destroy:
-        this.destroy(particle, direction);
-        break;
+    const container = this.container;
 
-      case engine_dist.OutMode.out:
-        this.out(particle, direction);
-        break;
+    switch (particle.outType) {
+      case engine_dist.ParticleOutType.normal:
+      case engine_dist.ParticleOutType.outside:
+        if ((0,engine_dist.isPointInside)(particle.position, container.canvas.size, engine_dist.Vector.origin, particle.getRadius(), direction)) {
+          return;
+        }
 
-      case engine_dist.OutMode.none:
-      default:
-        this.none(particle, direction);
         break;
-    }
-  }
 
-  destroy(particle, direction) {
-    const container = this.container;
+      case engine_dist.ParticleOutType.inside:
+        {
+          const {
+            dx,
+            dy
+          } = (0,engine_dist.getDistances)(particle.position, particle.moveCenter);
+          const {
+            x: vx,
+            y: vy
+          } = particle.velocity;
+
+          if (vx < 0 && dx > particle.moveCenter.radius || vy < 0 && dy > particle.moveCenter.radius || vx >= 0 && dx < -particle.moveCenter.radius || vy >= 0 && dy < -particle.moveCenter.radius) {
+            return;
+          }
 
-    if ((0,engine_dist.isPointInside)(particle.position, container.canvas.size, particle.getRadius(), direction)) {
-      return;
+          break;
+        }
     }
 
     container.particles.remove(particle, undefined, true);
   }
 
-  out(particle, direction) {
-    const container = this.container;
+}
+;// CONCATENATED MODULE: ../../updaters/outModes/dist/OutOutMode.js
+
+class OutOutMode {
+  constructor(container) {
+    this.container = container;
+    this.modes = [engine_dist.OutMode.out];
+  }
 
-    if ((0,engine_dist.isPointInside)(particle.position, container.canvas.size, particle.getRadius(), direction)) {
+  update(particle, direction, delta, outMode) {
+    if (!this.modes.includes(outMode)) {
       return;
     }
 
-    const wrap = particle.options.move.warp,
-          canvasSize = container.canvas.size,
-          newPos = {
-      bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
-      left: -particle.getRadius() - particle.offset.x,
-      right: canvasSize.width + particle.getRadius() + particle.offset.x,
-      top: -particle.getRadius() - particle.offset.y
-    },
-          sizeValue = particle.getRadius(),
-          nextBounds = (0,engine_dist.calculateBounds)(particle.position, sizeValue);
+    const container = this.container;
 
-    if (direction === engine_dist.OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
-      particle.position.x = newPos.left;
-      particle.initialPosition.x = particle.position.x;
+    switch (particle.outType) {
+      case engine_dist.ParticleOutType.inside:
+        {
+          const {
+            x: vx,
+            y: vy
+          } = particle.velocity;
+          const circVec = engine_dist.Vector.origin;
+          circVec.length = particle.moveCenter.radius;
+          circVec.angle = particle.velocity.angle + Math.PI;
+          circVec.addTo(engine_dist.Vector.create(particle.moveCenter));
+          const {
+            dx,
+            dy
+          } = (0,engine_dist.getDistances)(particle.position, circVec);
+
+          if (vx <= 0 && dx >= 0 || vy <= 0 && dy >= 0 || vx >= 0 && dx <= 0 || vy >= 0 && dy <= 0) {
+            return;
+          }
 
-      if (!wrap) {
-        particle.position.y = Math.random() * canvasSize.height;
-        particle.initialPosition.y = particle.position.y;
-      }
-    } else if (direction === engine_dist.OutModeDirection.left && nextBounds.right < -particle.offset.x) {
-      particle.position.x = newPos.right;
-      particle.initialPosition.x = particle.position.x;
+          particle.position.x = Math.floor((0,engine_dist.randomInRange)({
+            min: 0,
+            max: container.canvas.size.width
+          }));
+          particle.position.y = Math.floor((0,engine_dist.randomInRange)({
+            min: 0,
+            max: container.canvas.size.height
+          }));
+          const {
+            dx: newDx,
+            dy: newDy
+          } = (0,engine_dist.getDistances)(particle.position, particle.moveCenter);
+          particle.direction = Math.atan2(-newDy, -newDx);
+          particle.velocity.angle = particle.direction;
+          break;
+        }
 
-      if (!wrap) {
-        particle.position.y = Math.random() * canvasSize.height;
-        particle.initialPosition.y = particle.position.y;
-      }
-    }
+      default:
+        {
+          if ((0,engine_dist.isPointInside)(particle.position, container.canvas.size, engine_dist.Vector.origin, particle.getRadius(), direction)) {
+            return;
+          }
 
-    if (direction === engine_dist.OutModeDirection.bottom && nextBounds.top > canvasSize.height + particle.offset.y) {
-      if (!wrap) {
-        particle.position.x = Math.random() * canvasSize.width;
-        particle.initialPosition.x = particle.position.x;
-      }
+          switch (particle.outType) {
+            case engine_dist.ParticleOutType.outside:
+              {
+                particle.position.x = Math.floor((0,engine_dist.randomInRange)({
+                  min: -particle.moveCenter.radius,
+                  max: particle.moveCenter.radius
+                })) + particle.moveCenter.x;
+                particle.position.y = Math.floor((0,engine_dist.randomInRange)({
+                  min: -particle.moveCenter.radius,
+                  max: particle.moveCenter.radius
+                })) + particle.moveCenter.y;
+                const {
+                  dx,
+                  dy
+                } = (0,engine_dist.getDistances)(particle.position, particle.moveCenter);
+
+                if (particle.moveCenter.radius) {
+                  particle.direction = Math.atan2(dy, dx);
+                  particle.velocity.angle = particle.direction;
+                }
+
+                break;
+              }
 
-      particle.position.y = newPos.top;
-      particle.initialPosition.y = particle.position.y;
-    } else if (direction === engine_dist.OutModeDirection.top && nextBounds.bottom < -particle.offset.y) {
-      if (!wrap) {
-        particle.position.x = Math.random() * canvasSize.width;
-        particle.initialPosition.x = particle.position.x;
-      }
+            case engine_dist.ParticleOutType.normal:
+              {
+                const wrap = particle.options.move.warp,
+                      canvasSize = container.canvas.size,
+                      newPos = {
+                  bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
+                  left: -particle.getRadius() - particle.offset.x,
+                  right: canvasSize.width + particle.getRadius() + particle.offset.x,
+                  top: -particle.getRadius() - particle.offset.y
+                },
+                      sizeValue = particle.getRadius(),
+                      nextBounds = (0,engine_dist.calculateBounds)(particle.position, sizeValue);
+
+                if (direction === engine_dist.OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
+                  particle.position.x = newPos.left;
+                  particle.initialPosition.x = particle.position.x;
+
+                  if (!wrap) {
+                    particle.position.y = Math.random() * canvasSize.height;
+                    particle.initialPosition.y = particle.position.y;
+                  }
+                } else if (direction === engine_dist.OutModeDirection.left && nextBounds.right < -particle.offset.x) {
+                  particle.position.x = newPos.right;
+                  particle.initialPosition.x = particle.position.x;
+
+                  if (!wrap) {
+                    particle.position.y = Math.random() * canvasSize.height;
+                    particle.initialPosition.y = particle.position.y;
+                  }
+                }
+
+                if (direction === engine_dist.OutModeDirection.bottom && nextBounds.top > canvasSize.height + particle.offset.y) {
+                  if (!wrap) {
+                    particle.position.x = Math.random() * canvasSize.width;
+                    particle.initialPosition.x = particle.position.x;
+                  }
+
+                  particle.position.y = newPos.top;
+                  particle.initialPosition.y = particle.position.y;
+                } else if (direction === engine_dist.OutModeDirection.top && nextBounds.bottom < -particle.offset.y) {
+                  if (!wrap) {
+                    particle.position.x = Math.random() * canvasSize.width;
+                    particle.initialPosition.x = particle.position.x;
+                  }
+
+                  particle.position.y = newPos.bottom;
+                  particle.initialPosition.y = particle.position.y;
+                }
+
+                break;
+              }
+          }
 
-      particle.position.y = newPos.bottom;
-      particle.initialPosition.y = particle.position.y;
+          break;
+        }
     }
   }
 
-  bounce(particle, delta, direction, outMode) {
-    const container = this.container;
-    let handled = false;
-
-    for (const [, plugin] of container.plugins) {
-      if (plugin.particleBounce !== undefined) {
-        handled = plugin.particleBounce(particle, delta, direction);
-      }
+}
+;// CONCATENATED MODULE: ../../updaters/outModes/dist/NoneOutMode.js
 
-      if (handled) {
-        break;
-      }
-    }
+class NoneOutMode {
+  constructor(container) {
+    this.container = container;
+    this.modes = [engine_dist.OutMode.none];
+  }
 
-    if (handled) {
+  update(particle, direction, delta, outMode) {
+    if (!this.modes.includes(outMode)) {
       return;
     }
 
-    const pos = particle.getPosition(),
-          offset = particle.offset,
-          size = particle.getRadius(),
-          bounds = (0,engine_dist.calculateBounds)(pos, size),
-          canvasSize = container.canvas.size;
-    bounceHorizontal({
-      particle,
-      outMode,
-      direction,
-      bounds,
-      canvasSize,
-      offset,
-      size
-    });
-    bounceVertical({
-      particle,
-      outMode,
-      direction,
-      bounds,
-      canvasSize,
-      offset,
-      size
-    });
-  }
-
-  none(particle, direction) {
     if (particle.options.move.distance.horizontal && (direction === engine_dist.OutModeDirection.left || direction === engine_dist.OutModeDirection.right) || particle.options.move.distance.vertical && (direction === engine_dist.OutModeDirection.top || direction === engine_dist.OutModeDirection.bottom)) {
       return;
     }
@@ -5616,7 +6910,7 @@ class OutOfCanvasUpdater {
         return;
       }
 
-      if (!(0,engine_dist.isPointInside)(particle.position, container.canvas.size, pRadius, direction)) {
+      if (!(0,engine_dist.isPointInside)(particle.position, container.canvas.size, engine_dist.Vector.origin, pRadius, direction)) {
         container.particles.remove(particle);
       }
     } else {
@@ -5628,15 +6922,113 @@ class OutOfCanvasUpdater {
     }
   }
 
+}
+;// CONCATENATED MODULE: ../../updaters/outModes/dist/OutOfCanvasUpdater.js
+
+
+
+
+
+class OutOfCanvasUpdater {
+  constructor(container) {
+    this.container = container;
+    this.updaters = [new BounceOutMode(container), new DestroyOutMode(container), new OutOutMode(container), new NoneOutMode(container)];
+  }
+
+  init() {}
+
+  isEnabled(particle) {
+    return !particle.destroyed && !particle.spawning;
+  }
+
+  update(particle, delta) {
+    var _a, _b, _c, _d;
+
+    const outModes = particle.options.move.outModes;
+    this.updateOutMode(particle, delta, (_a = outModes.bottom) !== null && _a !== void 0 ? _a : outModes.default, engine_dist.OutModeDirection.bottom);
+    this.updateOutMode(particle, delta, (_b = outModes.left) !== null && _b !== void 0 ? _b : outModes.default, engine_dist.OutModeDirection.left);
+    this.updateOutMode(particle, delta, (_c = outModes.right) !== null && _c !== void 0 ? _c : outModes.default, engine_dist.OutModeDirection.right);
+    this.updateOutMode(particle, delta, (_d = outModes.top) !== null && _d !== void 0 ? _d : outModes.default, engine_dist.OutModeDirection.top);
+  }
+
+  updateOutMode(particle, delta, outMode, direction) {
+    for (const updater of this.updaters) {
+      updater.update(particle, direction, delta, outMode);
+    }
+  }
+
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/index.js
+var outModes_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
 
 function loadOutModesUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("outModes", container => new OutOfCanvasUpdater(container));
+  return outModes_dist_awaiter(this, void 0, void 0, function* () {
+    yield tsParticles.addParticleUpdater("outModes", container => new OutOfCanvasUpdater(container));
+  });
 }
 ;// CONCATENATED MODULE: ../slim/dist/index.js
+var slim_dist_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
 
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
 
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 
 
 
@@ -5665,35 +7057,34 @@ function loadOutModesUpdater(tsParticles) {
 
 
 function loadSlim(tsParticles) {
-  loadExternalAttractInteraction(tsParticles);
-  loadExternalBounceInteraction(tsParticles);
-  loadExternalBubbleInteraction(tsParticles);
-  loadExternalConnectInteraction(tsParticles);
-  loadExternalGrabInteraction(tsParticles);
-  loadExternalPauseInteraction(tsParticles);
-  loadExternalPushInteraction(tsParticles);
-  loadExternalRemoveInteraction(tsParticles);
-  loadExternalRepulseInteraction(tsParticles);
-  loadParticlesAttractInteraction(tsParticles);
-  loadParticlesCollisionsInteraction(tsParticles);
-  loadParticlesLinksInteraction(tsParticles);
-  loadCircleShape(tsParticles);
-  loadImageShape(tsParticles);
-  loadLineShape(tsParticles);
-  loadPolygonShape(tsParticles);
-  loadSquareShape(tsParticles);
-  loadStarShape(tsParticles);
-  loadTextShape(tsParticles);
-  loadLifeUpdater(tsParticles);
-  loadOpacityUpdater(tsParticles);
-  loadSizeUpdater(tsParticles);
-  loadAngleUpdater(tsParticles);
-  loadTiltUpdater(tsParticles);
-  loadRollUpdater(tsParticles);
-  loadWobbleUpdater(tsParticles);
-  loadColorUpdater(tsParticles);
-  loadStrokeColorUpdater(tsParticles);
-  loadOutModesUpdater(tsParticles);
+  return slim_dist_awaiter(this, void 0, void 0, function* () {
+    yield loadExternalAttractInteraction(tsParticles);
+    yield loadExternalBounceInteraction(tsParticles);
+    yield loadExternalBubbleInteraction(tsParticles);
+    yield loadExternalConnectInteraction(tsParticles);
+    yield loadExternalGrabInteraction(tsParticles);
+    yield loadExternalPauseInteraction(tsParticles);
+    yield loadExternalPushInteraction(tsParticles);
+    yield loadExternalRemoveInteraction(tsParticles);
+    yield loadExternalRepulseInteraction(tsParticles);
+    yield loadParticlesAttractInteraction(tsParticles);
+    yield loadParticlesCollisionsInteraction(tsParticles);
+    yield loadParticlesLinksInteraction(tsParticles);
+    yield loadCircleShape(tsParticles);
+    yield loadImageShape(tsParticles);
+    yield loadLineShape(tsParticles);
+    yield loadPolygonShape(tsParticles);
+    yield loadSquareShape(tsParticles);
+    yield loadStarShape(tsParticles);
+    yield loadTextShape(tsParticles);
+    loadLifeUpdater(tsParticles);
+    loadOpacityUpdater(tsParticles);
+    loadSizeUpdater(tsParticles);
+    loadAngleUpdater(tsParticles);
+    loadColorUpdater(tsParticles);
+    loadStrokeColorUpdater(tsParticles);
+    loadOutModesUpdater(tsParticles);
+  });
 }
 
 /***/ }),
@@ -5736,7 +7127,7 @@ class Canvas {
     var _a;
 
     if (!canvas.className) {
-      canvas.className = Utils_1.Constants.canvasClass;
+      canvas.className = Utils_1.canvasClass;
     }
 
     if (this.generatedCanvas) {
@@ -5793,21 +7184,13 @@ class Canvas {
   }
 
   windowResize() {
-    var _a;
-
     if (!this.element) {
       return;
     }
 
     const container = this.container;
     this.resize();
-
-    if (((_a = this.resizeFactor) === null || _a === void 0 ? void 0 : _a.width) === 1 && this.resizeFactor.height === 1) {
-      delete this.resizeFactor;
-      return;
-    }
-
-    container.updateActualOptions();
+    const needsRefresh = container.updateActualOptions();
     container.particles.setDensity();
 
     for (const [, plugin] of container.plugins) {
@@ -5815,6 +7198,10 @@ class Canvas {
         plugin.resize();
       }
     }
+
+    if (needsRefresh) {
+      container.refresh();
+    }
   }
 
   resize() {
@@ -6105,7 +7492,9 @@ const Options_1 = __webpack_require__(4075);
 
 const Utils_1 = __webpack_require__(6617);
 
-const Vector_1 = __webpack_require__(4068);
+const Enums_1 = __webpack_require__(8678);
+
+const Loader_1 = __webpack_require__(9662);
 
 class Container {
   constructor(id, sourceOptions, ...presets) {
@@ -6121,15 +7510,16 @@ class Container {
     this.zLayers = 100;
     this.pageHidden = false;
     this._sourceOptions = sourceOptions;
+    this._initialSourceOptions = sourceOptions;
     this.retina = new Retina_1.Retina(this);
     this.canvas = new Canvas_1.Canvas(this);
     this.particles = new Particles_1.Particles(this);
     this.drawer = new FrameManager_1.FrameManager(this);
+    this.presets = presets;
     this.pathGenerator = {
-      generate: () => {
-        const v = Vector_1.Vector.create(0, 0);
-        v.length = Math.random();
-        v.angle = Math.random() * Math.PI * 2;
+      generate: p => {
+        const v = p.velocity.copy();
+        v.angle += v.length * Math.PI / 180;
         return v;
       },
       init: () => {},
@@ -6153,28 +7543,15 @@ class Container {
     this.density = 1;
     this._options = new Options_1.Options();
     this.actualOptions = new Options_1.Options();
-
-    for (const preset of presets) {
-      this._options.load(Utils_1.Plugins.getPreset(preset));
-    }
-
-    const shapes = Utils_1.Plugins.getSupportedShapes();
-
-    for (const type of shapes) {
-      const drawer = Utils_1.Plugins.getShapeDrawer(type);
-
-      if (drawer) {
-        this.drawers.set(type, drawer);
-      }
-    }
-
-    this._options.load(this._sourceOptions);
-
     this.eventListeners = new Utils_1.EventListeners(this);
 
     if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
       this.intersectionObserver = new IntersectionObserver(entries => this.intersectionManager(entries));
     }
+
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerBuilt, {
+      container: this
+    });
   }
 
   get options() {
@@ -6205,6 +7582,9 @@ class Container {
       }
     }
 
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerPlay, {
+      container: this
+    });
     this.draw(needsUpdate || false);
   }
 
@@ -6227,6 +7607,10 @@ class Container {
     if (!this.pageHidden) {
       this.paused = true;
     }
+
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerPaused, {
+      container: this
+    });
   }
 
   draw(force) {
@@ -6294,6 +7678,9 @@ class Container {
     }
 
     this.destroyed = true;
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerDestroyed, {
+      container: this
+    });
   }
 
   exportImg(callback) {
@@ -6349,6 +7736,10 @@ class Container {
     this.particles.linksColors = new Map();
     delete this.particles.grabLineColor;
     delete this.particles.linksColor;
+    this._sourceOptions = this._options;
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerStopped, {
+      container: this
+    });
   }
 
   async loadTheme(name) {
@@ -6377,6 +7768,9 @@ class Container {
       }
     }
 
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerStarted, {
+      container: this
+    });
     this.play();
   }
 
@@ -6491,11 +7885,39 @@ class Container {
   }
 
   updateActualOptions() {
-    this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
+    this.actualOptions.responsive = [];
+    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
     this.actualOptions.setTheme(this.currentTheme);
+
+    if (this.responsiveMaxWidth != newMaxWidth) {
+      this.responsiveMaxWidth = newMaxWidth;
+      return true;
+    }
+
+    return false;
   }
 
   async init() {
+    this._options = new Options_1.Options();
+
+    for (const preset of this.presets) {
+      this._options.load(Utils_1.Plugins.getPreset(preset));
+    }
+
+    const shapes = Utils_1.Plugins.getSupportedShapes();
+
+    for (const type of shapes) {
+      const drawer = Utils_1.Plugins.getShapeDrawer(type);
+
+      if (drawer) {
+        this.drawers.set(type, drawer);
+      }
+    }
+
+    this._options.load(this._initialSourceOptions);
+
+    this._options.load(this._sourceOptions);
+
     this.actualOptions = new Options_1.Options();
     this.actualOptions.load(this._options);
     this.retina.init();
@@ -6547,6 +7969,9 @@ class Container {
       }
     }
 
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.containerInit, {
+      container: this
+    });
     this.particles.init();
     this.particles.setDensity();
 
@@ -6555,6 +7980,10 @@ class Container {
         plugin.particlesSetup();
       }
     }
+
+    Loader_1.Loader.dispatchEvent(Enums_1.EventType.particlesSetup, {
+      container: this
+    });
   }
 
   intersectionManager(entries) {
@@ -6683,9 +8112,13 @@ const Enums_1 = __webpack_require__(8678);
 class InteractionManager {
   constructor(container) {
     this.container = container;
-    const interactors = Utils_1.Plugins.getInteractors(container);
     this.externalInteractors = [];
     this.particleInteractors = [];
+    this.init();
+  }
+
+  init() {
+    const interactors = Utils_1.Plugins.getInteractors(this.container, true);
 
     for (const interactor of interactors) {
       switch (interactor.type) {
@@ -7218,7 +8651,10 @@ const Container_1 = __webpack_require__(3515);
 
 const Utils_1 = __webpack_require__(6617);
 
+const EventDispatcher_1 = __webpack_require__(7917);
+
 const tsParticlesDom = [];
+const eventDispatcher = new EventDispatcher_1.EventDispatcher();
 
 function fetchError(statusCode) {
   console.error(`Error tsParticles - fetch status: ${statusCode}`);
@@ -7283,14 +8719,14 @@ class Loader {
         canvasEl = existingCanvases[0];
 
         if (!canvasEl.className) {
-          canvasEl.className = Utils_1.Constants.canvasClass;
+          canvasEl.className = Utils_1.canvasClass;
         }
 
         generatedCanvas = false;
       } else {
         generatedCanvas = true;
         canvasEl = document.createElement("canvas");
-        canvasEl.className = Utils_1.Constants.canvasClass;
+        canvasEl.className = Utils_1.canvasClass;
         canvasEl.style.width = "100%";
         canvasEl.style.height = "100%";
         domContainer.appendChild(canvasEl);
@@ -7434,6 +8870,18 @@ class Loader {
     }
   }
 
+  static addEventListener(type, listener) {
+    eventDispatcher.addEventListener(type, listener);
+  }
+
+  static removeEventListener(type, listener) {
+    eventDispatcher.removeEventListener(type, listener);
+  }
+
+  static dispatchEvent(type, args) {
+    eventDispatcher.dispatchEvent(type, args);
+  }
+
 }
 
 exports.Loader = Loader;
@@ -7489,6 +8937,7 @@ class Particle {
     this.retina = {
       maxDistance: {}
     };
+    this.outType = Enums_1.ParticleOutType.normal;
     const pxRatio = container.retina.pixelRatio;
     const mainOptions = container.actualOptions;
     const particlesOptions = new ParticlesOptions_1.ParticlesOptions();
@@ -7567,15 +9016,32 @@ class Particle {
       }
     }
 
-    this.direction = (0, Utils_1.getParticleDirectionAngle)(this.options.move.direction);
     this.bubble = {
       inRange: false
     };
+    this.position = this.calcPosition(container, position, (0, Utils_1.clamp)(zIndexValue, 0, container.zLayers));
+    this.initialPosition = this.position.copy();
+    const canvasSize = container.canvas.size;
+    this.moveCenter = {
+      x: canvasSize.width * this.options.move.center.x / 100,
+      y: canvasSize.height * this.options.move.center.y / 100,
+      radius: this.options.move.center.radius
+    };
+    this.direction = (0, Utils_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
+
+    switch (this.options.move.direction) {
+      case Enums_1.MoveDirection.inside:
+        this.outType = Enums_1.ParticleOutType.inside;
+        break;
+
+      case Enums_1.MoveDirection.outside:
+        this.outType = Enums_1.ParticleOutType.outside;
+        break;
+    }
+
     this.initialVelocity = this.calculateVelocity();
     this.velocity = this.initialVelocity.copy();
     this.moveDecay = 1 - (0, Utils_1.getRangeValue)(this.options.move.decay);
-    this.position = this.calcPosition(container, position, (0, Utils_1.clamp)(zIndexValue, 0, container.zLayers));
-    this.initialPosition = this.position.copy();
     this.offset = Vector_1.Vector.origin;
     const particles = container.particles;
     particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
@@ -7845,6 +9311,11 @@ class Particle {
     const baseVelocity = (0, Utils_1.getParticleBaseVelocity)(this.direction);
     const res = baseVelocity.copy();
     const moveOptions = this.options.move;
+
+    if (moveOptions.direction === Enums_1.MoveDirection.inside || moveOptions.direction === Enums_1.MoveDirection.outside) {
+      return res;
+    }
+
     const rad = Math.PI / 180 * moveOptions.angle.value;
     const radOffset = Math.PI / 180 * moveOptions.angle.offset;
     const range = {
@@ -8396,6 +9867,10 @@ const ParticlesOptions_1 = __webpack_require__(5640);
 
 const Mover_1 = __webpack_require__(2682);
 
+const Enums_1 = __webpack_require__(8678);
+
+const Loader_1 = __webpack_require__(9662);
+
 class Particles {
   constructor(container) {
     this.container = container;
@@ -8414,7 +9889,7 @@ class Particles {
     const canvasSize = this.container.canvas.size;
     this.linksColors = new Map();
     this.quadTree = new Utils_1.QuadTree(new Utils_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
-    this.updaters = Utils_1.Plugins.getUpdaters(container);
+    this.updaters = Utils_1.Plugins.getUpdaters(container, true);
   }
 
   get count() {
@@ -8431,6 +9906,8 @@ class Particles {
     this.freqs.links = new Map();
     this.freqs.triangles = new Map();
     let handled = false;
+    this.updaters = Utils_1.Plugins.getUpdaters(container, true);
+    this.interactionManager.init();
 
     for (const [, plugin] of container.plugins) {
       if (plugin.particlesInitialization !== undefined) {
@@ -8489,6 +9966,12 @@ class Particles {
       const zIdx = this.zArray.indexOf(particle);
       this.zArray.splice(zIdx, 1);
       deleted++;
+      Loader_1.Loader.dispatchEvent(Enums_1.EventType.particleRemoved, {
+        container: this.container,
+        data: {
+          particle
+        }
+      });
     }
   }
 
@@ -8767,6 +10250,12 @@ class Particles {
       this.array.push(particle);
       this.zArray.push(particle);
       this.nextId++;
+      Loader_1.Loader.dispatchEvent(Enums_1.EventType.particleAdded, {
+        container: this.container,
+        data: {
+          particle
+        }
+      });
       return particle;
     } catch (e) {
       console.warn(`error adding particle: ${e}`);
@@ -8964,6 +10453,8 @@ var MoveDirection;
   MoveDirection["top"] = "top";
   MoveDirection["topLeft"] = "top-left";
   MoveDirection["topRight"] = "top-right";
+  MoveDirection["outside"] = "outside";
+  MoveDirection["inside"] = "inside";
 })(MoveDirection = exports.MoveDirection || (exports.MoveDirection = {}));
 
 /***/ }),
@@ -9208,6 +10699,24 @@ var OutMode;
 
 /***/ }),
 
+/***/ 857:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ResponsiveMode = void 0;
+var ResponsiveMode;
+
+(function (ResponsiveMode) {
+  ResponsiveMode["screen"] = "screen";
+  ResponsiveMode["canvas"] = "canvas";
+})(ResponsiveMode = exports.ResponsiveMode || (exports.ResponsiveMode = {}));
+
+/***/ }),
+
 /***/ 6674:
 /***/ ((__unused_webpack_module, exports) => {
 
@@ -9308,6 +10817,8 @@ __exportStar(__webpack_require__(7403), exports);
 
 __exportStar(__webpack_require__(5305), exports);
 
+__exportStar(__webpack_require__(857), exports);
+
 /***/ }),
 
 /***/ 399:
@@ -9328,7 +10839,7 @@ var AlterType;
 
 /***/ }),
 
-/***/ 1642:
+/***/ 8834:
 /***/ ((__unused_webpack_module, exports) => {
 
 
@@ -9389,6 +10900,32 @@ var EasingType;
 
 /***/ }),
 
+/***/ 231:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.EventType = void 0;
+var EventType;
+
+(function (EventType) {
+  EventType["containerInit"] = "containerInit";
+  EventType["particlesSetup"] = "particlesSetup";
+  EventType["containerStarted"] = "containerStarted";
+  EventType["containerStopped"] = "containerStopped";
+  EventType["containerDestroyed"] = "containerDestroyed";
+  EventType["containerPaused"] = "containerPaused";
+  EventType["containerPlay"] = "containerPlay";
+  EventType["containerBuilt"] = "containerBuilt";
+  EventType["particleAdded"] = "particleAdded";
+  EventType["particleRemoved"] = "particleRemoved";
+})(EventType = exports.EventType || (exports.EventType = {}));
+
+/***/ }),
+
 /***/ 7251:
 /***/ ((__unused_webpack_module, exports) => {
 
@@ -9444,6 +10981,25 @@ var OrbitType;
 
 /***/ }),
 
+/***/ 1087:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.ParticleOutType = void 0;
+var ParticleOutType;
+
+(function (ParticleOutType) {
+  ParticleOutType["normal"] = "normal";
+  ParticleOutType["inside"] = "inside";
+  ParticleOutType["outside"] = "outside";
+})(ParticleOutType = exports.ParticleOutType || (exports.ParticleOutType = {}));
+
+/***/ }),
+
 /***/ 4591:
 /***/ ((__unused_webpack_module, exports) => {
 
@@ -9518,7 +11074,9 @@ Object.defineProperty(exports, "__esModule", ({
 
 __exportStar(__webpack_require__(399), exports);
 
-__exportStar(__webpack_require__(1642), exports);
+__exportStar(__webpack_require__(8834), exports);
+
+__exportStar(__webpack_require__(231), exports);
 
 __exportStar(__webpack_require__(7251), exports);
 
@@ -9534,6 +11092,8 @@ __exportStar(__webpack_require__(7990), exports);
 
 __exportStar(__webpack_require__(4401), exports);
 
+__exportStar(__webpack_require__(1087), exports);
+
 /***/ }),
 
 /***/ 8678:
@@ -10095,8 +11655,8 @@ exports.FullScreen = void 0;
 
 class FullScreen {
   constructor() {
-    this.enable = false;
-    this.zIndex = -1;
+    this.enable = true;
+    this.zIndex = 0;
   }
 
   load(data) {
@@ -10454,7 +12014,7 @@ const Modes_1 = __webpack_require__(22);
 
 class Interactivity {
   constructor() {
-    this.detectsOn = Enums_1.InteractivityDetect.canvas;
+    this.detectsOn = Enums_1.InteractivityDetect.window;
     this.events = new Events_1.Events();
     this.modes = new Modes_1.Modes();
   }
@@ -11800,11 +13360,11 @@ class Options {
     }
   }
 
-  setResponsive(width, pxRatio, defaultOptions) {
-    var _a;
-
+  setResponsive(width, pxRatio, defaultOptions) {
     this.load(defaultOptions);
-    this.load((_a = this.responsive.find(t => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
+    const responsiveOptions = this.responsive.find(t => t.mode === Enums_1.ResponsiveMode.screen && screen ? t.maxWidth * pxRatio > screen.availWidth : t.maxWidth * pxRatio > width);
+    this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
+    return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
   }
 
   importPreset(preset) {
@@ -12537,6 +14097,11 @@ class Move {
   constructor() {
     this.angle = new MoveAngle_1.MoveAngle();
     this.attract = new Attract_1.Attract();
+    this.center = {
+      x: 50,
+      y: 50,
+      radius: 0
+    };
     this.decay = 0;
     this.distance = {};
     this.direction = Enums_1.MoveDirection.none;
@@ -12594,7 +14159,7 @@ class Move {
   }
 
   load(data) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
 
     if (data === undefined) {
       return;
@@ -12610,6 +14175,18 @@ class Move {
 
     this.attract.load(data.attract);
 
+    if (((_a = data.center) === null || _a === void 0 ? void 0 : _a.x) !== undefined) {
+      this.center.x = data.center.x;
+    }
+
+    if (((_b = data.center) === null || _b === void 0 ? void 0 : _b.y) !== undefined) {
+      this.center.y = data.center.y;
+    }
+
+    if (((_c = data.center) === null || _c === void 0 ? void 0 : _c.radius) !== undefined) {
+      this.center.radius = data.center.radius;
+    }
+
     if (data.decay !== undefined) {
       this.decay = data.decay;
     }
@@ -12634,19 +14211,19 @@ class Move {
     }
 
     this.gravity.load(data.gravity);
-    const outMode = (_a = data.outMode) !== null && _a !== void 0 ? _a : data.out_mode;
+    const outMode = (_d = data.outMode) !== null && _d !== void 0 ? _d : data.out_mode;
 
-    if (data.outModes !== undefined || outMode !== undefined) {
-      if (typeof data.outModes === "string" || data.outModes === undefined && outMode !== undefined) {
+    if (data.outModes || outMode) {
+      if (typeof data.outModes === "string" || !data.outModes && outMode) {
         this.outModes.load({
-          default: (_b = data.outModes) !== null && _b !== void 0 ? _b : outMode
+          default: (_e = data.outModes) !== null && _e !== void 0 ? _e : outMode
         });
       } else {
         this.outModes.load(data.outModes);
       }
     }
 
-    this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
+    this.path.load((_f = data.path) !== null && _f !== void 0 ? _f : data.noise);
 
     if (data.random !== undefined) {
       this.random = data.random;
@@ -14396,10 +15973,13 @@ exports.Responsive = void 0;
 
 const Utils_1 = __webpack_require__(6617);
 
+const Enums_1 = __webpack_require__(8678);
+
 class Responsive {
   constructor() {
     this.maxWidth = Infinity;
     this.options = {};
+    this.mode = Enums_1.ResponsiveMode.canvas;
   }
 
   load(data) {
@@ -14411,6 +15991,14 @@ class Responsive {
       this.maxWidth = data.maxWidth;
     }
 
+    if (data.mode !== undefined) {
+      if (data.mode === Enums_1.ResponsiveMode.screen) {
+        this.mode = Enums_1.ResponsiveMode.screen;
+      } else {
+        this.mode = Enums_1.ResponsiveMode.canvas;
+      }
+    }
+
     if (data.options !== undefined) {
       this.options = (0, Utils_1.deepExtend)({}, data.options);
     }
@@ -14549,6 +16137,28 @@ exports.ValueWithRandom = ValueWithRandom;
 
 /***/ }),
 
+/***/ 3105:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+
+/***/ }),
+
+/***/ 3741:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+
+/***/ }),
+
 /***/ 427:
 /***/ ((__unused_webpack_module, exports) => {
 
@@ -14641,6 +16251,10 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 
+__exportStar(__webpack_require__(3105), exports);
+
+__exportStar(__webpack_require__(3741), exports);
+
 __exportStar(__webpack_require__(7810), exports);
 
 __exportStar(__webpack_require__(3292), exports);
@@ -14663,11 +16277,9 @@ __exportStar(__webpack_require__(427), exports);
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.alterHsl = exports.drawEllipse = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.drawGrabLine = exports.gradient = exports.drawConnectLine = exports.drawLinkTriangle = exports.drawLinkLine = exports.clear = exports.paintBase = void 0;
+exports.alterHsl = exports.drawEllipse = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.drawGrabLine = exports.gradient = exports.drawConnectLine = exports.clear = exports.paintBase = exports.drawTriangle = exports.drawLine = void 0;
 
-const NumberUtils_1 = __webpack_require__(5415);
-
-const ColorUtils_1 = __webpack_require__(4595);
+const ColorUtils_1 = __webpack_require__(1642);
 
 const Enums_1 = __webpack_require__(8678);
 
@@ -14678,6 +16290,8 @@ function drawLine(context, begin, end) {
   context.closePath();
 }
 
+exports.drawLine = drawLine;
+
 function drawTriangle(context, p1, p2, p3) {
   context.beginPath();
   context.moveTo(p1.x, p1.y);
@@ -14686,6 +16300,8 @@ function drawTriangle(context, p1, p2, p3) {
   context.closePath();
 }
 
+exports.drawTriangle = drawTriangle;
+
 function paintBase(context, dimension, baseColor) {
   context.save();
   context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
@@ -14701,117 +16317,6 @@ function clear(context, dimension) {
 
 exports.clear = clear;
 
-function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
-  let drawn = false;
-
-  if ((0, NumberUtils_1.getDistance)(begin, end) <= maxDistance) {
-    drawLine(context, begin, end);
-    drawn = true;
-  } else if (warp) {
-    let pi1;
-    let pi2;
-    const endNE = {
-      x: end.x - canvasSize.width,
-      y: end.y
-    };
-    const d1 = (0, NumberUtils_1.getDistances)(begin, endNE);
-
-    if (d1.distance <= maxDistance) {
-      const yi = begin.y - d1.dy / d1.dx * begin.x;
-      pi1 = {
-        x: 0,
-        y: yi
-      };
-      pi2 = {
-        x: canvasSize.width,
-        y: yi
-      };
-    } else {
-      const endSW = {
-        x: end.x,
-        y: end.y - canvasSize.height
-      };
-      const d2 = (0, NumberUtils_1.getDistances)(begin, endSW);
-
-      if (d2.distance <= maxDistance) {
-        const yi = begin.y - d2.dy / d2.dx * begin.x;
-        const xi = -yi / (d2.dy / d2.dx);
-        pi1 = {
-          x: xi,
-          y: 0
-        };
-        pi2 = {
-          x: xi,
-          y: canvasSize.height
-        };
-      } else {
-        const endSE = {
-          x: end.x - canvasSize.width,
-          y: end.y - canvasSize.height
-        };
-        const d3 = (0, NumberUtils_1.getDistances)(begin, endSE);
-
-        if (d3.distance <= maxDistance) {
-          const yi = begin.y - d3.dy / d3.dx * begin.x;
-          const xi = -yi / (d3.dy / d3.dx);
-          pi1 = {
-            x: xi,
-            y: yi
-          };
-          pi2 = {
-            x: pi1.x + canvasSize.width,
-            y: pi1.y + canvasSize.height
-          };
-        }
-      }
-    }
-
-    if (pi1 && pi2) {
-      drawLine(context, begin, pi1);
-      drawLine(context, end, pi2);
-      drawn = true;
-    }
-  }
-
-  if (!drawn) {
-    return;
-  }
-
-  context.lineWidth = width;
-
-  if (backgroundMask) {
-    context.globalCompositeOperation = composite;
-  }
-
-  context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(colorLine, opacity);
-
-  if (shadow.enable) {
-    const shadowColor = (0, ColorUtils_1.colorToRgb)(shadow.color);
-
-    if (shadowColor) {
-      context.shadowBlur = shadow.blur;
-      context.shadowColor = (0, ColorUtils_1.getStyleFromRgb)(shadowColor);
-    }
-  }
-
-  context.stroke();
-}
-
-exports.drawLinkLine = drawLinkLine;
-
-function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
-  drawTriangle(context, pos1, pos2, pos3);
-
-  if (backgroundMask) {
-    context.globalCompositeOperation = composite;
-  }
-
-  context.fillStyle = (0, ColorUtils_1.getStyleFromRgb)(colorTriangle, opacityTriangle);
-  context.fill();
-}
-
-exports.drawLinkTriangle = drawLinkTriangle;
-
 function drawConnectLine(context, width, lineStyle, begin, end) {
   context.save();
   drawLine(context, begin, end);
@@ -15187,7 +16692,7 @@ exports.CircleWarp = CircleWarp;
 
 /***/ }),
 
-/***/ 4595:
+/***/ 1642:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
@@ -15288,7 +16793,7 @@ function colorToRgb(input, index, useIndex = true) {
   let res;
 
   if (typeof color.value === "string") {
-    if (color.value === Constants_1.Constants.randomColorValue) {
+    if (color.value === Constants_1.randomColorValue) {
       res = getRandomRgbColor();
     } else {
       res = stringToRgb(color.value);
@@ -15645,7 +17150,7 @@ exports.colorMix = colorMix;
 function getLinkColor(p1, p2, linkColor) {
   var _a, _b;
 
-  if (linkColor === Constants_1.Constants.randomColorValue) {
+  if (linkColor === Constants_1.randomColorValue) {
     return getRandomRgbColor();
   } else if (linkColor === "mid") {
     const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor();
@@ -15670,15 +17175,15 @@ exports.getLinkColor = getLinkColor;
 function getLinkRandomColor(optColor, blink, consent) {
   const color = typeof optColor === "string" ? optColor : optColor.value;
 
-  if (color === Constants_1.Constants.randomColorValue) {
+  if (color === Constants_1.randomColorValue) {
     if (consent) {
       return colorToRgb({
         value: color
       });
     } else if (blink) {
-      return Constants_1.Constants.randomColorValue;
+      return Constants_1.randomColorValue;
     } else {
-      return Constants_1.Constants.midColorValue;
+      return Constants_1.midColorValue;
     }
   } else {
     return colorToRgb({
@@ -15757,27 +17262,113 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.Constants = void 0;
-
-class Constants {}
-
-exports.Constants = Constants;
-Constants.canvasClass = "tsparticles-canvas-el";
-Constants.randomColorValue = "random";
-Constants.midColorValue = "mid";
-Constants.touchEndEvent = "touchend";
-Constants.mouseDownEvent = "mousedown";
-Constants.mouseUpEvent = "mouseup";
-Constants.mouseMoveEvent = "mousemove";
-Constants.touchStartEvent = "touchstart";
-Constants.touchMoveEvent = "touchmove";
-Constants.mouseLeaveEvent = "mouseleave";
-Constants.mouseOutEvent = "mouseout";
-Constants.touchCancelEvent = "touchcancel";
-Constants.resizeEvent = "resize";
-Constants.visibilityChangeEvent = "visibilitychange";
-Constants.noPolygonDataLoaded = "No polygon data loaded.";
-Constants.noPolygonFound = "No polygon found, you need to specify SVG url in config.";
+exports.noPolygonFound = exports.noPolygonDataLoaded = exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.touchMoveEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.touchEndEvent = exports.midColorValue = exports.randomColorValue = exports.canvasClass = void 0;
+exports.canvasClass = "tsparticles-canvas-el";
+exports.randomColorValue = "random";
+exports.midColorValue = "mid";
+exports.touchEndEvent = "touchend";
+exports.mouseDownEvent = "mousedown";
+exports.mouseUpEvent = "mouseup";
+exports.mouseMoveEvent = "mousemove";
+exports.touchStartEvent = "touchstart";
+exports.touchMoveEvent = "touchmove";
+exports.mouseLeaveEvent = "mouseleave";
+exports.mouseOutEvent = "mouseout";
+exports.touchCancelEvent = "touchcancel";
+exports.resizeEvent = "resize";
+exports.visibilityChangeEvent = "visibilitychange";
+exports.noPolygonDataLoaded = "No polygon data loaded.";
+exports.noPolygonFound = "No polygon found, you need to specify SVG url in config.";
+
+/***/ }),
+
+/***/ 7917:
+/***/ (function(__unused_webpack_module, exports) {
+
+
+
+var __classPrivateFieldSet = this && this.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
+
+var __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+
+var _EventDispatcher_listeners;
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.EventDispatcher = void 0;
+
+class EventDispatcher {
+  constructor() {
+    _EventDispatcher_listeners.set(this, void 0);
+
+    __classPrivateFieldSet(this, _EventDispatcher_listeners, new Map(), "f");
+  }
+
+  addEventListener(type, listener) {
+    var _a;
+
+    this.removeEventListener(type, listener);
+
+    if (!__classPrivateFieldGet(this, _EventDispatcher_listeners, "f").get(type)) {
+      __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").set(type, []);
+    }
+
+    (_a = __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
+  }
+
+  removeEventListener(type, listener) {
+    const arr = __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").get(type);
+
+    if (!arr) {
+      return;
+    }
+
+    const length = arr.length,
+          idx = arr.indexOf(listener);
+
+    if (idx < 0) {
+      return;
+    }
+
+    if (length === 1) {
+      __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").delete(type);
+    } else {
+      arr.splice(idx, 1);
+    }
+  }
+
+  removeAllEventListeners(type) {
+    if (!type) {
+      __classPrivateFieldSet(this, _EventDispatcher_listeners, new Map(), "f");
+    } else {
+      __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").delete(type);
+    }
+  }
+
+  dispatchEvent(type, args) {
+    var _a;
+
+    (_a = __classPrivateFieldGet(this, _EventDispatcher_listeners, "f").get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args));
+  }
+
+  hasEventListener(type) {
+    return !!__classPrivateFieldGet(this, _EventDispatcher_listeners, "f").get(type);
+  }
+
+}
+
+exports.EventDispatcher = EventDispatcher;
+_EventDispatcher_listeners = new WeakMap();
 
 /***/ }),
 
@@ -15795,6 +17386,8 @@ const Enums_1 = __webpack_require__(8678);
 
 const Constants_1 = __webpack_require__(9726);
 
+const Utils_1 = __webpack_require__(772);
+
 function manageListener(element, event, handler, add, options) {
   if (add) {
     let addOptions = {
@@ -15841,6 +17434,8 @@ class EventListeners {
 
     this.themeChangeHandler = e => this.handleThemeChange(e);
 
+    this.oldThemeChangeHandler = e => this.handleThemeChange(e);
+
     this.resizeHandler = () => this.handleWindowResize();
   }
 
@@ -15858,11 +17453,11 @@ class EventListeners {
     const container = this.container;
     const options = container.actualOptions;
     const detectType = options.interactivity.detectsOn;
-    let mouseLeaveEvent = Constants_1.Constants.mouseLeaveEvent;
+    let mouseLeaveTmpEvent = Constants_1.mouseLeaveEvent;
 
     if (detectType === Enums_1.InteractivityDetect.window) {
       container.interactivity.element = window;
-      mouseLeaveEvent = Constants_1.Constants.mouseOutEvent;
+      mouseLeaveTmpEvent = Constants_1.mouseOutEvent;
     } else if (detectType === Enums_1.InteractivityDetect.parent && container.canvas.element) {
       const canvasEl = container.canvas.element;
       container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
@@ -15870,10 +17465,18 @@ class EventListeners {
       container.interactivity.element = container.canvas.element;
     }
 
-    const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+    const mediaMatch = !(0, Utils_1.isSsr)() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
 
     if (mediaMatch) {
-      manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+      if (mediaMatch.addEventListener !== undefined) {
+        manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+      } else if (mediaMatch.addListener !== undefined) {
+        if (add) {
+          mediaMatch.addListener(this.oldThemeChangeHandler);
+        } else {
+          mediaMatch.removeListener(this.oldThemeChangeHandler);
+        }
+      }
     }
 
     const interactivityEl = container.interactivity.element;
@@ -15885,20 +17488,20 @@ class EventListeners {
     const html = interactivityEl;
 
     if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
-      manageListener(interactivityEl, Constants_1.Constants.mouseMoveEvent, this.mouseMoveHandler, add);
-      manageListener(interactivityEl, Constants_1.Constants.touchStartEvent, this.touchStartHandler, add);
-      manageListener(interactivityEl, Constants_1.Constants.touchMoveEvent, this.touchMoveHandler, add);
+      manageListener(interactivityEl, Constants_1.mouseMoveEvent, this.mouseMoveHandler, add);
+      manageListener(interactivityEl, Constants_1.touchStartEvent, this.touchStartHandler, add);
+      manageListener(interactivityEl, Constants_1.touchMoveEvent, this.touchMoveHandler, add);
 
       if (!options.interactivity.events.onClick.enable) {
-        manageListener(interactivityEl, Constants_1.Constants.touchEndEvent, this.touchEndHandler, add);
+        manageListener(interactivityEl, Constants_1.touchEndEvent, this.touchEndHandler, add);
       } else {
-        manageListener(interactivityEl, Constants_1.Constants.touchEndEvent, this.touchEndClickHandler, add);
-        manageListener(interactivityEl, Constants_1.Constants.mouseUpEvent, this.mouseUpHandler, add);
-        manageListener(interactivityEl, Constants_1.Constants.mouseDownEvent, this.mouseDownHandler, add);
+        manageListener(interactivityEl, Constants_1.touchEndEvent, this.touchEndClickHandler, add);
+        manageListener(interactivityEl, Constants_1.mouseUpEvent, this.mouseUpHandler, add);
+        manageListener(interactivityEl, Constants_1.mouseDownEvent, this.mouseDownHandler, add);
       }
 
-      manageListener(interactivityEl, mouseLeaveEvent, this.mouseLeaveHandler, add);
-      manageListener(interactivityEl, Constants_1.Constants.touchCancelEvent, this.touchCancelHandler, add);
+      manageListener(interactivityEl, mouseLeaveTmpEvent, this.mouseLeaveHandler, add);
+      manageListener(interactivityEl, Constants_1.touchCancelEvent, this.touchCancelHandler, add);
     }
 
     if (container.canvas.element) {
@@ -15927,12 +17530,12 @@ class EventListeners {
           this.resizeObserver.observe(container.canvas.element);
         }
       } else {
-        manageListener(window, Constants_1.Constants.resizeEvent, this.resizeHandler, add);
+        manageListener(window, Constants_1.resizeEvent, this.resizeHandler, add);
       }
     }
 
     if (document) {
-      manageListener(document, Constants_1.Constants.visibilityChangeEvent, this.visibilityChangeHandler, add, false);
+      manageListener(document, Constants_1.visibilityChangeEvent, this.visibilityChangeHandler, add, false);
     }
   }
 
@@ -16054,7 +17657,7 @@ class EventListeners {
     }
 
     container.interactivity.mouse.position = pos;
-    container.interactivity.status = Constants_1.Constants.mouseMoveEvent;
+    container.interactivity.status = Constants_1.mouseMoveEvent;
   }
 
   mouseTouchFinish() {
@@ -16068,7 +17671,7 @@ class EventListeners {
     delete mouse.position;
     delete mouse.clickPosition;
     delete mouse.downPosition;
-    interactivity.status = Constants_1.Constants.mouseLeaveEvent;
+    interactivity.status = Constants_1.mouseLeaveEvent;
     mouse.inside = false;
     mouse.clicking = false;
   }
@@ -16259,7 +17862,7 @@ function getDistance(pointA, pointB) {
 
 exports.getDistance = getDistance;
 
-function getParticleDirectionAngle(direction) {
+function getParticleDirectionAngle(direction, position, center) {
   if (typeof direction === "number") {
     return direction * Math.PI / 180;
   } else {
@@ -16288,6 +17891,12 @@ function getParticleDirectionAngle(direction) {
       case Enums_1.MoveDirection.topLeft:
         return -3 * Math.PI / 4;
 
+      case Enums_1.MoveDirection.inside:
+        return Math.atan2(center.y - position.y, center.x - position.x);
+
+      case Enums_1.MoveDirection.outside:
+        return Math.atan2(position.y - center.y, position.x - center.x);
+
       case Enums_1.MoveDirection.none:
       default:
         return Math.random() * Math.PI * 2;
@@ -16434,10 +18043,10 @@ class Plugins {
     }
   }
 
-  static getInteractors(container) {
+  static getInteractors(container, force = false) {
     let res = interactors.get(container);
 
-    if (!res) {
+    if (!res || force) {
       res = [...interactorsInitializers.values()].map(t => t(container));
       interactors.set(container, res);
     }
@@ -16449,10 +18058,10 @@ class Plugins {
     interactorsInitializers.set(name, initInteractor);
   }
 
-  static getUpdaters(container) {
+  static getUpdaters(container, force = false) {
     let res = updaters.get(container);
 
-    if (!res) {
+    if (!res || force) {
       res = [...updatersInitializers.values()].map(t => t(container));
       updaters.set(container, res);
     }
@@ -16767,29 +18376,29 @@ function itemFromArray(array, index, useIndex = true) {
 
 exports.itemFromArray = itemFromArray;
 
-function isPointInside(point, size, radius, direction) {
-  return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, direction);
+function isPointInside(point, size, offset, radius, direction) {
+  return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction);
 }
 
 exports.isPointInside = isPointInside;
 
-function areBoundsInside(bounds, size, direction) {
+function areBoundsInside(bounds, size, offset, direction) {
   let inside = true;
 
   if (!direction || direction === Enums_1.OutModeDirection.bottom) {
-    inside = bounds.top < size.height;
+    inside = bounds.top < size.height + offset.x;
   }
 
   if (inside && (!direction || direction === Enums_1.OutModeDirection.left)) {
-    inside = bounds.right > 0;
+    inside = bounds.right > offset.x;
   }
 
   if (inside && (!direction || direction === Enums_1.OutModeDirection.right)) {
-    inside = bounds.left < size.width;
+    inside = bounds.left < size.width + offset.y;
   }
 
   if (inside && (!direction || direction === Enums_1.OutModeDirection.top)) {
-    inside = bounds.bottom > 0;
+    inside = bounds.bottom > offset.y;
   }
 
   return inside;
@@ -16914,15 +18523,18 @@ function circleBounceDataFromParticle(p) {
 exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
 
 function circleBounce(p1, p2) {
-  const xVelocityDiff = p1.velocity.x;
-  const yVelocityDiff = p1.velocity.y;
-  const pos1 = p1.position;
-  const pos2 = p2.position;
-  const xDist = pos2.x - pos1.x;
-  const yDist = pos2.y - pos1.y;
+  const {
+    x: xVelocityDiff,
+    y: yVelocityDiff
+  } = p1.velocity.sub(p2.velocity);
+  const [pos1, pos2] = [p1.position, p2.position];
+  const {
+    dx: xDist,
+    dy: yDist
+  } = (0, NumberUtils_1.getDistances)(pos2, pos1);
 
   if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
-    const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+    const angle = -Math.atan2(yDist, xDist);
     const m1 = p1.mass;
     const m2 = p2.mass;
     const u1 = p1.velocity.rotate(angle);
@@ -17029,7 +18641,7 @@ __exportStar(__webpack_require__(4410), exports);
 
 __exportStar(__webpack_require__(4119), exports);
 
-__exportStar(__webpack_require__(4595), exports);
+__exportStar(__webpack_require__(1642), exports);
 
 __exportStar(__webpack_require__(9726), exports);
 
@@ -17076,32 +18688,16 @@ var __exportStar = this && this.__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.tsParticles = exports.pJSDom = exports.particlesJS = exports.Main = void 0;
-
-const pjs_1 = __webpack_require__(3533);
+exports.tsParticles = void 0;
 
 const main_1 = __webpack_require__(1036);
 
-Object.defineProperty(exports, "Main", ({
-  enumerable: true,
-  get: function () {
-    return main_1.Main;
-  }
-}));
 const tsParticles = new main_1.Main();
 exports.tsParticles = tsParticles;
 tsParticles.init();
-const {
-  particlesJS,
-  pJSDom
-} = (0, pjs_1.initPjs)(tsParticles);
-exports.particlesJS = particlesJS;
-exports.pJSDom = pJSDom;
 
 __exportStar(__webpack_require__(4068), exports);
 
-__exportStar(__webpack_require__(3515), exports);
-
 __exportStar(__webpack_require__(8678), exports);
 
 __exportStar(__webpack_require__(6617), exports);
@@ -17110,8 +18706,6 @@ __exportStar(__webpack_require__(2954), exports);
 
 __exportStar(__webpack_require__(9238), exports);
 
-__exportStar(__webpack_require__(847), exports);
-
 __exportStar(__webpack_require__(7981), exports);
 
 __exportStar(__webpack_require__(660), exports);
@@ -17172,7 +18766,7 @@ class Main {
     return Loader_1.Loader.set(id, element, options);
   }
 
-  loadJSON(tagId, pathConfigJson, index) {
+  async loadJSON(tagId, pathConfigJson, index) {
     return Loader_1.Loader.loadJSON(tagId, pathConfigJson, index);
   }
 
@@ -17192,7 +18786,13 @@ class Main {
     return Loader_1.Loader.domItem(index);
   }
 
-  addShape(shape, drawer, init, afterEffect, destroy) {
+  async refresh() {
+    for (const instance of this.dom()) {
+      await instance.refresh();
+    }
+  }
+
+  async addShape(shape, drawer, init, afterEffect, destroy) {
     let customDrawer;
 
     if (typeof drawer === "function") {
@@ -17207,72 +18807,50 @@ class Main {
     }
 
     Utils_1.Plugins.addShapeDrawer(shape, customDrawer);
+    await this.refresh();
   }
 
-  addPreset(preset, options, override = false) {
+  async addPreset(preset, options, override = false) {
     Utils_1.Plugins.addPreset(preset, options, override);
+    await this.refresh();
   }
 
-  addPlugin(plugin) {
+  async addPlugin(plugin) {
     Utils_1.Plugins.addPlugin(plugin);
+    await this.refresh();
   }
 
-  addPathGenerator(name, generator) {
+  async addPathGenerator(name, generator) {
     Utils_1.Plugins.addPathGenerator(name, generator);
+    await this.refresh();
   }
 
-  addInteractor(name, interactorInitializer) {
+  async addInteractor(name, interactorInitializer) {
     Utils_1.Plugins.addInteractor(name, interactorInitializer);
+    await this.refresh();
   }
 
-  addParticleUpdater(name, updaterInitializer) {
+  async addParticleUpdater(name, updaterInitializer) {
     Utils_1.Plugins.addParticleUpdater(name, updaterInitializer);
+    await this.refresh();
   }
 
-}
-
-exports.Main = Main;
-_Main_initialized = new WeakMap();
-
-/***/ }),
-
-/***/ 3533:
-/***/ ((__unused_webpack_module, exports) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports.initPjs = void 0;
-
-const initPjs = main => {
-  const particlesJS = (tagId, options) => {
-    return main.load(tagId, options);
-  };
+  addEventListener(type, listener) {
+    Loader_1.Loader.addEventListener(type, listener);
+  }
 
-  particlesJS.load = (tagId, pathConfigJson, callback) => {
-    main.loadJSON(tagId, pathConfigJson).then(container => {
-      if (container) {
-        callback(container);
-      }
-    }).catch(() => {
-      callback(undefined);
-    });
-  };
+  removeEventListener(type, listener) {
+    Loader_1.Loader.removeEventListener(type, listener);
+  }
 
-  particlesJS.setOnClickHandler = callback => {
-    main.setOnClickHandler(callback);
-  };
+  dispatchEvent(type, args) {
+    Loader_1.Loader.dispatchEvent(type, args);
+  }
 
-  const pJSDom = main.dom();
-  return {
-    particlesJS,
-    pJSDom
-  };
-};
+}
 
-exports.initPjs = initPjs;
+exports.Main = Main;
+_Main_initialized = new WeakMap();
 
 /***/ })
 
@@ -17578,8 +19156,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9685);
 /* harmony import */ var tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(737);
-/* harmony import */ var tsparticles_slim__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8996);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(967);
+/* harmony import */ var tsparticles_slim__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7330);
 /* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
 /* harmony reexport (unknown) */ for(const __WEBPACK_IMPORT_KEY__ in tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__) if(["default","loadFull","loadSlim"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = () => tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__[__WEBPACK_IMPORT_KEY__]
 /* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);