tsparticles 1.42.2 → 1.43.0

package/tsparticles.js

@@ -340,6 +340,12 @@
       Main: function() {
         return Engine;
       },
+      Options: function() {
+        return Options;
+      },
+      OptionsColor: function() {
+        return OptionsColor;
+      },
       Particle: function() {
         return Particle;
       },
@@ -349,9 +355,6 @@
       ParticlesInteractorBase: function() {
         return ParticlesInteractorBase;
       },
-      ParticlesMover: function() {
-        return ParticlesMover;
-      },
       Plugins: function() {
         return Plugins;
       },
@@ -391,6 +394,21 @@
       calcEasing: function() {
         return calcEasing;
       },
+      calcExactPositionOrRandomFromSize: function() {
+        return calcExactPositionOrRandomFromSize;
+      },
+      calcExactPositionOrRandomFromSizeRanged: function() {
+        return calcExactPositionOrRandomFromSizeRanged;
+      },
+      calcPositionFromSize: function() {
+        return calcPositionFromSize;
+      },
+      calcPositionOrRandomFromSize: function() {
+        return calcPositionOrRandomFromSize;
+      },
+      calcPositionOrRandomFromSizeRanged: function() {
+        return calcPositionOrRandomFromSizeRanged;
+      },
       calculateBounds: function() {
         return calculateBounds;
       },
@@ -550,9 +568,18 @@
       itemFromArray: function() {
         return itemFromArray;
       },
+      loadAbsorbersPlugin: function() {
+        return loadAbsorbersPlugin;
+      },
+      loadEmittersPlugin: function() {
+        return loadEmittersPlugin;
+      },
       loadFont: function() {
         return loadFont;
       },
+      loadPolygonMaskPlugin: function() {
+        return loadPolygonMaskPlugin;
+      },
       mix: function() {
         return mix;
       },
@@ -596,6 +623,111 @@
         return tsParticles;
       }
     });
+    class Constants {}
+    Constants.generatedAttribute = "generated";
+    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.";
+    class Vector {
+      constructor(xOrCoords, y) {
+        if (typeof xOrCoords !== "number" && xOrCoords) {
+          this.x = xOrCoords.x;
+          this.y = xOrCoords.y;
+        } else if (xOrCoords !== undefined && y !== undefined) {
+          this.x = xOrCoords;
+          this.y = y;
+        } else {
+          throw new Error("tsParticles - Vector not initialized correctly");
+        }
+      }
+      static clone(source) {
+        return Vector.create(source.x, source.y);
+      }
+      static create(x, y) {
+        return new Vector(x, y);
+      }
+      static get origin() {
+        return Vector.create(0, 0);
+      }
+      get angle() {
+        return Math.atan2(this.y, this.x);
+      }
+      set angle(angle) {
+        this.updateFromAngle(angle, this.length);
+      }
+      get length() {
+        return Math.sqrt(this.getLengthSq());
+      }
+      set length(length) {
+        this.updateFromAngle(this.angle, length);
+      }
+      add(v) {
+        return Vector.create(this.x + v.x, this.y + v.y);
+      }
+      addTo(v) {
+        this.x += v.x;
+        this.y += v.y;
+      }
+      sub(v) {
+        return Vector.create(this.x - v.x, this.y - v.y);
+      }
+      subFrom(v) {
+        this.x -= v.x;
+        this.y -= v.y;
+      }
+      mult(n) {
+        return Vector.create(this.x * n, this.y * n);
+      }
+      multTo(n) {
+        this.x *= n;
+        this.y *= n;
+      }
+      div(n) {
+        return Vector.create(this.x / n, this.y / n);
+      }
+      divTo(n) {
+        this.x /= n;
+        this.y /= n;
+      }
+      distanceTo(v) {
+        return this.sub(v).length;
+      }
+      getLengthSq() {
+        return this.x ** 2 + this.y ** 2;
+      }
+      distanceToSq(v) {
+        return this.sub(v).getLengthSq();
+      }
+      manhattanDistanceTo(v) {
+        return Math.abs(v.x - this.x) + Math.abs(v.y - this.y);
+      }
+      copy() {
+        return Vector.clone(this);
+      }
+      setTo(v) {
+        this.x = v.x;
+        this.y = v.y;
+      }
+      rotate(angle) {
+        return Vector.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle));
+      }
+      updateFromAngle(angle, length) {
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+      }
+    }
     function clamp(num, min, max) {
       return Math.min(Math.max(num, min), max);
     }
@@ -630,16 +762,14 @@
       } : setRangeValue(min, max);
     }
     function getValue(options) {
-      const random = options.random;
-      const {enable: enable, minimumValue: minimumValue} = typeof random === "boolean" ? {
+      const random = options.random, {enable: enable, minimumValue: minimumValue} = typeof random === "boolean" ? {
         enable: random,
         minimumValue: 0
       } : random;
       return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
     }
     function getDistances(pointA, pointB) {
-      const dx = pointA.x - pointB.x;
-      const dy = pointA.y - pointB.y;
+      const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
       return {
         dx: dx,
         dy: dy,
@@ -715,8 +845,7 @@
 
        case "ease-out-back":
         {
-          const c1 = 1.70158;
-          const c3 = c1 + 1;
+          const c1 = 1.70158, c3 = c1 + 1;
           return 1 + c3 * Math.pow(value - 1, 3) + c1 * Math.pow(value - 1, 2);
         }
 
@@ -727,29 +856,72 @@
         return value;
       }
     }
+    function calcPositionFromSize(data) {
+      var _a, _b;
+      return ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined && ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? {
+        x: data.position.x * data.size.width / 100,
+        y: data.position.y * data.size.height / 100
+      } : undefined;
+    }
+    function calcPositionOrRandomFromSize(data) {
+      var _a, _b, _c, _d;
+      return {
+        x: ((_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Math.random() * 100) * data.size.width / 100,
+        y: ((_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Math.random() * 100) * data.size.height / 100
+      };
+    }
+    function calcPositionOrRandomFromSizeRanged(data) {
+      var _a, _b;
+      const position = {
+        x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined
+      };
+      return calcPositionOrRandomFromSize({
+        size: data.size,
+        position: position
+      });
+    }
+    function calcExactPositionOrRandomFromSize(data) {
+      var _a, _b, _c, _d;
+      return {
+        x: (_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : Math.random() * data.size.width,
+        y: (_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : Math.random() * data.size.height
+      };
+    }
+    function calcExactPositionOrRandomFromSizeRanged(data) {
+      var _a, _b;
+      const position = {
+        x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined
+      };
+      return calcExactPositionOrRandomFromSize({
+        size: data.size,
+        position: position
+      });
+    }
     function rectSideBounce(pSide, pOtherSide, rectSide, rectOtherSide, velocity, factor) {
       const res = {
         bounced: false
       };
-      if (pOtherSide.min >= rectOtherSide.min && pOtherSide.min <= rectOtherSide.max && pOtherSide.max >= rectOtherSide.min && pOtherSide.max <= rectOtherSide.max) {
-        if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0) {
-          res.velocity = velocity * -factor;
-          res.bounced = true;
-        }
+      if (pOtherSide.min < rectOtherSide.min || pOtherSide.min > rectOtherSide.max || pOtherSide.max < rectOtherSide.min || pOtherSide.max > rectOtherSide.max) {
+        return res;
+      }
+      if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0) {
+        res.velocity = velocity * -factor;
+        res.bounced = true;
       }
       return res;
     }
     function checkSelector(element, selectors) {
-      if (selectors instanceof Array) {
-        for (const selector of selectors) {
-          if (element.matches(selector)) {
-            return true;
-          }
-        }
-        return false;
-      } else {
+      if (!(selectors instanceof Array)) {
         return element.matches(selectors);
       }
+      for (const selector of selectors) {
+        if (element.matches(selector)) {
+          return true;
+        }
+      }
+      return false;
     }
     function isSsr() {
       return typeof window === "undefined" || !window || typeof window.document === "undefined" || !window.document;
@@ -822,10 +994,7 @@
           if (key === "__proto__") {
             continue;
           }
-          const sourceDict = source;
-          const value = sourceDict[key];
-          const isObject = typeof value === "object";
-          const destDict = destination;
+          const sourceDict = source, value = sourceDict[key], isObject = typeof value === "object", destDict = destination;
           destDict[key] = isObject && Array.isArray(value) ? value.map((v => deepExtend(destDict[key], v))) : deepExtend(destDict[key], value);
         }
       }
@@ -837,15 +1006,13 @@
     function divModeExecute(mode, divs, callback) {
       if (divs instanceof Array) {
         for (const div of divs) {
-          const divMode = div.mode;
-          const divEnabled = div.enable;
+          const divMode = div.mode, divEnabled = div.enable;
           if (divEnabled && isInArray(mode, divMode)) {
             singleDivModeExecute(div, callback);
           }
         }
       } else {
-        const divMode = divs.mode;
-        const divEnabled = divs.enable;
+        const divMode = divs.mode, divEnabled = divs.enable;
         if (divEnabled && isInArray(mode, divMode)) {
           singleDivModeExecute(divs, callback);
         }
@@ -881,29 +1048,18 @@
       };
     }
     function circleBounce(p1, p2) {
-      const {x: xVelocityDiff, y: yVelocityDiff} = p1.velocity.sub(p2.velocity);
-      const [pos1, pos2] = [ p1.position, p2.position ];
-      const {dx: xDist, dy: yDist} = getDistances(pos2, pos1);
-      if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
-        const angle = -Math.atan2(yDist, xDist);
-        const m1 = p1.mass;
-        const m2 = p2.mass;
-        const u1 = p1.velocity.rotate(angle);
-        const u2 = p2.velocity.rotate(angle);
-        const v1 = collisionVelocity(u1, u2, m1, m2);
-        const v2 = collisionVelocity(u2, u1, m1, m2);
-        const vFinal1 = v1.rotate(-angle);
-        const vFinal2 = v2.rotate(-angle);
-        p1.velocity.x = vFinal1.x * p1.factor.x;
-        p1.velocity.y = vFinal1.y * p1.factor.y;
-        p2.velocity.x = vFinal2.x * p2.factor.x;
-        p2.velocity.y = vFinal2.y * p2.factor.y;
+      const {x: xVelocityDiff, y: yVelocityDiff} = p1.velocity.sub(p2.velocity), [pos1, pos2] = [ p1.position, p2.position ], {dx: xDist, dy: yDist} = getDistances(pos2, pos1);
+      if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+        return;
       }
+      const angle = -Math.atan2(yDist, xDist), m1 = p1.mass, m2 = p2.mass, u1 = p1.velocity.rotate(angle), u2 = p2.velocity.rotate(angle), v1 = collisionVelocity(u1, u2, m1, m2), v2 = collisionVelocity(u2, u1, m1, m2), vFinal1 = v1.rotate(-angle), vFinal2 = v2.rotate(-angle);
+      p1.velocity.x = vFinal1.x * p1.factor.x;
+      p1.velocity.y = vFinal1.y * p1.factor.y;
+      p2.velocity.x = vFinal2.x * p2.factor.x;
+      p2.velocity.y = vFinal2.y * p2.factor.y;
     }
     function rectBounce(particle, divBounds) {
-      const pPos = particle.getPosition();
-      const size = particle.getRadius();
-      const bounds = calculateBounds(pPos, size);
+      const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size);
       const resH = rectSideBounce({
         min: bounds.left,
         max: bounds.right
@@ -1017,11 +1173,7 @@
       } : input;
       let res;
       if (typeof color.value === "string") {
-        if (color.value === Constants.randomColorValue) {
-          res = getRandomRgbColor();
-        } else {
-          res = stringToRgb(color.value);
-        }
+        res = color.value === Constants.randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
       } else {
         if (color.value instanceof Array) {
           const colorSelected = itemFromArray(color.value, index, useIndex);
@@ -1029,8 +1181,7 @@
             value: colorSelected
           });
         } else {
-          const colorValue = color.value;
-          const rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+          const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
           if (rgbColor.r !== undefined) {
             res = rgbColor;
           } else {
@@ -1053,17 +1204,14 @@
       return rgb !== undefined ? rgbToHsl(rgb) : undefined;
     }
     function rgbToHsl(color) {
-      const r1 = color.r / 255;
-      const g1 = color.g / 255;
-      const b1 = color.b / 255;
-      const max = Math.max(r1, g1, b1);
-      const min = Math.min(r1, g1, b1);
+      const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255;
+      const max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1);
       const res = {
         h: 0,
         l: (max + min) / 2,
         s: 0
       };
-      if (max != min) {
+      if (max !== min) {
         res.s = res.l < .5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
         res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? 2 + (b1 - r1) / (max - min) : 4 + (r1 - g1) / (max - min);
       }
@@ -1087,8 +1235,7 @@
         b: 0,
         g: 0,
         r: 0
-      };
-      const hslPercent = {
+      }, hslPercent = {
         h: hsl.h / 360,
         l: hsl.l / 100,
         s: hsl.s / 100
@@ -1098,8 +1245,7 @@
         result.g = hslPercent.l;
         result.r = hslPercent.l;
       } else {
-        const q = hslPercent.l < .5 ? hslPercent.l * (1 + hslPercent.s) : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s;
-        const p = 2 * hslPercent.l - q;
+        const q = hslPercent.l < .5 ? hslPercent.l * (1 + hslPercent.s) : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
         result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
         result.g = hue2rgb(p, q, hslPercent.h);
         result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
@@ -1119,8 +1265,7 @@
       };
     }
     function hslToHsv(hsl) {
-      const l = hsl.l / 100, sl = hsl.s / 100;
-      const v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
+      const l = hsl.l / 100, sl = hsl.s / 100, v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
       return {
         h: hsl.h,
         s: sv * 100,
@@ -1137,8 +1282,7 @@
       };
     }
     function hsvToHsl(hsv) {
-      const v = hsv.v / 100, sv = hsv.s / 100;
-      const l = v * (1 - sv / 2), sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+      const v = hsv.v / 100, sv = hsv.s / 100, l = v * (1 - sv / 2), sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
       return {
         h: hsv.h,
         l: l * 100,
@@ -1159,8 +1303,7 @@
         b: 0,
         g: 0,
         r: 0
-      };
-      const hsvPercent = {
+      }, hsvPercent = {
         h: hsv.h / 60,
         s: hsv.s / 100,
         v: hsv.v / 100
@@ -1269,8 +1412,7 @@
       return getStyleFromHsl(hsvToHsl(color), opacity);
     }
     function colorMix(color1, color2, size1, size2) {
-      let rgb1 = color1;
-      let rgb2 = color2;
+      let rgb1 = color1, rgb2 = color2;
       if (rgb1.r === undefined) {
         rgb1 = hslToRgb(color1);
       }
@@ -1288,8 +1430,7 @@
       if (linkColor === Constants.randomColorValue) {
         return getRandomRgbColor();
       } else if (linkColor === "mid") {
-        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor();
-        const destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
+        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
         if (sourceColor && destColor && p2) {
           return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
         } else {
@@ -1393,13 +1534,11 @@
         drawLine(context, begin, end);
         drawn = true;
       } else if (warp) {
-        let pi1;
-        let pi2;
+        let pi1, pi2;
         const endNE = {
           x: end.x - canvasSize.width,
           y: end.y
-        };
-        const d1 = getDistances(begin, endNE);
+        }, d1 = getDistances(begin, endNE);
         if (d1.distance <= maxDistance) {
           const yi = begin.y - d1.dy / d1.dx * begin.x;
           pi1 = {
@@ -1414,11 +1553,9 @@
           const endSW = {
             x: end.x,
             y: end.y - canvasSize.height
-          };
-          const d2 = getDistances(begin, endSW);
+          }, d2 = getDistances(begin, endSW);
           if (d2.distance <= maxDistance) {
-            const yi = begin.y - d2.dy / d2.dx * begin.x;
-            const xi = -yi / (d2.dy / d2.dx);
+            const yi = begin.y - d2.dy / d2.dx * begin.x, xi = -yi / (d2.dy / d2.dx);
             pi1 = {
               x: xi,
               y: 0
@@ -1431,11 +1568,9 @@
             const endSE = {
               x: end.x - canvasSize.width,
               y: end.y - canvasSize.height
-            };
-            const d3 = getDistances(begin, endSE);
+            }, d3 = getDistances(begin, endSE);
             if (d3.distance <= maxDistance) {
-              const yi = begin.y - d3.dy / d3.dx * begin.x;
-              const xi = -yi / (d3.dy / d3.dx);
+              const yi = begin.y - d3.dy / d3.dx * begin.x, xi = -yi / (d3.dy / d3.dx);
               pi1 = {
                 x: xi,
                 y: yi
@@ -1487,16 +1622,11 @@
       context.restore();
     }
     function gradient(context, p1, p2, opacity) {
-      const gradStop = Math.floor(p2.getRadius() / p1.getRadius());
-      const color1 = p1.getFillColor();
-      const color2 = p2.getFillColor();
+      const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
       if (!color1 || !color2) {
         return;
       }
-      const sourcePos = p1.getPosition();
-      const destPos = p2.getPosition();
-      const midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius());
-      const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+      const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
       grad.addColorStop(0, getStyleFromHsl(color1, opacity));
       grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
       grad.addColorStop(1, getStyleFromHsl(color2, opacity));
@@ -1510,17 +1640,12 @@
       context.stroke();
       context.restore();
     }
-    function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-      var _a, _b, _c, _d, _e, _f;
-      const pos = particle.getPosition();
-      const tiltOptions = particle.options.tilt;
-      const rollOptions = particle.options.roll;
+    function drawParticle(container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow) {
+      var _a, _b, _c, _d;
+      const pos = particle.getPosition(), tiltOptions = particle.options.tilt, rollOptions = particle.options.roll;
       context.save();
       if (tiltOptions.enable || rollOptions.enable) {
-        const roll = rollOptions.enable && particle.roll;
-        const tilt = tiltOptions.enable && particle.tilt;
-        const rollHorizontal = roll && (rollOptions.mode === "horizontal" || rollOptions.mode === "both");
-        const rollVertical = roll && (rollOptions.mode === "vertical" || rollOptions.mode === "both");
+        const roll = rollOptions.enable && particle.roll, tilt = tiltOptions.enable && particle.tilt, rollHorizontal = roll && (rollOptions.mode === "horizontal" || rollOptions.mode === "both"), rollVertical = roll && (rollOptions.mode === "vertical" || rollOptions.mode === "both");
         context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
       } else {
         context.translate(pos.x, pos.y);
@@ -1540,29 +1665,16 @@
         context.shadowOffsetX = shadow.offset.x;
         context.shadowOffsetY = shadow.offset.y;
       }
-      if (gradient) {
-        const gradientAngle = gradient.angle.value;
-        const fillGradient = gradient.type === "radial" ? context.createRadialGradient(0, 0, 0, 0, 0, radius) : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-          fillGradient.addColorStop(color.stop, getStyleFromHsl({
-            h: color.value.h.value,
-            s: color.value.s.value,
-            l: color.value.l.value
-          }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
-        }
-        context.fillStyle = fillGradient;
-      } else {
-        if (fillColorValue) {
-          context.fillStyle = fillColorValue;
-        }
+      if (colorStyles.fill) {
+        context.fillStyle = colorStyles.fill;
       }
       const stroke = particle.stroke;
-      context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
-      if (strokeColorValue) {
-        context.strokeStyle = strokeColorValue;
+      context.lineWidth = (_c = particle.strokeWidth) !== null && _c !== void 0 ? _c : 0;
+      if (colorStyles.stroke) {
+        context.strokeStyle = colorStyles.stroke;
       }
       drawShape(container, context, particle, radius, opacity, delta);
-      if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
+      if (((_d = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _d !== void 0 ? _d : 0) > 0) {
         context.stroke();
       }
       if (particle.close) {
@@ -1616,20 +1728,21 @@
       context.restore();
     }
     function drawParticlePlugin(context, plugin, particle, delta) {
-      if (plugin.drawParticle !== undefined) {
-        context.save();
-        plugin.drawParticle(context, particle, delta);
-        context.restore();
+      if (!plugin.drawParticle) {
+        return;
       }
+      context.save();
+      plugin.drawParticle(context, particle, delta);
+      context.restore();
     }
     function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+      if (width <= 0) {
+        return;
+      }
       const pos = particle.getPosition();
       if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
       }
-      if (width === 0) {
-        return;
-      }
       context.lineWidth = width;
       const rotationRadian = rotation * Math.PI / 180;
       context.beginPath();
@@ -1643,151 +1756,293 @@
         l: color.l + (type === "darken" ? -1 : 1) * value
       };
     }
-    class Range {
-      constructor(x, y) {
-        this.position = {
-          x: x,
-          y: y
+    class Canvas {
+      constructor(container) {
+        this.container = container;
+        this.size = {
+          height: 0,
+          width: 0
         };
+        this.context = null;
+        this.generatedCanvas = false;
       }
-    }
-    class Circle extends Range {
-      constructor(x, y, radius) {
-        super(x, y);
-        this.radius = radius;
-      }
-      contains(point) {
-        return getDistance(point, this.position) <= this.radius;
+      init() {
+        this.resize();
+        this.initStyle();
+        this.initCover();
+        this.initTrail();
+        this.initBackground();
+        this.paint();
       }
-      intersects(range) {
-        const rect = range;
-        const circle = range;
-        const pos1 = this.position;
-        const pos2 = range.position;
-        const xDist = Math.abs(pos2.x - pos1.x);
-        const yDist = Math.abs(pos2.y - pos1.y);
-        const r = this.radius;
-        if (circle.radius !== undefined) {
-          const rSum = r + circle.radius;
-          const dist = Math.sqrt(xDist * xDist + yDist + yDist);
-          return rSum > dist;
-        } else if (rect.size !== undefined) {
-          const w = rect.size.width;
-          const h = rect.size.height;
-          const edges = Math.pow(xDist - w, 2) + Math.pow(yDist - h, 2);
-          if (xDist > r + w || yDist > r + h) {
-            return false;
-          }
-          if (xDist <= w || yDist <= h) {
-            return true;
-          }
-          return edges <= r * r;
+      loadCanvas(canvas) {
+        var _a;
+        if (this.generatedCanvas) {
+          (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        return false;
+        this.generatedCanvas = canvas.dataset && Constants.generatedAttribute in canvas.dataset ? canvas.dataset[Constants.generatedAttribute] === "true" : this.generatedCanvas;
+        this.element = canvas;
+        this.originalStyle = deepExtend({}, this.element.style);
+        this.size.height = canvas.offsetHeight;
+        this.size.width = canvas.offsetWidth;
+        this.context = this.element.getContext("2d");
+        this.container.retina.init();
+        this.initBackground();
       }
-    }
-    class Rectangle extends Range {
-      constructor(x, y, width, height) {
-        super(x, y);
-        this.size = {
-          height: height,
-          width: width
-        };
+      destroy() {
+        var _a;
+        if (this.generatedCanvas) {
+          (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+        this.draw((ctx => {
+          clear(ctx, this.size);
+        }));
       }
-      contains(point) {
-        const w = this.size.width;
-        const h = this.size.height;
-        const pos = this.position;
-        return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
+      paint() {
+        const options = this.container.actualOptions;
+        this.draw((ctx => {
+          if (options.backgroundMask.enable && options.backgroundMask.cover) {
+            clear(ctx, this.size);
+            this.paintBase(this.coverColorStyle);
+          } else {
+            this.paintBase();
+          }
+        }));
       }
-      intersects(range) {
-        const rect = range;
-        const circle = range;
-        const w = this.size.width;
-        const h = this.size.height;
-        const pos1 = this.position;
-        const pos2 = range.position;
-        if (circle.radius !== undefined) {
-          return circle.intersects(this);
-        } else if (rect.size !== undefined) {
-          const size2 = rect.size;
-          const w2 = size2.width;
-          const h2 = size2.height;
-          return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
+      clear() {
+        const options = this.container.actualOptions, trail = options.particles.move.trail;
+        if (options.backgroundMask.enable) {
+          this.paint();
+        } else if (trail.enable && trail.length > 0 && this.trailFillColor) {
+          this.paintBase(getStyleFromRgb(this.trailFillColor, 1 / trail.length));
+        } else {
+          this.draw((ctx => {
+            clear(ctx, this.size);
+          }));
         }
-        return false;
       }
-    }
-    class CircleWarp extends Circle {
-      constructor(x, y, radius, canvasSize) {
-        super(x, y, radius);
-        this.canvasSize = canvasSize;
-        this.canvasSize = {
-          height: canvasSize.height,
-          width: canvasSize.width
-        };
+      async windowResize() {
+        if (!this.element) {
+          return;
+        }
+        this.resize();
+        const container = this.container, needsRefresh = container.updateActualOptions();
+        container.particles.setDensity();
+        for (const [, plugin] of container.plugins) {
+          if (plugin.resize !== undefined) {
+            plugin.resize();
+          }
+        }
+        if (needsRefresh) {
+          await container.refresh();
+        }
       }
-      contains(point) {
-        if (super.contains(point)) {
-          return true;
+      resize() {
+        if (!this.element) {
+          return;
         }
-        const posNE = {
-          x: point.x - this.canvasSize.width,
-          y: point.y
+        const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
+          width: this.element.offsetWidth * pxRatio,
+          height: this.element.offsetHeight * pxRatio
         };
-        if (super.contains(posNE)) {
-          return true;
+        if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
+          return;
         }
-        const posSE = {
-          x: point.x - this.canvasSize.width,
-          y: point.y - this.canvasSize.height
-        };
-        if (super.contains(posSE)) {
-          return true;
+        const oldSize = Object.assign({}, size);
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
+        if (this.container.started) {
+          this.resizeFactor = {
+            width: size.width / oldSize.width,
+            height: size.height / oldSize.height
+          };
         }
-        const posSW = {
-          x: point.x,
-          y: point.y - this.canvasSize.height
-        };
-        return super.contains(posSW);
       }
-      intersects(range) {
-        if (super.intersects(range)) {
-          return true;
+      drawConnectLine(p1, p2) {
+        this.draw((ctx => {
+          var _a;
+          const lineStyle = this.lineStyle(p1, p2);
+          if (!lineStyle) {
+            return;
+          }
+          const pos1 = p1.getPosition(), pos2 = p2.getPosition();
+          drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+        }));
+      }
+      drawGrabLine(particle, lineColor, opacity, mousePos) {
+        const container = this.container;
+        this.draw((ctx => {
+          var _a;
+          const beginPos = particle.getPosition();
+          drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+        }));
+      }
+      drawParticle(particle, delta) {
+        var _a, _b, _c, _d, _e, _f;
+        if (particle.spawning || particle.destroyed) {
+          return;
         }
-        const rect = range;
-        const circle = range;
-        const newPos = {
-          x: range.position.x - this.canvasSize.width,
-          y: range.position.y - this.canvasSize.height
+        const radius = particle.getRadius();
+        if (radius <= 0) {
+          return;
+        }
+        const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+        if (!pfColor && !psColor) {
+          return;
+        }
+        let [fColor, sColor] = this.getPluginParticleColors(particle);
+        if (!fColor || !sColor) {
+          if (!fColor) {
+            fColor = pfColor ? pfColor : undefined;
+          }
+          if (!sColor) {
+            sColor = psColor ? psColor : undefined;
+          }
+        }
+        const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1, strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor;
+        const colorStyles = {
+          fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined
         };
-        if (circle.radius !== undefined) {
-          const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
-          return super.intersects(biggerCircle);
-        } else if (rect.size !== undefined) {
-          const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
-          return super.intersects(rectSW);
+        colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
+        this.draw((ctx => {
+          const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, container = this.container;
+          for (const updater of container.particles.updaters) {
+            if (updater.beforeDraw) {
+              updater.beforeDraw(particle);
+            }
+            if (updater.getColorStyles) {
+              const {fill: fill, stroke: stroke} = updater.getColorStyles(particle, ctx, radius, zOpacity);
+              if (fill) {
+                colorStyles.fill = fill;
+              }
+              if (stroke) {
+                colorStyles.stroke = stroke;
+              }
+            }
+          }
+          drawParticle(container, ctx, particle, delta, colorStyles, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow);
+          for (const updater of container.particles.updaters) {
+            if (updater.afterDraw) {
+              updater.afterDraw(particle);
+            }
+          }
+        }));
+      }
+      drawPlugin(plugin, delta) {
+        this.draw((ctx => {
+          drawPlugin(ctx, plugin, delta);
+        }));
+      }
+      drawParticlePlugin(plugin, particle, delta) {
+        this.draw((ctx => {
+          drawParticlePlugin(ctx, plugin, particle, delta);
+        }));
+      }
+      initBackground() {
+        const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
+        if (!elementStyle) {
+          return;
         }
-        return false;
+        if (background.color) {
+          const color = colorToRgb(background.color);
+          elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
+        } else {
+          elementStyle.backgroundColor = "";
+        }
+        elementStyle.backgroundImage = background.image || "";
+        elementStyle.backgroundPosition = background.position || "";
+        elementStyle.backgroundRepeat = background.repeat || "";
+        elementStyle.backgroundSize = background.size || "";
+      }
+      draw(cb) {
+        if (!this.context) {
+          return;
+        }
+        return cb(this.context);
+      }
+      initCover() {
+        const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = colorToRgb(color);
+        if (coverRgb) {
+          const coverColor = {
+            r: coverRgb.r,
+            g: coverRgb.g,
+            b: coverRgb.b,
+            a: cover.opacity
+          };
+          this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
+        }
+      }
+      initTrail() {
+        const options = this.container.actualOptions, trail = options.particles.move.trail, fillColor = colorToRgb(trail.fillColor);
+        if (fillColor) {
+          const trail = options.particles.move.trail;
+          this.trailFillColor = {
+            r: fillColor.r,
+            g: fillColor.g,
+            b: fillColor.b,
+            a: 1 / trail.length
+          };
+        }
+      }
+      getPluginParticleColors(particle) {
+        let fColor, sColor;
+        for (const [, plugin] of this.container.plugins) {
+          if (!fColor && plugin.particleFillColor) {
+            fColor = colorToHsl(plugin.particleFillColor(particle));
+          }
+          if (!sColor && plugin.particleStrokeColor) {
+            sColor = colorToHsl(plugin.particleStrokeColor(particle));
+          }
+          if (fColor && sColor) {
+            break;
+          }
+        }
+        return [ fColor, sColor ];
+      }
+      initStyle() {
+        const element = this.element, options = this.container.actualOptions;
+        if (!element) {
+          return;
+        }
+        const originalStyle = this.originalStyle;
+        if (options.fullScreen.enable) {
+          this.originalStyle = deepExtend({}, element.style);
+          element.style.setProperty("position", "fixed", "important");
+          element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+          element.style.setProperty("top", "0", "important");
+          element.style.setProperty("left", "0", "important");
+          element.style.setProperty("width", "100%", "important");
+          element.style.setProperty("height", "100%", "important");
+        } else if (originalStyle) {
+          element.style.position = originalStyle.position;
+          element.style.zIndex = originalStyle.zIndex;
+          element.style.top = originalStyle.top;
+          element.style.left = originalStyle.left;
+          element.style.width = originalStyle.width;
+          element.style.height = originalStyle.height;
+        }
+        for (const key in options.style) {
+          if (!key || !options.style) {
+            continue;
+          }
+          const value = options.style[key];
+          if (!value) {
+            continue;
+          }
+          element.style.setProperty(key, value, "important");
+        }
+      }
+      paintBase(baseColor) {
+        this.draw((ctx => {
+          paintBase(ctx, this.size, baseColor);
+        }));
+      }
+      lineStyle(p1, p2) {
+        return this.draw((ctx => {
+          const options = this.container.actualOptions, connectOptions = options.interactivity.modes.connect;
+          return gradient(ctx, p1, p2, connectOptions.links.opacity);
+        }));
       }
     }
-    class Constants {}
-    Constants.generatedAttribute = "generated";
-    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.";
     function manageListener(element, event, handler, add, options) {
       if (add) {
         let addOptions = {
@@ -1830,9 +2085,7 @@
       }
       manageListeners(add) {
         var _a;
-        const container = this.container;
-        const options = container.actualOptions;
-        const detectType = options.interactivity.detectsOn;
+        const container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
         let mouseLeaveEvent = Constants.mouseLeaveEvent;
         if (detectType === "window") {
           container.interactivity.element = window;
@@ -1914,8 +2167,7 @@
         }), 500);
       }
       handleVisibilityChange() {
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.mouseTouchFinish();
         if (!options.pauseOnBlur) {
           return;
@@ -1942,9 +2194,8 @@
       }
       mouseTouchMove(e) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const container = this.container;
-        const options = container.actualOptions;
-        if (((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element) === undefined) {
+        const container = this.container, options = container.actualOptions;
+        if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
           return;
         }
         container.interactivity.mouse.inside = true;
@@ -2003,1041 +2254,113 @@
           pos.y *= pxRatio;
         }
         container.interactivity.mouse.position = pos;
-        container.interactivity.status = Constants.mouseMoveEvent;
-      }
-      mouseTouchFinish() {
-        const interactivity = this.container.interactivity;
-        if (interactivity === undefined) {
-          return;
-        }
-        const mouse = interactivity.mouse;
-        delete mouse.position;
-        delete mouse.clickPosition;
-        delete mouse.downPosition;
-        interactivity.status = Constants.mouseLeaveEvent;
-        mouse.inside = false;
-        mouse.clicking = false;
-      }
-      mouseTouchClick(e) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const mouse = container.interactivity.mouse;
-        mouse.inside = true;
-        let handled = false;
-        const mousePosition = mouse.position;
-        if (mousePosition === undefined || !options.interactivity.events.onClick.enable) {
-          return;
-        }
-        for (const [, plugin] of container.plugins) {
-          if (plugin.clickPositionValid !== undefined) {
-            handled = plugin.clickPositionValid(mousePosition);
-            if (handled) {
-              break;
-            }
-          }
-        }
-        if (!handled) {
-          this.doMouseTouchClick(e);
-        }
-        mouse.clicking = false;
-      }
-      doMouseTouchClick(e) {
-        const container = this.container;
-        const options = container.actualOptions;
-        if (this.canPush) {
-          const mousePos = container.interactivity.mouse.position;
-          if (mousePos) {
-            container.interactivity.mouse.clickPosition = {
-              x: mousePos.x,
-              y: mousePos.y
-            };
-          } else {
-            return;
-          }
-          container.interactivity.mouse.clickTime = (new Date).getTime();
-          const onClick = options.interactivity.events.onClick;
-          if (onClick.mode instanceof Array) {
-            for (const mode of onClick.mode) {
-              this.handleClickMode(mode);
-            }
-          } else {
-            this.handleClickMode(onClick.mode);
-          }
-        }
-        if (e.type === "touchend") {
-          setTimeout((() => this.mouseTouchFinish()), 500);
-        }
-      }
-      handleThemeChange(e) {
-        const mediaEvent = e;
-        const themeName = mediaEvent.matches ? this.container.options.defaultDarkTheme : this.container.options.defaultLightTheme;
-        const theme = this.container.options.themes.find((theme => theme.name === themeName));
-        if (theme && theme.default.auto) {
-          this.container.loadTheme(themeName);
-        }
-      }
-      handleClickMode(mode) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const pushNb = options.interactivity.modes.push.quantity;
-        const removeNb = options.interactivity.modes.remove.quantity;
-        switch (mode) {
-         case "push":
-          {
-            if (pushNb > 0) {
-              const pushOptions = options.interactivity.modes.push;
-              const group = itemFromArray([ undefined, ...pushOptions.groups ]);
-              const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
-              container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
-            }
-            break;
-          }
-
-         case "remove":
-          container.particles.removeQuantity(removeNb);
-          break;
-
-         case "bubble":
-          container.bubble.clicking = true;
-          break;
-
-         case "repulse":
-          container.repulse.clicking = true;
-          container.repulse.count = 0;
-          for (const particle of container.repulse.particles) {
-            particle.velocity.setTo(particle.initialVelocity);
-          }
-          container.repulse.particles = [];
-          container.repulse.finish = false;
-          setTimeout((() => {
-            if (!container.destroyed) {
-              container.repulse.clicking = false;
-            }
-          }), options.interactivity.modes.repulse.duration * 1e3);
-          break;
-
-         case "attract":
-          container.attract.clicking = true;
-          container.attract.count = 0;
-          for (const particle of container.attract.particles) {
-            particle.velocity.setTo(particle.initialVelocity);
-          }
-          container.attract.particles = [];
-          container.attract.finish = false;
-          setTimeout((() => {
-            if (!container.destroyed) {
-              container.attract.clicking = false;
-            }
-          }), options.interactivity.modes.attract.duration * 1e3);
-          break;
-
-         case "pause":
-          if (container.getAnimationStatus()) {
-            container.pause();
-          } else {
-            container.play();
-          }
-          break;
-        }
-        for (const [, plugin] of container.plugins) {
-          if (plugin.handleClickMode) {
-            plugin.handleClickMode(mode);
-          }
-        }
-      }
-    }
-    class ExternalInteractorBase {
-      constructor(container) {
-        this.container = container;
-        this.type = 0;
-      }
-    }
-    class FrameManager {
-      constructor(container) {
-        this.container = container;
-      }
-      async nextFrame(timestamp) {
-        var _a;
-        try {
-          const container = this.container;
-          if (container.lastFrameTime !== undefined && timestamp < container.lastFrameTime + 1e3 / container.fpsLimit) {
-            container.draw(false);
-            return;
-          }
-          (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : container.lastFrameTime = timestamp;
-          const deltaValue = timestamp - container.lastFrameTime;
-          const delta = {
-            value: deltaValue,
-            factor: 60 * deltaValue / 1e3
-          };
-          container.lifeTime += delta.value;
-          container.lastFrameTime = timestamp;
-          if (deltaValue > 1e3) {
-            container.draw(false);
-            return;
-          }
-          await container.particles.draw(delta);
-          if (container.duration > 0 && container.lifeTime > container.duration) {
-            container.destroy();
-            return;
-          }
-          if (container.getAnimationStatus()) {
-            container.draw(false);
-          }
-        } catch (e) {
-          console.error("tsParticles error in animation loop", e);
-        }
-      }
-    }
-    var __classPrivateFieldSet = undefined && undefined.__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 = undefined && undefined.__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 _InteractionManager_engine;
-    class InteractionManager {
-      constructor(engine, container) {
-        this.container = container;
-        _InteractionManager_engine.set(this, void 0);
-        __classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
-        this.externalInteractors = [];
-        this.particleInteractors = [];
-        this.init();
-      }
-      init() {
-        const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
-        this.externalInteractors = [];
-        this.particleInteractors = [];
-        for (const interactor of interactors) {
-          switch (interactor.type) {
-           case 0:
-            this.externalInteractors.push(interactor);
-            break;
-
-           case 1:
-            this.particleInteractors.push(interactor);
-            break;
-          }
-        }
-      }
-      async externalInteract(delta) {
-        for (const interactor of this.externalInteractors) {
-          if (interactor.isEnabled()) {
-            await interactor.interact(delta);
-          }
-        }
-      }
-      async particlesInteract(particle, delta) {
-        for (const interactor of this.externalInteractors) {
-          interactor.reset(particle);
-        }
-        for (const interactor of this.particleInteractors) {
-          if (interactor.isEnabled(particle)) {
-            await interactor.interact(particle, delta);
-          }
-        }
-      }
-    }
-    _InteractionManager_engine = new WeakMap;
-    class ParticlesInteractorBase {
-      constructor(container) {
-        this.container = container;
-        this.type = 1;
-      }
-    }
-    function applyDistance(particle) {
-      const initialPosition = particle.initialPosition;
-      const {dx: dx, dy: dy} = getDistances(initialPosition, particle.position);
-      const dxFixed = Math.abs(dx), dyFixed = Math.abs(dy);
-      const hDistance = particle.retina.maxDistance.horizontal;
-      const vDistance = particle.retina.maxDistance.vertical;
-      if (!hDistance && !vDistance) {
-        return;
-      }
-      if ((hDistance && dxFixed >= hDistance || vDistance && dyFixed >= vDistance) && !particle.misplaced) {
-        particle.misplaced = !!hDistance && dxFixed > hDistance || !!vDistance && dyFixed > vDistance;
-        if (hDistance) {
-          particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
-        }
-        if (vDistance) {
-          particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
-        }
-      } else if ((!hDistance || dxFixed < hDistance) && (!vDistance || dyFixed < vDistance) && particle.misplaced) {
-        particle.misplaced = false;
-      } else if (particle.misplaced) {
-        const pos = particle.position, vel = particle.velocity;
-        if (hDistance && (pos.x < initialPosition.x && vel.x < 0 || pos.x > initialPosition.x && vel.x > 0)) {
-          vel.x *= -Math.random();
-        }
-        if (vDistance && (pos.y < initialPosition.y && vel.y < 0 || pos.y > initialPosition.y && vel.y > 0)) {
-          vel.y *= -Math.random();
-        }
-      }
-    }
-    class ParticlesMover {
-      constructor(container) {
-        this.container = container;
-      }
-      move(particle, delta) {
-        if (particle.destroyed) {
-          return;
-        }
-        this.moveParticle(particle, delta);
-        this.moveParallax(particle);
-      }
-      moveParticle(particle, delta) {
-        var _a, _b, _c;
-        var _d, _e;
-        const particleOptions = particle.options;
-        const moveOptions = particleOptions.move;
-        if (!moveOptions.enable) {
-          return;
-        }
-        const container = this.container, slowFactor = this.getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor, moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio, maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, diffFactor = 2, speedFactor = sizeFactor * slowFactor * (delta.factor || 1) / diffFactor, moveSpeed = baseSpeed * speedFactor;
-        this.applyPath(particle, delta);
-        const gravityOptions = particle.gravity;
-        const gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
-        if (gravityOptions.enable && moveSpeed) {
-          particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (60 * moveSpeed);
-        }
-        if (moveDrift && moveSpeed) {
-          particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
-        }
-        const decay = particle.moveDecay;
-        if (decay != 1) {
-          particle.velocity.multTo(decay);
-        }
-        const velocity = particle.velocity.mult(moveSpeed);
-        const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
-        if (gravityOptions.enable && maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
-          velocity.y = gravityFactor * maxSpeed;
-          if (moveSpeed) {
-            particle.velocity.y = velocity.y / moveSpeed;
-          }
-        }
-        const zIndexOptions = particle.options.zIndex, zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
-        if (moveOptions.spin.enable) {
-          this.spin(particle, moveSpeed);
-        } else {
-          if (zVelocityFactor != 1) {
-            velocity.multTo(zVelocityFactor);
-          }
-          particle.position.addTo(velocity);
-          if (moveOptions.vibrate) {
-            particle.position.x += Math.sin(particle.position.x * Math.cos(particle.position.y));
-            particle.position.y += Math.cos(particle.position.y * Math.sin(particle.position.x));
-          }
-        }
-        applyDistance(particle);
-      }
-      spin(particle, moveSpeed) {
-        const container = this.container;
-        if (!particle.spin) {
-          return;
-        }
-        const updateFunc = {
-          x: particle.spin.direction === "clockwise" ? Math.cos : Math.sin,
-          y: particle.spin.direction === "clockwise" ? Math.sin : Math.cos
-        };
-        particle.position.x = particle.spin.center.x + particle.spin.radius * updateFunc.x(particle.spin.angle);
-        particle.position.y = particle.spin.center.y + particle.spin.radius * updateFunc.y(particle.spin.angle);
-        particle.spin.radius += particle.spin.acceleration;
-        const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height);
-        if (particle.spin.radius > maxCanvasSize / 2) {
-          particle.spin.radius = maxCanvasSize / 2;
-          particle.spin.acceleration *= -1;
-        } else if (particle.spin.radius < 0) {
-          particle.spin.radius = 0;
-          particle.spin.acceleration *= -1;
-        }
-        particle.spin.angle += moveSpeed / 100 * (1 - particle.spin.radius / maxCanvasSize);
-      }
-      applyPath(particle, delta) {
-        const particlesOptions = particle.options;
-        const pathOptions = particlesOptions.move.path;
-        const pathEnabled = pathOptions.enable;
-        if (!pathEnabled) {
-          return;
-        }
-        const container = this.container;
-        if (particle.lastPathTime <= particle.pathDelay) {
-          particle.lastPathTime += delta.value;
-          return;
-        }
-        const path = container.pathGenerator.generate(particle);
-        particle.velocity.addTo(path);
-        if (pathOptions.clamp) {
-          particle.velocity.x = clamp(particle.velocity.x, -1, 1);
-          particle.velocity.y = clamp(particle.velocity.y, -1, 1);
-        }
-        particle.lastPathTime -= particle.pathDelay;
-      }
-      moveParallax(particle) {
-        const container = this.container;
-        const options = container.actualOptions;
-        if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
-          return;
-        }
-        const parallaxForce = options.interactivity.events.onHover.parallax.force;
-        const mousePos = container.interactivity.mouse.position;
-        if (!mousePos) {
-          return;
-        }
-        const canvasCenter = {
-          x: container.canvas.size.width / 2,
-          y: container.canvas.size.height / 2
-        };
-        const parallaxSmooth = options.interactivity.events.onHover.parallax.smooth;
-        const factor = particle.getRadius() / parallaxForce;
-        const tmp = {
-          x: (mousePos.x - canvasCenter.x) * factor,
-          y: (mousePos.y - canvasCenter.y) * factor
-        };
-        particle.offset.x += (tmp.x - particle.offset.x) / parallaxSmooth;
-        particle.offset.y += (tmp.y - particle.offset.y) / parallaxSmooth;
-      }
-      getProximitySpeedFactor(particle) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const active = isInArray("slow", options.interactivity.events.onHover.mode);
-        if (!active) {
-          return 1;
-        }
-        const mousePos = this.container.interactivity.mouse.position;
-        if (!mousePos) {
-          return 1;
-        }
-        const particlePos = particle.getPosition();
-        const dist = getDistance(mousePos, particlePos);
-        const radius = container.retina.slowModeRadius;
-        if (dist > radius) {
-          return 1;
-        }
-        const proximityFactor = dist / radius || 0;
-        const slowFactor = options.interactivity.modes.slow.factor;
-        return proximityFactor / slowFactor;
-      }
-    }
-    var Plugins_classPrivateFieldSet = undefined && undefined.__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 _Plugins_engine;
-    class Plugins {
-      constructor(engine) {
-        _Plugins_engine.set(this, void 0);
-        Plugins_classPrivateFieldSet(this, _Plugins_engine, engine, "f");
-        this.plugins = [];
-        this.interactorsInitializers = new Map;
-        this.updatersInitializers = new Map;
-        this.interactors = new Map;
-        this.updaters = new Map;
-        this.presets = new Map;
-        this.drawers = new Map;
-        this.pathGenerators = new Map;
-      }
-      getPlugin(plugin) {
-        return this.plugins.find((t => t.id === plugin));
-      }
-      addPlugin(plugin) {
-        if (!this.getPlugin(plugin.id)) {
-          this.plugins.push(plugin);
-        }
-      }
-      getAvailablePlugins(container) {
-        const res = new Map;
-        for (const plugin of this.plugins) {
-          if (!plugin.needsPlugin(container.actualOptions)) {
-            continue;
-          }
-          res.set(plugin.id, plugin.getPlugin(container));
-        }
-        return res;
-      }
-      loadOptions(options, sourceOptions) {
-        for (const plugin of this.plugins) {
-          plugin.loadOptions(options, sourceOptions);
-        }
-      }
-      getPreset(preset) {
-        return this.presets.get(preset);
-      }
-      addPreset(presetKey, options, override = false) {
-        if (override || !this.getPreset(presetKey)) {
-          this.presets.set(presetKey, options);
-        }
-      }
-      addShapeDrawer(type, drawer) {
-        if (!this.getShapeDrawer(type)) {
-          this.drawers.set(type, drawer);
-        }
-      }
-      getShapeDrawer(type) {
-        return this.drawers.get(type);
-      }
-      getSupportedShapes() {
-        return this.drawers.keys();
-      }
-      getPathGenerator(type) {
-        return this.pathGenerators.get(type);
-      }
-      addPathGenerator(type, pathGenerator) {
-        if (!this.getPathGenerator(type)) {
-          this.pathGenerators.set(type, pathGenerator);
-        }
-      }
-      getInteractors(container, force = false) {
-        let res = this.interactors.get(container);
-        if (!res || force) {
-          res = [ ...this.interactorsInitializers.values() ].map((t => t(container)));
-          this.interactors.set(container, res);
-        }
-        return res;
-      }
-      addInteractor(name, initInteractor) {
-        this.interactorsInitializers.set(name, initInteractor);
-      }
-      getUpdaters(container, force = false) {
-        let res = this.updaters.get(container);
-        if (!res || force) {
-          res = [ ...this.updatersInitializers.values() ].map((t => t(container)));
-          this.updaters.set(container, res);
-        }
-        return res;
-      }
-      addParticleUpdater(name, initUpdater) {
-        this.updatersInitializers.set(name, initUpdater);
-      }
-    }
-    _Plugins_engine = new WeakMap;
-    class Point {
-      constructor(position, particle) {
-        this.position = position;
-        this.particle = particle;
-      }
-    }
-    class QuadTree {
-      constructor(rectangle, capacity) {
-        this.rectangle = rectangle;
-        this.capacity = capacity;
-        this.points = [];
-        this.divided = false;
-      }
-      subdivide() {
-        const x = this.rectangle.position.x;
-        const y = this.rectangle.position.y;
-        const w = this.rectangle.size.width;
-        const h = this.rectangle.size.height;
-        const capacity = this.capacity;
-        this.northEast = new QuadTree(new Rectangle(x, y, w / 2, h / 2), capacity);
-        this.northWest = new QuadTree(new Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
-        this.southEast = new QuadTree(new Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
-        this.southWest = new QuadTree(new Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
-        this.divided = true;
-      }
-      insert(point) {
-        var _a, _b, _c, _d, _e;
-        if (!this.rectangle.contains(point.position)) {
-          return false;
-        }
-        if (this.points.length < this.capacity) {
-          this.points.push(point);
-          return true;
-        }
-        if (!this.divided) {
-          this.subdivide();
-        }
-        return (_e = ((_a = this.northEast) === null || _a === void 0 ? void 0 : _a.insert(point)) || ((_b = this.northWest) === null || _b === void 0 ? void 0 : _b.insert(point)) || ((_c = this.southEast) === null || _c === void 0 ? void 0 : _c.insert(point)) || ((_d = this.southWest) === null || _d === void 0 ? void 0 : _d.insert(point))) !== null && _e !== void 0 ? _e : false;
-      }
-      queryCircle(position, radius) {
-        return this.query(new Circle(position.x, position.y, radius));
-      }
-      queryCircleWarp(position, radius, containerOrSize) {
-        const container = containerOrSize;
-        const size = containerOrSize;
-        return this.query(new CircleWarp(position.x, position.y, radius, container.canvas !== undefined ? container.canvas.size : size));
-      }
-      queryRectangle(position, size) {
-        return this.query(new Rectangle(position.x, position.y, size.width, size.height));
-      }
-      query(range, found) {
-        var _a, _b, _c, _d;
-        const res = found !== null && found !== void 0 ? found : [];
-        if (!range.intersects(this.rectangle)) {
-          return [];
-        } else {
-          for (const p of this.points) {
-            if (!range.contains(p.position) && getDistance(range.position, p.position) > p.particle.getRadius()) {
-              continue;
-            }
-            res.push(p.particle);
-          }
-          if (this.divided) {
-            (_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
-            (_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
-            (_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
-            (_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
-          }
-        }
-        return res;
-      }
-    }
-    class Vector {
-      constructor(x, y) {
-        let defX, defY;
-        if (y === undefined) {
-          if (typeof x === "number") {
-            throw new Error("tsParticles - Vector not initialized correctly");
-          }
-          const coords = x;
-          [defX, defY] = [ coords.x, coords.y ];
-        } else {
-          [defX, defY] = [ x, y ];
-        }
-        this.x = defX;
-        this.y = defY;
-      }
-      static clone(source) {
-        return Vector.create(source.x, source.y);
-      }
-      static create(x, y) {
-        return new Vector(x, y);
-      }
-      static get origin() {
-        return Vector.create(0, 0);
-      }
-      get angle() {
-        return Math.atan2(this.y, this.x);
-      }
-      set angle(angle) {
-        this.updateFromAngle(angle, this.length);
-      }
-      get length() {
-        return Math.sqrt(this.x ** 2 + this.y ** 2);
-      }
-      set length(length) {
-        this.updateFromAngle(this.angle, length);
-      }
-      add(v) {
-        return Vector.create(this.x + v.x, this.y + v.y);
-      }
-      addTo(v) {
-        this.x += v.x;
-        this.y += v.y;
-      }
-      sub(v) {
-        return Vector.create(this.x - v.x, this.y - v.y);
-      }
-      subFrom(v) {
-        this.x -= v.x;
-        this.y -= v.y;
-      }
-      mult(n) {
-        return Vector.create(this.x * n, this.y * n);
-      }
-      multTo(n) {
-        this.x *= n;
-        this.y *= n;
-      }
-      div(n) {
-        return Vector.create(this.x / n, this.y / n);
-      }
-      divTo(n) {
-        this.x /= n;
-        this.y /= n;
-      }
-      distanceTo(v) {
-        return this.sub(v).length;
-      }
-      getLengthSq() {
-        return this.x ** 2 + this.y ** 2;
-      }
-      distanceToSq(v) {
-        return this.sub(v).getLengthSq();
-      }
-      manhattanDistanceTo(v) {
-        return Math.abs(v.x - this.x) + Math.abs(v.y - this.y);
-      }
-      copy() {
-        return Vector.clone(this);
-      }
-      setTo(velocity) {
-        this.x = velocity.x;
-        this.y = velocity.y;
-      }
-      rotate(angle) {
-        return Vector.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle));
-      }
-      updateFromAngle(angle, length) {
-        this.x = Math.cos(angle) * length;
-        this.y = Math.sin(angle) * length;
-      }
-    }
-    class Vector3d extends Vector {
-      constructor(x, y, z) {
-        super(x, y);
-        this.z = z === undefined ? x.z : z;
-      }
-      static clone(source) {
-        return Vector3d.create(source.x, source.y, source.z);
-      }
-      static create(x, y, z) {
-        return new Vector3d(x, y, z);
-      }
-      add(v) {
-        return v instanceof Vector3d ? Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z) : super.add(v);
-      }
-      addTo(v) {
-        super.addTo(v);
-        if (v instanceof Vector3d) {
-          this.z += v.z;
-        }
-      }
-      sub(v) {
-        return v instanceof Vector3d ? Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z) : super.sub(v);
-      }
-      subFrom(v) {
-        super.subFrom(v);
-        if (v instanceof Vector3d) {
-          this.z -= v.z;
-        }
-      }
-      mult(n) {
-        return Vector3d.create(this.x * n, this.y * n, this.z * n);
-      }
-      multTo(n) {
-        super.multTo(n);
-        this.z *= n;
-      }
-      div(n) {
-        return Vector3d.create(this.x / n, this.y / n, this.z / n);
-      }
-      divTo(n) {
-        super.divTo(n);
-        this.z /= n;
-      }
-      copy() {
-        return Vector3d.clone(this);
-      }
-      setTo(v) {
-        super.setTo(v);
-        if (v instanceof Vector3d) {
-          this.z = v.z;
-        }
-      }
-    }
-    class Canvas {
-      constructor(container) {
-        this.container = container;
-        this.size = {
-          height: 0,
-          width: 0
-        };
-        this.context = null;
-        this.generatedCanvas = false;
-      }
-      init() {
-        this.resize();
-        this.initStyle();
-        this.initCover();
-        this.initTrail();
-        this.initBackground();
-        this.paint();
-      }
-      loadCanvas(canvas) {
-        var _a;
-        if (this.generatedCanvas) {
-          (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
-        }
-        this.generatedCanvas = canvas.dataset && Constants.generatedAttribute in canvas.dataset ? canvas.dataset[Constants.generatedAttribute] === "true" : this.generatedCanvas;
-        this.element = canvas;
-        this.originalStyle = deepExtend({}, this.element.style);
-        this.size.height = canvas.offsetHeight;
-        this.size.width = canvas.offsetWidth;
-        this.context = this.element.getContext("2d");
-        this.container.retina.init();
-        this.initBackground();
-      }
-      destroy() {
-        var _a;
-        if (this.generatedCanvas) {
-          (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
-        }
-        this.draw((ctx => {
-          clear(ctx, this.size);
-        }));
-      }
-      paint() {
-        const options = this.container.actualOptions;
-        this.draw((ctx => {
-          if (options.backgroundMask.enable && options.backgroundMask.cover) {
-            clear(ctx, this.size);
-            this.paintBase(this.coverColorStyle);
-          } else {
-            this.paintBase();
-          }
-        }));
-      }
-      clear() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
-        if (options.backgroundMask.enable) {
-          this.paint();
-        } else if (trail.enable && trail.length > 0 && this.trailFillColor) {
-          this.paintBase(getStyleFromRgb(this.trailFillColor, 1 / trail.length));
-        } else {
-          this.draw((ctx => {
-            clear(ctx, this.size);
-          }));
-        }
-      }
-      async windowResize() {
-        if (!this.element) {
-          return;
-        }
-        const container = this.container;
-        this.resize();
-        const needsRefresh = container.updateActualOptions();
-        container.particles.setDensity();
-        for (const [, plugin] of container.plugins) {
-          if (plugin.resize !== undefined) {
-            plugin.resize();
-          }
-        }
-        if (needsRefresh) {
-          await container.refresh();
-        }
-      }
-      resize() {
-        if (!this.element) {
-          return;
-        }
-        const container = this.container;
-        const pxRatio = container.retina.pixelRatio;
-        const size = container.canvas.size;
-        const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
-        if (this.container.started) {
-          this.resizeFactor = {
-            width: size.width / oldSize.width,
-            height: size.height / oldSize.height
-          };
-        }
-      }
-      drawConnectLine(p1, p2) {
-        this.draw((ctx => {
-          var _a;
-          const lineStyle = this.lineStyle(p1, p2);
-          if (!lineStyle) {
-            return;
-          }
-          const pos1 = p1.getPosition();
-          const pos2 = p2.getPosition();
-          drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
-        }));
-      }
-      drawGrabLine(particle, lineColor, opacity, mousePos) {
-        const container = this.container;
-        this.draw((ctx => {
-          var _a;
-          const beginPos = particle.getPosition();
-          drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
-        }));
-      }
-      drawParticle(particle, delta) {
-        var _a, _b, _c, _d, _e, _f;
-        if (particle.spawning || particle.destroyed) {
-          return;
-        }
-        const pfColor = particle.getFillColor();
-        const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
-        if (!pfColor && !psColor) {
-          return;
-        }
-        let [fColor, sColor] = this.getPluginParticleColors(particle);
-        const pOptions = particle.options;
-        const twinkle = pOptions.twinkle.particles;
-        const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
-        if (!fColor || !sColor) {
-          const twinkleRgb = colorToHsl(twinkle.color);
-          if (!fColor) {
-            fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
-          }
-          if (!sColor) {
-            sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
-          }
-        }
-        const options = this.container.actualOptions;
-        const zIndexOptions = particle.options.zIndex;
-        const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
-        const radius = particle.getRadius();
-        const opacity = twinkling ? getRangeValue(twinkle.opacity) : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
-        const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
-        const zOpacity = opacity * zOpacityFactor;
-        const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;
-        if (!fillColorValue && !sColor) {
-          return;
-        }
-        this.draw((ctx => {
-          const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
-          const zStrokeOpacity = strokeOpacity * zOpacityFactor;
-          const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
-          if (radius <= 0) {
-            return;
-          }
-          const container = this.container;
-          for (const updater of container.particles.updaters) {
-            if (updater.beforeDraw) {
-              updater.beforeDraw(particle);
-            }
-          }
-          drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
-          for (const updater of container.particles.updaters) {
-            if (updater.afterDraw) {
-              updater.afterDraw(particle);
-            }
-          }
-        }));
-      }
-      drawPlugin(plugin, delta) {
-        this.draw((ctx => {
-          drawPlugin(ctx, plugin, delta);
-        }));
-      }
-      drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx => {
-          drawParticlePlugin(ctx, plugin, particle, delta);
-        }));
+        container.interactivity.status = Constants.mouseMoveEvent;
       }
-      initBackground() {
-        const options = this.container.actualOptions;
-        const background = options.background;
-        const element = this.element;
-        const elementStyle = element === null || element === void 0 ? void 0 : element.style;
-        if (!elementStyle) {
+      mouseTouchFinish() {
+        const interactivity = this.container.interactivity;
+        if (!interactivity) {
           return;
         }
-        if (background.color) {
-          const color = colorToRgb(background.color);
-          elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
-        } else {
-          elementStyle.backgroundColor = "";
-        }
-        elementStyle.backgroundImage = background.image || "";
-        elementStyle.backgroundPosition = background.position || "";
-        elementStyle.backgroundRepeat = background.repeat || "";
-        elementStyle.backgroundSize = background.size || "";
+        const mouse = interactivity.mouse;
+        delete mouse.position;
+        delete mouse.clickPosition;
+        delete mouse.downPosition;
+        interactivity.status = Constants.mouseLeaveEvent;
+        mouse.inside = false;
+        mouse.clicking = false;
       }
-      draw(cb) {
-        if (!this.context) {
+      mouseTouchClick(e) {
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
+        mouse.inside = true;
+        let handled = false;
+        const mousePosition = mouse.position;
+        if (!mousePosition || !options.interactivity.events.onClick.enable) {
           return;
         }
-        return cb(this.context);
-      }
-      initCover() {
-        const options = this.container.actualOptions;
-        const cover = options.backgroundMask.cover;
-        const color = cover.color;
-        const coverRgb = colorToRgb(color);
-        if (coverRgb) {
-          const coverColor = {
-            r: coverRgb.r,
-            g: coverRgb.g,
-            b: coverRgb.b,
-            a: cover.opacity
-          };
-          this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
-          console.log(this.coverColorStyle);
+        for (const [, plugin] of container.plugins) {
+          if (!plugin.clickPositionValid) {
+            continue;
+          }
+          handled = plugin.clickPositionValid(mousePosition);
+          if (handled) {
+            break;
+          }
         }
-      }
-      initTrail() {
-        const options = this.container.actualOptions;
-        const trail = options.particles.move.trail;
-        const fillColor = colorToRgb(trail.fillColor);
-        if (fillColor) {
-          const trail = options.particles.move.trail;
-          this.trailFillColor = {
-            r: fillColor.r,
-            g: fillColor.g,
-            b: fillColor.b,
-            a: 1 / trail.length
-          };
+        if (!handled) {
+          this.doMouseTouchClick(e);
         }
+        mouse.clicking = false;
       }
-      getPluginParticleColors(particle) {
-        let fColor;
-        let sColor;
-        for (const [, plugin] of this.container.plugins) {
-          if (!fColor && plugin.particleFillColor) {
-            fColor = colorToHsl(plugin.particleFillColor(particle));
-          }
-          if (!sColor && plugin.particleStrokeColor) {
-            sColor = colorToHsl(plugin.particleStrokeColor(particle));
+      doMouseTouchClick(e) {
+        const container = this.container, options = container.actualOptions;
+        if (this.canPush) {
+          const mousePos = container.interactivity.mouse.position;
+          if (!mousePos) {
+            return;
           }
-          if (fColor && sColor) {
-            break;
+          container.interactivity.mouse.clickPosition = {
+            x: mousePos.x,
+            y: mousePos.y
+          };
+          container.interactivity.mouse.clickTime = (new Date).getTime();
+          const onClick = options.interactivity.events.onClick;
+          if (onClick.mode instanceof Array) {
+            for (const mode of onClick.mode) {
+              this.handleClickMode(mode);
+            }
+          } else {
+            this.handleClickMode(onClick.mode);
           }
         }
-        return [ fColor, sColor ];
-      }
-      initStyle() {
-        const element = this.element, options = this.container.actualOptions;
-        if (!element) {
-          return;
+        if (e.type === "touchend") {
+          setTimeout((() => this.mouseTouchFinish()), 500);
         }
-        const originalStyle = this.originalStyle;
-        if (options.fullScreen.enable) {
-          this.originalStyle = deepExtend({}, element.style);
-          element.style.setProperty("position", "fixed", "important");
-          element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
-          element.style.setProperty("top", "0", "important");
-          element.style.setProperty("left", "0", "important");
-          element.style.setProperty("width", "100%", "important");
-          element.style.setProperty("height", "100%", "important");
-        } else if (originalStyle) {
-          element.style.position = originalStyle.position;
-          element.style.zIndex = originalStyle.zIndex;
-          element.style.top = originalStyle.top;
-          element.style.left = originalStyle.left;
-          element.style.width = originalStyle.width;
-          element.style.height = originalStyle.height;
+      }
+      handleThemeChange(e) {
+        const mediaEvent = e, themeName = mediaEvent.matches ? this.container.options.defaultDarkTheme : this.container.options.defaultLightTheme, theme = this.container.options.themes.find((theme => theme.name === themeName));
+        if (theme && theme.default.auto) {
+          this.container.loadTheme(themeName);
         }
-        for (const key in options.style) {
-          if (!key || !options.style) {
-            continue;
+      }
+      handleClickMode(mode) {
+        this.container.handleClickMode(mode);
+      }
+    }
+    class FrameManager {
+      constructor(container) {
+        this.container = container;
+      }
+      async nextFrame(timestamp) {
+        var _a;
+        try {
+          const container = this.container;
+          if (container.lastFrameTime !== undefined && timestamp < container.lastFrameTime + 1e3 / container.fpsLimit) {
+            container.draw(false);
+            return;
           }
-          const value = options.style[key];
-          if (!value) {
-            continue;
+          (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : container.lastFrameTime = timestamp;
+          const deltaValue = timestamp - container.lastFrameTime, delta = {
+            value: deltaValue,
+            factor: 60 * deltaValue / 1e3
+          };
+          container.lifeTime += delta.value;
+          container.lastFrameTime = timestamp;
+          if (deltaValue > 1e3) {
+            container.draw(false);
+            return;
           }
-          element.style.setProperty(key, value, "important");
+          await container.particles.draw(delta);
+          if (container.duration > 0 && container.lifeTime > container.duration) {
+            container.destroy();
+            return;
+          }
+          if (container.getAnimationStatus()) {
+            container.draw(false);
+          }
+        } catch (e) {
+          console.error("tsParticles error in animation loop", e);
         }
       }
-      paintBase(baseColor) {
-        this.draw((ctx => {
-          paintBase(ctx, this.size, baseColor);
-        }));
-      }
-      lineStyle(p1, p2) {
-        return this.draw((ctx => {
-          const options = this.container.actualOptions;
-          const connectOptions = options.interactivity.modes.connect;
-          return gradient(ctx, p1, p2, connectOptions.links.opacity);
-        }));
-      }
     }
     class OptionsColor {
       constructor() {
@@ -5500,14 +4823,14 @@
         }
       }
     }
-    var Options_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+    var __classPrivateFieldSet = undefined && undefined.__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 Options_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
+    var __classPrivateFieldGet = undefined && undefined.__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);
@@ -5517,7 +4840,7 @@
       constructor(engine) {
         _Options_instances.add(this);
         _Options_engine.set(this, void 0);
-        Options_classPrivateFieldSet(this, _Options_engine, engine, "f");
+        __classPrivateFieldSet(this, _Options_engine, engine, "f");
         this.autoPlay = true;
         this.background = new Background;
         this.backgroundMask = new BackgroundMask;
@@ -5610,7 +4933,7 @@
         this.motion.load(data.motion);
         this.particles.load(data.particles);
         this.style = deepExtend(this.style, data.style);
-        Options_classPrivateFieldGet(this, _Options_engine, "f").plugins.loadOptions(this, data);
+        __classPrivateFieldGet(this, _Options_engine, "f").plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
           for (const responsive of data.responsive) {
             const optResponsive = new Responsive;
@@ -5626,36 +4949,163 @@
             this.themes.push(optTheme);
           }
         }
-        this.defaultDarkTheme = (_d = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "dark")) === null || _d === void 0 ? void 0 : _d.name;
-        this.defaultLightTheme = (_e = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "light")) === null || _e === void 0 ? void 0 : _e.name;
+        this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "dark")) === null || _d === void 0 ? void 0 : _d.name;
+        this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "light")) === null || _e === void 0 ? void 0 : _e.name;
+      }
+      setTheme(name) {
+        if (name) {
+          const chosenTheme = this.themes.find((theme => theme.name === name));
+          if (chosenTheme) {
+            this.load(chosenTheme.options);
+          }
+        } else {
+          const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? "dark" : "light");
+          if (defaultTheme) {
+            this.load(defaultTheme.options);
+          }
+        }
+      }
+      setResponsive(width, pxRatio, defaultOptions) {
+        this.load(defaultOptions);
+        const responsiveOptions = this.responsive.find((t => t.mode === "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) {
+        this.load(__classPrivateFieldGet(this, _Options_engine, "f").plugins.getPreset(preset));
+      }
+    }
+    _Options_engine = new WeakMap, _Options_instances = new WeakSet, _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+      var _a;
+      return (_a = this.themes.find((theme => theme.default.value && theme.default.mode === mode))) !== null && _a !== void 0 ? _a : this.themes.find((theme => theme.default.value && theme.default.mode === "any"));
+    };
+    var InteractionManager_classPrivateFieldSet = undefined && undefined.__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 InteractionManager_classPrivateFieldGet = undefined && undefined.__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 _InteractionManager_engine;
+    class InteractionManager {
+      constructor(engine, container) {
+        this.container = container;
+        _InteractionManager_engine.set(this, void 0);
+        InteractionManager_classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
+        this.externalInteractors = [];
+        this.particleInteractors = [];
+        this.init();
+      }
+      init() {
+        const interactors = InteractionManager_classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
+        this.externalInteractors = [];
+        this.particleInteractors = [];
+        for (const interactor of interactors) {
+          switch (interactor.type) {
+           case 0:
+            this.externalInteractors.push(interactor);
+            break;
+
+           case 1:
+            this.particleInteractors.push(interactor);
+            break;
+          }
+        }
+      }
+      async externalInteract(delta) {
+        for (const interactor of this.externalInteractors) {
+          if (interactor.isEnabled()) {
+            await interactor.interact(delta);
+          }
+        }
+      }
+      async particlesInteract(particle, delta) {
+        for (const interactor of this.externalInteractors) {
+          interactor.reset(particle);
+        }
+        for (const interactor of this.particleInteractors) {
+          if (interactor.isEnabled(particle)) {
+            await interactor.interact(particle, delta);
+          }
+        }
+      }
+      handleClickMode(mode) {
+        for (const interactor of this.externalInteractors) {
+          if (interactor.handleClickMode) {
+            interactor.handleClickMode(mode);
+          }
+        }
+      }
+    }
+    _InteractionManager_engine = new WeakMap;
+    class Vector3d extends Vector {
+      constructor(xOrCoords, y, z) {
+        super(xOrCoords, y);
+        if (typeof xOrCoords !== "number" && xOrCoords) {
+          this.z = xOrCoords.z;
+        } else if (z !== undefined) {
+          this.z = z;
+        } else {
+          throw new Error("tsParticles - Vector not initialized correctly");
+        }
+      }
+      static clone(source) {
+        return Vector3d.create(source.x, source.y, source.z);
+      }
+      static create(x, y, z) {
+        return new Vector3d(x, y, z);
+      }
+      static get origin() {
+        return Vector3d.create(0, 0, 0);
+      }
+      add(v) {
+        return v instanceof Vector3d ? Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z) : super.add(v);
+      }
+      addTo(v) {
+        super.addTo(v);
+        if (v instanceof Vector3d) {
+          this.z += v.z;
+        }
       }
-      setTheme(name) {
-        if (name) {
-          const chosenTheme = this.themes.find((theme => theme.name === name));
-          if (chosenTheme) {
-            this.load(chosenTheme.options);
-          }
-        } else {
-          const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? "dark" : "light");
-          if (defaultTheme) {
-            this.load(defaultTheme.options);
-          }
+      sub(v) {
+        return v instanceof Vector3d ? Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z) : super.sub(v);
+      }
+      subFrom(v) {
+        super.subFrom(v);
+        if (v instanceof Vector3d) {
+          this.z -= v.z;
         }
       }
-      setResponsive(width, pxRatio, defaultOptions) {
-        this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t => t.mode === "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;
+      mult(n) {
+        return Vector3d.create(this.x * n, this.y * n, this.z * n);
       }
-      importPreset(preset) {
-        this.load(Options_classPrivateFieldGet(this, _Options_engine, "f").plugins.getPreset(preset));
+      multTo(n) {
+        super.multTo(n);
+        this.z *= n;
+      }
+      div(n) {
+        return Vector3d.create(this.x / n, this.y / n, this.z / n);
+      }
+      divTo(n) {
+        super.divTo(n);
+        this.z /= n;
+      }
+      copy() {
+        return Vector3d.clone(this);
+      }
+      setTo(v) {
+        super.setTo(v);
+        const v3d = v;
+        if (v3d.z !== undefined) {
+          this.z = v3d.z;
+        }
       }
     }
-    _Options_engine = new WeakMap, _Options_instances = new WeakSet, _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
-      var _a;
-      return (_a = this.themes.find((theme => theme.default.value && theme.default.mode === mode))) !== null && _a !== void 0 ? _a : this.themes.find((theme => theme.default.value && theme.default.mode === "any"));
-    };
     var Particle_classPrivateFieldSet = undefined && undefined.__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");
@@ -5670,17 +5120,18 @@
     };
     var _Particle_engine;
     const fixOutMode = data => {
-      if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
-        if (data.coord > data.maxCoord - data.radius * 2) {
-          data.setCb(-data.radius);
-        } else if (data.coord < data.radius * 2) {
-          data.setCb(data.radius);
-        }
+      if (!(isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes))) {
+        return;
+      }
+      if (data.coord > data.maxCoord - data.radius * 2) {
+        data.setCb(-data.radius);
+      } else if (data.coord < data.radius * 2) {
+        data.setCb(data.radius);
       }
     };
     class Particle {
       constructor(engine, id, container, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.id = id;
         this.container = container;
         this.group = group;
@@ -5697,12 +5148,9 @@
           maxDistance: {}
         };
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio;
-        const mainOptions = container.actualOptions;
-        const particlesOptions = new ParticlesOptions;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = new ParticlesOptions;
         particlesOptions.load(mainOptions.particles);
-        const shapeType = particlesOptions.shape.type;
-        const reduceDuplicates = particlesOptions.reduceDuplicates;
+        const shapeType = particlesOptions.shape.type, reduceDuplicates = particlesOptions.reduceDuplicates;
         this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
         if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
           if (overrideOptions.shape.type) {
@@ -5800,25 +5248,6 @@
         }
         this.life = this.loadLife();
         this.spawning = this.life.delay > 0;
-        if (this.options.move.spin.enable) {
-          const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : {
-            x: 50,
-            y: 50
-          };
-          const spinCenter = {
-            x: spinPos.x / 100 * container.canvas.size.width,
-            y: spinPos.y / 100 * container.canvas.size.height
-          };
-          const pos = this.getPosition();
-          const distance = getDistance(pos, spinCenter);
-          this.spin = {
-            center: spinCenter,
-            direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
-            angle: this.velocity.angle,
-            radius: distance,
-            acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration)
-          };
-        }
         this.shadowColor = colorToRgb(this.options.shadow.color);
         for (const updater of container.particles.updaters) {
           if (updater.init) {
@@ -5838,8 +5267,7 @@
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
       }
       isInsideCanvas() {
-        const radius = this.getRadius();
-        const canvasSize = this.container.canvas.size;
+        const radius = this.getRadius(), canvasSize = this.container.canvas.size;
         return this.position.x >= -radius && this.position.y >= -radius && this.position.y <= canvasSize.height + radius && this.position.x <= canvasSize.width + radius;
       }
       draw(delta) {
@@ -5921,17 +5349,17 @@
         }
       }
       calcPosition(container, position, zIndex, tryCount = 0) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         for (const [, plugin] of container.plugins) {
           const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
           if (pluginPos !== undefined) {
             return Vector3d.create(pluginPos.x, pluginPos.y, zIndex);
           }
         }
-        const canvasSize = container.canvas.size;
-        const pos = Vector3d.create((_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height, zIndex);
-        const radius = this.getRadius();
-        const outModes = this.options.move.outModes, fixHorizontal = outMode => {
+        const canvasSize = container.canvas.size, exactPosition = calcExactPositionOrRandomFromSize({
+          size: canvasSize,
+          position: position
+        }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = outMode => {
           fixOutMode({
             outMode: outMode,
             checkModes: [ "bounce", "bounce-horizontal" ],
@@ -5950,18 +5378,17 @@
             radius: radius
           });
         };
-        fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
-        fixHorizontal((_d = outModes.right) !== null && _d !== void 0 ? _d : outModes.default);
-        fixVertical((_e = outModes.top) !== null && _e !== void 0 ? _e : outModes.default);
-        fixVertical((_f = outModes.bottom) !== null && _f !== void 0 ? _f : outModes.default);
+        fixHorizontal((_a = outModes.left) !== null && _a !== void 0 ? _a : outModes.default);
+        fixHorizontal((_b = outModes.right) !== null && _b !== void 0 ? _b : outModes.default);
+        fixVertical((_c = outModes.top) !== null && _c !== void 0 ? _c : outModes.default);
+        fixVertical((_d = outModes.bottom) !== null && _d !== void 0 ? _d : outModes.default);
         if (this.checkOverlap(pos, tryCount)) {
           return this.calcPosition(container, undefined, zIndex, tryCount + 1);
         }
         return pos;
       }
       checkOverlap(pos, tryCount = 0) {
-        const collisionsOptions = this.options.collisions;
-        const radius = this.getRadius();
+        const collisionsOptions = this.options.collisions, radius = this.getRadius();
         if (!collisionsOptions.enable) {
           return false;
         }
@@ -6002,10 +5429,7 @@
         }
       }
       loadLife() {
-        const container = this.container;
-        const particlesOptions = this.options;
-        const lifeOptions = particlesOptions.life;
-        const life = {
+        const container = this.container, particlesOptions = this.options, lifeOptions = particlesOptions.life, life = {
           delay: container.retina.reduceFactor ? getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random()) / container.retina.reduceFactor * 1e3 : 0,
           delayTime: 0,
           duration: container.retina.reduceFactor ? getRangeValue(lifeOptions.duration.value) * (lifeOptions.duration.sync ? 1 : Math.random()) / container.retina.reduceFactor * 1e3 : 0,
@@ -6022,6 +5446,178 @@
       }
     }
     _Particle_engine = new WeakMap;
+    class Point {
+      constructor(position, particle) {
+        this.position = position;
+        this.particle = particle;
+      }
+    }
+    class Range {
+      constructor(x, y) {
+        this.position = {
+          x: x,
+          y: y
+        };
+      }
+    }
+    class Circle extends Range {
+      constructor(x, y, radius) {
+        super(x, y);
+        this.radius = radius;
+      }
+      contains(point) {
+        return getDistance(point, this.position) <= this.radius;
+      }
+      intersects(range) {
+        const rect = range, circle = range, pos1 = this.position, pos2 = range.position, xDist = Math.abs(pos2.x - pos1.x), yDist = Math.abs(pos2.y - pos1.y), r = this.radius;
+        if (circle.radius !== undefined) {
+          const rSum = r + circle.radius, dist = Math.sqrt(xDist * xDist + yDist + yDist);
+          return rSum > dist;
+        } else if (rect.size !== undefined) {
+          const w = rect.size.width, h = rect.size.height, edges = Math.pow(xDist - w, 2) + Math.pow(yDist - h, 2);
+          if (xDist > r + w || yDist > r + h) {
+            return false;
+          }
+          if (xDist <= w || yDist <= h) {
+            return true;
+          }
+          return edges <= r * r;
+        }
+        return false;
+      }
+    }
+    class Rectangle extends Range {
+      constructor(x, y, width, height) {
+        super(x, y);
+        this.size = {
+          height: height,
+          width: width
+        };
+      }
+      contains(point) {
+        const w = this.size.width, h = this.size.height, pos = this.position;
+        return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
+      }
+      intersects(range) {
+        const rect = range, circle = range, w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position;
+        if (circle.radius !== undefined) {
+          return circle.intersects(this);
+        }
+        if (!rect.size) {
+          return false;
+        }
+        const size2 = rect.size, w2 = size2.width, h2 = size2.height;
+        return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
+      }
+    }
+    class CircleWarp extends Circle {
+      constructor(x, y, radius, canvasSize) {
+        super(x, y, radius);
+        this.canvasSize = canvasSize;
+        this.canvasSize = Object.assign({}, canvasSize);
+      }
+      contains(point) {
+        if (super.contains(point)) {
+          return true;
+        }
+        const posNE = {
+          x: point.x - this.canvasSize.width,
+          y: point.y
+        };
+        if (super.contains(posNE)) {
+          return true;
+        }
+        const posSE = {
+          x: point.x - this.canvasSize.width,
+          y: point.y - this.canvasSize.height
+        };
+        if (super.contains(posSE)) {
+          return true;
+        }
+        const posSW = {
+          x: point.x,
+          y: point.y - this.canvasSize.height
+        };
+        return super.contains(posSW);
+      }
+      intersects(range) {
+        if (super.intersects(range)) {
+          return true;
+        }
+        const rect = range, circle = range, newPos = {
+          x: range.position.x - this.canvasSize.width,
+          y: range.position.y - this.canvasSize.height
+        };
+        if (circle.radius !== undefined) {
+          const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
+          return super.intersects(biggerCircle);
+        } else if (rect.size !== undefined) {
+          const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+          return super.intersects(rectSW);
+        }
+        return false;
+      }
+    }
+    class QuadTree {
+      constructor(rectangle, capacity) {
+        this.rectangle = rectangle;
+        this.capacity = capacity;
+        this.points = [];
+        this.divided = false;
+      }
+      insert(point) {
+        var _a, _b, _c, _d, _e;
+        if (!this.rectangle.contains(point.position)) {
+          return false;
+        }
+        if (this.points.length < this.capacity) {
+          this.points.push(point);
+          return true;
+        }
+        if (!this.divided) {
+          this.subdivide();
+        }
+        return (_e = ((_a = this.northEast) === null || _a === void 0 ? void 0 : _a.insert(point)) || ((_b = this.northWest) === null || _b === void 0 ? void 0 : _b.insert(point)) || ((_c = this.southEast) === null || _c === void 0 ? void 0 : _c.insert(point)) || ((_d = this.southWest) === null || _d === void 0 ? void 0 : _d.insert(point))) !== null && _e !== void 0 ? _e : false;
+      }
+      queryCircle(position, radius) {
+        return this.query(new Circle(position.x, position.y, radius));
+      }
+      queryCircleWarp(position, radius, containerOrSize) {
+        const container = containerOrSize, size = containerOrSize;
+        return this.query(new CircleWarp(position.x, position.y, radius, container.canvas !== undefined ? container.canvas.size : size));
+      }
+      queryRectangle(position, size) {
+        return this.query(new Rectangle(position.x, position.y, size.width, size.height));
+      }
+      query(range, found) {
+        var _a, _b, _c, _d;
+        const res = found !== null && found !== void 0 ? found : [];
+        if (!range.intersects(this.rectangle)) {
+          return [];
+        }
+        for (const p of this.points) {
+          if (!range.contains(p.position) && getDistance(range.position, p.position) > p.particle.getRadius()) {
+            continue;
+          }
+          res.push(p.particle);
+        }
+        if (this.divided) {
+          (_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
+          (_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
+          (_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
+          (_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
+        }
+        return res;
+      }
+      subdivide() {
+        const x = this.rectangle.position.x, y = this.rectangle.position.y, w = this.rectangle.size.width, h = this.rectangle.size.height, capacity = this.capacity;
+        this.northEast = new QuadTree(new Rectangle(x, y, w / 2, h / 2), capacity);
+        this.northWest = new QuadTree(new Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
+        this.southEast = new QuadTree(new Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
+        this.southWest = new QuadTree(new Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
+        this.divided = true;
+      }
+    }
     var Particles_classPrivateFieldSet = undefined && undefined.__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");
@@ -6043,7 +5639,6 @@
         this.nextId = 0;
         this.array = [];
         this.zArray = [];
-        this.mover = new ParticlesMover(container);
         this.limit = 0;
         this.needsSort = false;
         this.lastZIndex = 0;
@@ -6055,6 +5650,7 @@
         const canvasSize = this.container.canvas.size;
         this.linksColors = new Map;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
+        this.movers = Particles_classPrivateFieldGet(this, _Particles_engine, "f").plugins.getMovers(container, true);
         this.updaters = Particles_classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
       }
       get count() {
@@ -6062,8 +5658,7 @@
       }
       init() {
         var _a;
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.lastZIndex = 0;
         this.needsSort = false;
         this.freqs.links = new Map;
@@ -6123,8 +5718,7 @@
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
       async update(delta) {
-        const container = this.container;
-        const particlesToDelete = [];
+        const container = this.container, particlesToDelete = [];
         container.pathGenerator.update();
         for (const [, plugin] of container.plugins) {
           if (plugin.update !== undefined) {
@@ -6147,7 +5741,11 @@
               plugin.particleUpdate(particle, delta);
             }
           }
-          this.mover.move(particle, delta);
+          for (const mover of this.movers) {
+            if (mover.isEnabled(particle)) {
+              mover.move(particle, delta);
+            }
+          }
           if (particle.destroyed) {
             particlesToDelete.push(particle);
             continue;
@@ -6169,10 +5767,9 @@
         delete container.canvas.resizeFactor;
       }
       async draw(delta) {
-        const container = this.container;
-        container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
+        const container = this.container, canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
+        container.canvas.clear();
         await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
@@ -6223,8 +5820,7 @@
           options.size.value.max /= factor;
         }
         options.load(splitOptions.particles);
-        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0;
-        const position = {
+        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0, position = {
           x: parent.position.x + randomInRange(offset),
           y: parent.position.y + randomInRange(offset)
         };
@@ -6275,11 +5871,10 @@
       addManualParticles() {
         const container = this.container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-          const pos = particle.position ? {
-            x: particle.position.x * container.canvas.size.width / 100,
-            y: particle.position.y * container.canvas.size.height / 100
-          } : undefined;
-          this.addParticle(pos, particle.options);
+          this.addParticle(calcPositionFromSize({
+            size: container.canvas.size,
+            position: particle.position
+          }), particle.options);
         }
       }
       setDensity() {
@@ -6289,17 +5884,15 @@
         }
         this.applyDensity(options.particles, options.manualParticles.length);
       }
+      handleClickMode(mode) {
+        this.interactionManager.handleClickMode(mode);
+      }
       applyDensity(options, manualCount, group) {
         var _a;
         if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
           return;
         }
-        const numberOptions = options.number;
-        const densityFactor = this.initDensityFactor(numberOptions.density);
-        const optParticlesNumber = numberOptions.value;
-        const optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber;
-        const particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount;
-        const particlesCount = Math.min(this.count, this.array.filter((t => t.group === group)).length);
+        const numberOptions = options.number, densityFactor = this.initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.array.filter((t => t.group === group)).length);
         this.limit = numberOptions.limit * densityFactor;
         if (particlesCount < particlesNumber) {
           this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
@@ -6341,8 +5934,7 @@
         this.container = container;
       }
       init() {
-        const container = this.container;
-        const options = container.actualOptions;
+        const container = this.container, options = container.actualOptions;
         this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
         const motionOptions = this.container.actualOptions.motion;
         if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
@@ -6378,9 +5970,6 @@
         this.linksWidth = particles.links.width * ratio;
         this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
         this.maxSpeed = getRangeValue(particles.move.gravity.maxSpeed) * ratio;
-        if (particles.orbit.radius !== undefined) {
-          this.orbitRadius = getRangeValue(particles.orbit.radius) * this.container.retina.pixelRatio;
-        }
         const modes = options.interactivity.modes;
         this.connectModeDistance = modes.connect.distance * ratio;
         this.connectModeRadius = modes.connect.radius * ratio;
@@ -6395,19 +5984,13 @@
         }
       }
       initParticle(particle) {
-        const options = particle.options;
-        const ratio = this.pixelRatio;
-        const moveDistance = options.move.distance;
-        const props = particle.retina;
+        const options = particle.options, ratio = this.pixelRatio, moveDistance = options.move.distance, props = particle.retina;
         props.attractDistance = getRangeValue(options.move.attract.distance) * ratio;
         props.linksDistance = options.links.distance * ratio;
         props.linksWidth = options.links.width * ratio;
         props.moveDrift = getRangeValue(options.move.drift) * ratio;
         props.moveSpeed = getRangeValue(options.move.speed) * ratio;
         props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
-        if (particle.spin) {
-          props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
-        }
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
@@ -6474,13 +6057,6 @@
             inside: false
           }
         };
-        this.bubble = {};
-        this.repulse = {
-          particles: []
-        };
-        this.attract = {
-          particles: []
-        };
         this.plugins = new Map;
         this.drawers = new Map;
         this.density = 1;
@@ -6668,8 +6244,7 @@
           if (this.destroyed) {
             return;
           }
-          const mouseEvent = e;
-          const pos = {
+          const mouseEvent = e, pos = {
             x: mouseEvent.offsetX || mouseEvent.clientX,
             y: mouseEvent.offsetY || mouseEvent.clientY
           };
@@ -6702,8 +6277,7 @@
                 return;
               }
             }
-            const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            const pos = {
+            const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), pos = {
               x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
               y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0)
             };
@@ -6727,6 +6301,14 @@
         el.addEventListener("touchend", touchEndHandler);
         el.addEventListener("touchcancel", touchCancelHandler);
       }
+      handleClickMode(mode) {
+        this.particles.handleClickMode(mode);
+        for (const [, plugin] of this.plugins) {
+          if (plugin.handleClickMode) {
+            plugin.handleClickMode(mode);
+          }
+        }
+      }
       updateActualOptions() {
         this.actualOptions.responsive = [];
         const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
@@ -6842,17 +6424,14 @@
       }
       async loadOptions(params) {
         var _a, _b, _c;
-        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 1e4)}`;
-        const {options: options, index: index} = params;
+        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 1e4)}`, {options: options, index: index} = params;
         let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
         if (!domContainer) {
           domContainer = document.createElement("div");
           domContainer.id = tagId;
           (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
-        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-        const dom = this.dom();
-        const oldIndex = dom.findIndex((v => v.id === tagId));
+        const currentOptions = options instanceof Array ? itemFromArray(options, index) : options, dom = this.dom(), oldIndex = dom.findIndex((v => v.id === tagId));
         if (oldIndex >= 0) {
           const old = this.domItem(oldIndex);
           if (old && !old.destroyed) {
@@ -6888,8 +6467,7 @@
         return newItem;
       }
       async loadRemoteOptions(params) {
-        const {url: jsonUrl, index: index} = params;
-        const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+        const {url: jsonUrl, index: index} = params, url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
         if (!url) {
           return;
         }
@@ -6978,7 +6556,7 @@
       }
       setOnClickHandler(callback) {
         const dom = this.dom();
-        if (dom.length === 0) {
+        if (!dom.length) {
           throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
         }
         for (const domItem of dom) {
@@ -6987,6 +6565,114 @@
       }
     }
     _Loader_engine = new WeakMap;
+    var Plugins_classPrivateFieldSet = undefined && undefined.__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 _Plugins_engine;
+    class Plugins {
+      constructor(engine) {
+        _Plugins_engine.set(this, void 0);
+        Plugins_classPrivateFieldSet(this, _Plugins_engine, engine, "f");
+        this.plugins = [];
+        this.interactorsInitializers = new Map;
+        this.moversInitializers = new Map;
+        this.updatersInitializers = new Map;
+        this.interactors = new Map;
+        this.movers = new Map;
+        this.updaters = new Map;
+        this.presets = new Map;
+        this.drawers = new Map;
+        this.pathGenerators = new Map;
+      }
+      getPlugin(plugin) {
+        return this.plugins.find((t => t.id === plugin));
+      }
+      addPlugin(plugin) {
+        if (!this.getPlugin(plugin.id)) {
+          this.plugins.push(plugin);
+        }
+      }
+      getAvailablePlugins(container) {
+        const res = new Map;
+        for (const plugin of this.plugins) {
+          if (!plugin.needsPlugin(container.actualOptions)) {
+            continue;
+          }
+          res.set(plugin.id, plugin.getPlugin(container));
+        }
+        return res;
+      }
+      loadOptions(options, sourceOptions) {
+        for (const plugin of this.plugins) {
+          plugin.loadOptions(options, sourceOptions);
+        }
+      }
+      getPreset(preset) {
+        return this.presets.get(preset);
+      }
+      addPreset(presetKey, options, override = false) {
+        if (override || !this.getPreset(presetKey)) {
+          this.presets.set(presetKey, options);
+        }
+      }
+      getShapeDrawer(type) {
+        return this.drawers.get(type);
+      }
+      addShapeDrawer(type, drawer) {
+        if (!this.getShapeDrawer(type)) {
+          this.drawers.set(type, drawer);
+        }
+      }
+      getSupportedShapes() {
+        return this.drawers.keys();
+      }
+      getPathGenerator(type) {
+        return this.pathGenerators.get(type);
+      }
+      addPathGenerator(type, pathGenerator) {
+        if (!this.getPathGenerator(type)) {
+          this.pathGenerators.set(type, pathGenerator);
+        }
+      }
+      getInteractors(container, force = false) {
+        let res = this.interactors.get(container);
+        if (!res || force) {
+          res = [ ...this.interactorsInitializers.values() ].map((t => t(container)));
+          this.interactors.set(container, res);
+        }
+        return res;
+      }
+      addInteractor(name, initInteractor) {
+        this.interactorsInitializers.set(name, initInteractor);
+      }
+      getUpdaters(container, force = false) {
+        let res = this.updaters.get(container);
+        if (!res || force) {
+          res = [ ...this.updatersInitializers.values() ].map((t => t(container)));
+          this.updaters.set(container, res);
+        }
+        return res;
+      }
+      addParticleUpdater(name, initUpdater) {
+        this.updatersInitializers.set(name, initUpdater);
+      }
+      getMovers(container, force = false) {
+        let res = this.movers.get(container);
+        if (!res || force) {
+          res = [ ...this.moversInitializers.values() ].map((t => t(container)));
+          this.movers.set(container, res);
+        }
+        return res;
+      }
+      addParticleMover(name, initMover) {
+        this.moversInitializers.set(name, initMover);
+      }
+    }
+    _Plugins_engine = new WeakMap;
     var engine_classPrivateFieldSet = undefined && undefined.__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");
@@ -7074,6 +6760,10 @@
         this.plugins.addInteractor(name, interactorInitializer);
         await this.refresh();
       }
+      async addMover(name, moverInitializer) {
+        this.plugins.addParticleMover(name, moverInitializer);
+        await this.refresh();
+      }
       async addParticleUpdater(name, updaterInitializer) {
         this.plugins.addParticleUpdater(name, updaterInitializer);
         await this.refresh();
@@ -7214,8 +6904,7 @@
         this.position = (_c = (_b = this.initialPosition) === null || _b === void 0 ? void 0 : _b.copy()) !== null && _c !== void 0 ? _c : this.calcPosition();
       }
       attract(particle) {
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         if (options.draggable) {
           const mouse = container.interactivity.mouse;
           if (mouse.clicking && mouse.downPosition) {
@@ -7231,9 +6920,7 @@
             this.position.y = mouse.position.y;
           }
         }
-        const pos = particle.getPosition();
-        const {dx: dx, dy: dy, distance: distance} = getDistances(this.position, pos);
-        const v = Vector.create(dx, dy);
+        const pos = particle.getPosition(), {dx: dx, dy: dy, distance: distance} = getDistances(this.position, pos), v = Vector.create(dx, dy);
         v.length = this.mass / Math.pow(distance, 2) * container.retina.reduceFactor;
         if (distance < this.size + particle.getRadius()) {
           const sizeFactor = particle.getRadius() * .033 * container.retina.pixelRatio;
@@ -7273,21 +6960,23 @@
         context.fill();
       }
       calcPosition() {
-        var _a, _b;
-        const container = this.container;
-        const percentPosition = this.options.position;
-        return Vector.create(getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width, getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height);
+        const exactPosition = calcPositionOrRandomFromSizeRanged({
+          size: this.container.canvas.size,
+          position: this.options.position
+        });
+        return Vector.create(exactPosition.x, exactPosition.y);
       }
       updateParticlePosition(particle, v) {
         var _a;
         if (particle.destroyed) {
           return;
         }
-        const container = this.container;
-        const canvasSize = container.canvas.size;
+        const container = this.container, canvasSize = container.canvas.size;
         if (particle.needsNewPosition) {
-          particle.position.x = Math.floor(Math.random() * canvasSize.width);
-          particle.position.y = Math.floor(Math.random() * canvasSize.height);
+          const newPosition = calcPositionOrRandomFromSize({
+            size: canvasSize
+          });
+          particle.position.setTo(newPosition);
           particle.velocity.setTo(particle.initialVelocity);
           particle.absorberOrbit = undefined;
           particle.needsNewPosition = false;
@@ -7305,11 +6994,8 @@
           if (particle.absorberOrbitDirection === undefined) {
             particle.absorberOrbitDirection = particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
           }
-          const orbitRadius = particle.absorberOrbit.length;
-          const orbitAngle = particle.absorberOrbit.angle;
-          const orbitDirection = particle.absorberOrbitDirection;
-          particle.velocity.x = 0;
-          particle.velocity.y = 0;
+          const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
+          particle.velocity.setTo(Vector.origin);
           const updateFunc = {
             x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
             y: orbitDirection === "clockwise" ? Math.sin : Math.cos
@@ -7402,9 +7088,7 @@
         }
       }
       handleClickMode(mode) {
-        const container = this.container;
-        const absorberOptions = this.absorbers;
-        const modeAbsorbers = this.interactivityAbsorbers;
+        const absorberOptions = this.absorbers, modeAbsorbers = this.interactivityAbsorbers;
         if (mode === "absorber") {
           let absorbersModeOptions;
           if (modeAbsorbers instanceof Array) {
@@ -7414,8 +7098,7 @@
           } else {
             absorbersModeOptions = modeAbsorbers;
           }
-          const absorbersOptions = absorbersModeOptions !== null && absorbersModeOptions !== void 0 ? absorbersModeOptions : absorberOptions instanceof Array ? itemFromArray(absorberOptions) : absorberOptions;
-          const aPosition = container.interactivity.mouse.clickPosition;
+          const absorbersOptions = absorbersModeOptions !== null && absorbersModeOptions !== void 0 ? absorbersModeOptions : absorberOptions instanceof Array ? itemFromArray(absorberOptions) : absorberOptions, aPosition = this.container.interactivity.mouse.clickPosition;
           this.addAbsorber(absorbersOptions, aPosition);
         }
       }
@@ -7444,17 +7127,14 @@
           return false;
         }
         const absorbers = options.absorbers;
-        let loadAbsorbers = false;
         if (absorbers instanceof Array) {
-          if (absorbers.length) {
-            loadAbsorbers = true;
-          }
-        } else if (absorbers !== undefined) {
-          loadAbsorbers = true;
+          return !!absorbers.length;
+        } else if (absorbers) {
+          return true;
         } else if (((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) && isInArray("absorber", options.interactivity.events.onClick.mode)) {
-          loadAbsorbers = true;
+          return true;
         }
-        return loadAbsorbers;
+        return false;
       }
       loadOptions(options, source) {
         var _a, _b;
@@ -7502,9 +7182,7 @@
     class CircleShape {
       randomPosition(position, size, fill) {
         const generateTheta = (x, y) => {
-          const u = Math.random() / 4;
-          const theta = Math.atan(y / x * Math.tan(2 * Math.PI * u));
-          const v = Math.random();
+          const u = Math.random() / 4, theta = Math.atan(y / x * Math.tan(2 * Math.PI * u)), v = Math.random();
           if (v < .25) {
             return theta;
           } else if (v < .5) {
@@ -7514,10 +7192,7 @@
           } else {
             return -theta;
           }
-        };
-        const radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
-        const [a, b] = [ size.width / 2, size.height / 2 ];
-        const randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
+        }, radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2), [a, b] = [ size.width / 2, size.height / 2 ], randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
         return {
           x: position.x + randomRadius * Math.cos(randomTheta),
           y: position.y + randomRadius * Math.sin(randomTheta)
@@ -7717,14 +7392,15 @@
         if (this.paused) {
           return;
         }
-        if (this.container.retina.reduceFactor && (this.lifeCount > 0 || this.immortal || !this.options.life.count) && (EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
-          if (this.emitDelay === undefined) {
-            const delay = getRangeValue(this.options.rate.delay);
-            this.emitDelay = 1e3 * delay / this.container.retina.reduceFactor;
-          }
-          if (this.lifeCount > 0 || this.immortal) {
-            this.prepareToDie();
-          }
+        if (!(this.container.retina.reduceFactor && (this.lifeCount > 0 || this.immortal || !this.options.life.count) && (EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0)))) {
+          return;
+        }
+        if (this.emitDelay === undefined) {
+          const delay = getRangeValue(this.options.rate.delay);
+          this.emitDelay = 1e3 * delay / this.container.retina.reduceFactor;
+        }
+        if (this.lifeCount > 0 || this.immortal) {
+          this.prepareToDie();
         }
       }
       pause() {
@@ -7831,13 +7507,10 @@
         this.emitters.removeEmitter(this);
       }
       calcPosition() {
-        var _a, _b;
-        const container = this.container;
-        const percentPosition = this.options.position;
-        return {
-          x: getRangeValue((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width,
-          y: getRangeValue((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height
-        };
+        return calcPositionOrRandomFromSizeRanged({
+          size: this.container.canvas.size,
+          position: this.options.position
+        });
       }
       emit() {
         if (this.paused) {
@@ -7848,9 +7521,7 @@
       }
       emitParticles(quantity) {
         var _a, _b, _c;
-        const container = this.container;
-        const position = this.getPosition();
-        const size = this.getSize();
+        const position = this.getPosition(), size = this.getSize();
         for (let i = 0; i < quantity; i++) {
           const particlesOptions = deepExtend({}, this.particlesOptions);
           if (this.spawnColor) {
@@ -7872,7 +7543,7 @@
             return;
           }
           const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
-          container.particles.addParticle(pPosition, particlesOptions);
+          this.container.particles.addParticle(pPosition, particlesOptions);
         }
       }
       setColorAnimation(animation, initValue, maxValue) {
@@ -7881,10 +7552,7 @@
         if (!animation.enable) {
           return initValue;
         }
-        const colorOffset = randomInRange(animation.offset);
-        const delay = getRangeValue(this.options.rate.delay);
-        const emitFactor = 1e3 * delay / container.retina.reduceFactor;
-        const colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
+        const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = 1e3 * delay / container.retina.reduceFactor, colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
         return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * 3.6) % maxValue;
       }
     }
@@ -7994,9 +7662,7 @@
         }
       }
       handleClickMode(mode) {
-        const container = this.container;
-        const emitterOptions = this.emitters;
-        const modeEmitters = this.interactivityEmitters;
+        const emitterOptions = this.emitters, modeEmitters = this.interactivityEmitters;
         if (mode === "emitter") {
           let emitterModeOptions;
           if (modeEmitters instanceof Array) {
@@ -8006,8 +7672,7 @@
           } else {
             emitterModeOptions = modeEmitters;
           }
-          const emittersOptions = emitterModeOptions !== null && emitterModeOptions !== void 0 ? emitterModeOptions : emitterOptions instanceof Array ? itemFromArray(emitterOptions) : emitterOptions;
-          const ePosition = container.interactivity.mouse.clickPosition;
+          const emittersOptions = emitterModeOptions !== null && emitterModeOptions !== void 0 ? emitterModeOptions : emitterOptions instanceof Array ? itemFromArray(emitterOptions) : emitterOptions, ePosition = this.container.interactivity.mouse.clickPosition;
           this.addEmitter(deepExtend({}, emittersOptions), ePosition);
         }
       }
@@ -8184,6 +7849,12 @@
       engine.addEmitterShape("circle", new CircleShape);
       engine.addEmitterShape("square", new SquareShape);
     }
+    class ExternalInteractorBase {
+      constructor(container) {
+        this.container = container;
+        this.type = 0;
+      }
+    }
     class TrailMaker extends ExternalInteractorBase {
       constructor(container) {
         super(container);
@@ -8423,9 +8094,7 @@
       var _a;
       const res = [];
       for (const path of paths) {
-        const segments = path.element.pathSegList;
-        const len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0;
-        const p = {
+        const segments = path.element.pathSegList, len = (_a = segments === null || segments === void 0 ? void 0 : segments.numberOfItems) !== null && _a !== void 0 ? _a : 0, p = {
           x: 0,
           y: 0
         };
@@ -8490,10 +8159,7 @@
       return res;
     }
     function calcClosestPtOnSegment(s1, s2, pos) {
-      const {dx: dx, dy: dy} = getDistances(pos, s1);
-      const {dx: dxx, dy: dyy} = getDistances(s2, s1);
-      const t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2);
-      const res = {
+      const {dx: dx, dy: dy} = getDistances(pos, s1), {dx: dxx, dy: dyy} = getDistances(s2, s1), t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2), res = {
         x: s1.x + dxx * t,
         y: s1.x + dyy * t,
         isOnSegment: t >= 0 && t <= 1
@@ -8508,10 +8174,7 @@
       return res;
     }
     function segmentBounce(start, stop, velocity) {
-      const {dx: dx, dy: dy} = getDistances(start, stop);
-      const wallAngle = Math.atan2(dy, dx);
-      const wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle));
-      const d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+      const {dx: dx, dy: dy} = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
       wallNormal.multTo(d);
       velocity.subFrom(wallNormal);
     }
@@ -8535,8 +8198,7 @@
         }
       }
       resize() {
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         if (!(options.enable && options.type !== "none")) {
           return;
         }
@@ -8580,15 +8242,13 @@
         if (!((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
           return;
         }
-        const options = this.options;
-        const polygonDraw = options.draw;
-        if (!(options.enable && polygonDraw.enable)) {
+        const options = this.options, polygonDraw = options.draw;
+        if (!options.enable || !polygonDraw.enable) {
           return;
         }
         const rawData = this.raw;
         for (const path of this.paths) {
-          const path2d = path.path2d;
-          const path2dSupported = this.path2DSupported;
+          const path2d = path.path2d, path2dSupported = this.path2DSupported;
           if (!context) {
             continue;
           }
@@ -8645,22 +8305,17 @@
       }
       checkInsidePolygon(position) {
         var _a, _b;
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         if (!options.enable || options.type === "none" || options.type === "inline") {
           return true;
         }
         if (!this.raw) {
           throw new Error(Constants.noPolygonFound);
         }
-        const canvasSize = container.canvas.size;
-        const x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width;
-        const y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
+        const canvasSize = container.canvas.size, x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width, y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
         let inside = false;
         for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
-          const pi = this.raw[i];
-          const pj = this.raw[j];
-          const intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;
+          const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < (pj.x - pi.x) * (y - pi.y) / (pj.y - pi.y) + pi.x;
           if (intersect) {
             inside = !inside;
           }
@@ -8673,11 +8328,7 @@
         if (this.paths !== undefined && !forceDownload) {
           return this.raw;
         }
-        const container = this.container;
-        const options = this.options;
-        const parser = new DOMParser;
-        const doc = parser.parseFromString(xml, "image/svg+xml");
-        const svg = doc.getElementsByTagName("svg")[0];
+        const container = this.container, options = this.options, parser = new DOMParser, doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
         let svgPaths = svg.getElementsByTagName("path");
         if (!svgPaths.length) {
           svgPaths = doc.getElementsByTagName("path");
@@ -8692,8 +8343,7 @@
             });
           }
         }
-        const pxRatio = container.retina.pixelRatio;
-        const scale = options.scale / pxRatio;
+        const pxRatio = container.retina.pixelRatio, scale = options.scale / pxRatio;
         this.dimension.width = parseFloat((_a = svg.getAttribute("width")) !== null && _a !== void 0 ? _a : "0") * scale;
         this.dimension.height = parseFloat((_b = svg.getAttribute("height")) !== null && _b !== void 0 ? _b : "0") * scale;
         const position = (_c = options.position) !== null && _c !== void 0 ? _c : {
@@ -8707,9 +8357,7 @@
         return parsePaths(this.paths, scale, this.offset);
       }
       async downloadSvgPath(svgUrl, force) {
-        const options = this.options;
-        const url = svgUrl || options.url;
-        const forceDownload = force !== null && force !== void 0 ? force : false;
+        const options = this.options, url = svgUrl || options.url, forceDownload = force !== null && force !== void 0 ? force : false;
         if (!url || this.paths !== undefined && !forceDownload) {
           return this.raw;
         }
@@ -8731,8 +8379,7 @@
         }
       }
       randomPoint() {
-        const container = this.container;
-        const options = this.options;
+        const container = this.container, options = this.options;
         let position;
         if (options.type === "inline") {
           switch (options.inline.arrangement) {
@@ -8781,9 +8428,7 @@
         if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) {
           throw new Error(Constants.noPolygonDataLoaded);
         }
-        const path = itemFromArray(this.paths);
-        const distance = Math.floor(Math.random() * path.length) + 1;
-        const point = path.element.getPointAtLength(distance);
+        const path = itemFromArray(this.paths), distance = Math.floor(Math.random() * path.length) + 1, point = path.element.getPointAtLength(distance);
         return {
           x: point.x * options.scale + (((_b = this.offset) === null || _b === void 0 ? void 0 : _b.x) || 0),
           y: point.y * options.scale + (((_c = this.offset) === null || _c === void 0 ? void 0 : _c.y) || 0)
@@ -8791,13 +8436,10 @@
       }
       getEquidistantPointByIndex(index) {
         var _a, _b, _c, _d, _e, _f, _g;
-        const options = this.container.actualOptions;
-        const polygonMaskOptions = this.options;
+        const options = this.container.actualOptions, polygonMaskOptions = this.options;
         if (!this.raw || !this.raw.length || !((_a = this.paths) === null || _a === void 0 ? void 0 : _a.length)) throw new Error(Constants.noPolygonDataLoaded);
-        let offset = 0;
-        let point;
-        const totalLength = this.paths.reduce(((tot, path) => tot + path.length), 0);
-        const distance = totalLength / options.particles.number.value;
+        let offset = 0, point;
+        const totalLength = this.paths.reduce(((tot, path) => tot + path.length), 0), distance = totalLength / options.particles.number.value;
         for (const path of this.paths) {
           const pathDistance = distance * index - offset;
           if (pathDistance <= path.length) {
@@ -8831,10 +8473,7 @@
         for (const path of this.paths) {
           const pathData = (_b = path.element) === null || _b === void 0 ? void 0 : _b.getAttribute("d");
           if (pathData) {
-            const path2d = new Path2D(pathData);
-            const matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();
-            const finalPath = new Path2D;
-            const transform = matrix.scale(options.scale);
+            const path2d = new Path2D(pathData), matrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D, transform = matrix.scale(options.scale);
             if (finalPath.addPath) {
               finalPath.addPath(path2d, transform);
               path.path2d = finalPath;
@@ -9029,21 +8668,188 @@
             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;
+      }
+      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);
+      }
+    }
+    async function loadAngleUpdater(engine) {
+      await engine.addParticleUpdater("angle", (container => new AngleUpdater(container)));
+    }
+    function applyDistance(particle) {
+      const initialPosition = particle.initialPosition;
+      const {dx: dx, dy: dy} = getDistances(initialPosition, particle.position);
+      const dxFixed = Math.abs(dx), dyFixed = Math.abs(dy);
+      const hDistance = particle.retina.maxDistance.horizontal;
+      const vDistance = particle.retina.maxDistance.vertical;
+      if (!hDistance && !vDistance) {
+        return;
+      }
+      if ((hDistance && dxFixed >= hDistance || vDistance && dyFixed >= vDistance) && !particle.misplaced) {
+        particle.misplaced = !!hDistance && dxFixed > hDistance || !!vDistance && dyFixed > vDistance;
+        if (hDistance) {
+          particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
+        }
+        if (vDistance) {
+          particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
+        }
+      } else if ((!hDistance || dxFixed < hDistance) && (!vDistance || dyFixed < vDistance) && particle.misplaced) {
+        particle.misplaced = false;
+      } else if (particle.misplaced) {
+        const pos = particle.position, vel = particle.velocity;
+        if (hDistance && (pos.x < initialPosition.x && vel.x < 0 || pos.x > initialPosition.x && vel.x > 0)) {
+          vel.x *= -Math.random();
+        }
+        if (vDistance && (pos.y < initialPosition.y && vel.y < 0 || pos.y > initialPosition.y && vel.y > 0)) {
+          vel.y *= -Math.random();
+        }
+      }
+    }
+    function spin(particle, moveSpeed) {
+      const container = particle.container;
+      if (!particle.spin) {
+        return;
+      }
+      const updateFunc = {
+        x: particle.spin.direction === "clockwise" ? Math.cos : Math.sin,
+        y: particle.spin.direction === "clockwise" ? Math.sin : Math.cos
+      };
+      particle.position.x = particle.spin.center.x + particle.spin.radius * updateFunc.x(particle.spin.angle);
+      particle.position.y = particle.spin.center.y + particle.spin.radius * updateFunc.y(particle.spin.angle);
+      particle.spin.radius += particle.spin.acceleration;
+      const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height);
+      if (particle.spin.radius > maxCanvasSize / 2) {
+        particle.spin.radius = maxCanvasSize / 2;
+        particle.spin.acceleration *= -1;
+      } else if (particle.spin.radius < 0) {
+        particle.spin.radius = 0;
+        particle.spin.acceleration *= -1;
+      }
+      particle.spin.angle += moveSpeed / 100 * (1 - particle.spin.radius / maxCanvasSize);
+    }
+    function applyPath(particle, delta) {
+      const particlesOptions = particle.options;
+      const pathOptions = particlesOptions.move.path;
+      const pathEnabled = pathOptions.enable;
+      if (!pathEnabled) {
+        return;
+      }
+      const container = particle.container;
+      if (particle.lastPathTime <= particle.pathDelay) {
+        particle.lastPathTime += delta.value;
+        return;
+      }
+      const path = container.pathGenerator.generate(particle);
+      particle.velocity.addTo(path);
+      if (pathOptions.clamp) {
+        particle.velocity.x = clamp(particle.velocity.x, -1, 1);
+        particle.velocity.y = clamp(particle.velocity.y, -1, 1);
+      }
+      particle.lastPathTime -= particle.pathDelay;
+    }
+    function getProximitySpeedFactor(particle) {
+      const container = particle.container;
+      const options = container.actualOptions;
+      const active = isInArray("slow", options.interactivity.events.onHover.mode);
+      if (!active) {
+        return 1;
+      }
+      const mousePos = particle.container.interactivity.mouse.position;
+      if (!mousePos) {
+        return 1;
+      }
+      const particlePos = particle.getPosition();
+      const dist = getDistance(mousePos, particlePos);
+      const radius = container.retina.slowModeRadius;
+      if (dist > radius) {
+        return 1;
+      }
+      const proximityFactor = dist / radius || 0;
+      const slowFactor = options.interactivity.modes.slow.factor;
+      return proximityFactor / slowFactor;
+    }
+    class BaseMover {
+      init(particle) {
+        var _a;
+        const container = particle.container, options = particle.options, spinOptions = options.move.spin;
+        if (spinOptions.enable) {
+          const spinPos = (_a = spinOptions.position) !== null && _a !== void 0 ? _a : {
+            x: 50,
+            y: 50
+          };
+          const spinCenter = {
+            x: spinPos.x / 100 * container.canvas.size.width,
+            y: spinPos.y / 100 * container.canvas.size.height
+          };
+          const pos = particle.getPosition();
+          const distance = getDistance(pos, spinCenter);
+          const spinAcceleration = getRangeValue(spinOptions.acceleration);
+          particle.retina.spinAcceleration = spinAcceleration * container.retina.pixelRatio;
+          particle.spin = {
+            center: spinCenter,
+            direction: particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
+            angle: particle.velocity.angle,
+            radius: distance,
+            acceleration: particle.retina.spinAcceleration
+          };
+        }
+      }
+      isEnabled(particle) {
+        return !particle.destroyed && particle.options.move.enable;
+      }
+      move(particle, delta) {
+        var _a, _b, _c;
+        var _d, _e;
+        const particleOptions = particle.options, moveOptions = particleOptions.move;
+        if (!moveOptions.enable) {
+          return;
+        }
+        const container = particle.container, slowFactor = getProximitySpeedFactor(particle), baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor, moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio, maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, speedFactor = sizeFactor * slowFactor * (delta.factor || 1), diffFactor = 2, moveSpeed = baseSpeed * speedFactor / diffFactor;
+        applyPath(particle, delta);
+        const gravityOptions = particle.gravity, gravityFactor = gravityOptions.enable && gravityOptions.inverse ? -1 : 1;
+        if (gravityOptions.enable && moveSpeed) {
+          particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (60 * moveSpeed);
+        }
+        if (moveDrift && moveSpeed) {
+          particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
+        }
+        const decay = particle.moveDecay;
+        if (decay != 1) {
+          particle.velocity.multTo(decay);
+        }
+        const velocity = particle.velocity.mult(moveSpeed), maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
+        if (gravityOptions.enable && maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
+          velocity.y = gravityFactor * maxSpeed;
+          if (moveSpeed) {
+            particle.velocity.y = velocity.y / moveSpeed;
+          }
+        }
+        const zIndexOptions = particle.options.zIndex, zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
+        if (moveOptions.spin.enable) {
+          spin(particle, moveSpeed);
+        } else {
+          if (zVelocityFactor != 1) {
+            velocity.multTo(zVelocityFactor);
+          }
+          particle.position.addTo(velocity);
+          if (moveOptions.vibrate) {
+            particle.position.x += Math.sin(particle.position.x * Math.cos(particle.position.y));
+            particle.position.y += Math.cos(particle.position.y * Math.sin(particle.position.x));
+          }
         }
-        updateAngle(particle, delta);
+        applyDistance(particle);
       }
     }
-    async function loadAngleUpdater(engine) {
-      await engine.addParticleUpdater("angle", (container => new AngleUpdater(container)));
+    async function loadBaseMover(engine) {
+      engine.addMover("base", (() => new BaseMover));
     }
     class CircleDrawer {
       getSidesCount() {
@@ -9119,6 +8925,39 @@
     class Attractor extends ExternalInteractorBase {
       constructor(container) {
         super(container);
+        if (!container.attract) {
+          container.attract = {
+            particles: []
+          };
+        }
+        this.handleClickMode = mode => {
+          const options = this.container.actualOptions;
+          if (mode !== "attract") {
+            return;
+          }
+          if (!container.attract) {
+            container.attract = {
+              particles: []
+            };
+          }
+          container.attract.clicking = true;
+          container.attract.count = 0;
+          for (const particle of container.attract.particles) {
+            particle.velocity.setTo(particle.initialVelocity);
+          }
+          container.attract.particles = [];
+          container.attract.finish = false;
+          setTimeout((() => {
+            if (!container.destroyed) {
+              if (!container.attract) {
+                container.attract = {
+                  particles: []
+                };
+              }
+              container.attract.clicking = false;
+            }
+          }), options.interactivity.modes.attract.duration * 1e3);
+        };
       }
       isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events;
@@ -9160,6 +8999,11 @@
       }
       clickAttract() {
         const container = this.container;
+        if (!container.attract) {
+          container.attract = {
+            particles: []
+          };
+        }
         if (!container.attract.finish) {
           if (!container.attract.count) {
             container.attract.count = 0;
@@ -9209,8 +9053,7 @@
         }
       }
       singleSelectorBounce(selector, div) {
-        const container = this.container;
-        const query = document.querySelectorAll(selector);
+        const container = this.container, query = document.querySelectorAll(selector);
         if (!query.length) {
           return;
         }
@@ -9218,8 +9061,7 @@
           const elem = item, pxRatio = container.retina.pixelRatio, pos = {
             x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
             y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
-          }, radius = elem.offsetWidth / 2 * pxRatio, tolerance = 10 * pxRatio;
-          const area = div.type === "circle" ? new Circle(pos.x, pos.y, radius + tolerance) : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
+          }, radius = elem.offsetWidth / 2 * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle" ? new Circle(pos.x, pos.y, radius + tolerance) : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
           this.processBounce(pos, radius, area);
         }));
       }
@@ -9255,6 +9097,18 @@
     class Bubbler extends ExternalInteractorBase {
       constructor(container) {
         super(container);
+        if (!container.bubble) {
+          container.bubble = {};
+        }
+        this.handleClickMode = mode => {
+          if (mode !== "bubble") {
+            return;
+          }
+          if (!container.bubble) {
+            container.bubble = {};
+          }
+          container.bubble.clicking = true;
+        };
       }
       isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
@@ -9320,6 +9174,9 @@
         if (bubbleParam === particlesParam) {
           return;
         }
+        if (!container.bubble) {
+          container.bubble = {};
+        }
         if (!container.bubble.durationEnd) {
           if (distMouse <= bubbleDistance) {
             const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
@@ -9355,6 +9212,9 @@
         if (!mouseClickPos) {
           return;
         }
+        if (!container.bubble) {
+          container.bubble = {};
+        }
         const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance);
         for (const particle of query) {
           if (!container.bubble.clicking) {
@@ -9527,40 +9387,149 @@
       async interact() {
         var _a;
         const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
-        if (interactivity.events.onHover.enable && container.interactivity.status === Constants.mouseMoveEvent) {
-          const mousePos = container.interactivity.mouse.position;
-          if (!mousePos) {
-            return;
+        if (!interactivity.events.onHover.enable || container.interactivity.status !== Constants.mouseMoveEvent) {
+          return;
+        }
+        const mousePos = container.interactivity.mouse.position;
+        if (!mousePos) {
+          return;
+        }
+        const distance = container.retina.grabModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
+        for (const particle of query) {
+          const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos);
+          if (pointDistance > distance) {
+            continue;
           }
-          const distance = container.retina.grabModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
-          for (const particle of query) {
-            const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos);
-            if (pointDistance <= distance) {
-              const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - pointDistance * lineOpacity / distance;
-              if (opacityLine <= 0) {
-                continue;
-              }
-              const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
-              if (!container.particles.grabLineColor) {
-                const linksOptions = options.interactivity.modes.grab.links;
-                container.particles.grabLineColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
-              }
-              const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
-              if (!colorLine) {
-                return;
-              }
-              container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
-            }
+          const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - pointDistance * lineOpacity / distance;
+          if (opacityLine <= 0) {
+            continue;
+          }
+          const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
+          if (!container.particles.grabLineColor) {
+            const linksOptions = options.interactivity.modes.grab.links;
+            container.particles.grabLineColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+          }
+          const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
+          if (!colorLine) {
+            return;
           }
+          container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
         }
       }
     }
     async function loadExternalGrabInteraction(engine) {
       await engine.addInteractor("externalGrab", (container => new Grabber(container)));
     }
+    class Pauser extends ExternalInteractorBase {
+      constructor(container) {
+        super(container);
+        this.handleClickMode = mode => {
+          if (mode !== "pause") {
+            return;
+          }
+          const container = this.container;
+          if (container.getAnimationStatus()) {
+            container.pause();
+          } else {
+            container.play();
+          }
+        };
+      }
+      isEnabled() {
+        return true;
+      }
+      reset() {}
+      async interact() {}
+    }
+    async function loadExternalPauseInteraction(engine) {
+      await engine.addInteractor("externalPause", (container => new Pauser(container)));
+    }
+    class Pusher extends ExternalInteractorBase {
+      constructor(container) {
+        super(container);
+        this.handleClickMode = mode => {
+          if (mode !== "push") {
+            return;
+          }
+          const container = this.container;
+          const options = container.actualOptions;
+          const pushNb = options.interactivity.modes.push.quantity;
+          if (pushNb <= 0) {
+            return;
+          }
+          const pushOptions = options.interactivity.modes.push;
+          const group = itemFromArray([ undefined, ...pushOptions.groups ]);
+          const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
+          container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
+        };
+      }
+      isEnabled() {
+        return true;
+      }
+      reset() {}
+      async interact() {}
+    }
+    async function loadExternalPushInteraction(engine) {
+      await engine.addInteractor("externalPush", (container => new Pusher(container)));
+    }
+    class Remover extends ExternalInteractorBase {
+      constructor(container) {
+        super(container);
+        this.handleClickMode = mode => {
+          if (mode !== "remove") {
+            return;
+          }
+          const container = this.container;
+          const options = container.actualOptions;
+          const removeNb = options.interactivity.modes.remove.quantity;
+          container.particles.removeQuantity(removeNb);
+        };
+      }
+      isEnabled() {
+        return true;
+      }
+      reset() {}
+      async interact() {}
+    }
+    async function loadExternalRemoveInteraction(engine) {
+      await engine.addInteractor("externalRemove", (container => new Remover(container)));
+    }
     class Repulser extends ExternalInteractorBase {
       constructor(container) {
         super(container);
+        if (!container.repulse) {
+          container.repulse = {
+            particles: []
+          };
+        }
+        this.handleClickMode = mode => {
+          const options = this.container.actualOptions;
+          if (mode !== "repulse") {
+            return;
+          }
+          if (!container.repulse) {
+            container.repulse = {
+              particles: []
+            };
+          }
+          container.repulse.clicking = true;
+          container.repulse.count = 0;
+          for (const particle of container.repulse.particles) {
+            particle.velocity.setTo(particle.initialVelocity);
+          }
+          container.repulse.particles = [];
+          container.repulse.finish = false;
+          setTimeout((() => {
+            if (!container.destroyed) {
+              if (!container.repulse) {
+                container.repulse = {
+                  particles: []
+                };
+              }
+              container.repulse.clicking = false;
+            }
+          }), options.interactivity.modes.repulse.duration * 1e3);
+        };
       }
       isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divRepulse = isDivModeEnabled("repulse", divs);
@@ -9612,6 +9581,11 @@
       }
       clickRepulse() {
         const container = this.container;
+        if (!container.repulse) {
+          container.repulse = {
+            particles: []
+          };
+        }
         if (!container.repulse.finish) {
           if (!container.repulse.count) {
             container.repulse.count = 0;
@@ -9776,25 +9750,6 @@
       destroy() {
         ImageDrawer_classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
       }
-      async loadImageShape(container, imageShape) {
-        const source = imageShape.src;
-        if (!source) {
-          throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-          const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-            error: false,
-            loading: true
-          };
-          this.addImage(container, image);
-          const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-          await imageFunc(image);
-        } catch (_a) {
-          throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
-      }
       draw(context, particle, radius, opacity) {
         var _a, _b;
         const image = particle.image;
@@ -9859,6 +9814,25 @@
         particle.fill = imageShape.fill;
         particle.close = imageShape.close;
       }
+      async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+          throw new Error("Error tsParticles - No image.src");
+        }
+        try {
+          const image = {
+            source: source,
+            type: source.substr(source.length - 3),
+            error: false,
+            loading: true
+          };
+          this.addImage(container, image);
+          const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+          await imageFunc(image);
+        } catch (_a) {
+          throw new Error(`tsParticles error - ${imageShape.src} not found`);
+        }
+      }
     }
     _ImageDrawer_images = new WeakMap;
     async function loadImageShape(engine) {
@@ -10248,6 +10222,40 @@
     async function loadOutModesUpdater(engine) {
       await engine.addParticleUpdater("outModes", (container => new OutOfCanvasUpdater(container)));
     }
+    class ParallaxMover {
+      init() {}
+      isEnabled(particle) {
+        return !isSsr() && !particle.destroyed && particle.container.actualOptions.interactivity.events.onHover.parallax.enable;
+      }
+      move(particle) {
+        const container = particle.container, options = container.actualOptions;
+        if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
+          return;
+        }
+        const parallaxForce = options.interactivity.events.onHover.parallax.force, mousePos = container.interactivity.mouse.position;
+        if (!mousePos) {
+          return;
+        }
+        const canvasCenter = {
+          x: container.canvas.size.width / 2,
+          y: container.canvas.size.height / 2
+        }, parallaxSmooth = options.interactivity.events.onHover.parallax.smooth, factor = particle.getRadius() / parallaxForce, centerDistance = {
+          x: (mousePos.x - canvasCenter.x) * factor,
+          y: (mousePos.y - canvasCenter.y) * factor
+        };
+        particle.offset.x += (centerDistance.x - particle.offset.x) / parallaxSmooth;
+        particle.offset.y += (centerDistance.y - particle.offset.y) / parallaxSmooth;
+      }
+    }
+    async function loadParallaxMover(engine) {
+      engine.addMover("parallax", (() => new ParallaxMover));
+    }
+    class ParticlesInteractorBase {
+      constructor(container) {
+        this.container = container;
+        this.type = 1;
+      }
+    }
     class Attractor_Attractor extends ParticlesInteractorBase {
       constructor(container) {
         super(container);
@@ -10302,10 +10310,7 @@
       }
       reset() {}
       async 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) {
             continue;
@@ -10314,9 +10319,7 @@
           if (Math.round(pos1.z) !== Math.round(pos2.z)) {
             continue;
           }
-          const dist = getDistance(pos1, pos2);
-          const radius2 = p2.getRadius();
-          const distP = radius1 + radius2;
+          const dist = getDistance(pos1, pos2), radius2 = p2.getRadius(), distP = radius1 + radius2;
           if (dist <= distP) {
             this.resolveCollision(p1, p2);
           }
@@ -10325,27 +10328,20 @@
       resolveCollision(p1, p2) {
         switch (p1.options.collisions.mode) {
          case "absorb":
-          {
-            this.absorb(p1, p2);
-            break;
-          }
+          this.absorb(p1, p2);
+          break;
 
          case "bounce":
-          {
-            bounce(p1, p2);
-            break;
-          }
+          bounce(p1, p2);
+          break;
 
          case "destroy":
-          {
-            destroy(p1, p2);
-            break;
-          }
+          destroy(p1, p2);
+          break;
         }
       }
       absorb(p1, p2) {
-        const container = this.container;
-        const fps = container.fpsLimit / 1e3;
+        const container = this.container, fps = container.fpsLimit / 1e3;
         if (p1.getRadius() === undefined && p2.getRadius() !== undefined) {
           p1.destroy();
         } else if (p1.getRadius() !== undefined && p2.getRadius() === undefined) {
@@ -10413,18 +10409,11 @@
       async interact(p1) {
         var _a;
         p1.links = [];
-        const pos1 = p1.getPosition();
-        const container = this.container;
-        const canvasSize = container.canvas.size;
+        const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
         if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
           return;
         }
-        const linkOpt1 = p1.options.links;
-        const optOpacity = linkOpt1.opacity;
-        const optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
-        const warp = linkOpt1.warp;
-        const range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance);
-        const query = container.particles.quadTree.query(range);
+        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.quadTree.query(range);
         for (const p2 of query) {
           const linkOpt2 = p2.options.links;
           if (p1 === p2 || !linkOpt2.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || p1.links.map((t => t.destination)).indexOf(p2) !== -1 || p2.links.map((t => t.destination)).indexOf(p1) !== -1) {
@@ -10447,8 +10436,7 @@
         }
       }
       setColor(p1) {
-        const container = this.container;
-        const linksOptions = p1.options.links;
+        const container = this.container, linksOptions = p1.options.links;
         let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);
         if (!linkColor) {
           const optColor = linksOptions.color;
@@ -10477,64 +10465,52 @@
         linkParticle.links = [];
       }
       drawParticle(context, particle) {
-        const linkParticle = particle;
-        const container = this.container;
-        const particles = container.particles;
-        const pOptions = particle.options;
-        if (linkParticle.links.length > 0) {
-          context.save();
-          const p1Links = linkParticle.links.filter((l => {
-            const linkFreq = container.particles.getLinkFrequency(linkParticle, l.destination);
-            return linkFreq <= pOptions.links.frequency;
-          }));
-          for (const link of p1Links) {
-            const p2 = link.destination;
-            if (pOptions.links.triangles.enable) {
-              const links = p1Links.map((l => l.destination));
-              const vertices = p2.links.filter((t => {
-                const linkFreq = container.particles.getLinkFrequency(p2, t.destination);
-                return linkFreq <= p2.options.links.frequency && links.indexOf(t.destination) >= 0;
-              }));
-              if (vertices.length) {
-                for (const vertex of vertices) {
-                  const p3 = vertex.destination;
-                  const triangleFreq = particles.getTriangleFrequency(linkParticle, p2, p3);
-                  if (triangleFreq > pOptions.links.triangles.frequency) {
-                    continue;
-                  }
-                  this.drawLinkTriangle(linkParticle, link, vertex);
+        const linkParticle = particle, container = this.container, particles = container.particles, pOptions = particle.options;
+        if (linkParticle.links.length <= 0) {
+          return;
+        }
+        context.save();
+        const p1Links = linkParticle.links.filter((l => {
+          const linkFreq = container.particles.getLinkFrequency(linkParticle, l.destination);
+          return linkFreq <= pOptions.links.frequency;
+        }));
+        for (const link of p1Links) {
+          const p2 = link.destination;
+          if (pOptions.links.triangles.enable) {
+            const links = p1Links.map((l => l.destination)), vertices = p2.links.filter((t => {
+              const linkFreq = container.particles.getLinkFrequency(p2, t.destination);
+              return linkFreq <= p2.options.links.frequency && links.indexOf(t.destination) >= 0;
+            }));
+            if (vertices.length) {
+              for (const vertex of vertices) {
+                const p3 = vertex.destination, triangleFreq = particles.getTriangleFrequency(linkParticle, p2, p3);
+                if (triangleFreq > pOptions.links.triangles.frequency) {
+                  continue;
                 }
+                this.drawLinkTriangle(linkParticle, link, vertex);
               }
             }
-            if (link.opacity > 0 && container.retina.linksWidth > 0) {
-              this.drawLinkLine(linkParticle, link);
-            }
           }
-          context.restore();
+          if (link.opacity > 0 && container.retina.linksWidth > 0) {
+            this.drawLinkLine(linkParticle, link);
+          }
         }
+        context.restore();
       }
       drawLinkTriangle(p1, link1, link2) {
         var _a;
-        const container = this.container;
-        const options = container.actualOptions;
-        const p2 = link1.destination;
-        const p3 = link2.destination;
-        const triangleOptions = p1.options.links.triangles;
-        const opacityTriangle = (_a = triangleOptions.opacity) !== null && _a !== void 0 ? _a : (link1.opacity + link2.opacity) / 2;
+        const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, triangleOptions = p1.options.links.triangles, opacityTriangle = (_a = triangleOptions.opacity) !== null && _a !== void 0 ? _a : (link1.opacity + link2.opacity) / 2;
         if (opacityTriangle <= 0) {
           return;
         }
-        const pos1 = p1.getPosition();
-        const pos2 = p2.getPosition();
-        const pos3 = p3.getPosition();
+        const pos1 = p1.getPosition(), pos2 = p2.getPosition(), pos3 = p3.getPosition();
         container.canvas.draw((ctx => {
           if (getDistance(pos1, pos2) > container.retina.linksDistance || getDistance(pos3, pos2) > container.retina.linksDistance || getDistance(pos3, pos1) > container.retina.linksDistance) {
             return;
           }
           let colorTriangle = colorToRgb(triangleOptions.color);
           if (!colorTriangle) {
-            const linksOptions = p1.options.links;
-            const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;
+            const linksOptions = p1.options.links, linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;
             colorTriangle = getLinkColor(p1, p2, linkColor);
           }
           if (!colorTriangle) {
@@ -10544,35 +10520,27 @@
         }));
       }
       drawLinkLine(p1, link) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const p2 = link.destination;
+        const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
         let opacity = link.opacity;
-        const pos1 = p1.getPosition();
-        const pos2 = p2.getPosition();
         container.canvas.draw((ctx => {
           var _a, _b;
           let colorLine;
           const twinkle = p1.options.twinkle.lines;
           if (twinkle.enable) {
-            const twinkleFreq = twinkle.frequency;
-            const twinkleRgb = colorToRgb(twinkle.color);
-            const twinkling = Math.random() < twinkleFreq;
-            if (twinkling && twinkleRgb !== undefined) {
+            const twinkleFreq = twinkle.frequency, twinkleRgb = colorToRgb(twinkle.color), twinkling = Math.random() < twinkleFreq;
+            if (twinkling && twinkleRgb) {
               colorLine = twinkleRgb;
               opacity = getRangeValue(twinkle.opacity);
             }
           }
           if (!colorLine) {
-            const linksOptions = p1.options.links;
-            const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;
+            const linksOptions = p1.options.links, linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;
             colorLine = getLinkColor(p1, p2, linkColor);
           }
           if (!colorLine) {
             return;
           }
-          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;
+          const width = (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, maxDistance = (_b = p1.retina.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
           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);
         }));
       }
@@ -10916,11 +10884,16 @@
       }
     }
     async function loadSlim(engine) {
+      await loadBaseMover(engine);
+      await loadParallaxMover(engine);
       await loadExternalAttractInteraction(engine);
       await loadExternalBounceInteraction(engine);
       await loadExternalBubbleInteraction(engine);
       await loadExternalConnectInteraction(engine);
       await loadExternalGrabInteraction(engine);
+      await loadExternalPauseInteraction(engine);
+      await loadExternalPushInteraction(engine);
+      await loadExternalRemoveInteraction(engine);
       await loadExternalRepulseInteraction(engine);
       await loadParticlesAttractInteraction(engine);
       await loadParticlesCollisionsInteraction(engine);
@@ -11019,6 +10992,22 @@
     async function loadTiltUpdater(engine) {
       await engine.addParticleUpdater("tilt", (container => new TiltUpdater(container)));
     }
+    class TwinkleUpdater {
+      getColorStyles(particle, context, radius, opacity) {
+        const pOptions = particle.options, twinkle = pOptions.twinkle.particles, twinkling = twinkle.enable && Math.random() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleRgb = colorToHsl(twinkle.color), twinkleStyle = twinkleRgb ? getStyleFromHsl(twinkleRgb, twinklingOpacity) : undefined, res = {}, needsTwinkle = twinkling && twinkleStyle;
+        res.fill = needsTwinkle ? twinkleStyle : undefined;
+        res.stroke = needsTwinkle ? twinkleStyle : undefined;
+        return res;
+      }
+      init() {}
+      isEnabled(particle) {
+        return particle.options.twinkle.particles.enable;
+      }
+      update() {}
+    }
+    async function loadTwinkleUpdater(engine) {
+      await engine.addParticleUpdater("tilt", (() => new TwinkleUpdater));
+    }
     function updateWobble(particle, delta) {
       var _a;
       const wobble = particle.options.wobble;
@@ -11069,10 +11058,11 @@
     }
     async function loadFull(engine) {
       await loadSlim(engine);
-      await loadExternalTrailInteraction(engine);
       await loadRollUpdater(engine);
       await loadTiltUpdater(engine);
+      await loadTwinkleUpdater(engine);
       await loadWobbleUpdater(engine);
+      await loadExternalTrailInteraction(engine);
       await loadAbsorbersPlugin(engine);
       await loadEmittersPlugin(engine);
       await loadPolygonMaskPlugin(engine);