tsparticles 1.37.4 → 1.39.0

package/tsparticles.js

@@ -117,7 +117,7 @@
     }();
     !function() {
       __webpack_require__.u = function(chunkId) {
-        return "" + "tsparticles.pathseg" + ".js";
+        return "" + "tsparticles.pathseg.min" + ".js";
       };
     }();
     !function() {
@@ -298,20 +298,14 @@
     }();
     !function() {
       __webpack_require__.O(0, [ 649 ], (function() {
-        __webpack_require__.E(917);
+        __webpack_require__.E(404);
       }), 5);
     }();
     var __webpack_exports__ = {};
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
-      AbsorberClickMode: function() {
-        return AbsorberClickMode;
-      },
-      AlterType: function() {
-        return AlterType;
-      },
-      AnimationStatus: function() {
-        return AnimationStatus;
+      Canvas: function() {
+        return Canvas;
       },
       Circle: function() {
         return Circle;
@@ -319,117 +313,69 @@
       CircleWarp: function() {
         return CircleWarp;
       },
-      ClickMode: function() {
-        return ClickMode;
-      },
-      CollisionMode: function() {
-        return CollisionMode;
-      },
       Constants: function() {
         return Constants;
       },
       Container: function() {
         return Container;
       },
-      DestroyMode: function() {
-        return DestroyMode;
-      },
-      DestroyType: function() {
-        return DestroyType;
-      },
-      DivMode: function() {
-        return DivMode;
-      },
-      DivType: function() {
-        return DivType;
-      },
-      EasingType: function() {
-        return EasingType;
+      Engine: function() {
+        return Engine;
       },
-      EmitterClickMode: function() {
-        return EmitterClickMode;
-      },
-      EmitterShapeType: function() {
-        return EmitterShapeType;
+      EventListeners: function() {
+        return EventListeners;
       },
       ExternalInteractorBase: function() {
         return ExternalInteractorBase;
       },
-      GradientType: function() {
-        return GradientType;
-      },
-      HoverMode: function() {
-        return HoverMode;
+      FrameManager: function() {
+        return FrameManager;
       },
-      InlineArrangement: function() {
-        return InlineArrangement;
+      InteractionManager: function() {
+        return InteractionManager;
       },
-      InteractivityDetect: function() {
-        return InteractivityDetect;
-      },
-      InteractorType: function() {
-        return InteractorType;
+      Loader: function() {
+        return Loader;
       },
       Main: function() {
-        return Main;
-      },
-      MoveDirection: function() {
-        return MoveDirection;
-      },
-      MoveType: function() {
-        return MoveType;
-      },
-      OrbitType: function() {
-        return OrbitType;
-      },
-      OutMode: function() {
-        return OutMode;
-      },
-      OutModeDirection: function() {
-        return OutModeDirection;
+        return Engine;
       },
       Particle: function() {
         return Particle;
       },
+      Particles: function() {
+        return Particles;
+      },
       ParticlesInteractorBase: function() {
         return ParticlesInteractorBase;
       },
-      Point: function() {
-        return Point;
-      },
-      Rectangle: function() {
-        return Rectangle;
-      },
-      ResponsiveMode: function() {
-        return ResponsiveMode;
-      },
-      RollMode: function() {
-        return RollMode;
+      ParticlesMover: function() {
+        return ParticlesMover;
       },
-      RotateDirection: function() {
-        return RotateDirection;
+      Plugins: function() {
+        return Plugins;
       },
-      ShapeType: function() {
-        return ShapeType;
-      },
-      SizeMode: function() {
-        return SizeMode;
+      Point: function() {
+        return Point;
       },
-      StartValueType: function() {
-        return StartValueType;
+      QuadTree: function() {
+        return QuadTree;
       },
-      ThemeMode: function() {
-        return ThemeMode;
+      Range: function() {
+        return Range;
       },
-      TiltDirection: function() {
-        return TiltDirection;
+      Rectangle: function() {
+        return Rectangle;
       },
-      Type: function() {
-        return Type;
+      Retina: function() {
+        return Retina;
       },
       Vector: function() {
         return Vector;
       },
+      Vector3d: function() {
+        return Vector3d;
+      },
       alterHsl: function() {
         return alterHsl;
       },
@@ -650,10 +596,10 @@
         return tsParticles;
       }
     });
-    const initPjs = main => {
-      const particlesJS = (tagId, options) => main.load(tagId, options);
+    const initPjs = engine => {
+      const particlesJS = (tagId, options) => engine.load(tagId, options);
       particlesJS.load = (tagId, pathConfigJson, callback) => {
-        main.loadJSON(tagId, pathConfigJson).then((container => {
+        engine.loadJSON(tagId, pathConfigJson).then((container => {
           if (container) {
             callback(container);
           }
@@ -662,279 +608,20 @@
         }));
       };
       particlesJS.setOnClickHandler = callback => {
-        main.setOnClickHandler(callback);
+        engine.setOnClickHandler(callback);
       };
-      const pJSDom = main.dom();
+      const pJSDom = engine.dom();
       return {
         particlesJS: particlesJS,
         pJSDom: pJSDom
       };
     };
-    var MoveDirection;
-    (function(MoveDirection) {
-      MoveDirection["bottom"] = "bottom";
-      MoveDirection["bottomLeft"] = "bottom-left";
-      MoveDirection["bottomRight"] = "bottom-right";
-      MoveDirection["left"] = "left";
-      MoveDirection["none"] = "none";
-      MoveDirection["right"] = "right";
-      MoveDirection["top"] = "top";
-      MoveDirection["topLeft"] = "top-left";
-      MoveDirection["topRight"] = "top-right";
-    })(MoveDirection || (MoveDirection = {}));
-    var RotateDirection;
-    (function(RotateDirection) {
-      RotateDirection["clockwise"] = "clockwise";
-      RotateDirection["counterClockwise"] = "counter-clockwise";
-      RotateDirection["random"] = "random";
-    })(RotateDirection || (RotateDirection = {}));
-    var OutModeDirection;
-    (function(OutModeDirection) {
-      OutModeDirection["bottom"] = "bottom";
-      OutModeDirection["left"] = "left";
-      OutModeDirection["right"] = "right";
-      OutModeDirection["top"] = "top";
-    })(OutModeDirection || (OutModeDirection = {}));
-    var TiltDirection;
-    (function(TiltDirection) {
-      TiltDirection["clockwise"] = "clockwise";
-      TiltDirection["counterClockwise"] = "counter-clockwise";
-      TiltDirection["random"] = "random";
-    })(TiltDirection || (TiltDirection = {}));
-    var ClickMode;
-    (function(ClickMode) {
-      ClickMode["attract"] = "attract";
-      ClickMode["bubble"] = "bubble";
-      ClickMode["push"] = "push";
-      ClickMode["remove"] = "remove";
-      ClickMode["repulse"] = "repulse";
-      ClickMode["pause"] = "pause";
-      ClickMode["trail"] = "trail";
-    })(ClickMode || (ClickMode = {}));
-    var DestroyMode;
-    (function(DestroyMode) {
-      DestroyMode["none"] = "none";
-      DestroyMode["split"] = "split";
-    })(DestroyMode || (DestroyMode = {}));
-    var DivMode;
-    (function(DivMode) {
-      DivMode["bounce"] = "bounce";
-      DivMode["bubble"] = "bubble";
-      DivMode["repulse"] = "repulse";
-    })(DivMode || (DivMode = {}));
-    var HoverMode;
-    (function(HoverMode) {
-      HoverMode["attract"] = "attract";
-      HoverMode["bounce"] = "bounce";
-      HoverMode["bubble"] = "bubble";
-      HoverMode["connect"] = "connect";
-      HoverMode["grab"] = "grab";
-      HoverMode["light"] = "light";
-      HoverMode["repulse"] = "repulse";
-      HoverMode["slow"] = "slow";
-      HoverMode["trail"] = "trail";
-    })(HoverMode || (HoverMode = {}));
-    var CollisionMode;
-    (function(CollisionMode) {
-      CollisionMode["absorb"] = "absorb";
-      CollisionMode["bounce"] = "bounce";
-      CollisionMode["destroy"] = "destroy";
-    })(CollisionMode || (CollisionMode = {}));
-    var OutMode;
-    (function(OutMode) {
-      OutMode["bounce"] = "bounce";
-      OutMode["bounceHorizontal"] = "bounce-horizontal";
-      OutMode["bounceVertical"] = "bounce-vertical";
-      OutMode["none"] = "none";
-      OutMode["out"] = "out";
-      OutMode["destroy"] = "destroy";
-      OutMode["split"] = "split";
-    })(OutMode || (OutMode = {}));
-    var RollMode;
-    (function(RollMode) {
-      RollMode["both"] = "both";
-      RollMode["horizontal"] = "horizontal";
-      RollMode["vertical"] = "vertical";
-    })(RollMode || (RollMode = {}));
-    var SizeMode;
-    (function(SizeMode) {
-      SizeMode["precise"] = "precise";
-      SizeMode["percent"] = "percent";
-    })(SizeMode || (SizeMode = {}));
-    var ThemeMode;
-    (function(ThemeMode) {
-      ThemeMode["any"] = "any";
-      ThemeMode["dark"] = "dark";
-      ThemeMode["light"] = "light";
-    })(ThemeMode || (ThemeMode = {}));
-    var ResponsiveMode;
-    (function(ResponsiveMode) {
-      ResponsiveMode["screen"] = "screen";
-      ResponsiveMode["canvas"] = "canvas";
-    })(ResponsiveMode || (ResponsiveMode = {}));
-    var AnimationStatus;
-    (function(AnimationStatus) {
-      AnimationStatus[AnimationStatus["increasing"] = 0] = "increasing";
-      AnimationStatus[AnimationStatus["decreasing"] = 1] = "decreasing";
-    })(AnimationStatus || (AnimationStatus = {}));
-    var AlterType;
-    (function(AlterType) {
-      AlterType["darken"] = "darken";
-      AlterType["enlighten"] = "enlighten";
-    })(AlterType || (AlterType = {}));
-    var DestroyType;
-    (function(DestroyType) {
-      DestroyType["none"] = "none";
-      DestroyType["max"] = "max";
-      DestroyType["min"] = "min";
-    })(DestroyType || (DestroyType = {}));
-    var GradientType;
-    (function(GradientType) {
-      GradientType["linear"] = "linear";
-      GradientType["radial"] = "radial";
-      GradientType["random"] = "random";
-    })(GradientType || (GradientType = {}));
-    var InteractorType;
-    (function(InteractorType) {
-      InteractorType[InteractorType["External"] = 0] = "External";
-      InteractorType[InteractorType["Particles"] = 1] = "Particles";
-    })(InteractorType || (InteractorType = {}));
-    var ShapeType;
-    (function(ShapeType) {
-      ShapeType["char"] = "char";
-      ShapeType["character"] = "character";
-      ShapeType["circle"] = "circle";
-      ShapeType["edge"] = "edge";
-      ShapeType["image"] = "image";
-      ShapeType["images"] = "images";
-      ShapeType["line"] = "line";
-      ShapeType["polygon"] = "polygon";
-      ShapeType["square"] = "square";
-      ShapeType["star"] = "star";
-      ShapeType["triangle"] = "triangle";
-    })(ShapeType || (ShapeType = {}));
-    var StartValueType;
-    (function(StartValueType) {
-      StartValueType["max"] = "max";
-      StartValueType["min"] = "min";
-      StartValueType["random"] = "random";
-    })(StartValueType || (StartValueType = {}));
-    var DivType;
-    (function(DivType) {
-      DivType["circle"] = "circle";
-      DivType["rectangle"] = "rectangle";
-    })(DivType || (DivType = {}));
-    var EasingType;
-    (function(EasingType) {
-      EasingType["easeOutBack"] = "ease-out-back";
-      EasingType["easeOutCirc"] = "ease-out-circ";
-      EasingType["easeOutCubic"] = "ease-out-cubic";
-      EasingType["easeOutQuad"] = "ease-out-quad";
-      EasingType["easeOutQuart"] = "ease-out-quart";
-      EasingType["easeOutQuint"] = "ease-out-quint";
-      EasingType["easeOutExpo"] = "ease-out-expo";
-      EasingType["easeOutSine"] = "ease-out-sine";
-    })(EasingType || (EasingType = {}));
-    var OrbitType;
-    (function(OrbitType) {
-      OrbitType["front"] = "front";
-      OrbitType["back"] = "back";
-    })(OrbitType || (OrbitType = {}));
-    var InteractivityDetect;
-    (function(InteractivityDetect) {
-      InteractivityDetect["canvas"] = "canvas";
-      InteractivityDetect["parent"] = "parent";
-      InteractivityDetect["window"] = "window";
-    })(InteractivityDetect || (InteractivityDetect = {}));
-    class Vector {
+    class Range {
       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;
+        this.position = {
+          x: x,
+          y: y
+        };
       }
     }
     function clamp(num, min, max) {
@@ -995,31 +682,31 @@
         return direction * Math.PI / 180;
       } else {
         switch (direction) {
-         case MoveDirection.top:
+         case "top":
           return -Math.PI / 2;
 
-         case MoveDirection.topRight:
+         case "top-right":
           return -Math.PI / 4;
 
-         case MoveDirection.right:
+         case "right":
           return 0;
 
-         case MoveDirection.bottomRight:
+         case "bottom-right":
           return Math.PI / 4;
 
-         case MoveDirection.bottom:
+         case "bottom":
           return Math.PI / 2;
 
-         case MoveDirection.bottomLeft:
+         case "bottom-left":
           return 3 * Math.PI / 4;
 
-         case MoveDirection.left:
+         case "left":
           return Math.PI;
 
-         case MoveDirection.topLeft:
+         case "top-left":
           return -3 * Math.PI / 4;
 
-         case MoveDirection.none:
+         case "none":
          default:
           return Math.random() * Math.PI * 2;
         }
@@ -1036,32 +723,32 @@
     }
     function calcEasing(value, type) {
       switch (type) {
-       case EasingType.easeOutQuad:
+       case "ease-out-quad":
         return 1 - (1 - value) ** 2;
 
-       case EasingType.easeOutCubic:
+       case "ease-out-cubic":
         return 1 - (1 - value) ** 3;
 
-       case EasingType.easeOutQuart:
+       case "ease-out-quart":
         return 1 - (1 - value) ** 4;
 
-       case EasingType.easeOutQuint:
+       case "ease-out-quint":
         return 1 - (1 - value) ** 5;
 
-       case EasingType.easeOutExpo:
+       case "ease-out-expo":
         return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
 
-       case EasingType.easeOutSine:
+       case "ease-out-sine":
         return Math.sin(value * Math.PI / 2);
 
-       case EasingType.easeOutBack:
+       case "ease-out-back":
         {
           const c1 = 1.70158;
           const c3 = c1 + 1;
           return 1 + c3 * Math.pow(value - 1, 3) + c1 * Math.pow(value - 1, 2);
         }
 
-       case EasingType.easeOutCirc:
+       case "ease-out-circ":
         return Math.sqrt(1 - Math.pow(value - 1, 2));
 
        default:
@@ -1122,16 +809,16 @@
     }
     function areBoundsInside(bounds, size, direction) {
       let inside = true;
-      if (!direction || direction === OutModeDirection.bottom) {
+      if (!direction || direction === "bottom") {
         inside = bounds.top < size.height;
       }
-      if (inside && (!direction || direction === OutModeDirection.left)) {
+      if (inside && (!direction || direction === "left")) {
         inside = bounds.right > 0;
       }
-      if (inside && (!direction || direction === OutModeDirection.right)) {
+      if (inside && (!direction || direction === "right")) {
         inside = bounds.left < size.width;
       }
-      if (inside && (!direction || direction === OutModeDirection.top)) {
+      if (inside && (!direction || direction === "top")) {
         inside = bounds.bottom > 0;
       }
       return inside;
@@ -1222,14 +909,11 @@
       };
     }
     function circleBounce(p1, p2) {
-      const xVelocityDiff = p1.velocity.x;
-      const yVelocityDiff = p1.velocity.y;
-      const pos1 = p1.position;
-      const pos2 = p2.position;
-      const xDist = pos2.x - pos1.x;
-      const yDist = pos2.y - pos1.y;
+      const {x: xVelocityDiff, y: yVelocityDiff} = p1.velocity.sub(p2.velocity);
+      const [pos1, pos2] = [ p1.position, p2.position ];
+      const {dx: xDist, dy: yDist} = getDistances(pos2, pos1);
       if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) {
-        const angle = -Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x);
+        const angle = -Math.atan2(yDist, xDist);
         const m1 = p1.mass;
         const m2 = p2.mass;
         const u1 = p1.velocity.rotate(angle);
@@ -1291,23 +975,6 @@
         }
       }
     }
-    class Constants {}
-    Constants.canvasClass = "tsparticles-canvas-el";
-    Constants.randomColorValue = "random";
-    Constants.midColorValue = "mid";
-    Constants.touchEndEvent = "touchend";
-    Constants.mouseDownEvent = "mousedown";
-    Constants.mouseUpEvent = "mouseup";
-    Constants.mouseMoveEvent = "mousemove";
-    Constants.touchStartEvent = "touchstart";
-    Constants.touchMoveEvent = "touchmove";
-    Constants.mouseLeaveEvent = "mouseleave";
-    Constants.mouseOutEvent = "mouseout";
-    Constants.touchCancelEvent = "touchcancel";
-    Constants.resizeEvent = "resize";
-    Constants.visibilityChangeEvent = "visibilitychange";
-    Constants.noPolygonDataLoaded = "No polygon data loaded.";
-    Constants.noPolygonFound = "No polygon found, you need to specify SVG url in config.";
     function hue2rgb(p, q, t) {
       let tCalc = t;
       if (tCalc < 0) {
@@ -1717,7 +1384,7 @@
         if (colorAnimation.sync) {
           return;
         }
-        colorValue.status = AnimationStatus.increasing;
+        colorValue.status = 0;
         colorValue.velocity *= Math.random();
         if (colorValue.value) {
           colorValue.value *= Math.random();
@@ -1880,8 +1547,8 @@
       if (tiltOptions.enable || rollOptions.enable) {
         const roll = rollOptions.enable && particle.roll;
         const tilt = tiltOptions.enable && particle.tilt;
-        const rollHorizontal = roll && (rollOptions.mode === RollMode.horizontal || rollOptions.mode === RollMode.both);
-        const rollVertical = roll && (rollOptions.mode === RollMode.vertical || rollOptions.mode === RollMode.both);
+        const rollHorizontal = roll && (rollOptions.mode === "horizontal" || rollOptions.mode === "both");
+        const 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);
@@ -1903,7 +1570,7 @@
       }
       if (gradient) {
         const gradientAngle = gradient.angle.value;
-        const fillGradient = gradient.type === GradientType.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);
+        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,
@@ -2001,17 +1668,9 @@
       return {
         h: color.h,
         s: color.s,
-        l: color.l + (type === AlterType.darken ? -1 : 1) * value
+        l: color.l + (type === "darken" ? -1 : 1) * value
       };
     }
-    class Range {
-      constructor(x, y) {
-        this.position = {
-          x: x,
-          y: y
-        };
-      }
-    }
     class Circle extends Range {
       constructor(x, y, radius) {
         super(x, y);
@@ -2132,6 +1791,23 @@
         return false;
       }
     }
+    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 = {
@@ -2178,10 +1854,10 @@
         const options = container.actualOptions;
         const detectType = options.interactivity.detectsOn;
         let mouseLeaveEvent = Constants.mouseLeaveEvent;
-        if (detectType === InteractivityDetect.window) {
+        if (detectType === "window") {
           container.interactivity.element = window;
           mouseLeaveEvent = Constants.mouseOutEvent;
-        } else if (detectType === InteractivityDetect.parent && container.canvas.element) {
+        } else if (detectType === "parent" && container.canvas.element) {
           const canvasEl = container.canvas.element;
           container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
         } else {
@@ -2252,9 +1928,9 @@
           clearTimeout(this.resizeTimeout);
           delete this.resizeTimeout;
         }
-        this.resizeTimeout = setTimeout((() => {
+        this.resizeTimeout = setTimeout((async () => {
           var _a;
-          return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
+          return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize());
         }), 500);
       }
       handleVisibilityChange() {
@@ -2305,7 +1981,7 @@
                 y: mouseEvent.clientY - clientRect.top
               };
             }
-          } else if (options.interactivity.detectsOn === InteractivityDetect.parent) {
+          } else if (options.interactivity.detectsOn === "parent") {
             const source = mouseEvent.target;
             const target = mouseEvent.currentTarget;
             const canvasEl = container.canvas.element;
@@ -2426,7 +2102,7 @@
         const pushNb = options.interactivity.modes.push.quantity;
         const removeNb = options.interactivity.modes.remove.quantity;
         switch (mode) {
-         case ClickMode.push:
+         case "push":
           {
             if (pushNb > 0) {
               const pushOptions = options.interactivity.modes.push;
@@ -2437,15 +2113,15 @@
             break;
           }
 
-         case ClickMode.remove:
+         case "remove":
           container.particles.removeQuantity(removeNb);
           break;
 
-         case ClickMode.bubble:
+         case "bubble":
           container.bubble.clicking = true;
           break;
 
-         case ClickMode.repulse:
+         case "repulse":
           container.repulse.clicking = true;
           container.repulse.count = 0;
           for (const particle of container.repulse.particles) {
@@ -2460,7 +2136,7 @@
           }), options.interactivity.modes.repulse.duration * 1e3);
           break;
 
-         case ClickMode.attract:
+         case "attract":
           container.attract.clicking = true;
           container.attract.count = 0;
           for (const particle of container.attract.particles) {
@@ -2475,7 +2151,7 @@
           }), options.interactivity.modes.attract.duration * 1e3);
           break;
 
-         case ClickMode.pause:
+         case "pause":
           if (container.getAnimationStatus()) {
             container.pause();
           } else {
@@ -2490,47 +2166,308 @@
         }
       }
     }
-    const plugins = [];
-    const interactorsInitializers = new Map;
-    const updatersInitializers = new Map;
-    const interactors = new Map;
-    const updaters = new Map;
-    const presets = new Map;
-    const drawers = new Map;
-    const pathGenerators = new Map;
-    class Plugins {
-      static getPlugin(plugin) {
-        return plugins.find((t => t.id === plugin));
+    class ExternalInteractorBase {
+      constructor(container) {
+        this.container = container;
+        this.type = 0;
       }
-      static addPlugin(plugin) {
-        if (!Plugins.getPlugin(plugin.id)) {
-          plugins.push(plugin);
-        }
+    }
+    class FrameManager {
+      constructor(container) {
+        this.container = container;
       }
-      static getAvailablePlugins(container) {
-        const res = new Map;
-        for (const plugin of plugins) {
-          if (!plugin.needsPlugin(container.actualOptions)) {
-            continue;
+      nextFrame(timestamp) {
+        var _a;
+        try {
+          const container = this.container;
+          if (container.lastFrameTime !== undefined && timestamp < container.lastFrameTime + 1e3 / container.fpsLimit) {
+            container.draw(false);
+            return;
           }
-          res.set(plugin.id, plugin.getPlugin(container));
+          (_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;
+          }
+          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);
         }
-        return res;
       }
-      static loadOptions(options, sourceOptions) {
-        for (const plugin of plugins) {
-          plugin.loadOptions(options, sourceOptions);
-        }
+    }
+    class InteractionManager {
+      constructor(container) {
+        this.container = container;
+        this.externalInteractors = [];
+        this.particleInteractors = [];
+        this.init();
       }
-      static getPreset(preset) {
-        return presets.get(preset);
+      init() {
+        const interactors = Plugins.getInteractors(this.container, true);
+        for (const interactor of interactors) {
+          switch (interactor.type) {
+           case 0:
+            this.externalInteractors.push(interactor);
+            break;
+
+           case 1:
+            this.particleInteractors.push(interactor);
+            break;
+          }
+        }
       }
-      static addPreset(presetKey, options, override = false) {
-        if (override || !Plugins.getPreset(presetKey)) {
-          presets.set(presetKey, options);
+      externalInteract(delta) {
+        for (const interactor of this.externalInteractors) {
+          if (interactor.isEnabled()) {
+            interactor.interact(delta);
+          }
         }
       }
-      static addShapeDrawer(type, drawer) {
+      particlesInteract(particle, delta) {
+        for (const interactor of this.externalInteractors) {
+          interactor.reset(particle);
+        }
+        for (const interactor of this.particleInteractors) {
+          if (interactor.isEnabled(particle)) {
+            interactor.interact(particle, delta);
+          }
+        }
+      }
+    }
+    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 = moveOptions.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 && gravityOptions.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;
+      }
+    }
+    const plugins = [];
+    const interactorsInitializers = new Map;
+    const updatersInitializers = new Map;
+    const interactors = new Map;
+    const updaters = new Map;
+    const presets = new Map;
+    const drawers = new Map;
+    const pathGenerators = new Map;
+    class Plugins {
+      static getPlugin(plugin) {
+        return plugins.find((t => t.id === plugin));
+      }
+      static addPlugin(plugin) {
+        if (!Plugins.getPlugin(plugin.id)) {
+          plugins.push(plugin);
+        }
+      }
+      static getAvailablePlugins(container) {
+        const res = new Map;
+        for (const plugin of plugins) {
+          if (!plugin.needsPlugin(container.actualOptions)) {
+            continue;
+          }
+          res.set(plugin.id, plugin.getPlugin(container));
+        }
+        return res;
+      }
+      static loadOptions(options, sourceOptions) {
+        for (const plugin of plugins) {
+          plugin.loadOptions(options, sourceOptions);
+        }
+      }
+      static getPreset(preset) {
+        return presets.get(preset);
+      }
+      static addPreset(presetKey, options, override = false) {
+        if (override || !Plugins.getPreset(presetKey)) {
+          presets.set(presetKey, options);
+        }
+      }
+      static addShapeDrawer(type, drawer) {
         if (!Plugins.getShapeDrawer(type)) {
           drawers.set(type, drawer);
         }
@@ -2644,6 +2581,150 @@
         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;
@@ -2662,15 +2743,12 @@
         this.initBackground();
         this.paint();
       }
-      loadCanvas(canvas, generatedCanvas) {
+      loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-          canvas.className = Constants.canvasClass;
-        }
         if (this.generatedCanvas) {
           (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        this.generatedCanvas = generatedCanvas !== null && generatedCanvas !== void 0 ? generatedCanvas : this.generatedCanvas;
+        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;
@@ -2712,7 +2790,7 @@
           }));
         }
       }
-      windowResize() {
+      async windowResize() {
         if (!this.element) {
           return;
         }
@@ -2726,7 +2804,7 @@
           }
         }
         if (needsRefresh) {
-          container.refresh();
+          await container.refresh();
         }
       }
       resize() {
@@ -2913,12 +2991,12 @@
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
           this.originalStyle = deepExtend({}, element.style);
-          element.style.position = "fixed";
-          element.style.zIndex = options.fullScreen.zIndex.toString(10);
-          element.style.top = "0";
-          element.style.left = "0";
-          element.style.width = "100%";
-          element.style.height = "100%";
+          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;
@@ -2927,6 +3005,16 @@
           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 => {
@@ -3230,7 +3318,7 @@
     }
     class OutModes {
       constructor() {
-        this.default = OutMode.out;
+        this.default = "out";
       }
       load(data) {
         var _a, _b, _c, _d;
@@ -3270,7 +3358,7 @@
         this.attract = new Attract;
         this.decay = 0;
         this.distance = {};
-        this.direction = MoveDirection.none;
+        this.direction = "none";
         this.drift = 0;
         this.enable = false;
         this.gravity = new MoveGravity;
@@ -3462,10 +3550,10 @@
     class OpacityAnimation extends AnimationOptions {
       constructor() {
         super();
-        this.destroy = DestroyType.none;
+        this.destroy = "none";
         this.enable = false;
         this.speed = 2;
-        this.startValue = StartValueType.random;
+        this.startValue = "random";
         this.sync = false;
       }
       get opacity_min() {
@@ -3527,15 +3615,15 @@
     class Shape {
       constructor() {
         this.options = {};
-        this.type = ShapeType.circle;
+        this.type = "circle";
       }
       get image() {
         var _a;
-        return (_a = this.options[ShapeType.image]) !== null && _a !== void 0 ? _a : this.options[ShapeType.images];
+        return (_a = this.options["image"]) !== null && _a !== void 0 ? _a : this.options["images"];
       }
       set image(value) {
-        this.options[ShapeType.image] = value;
-        this.options[ShapeType.images] = value;
+        this.options["image"] = value;
+        this.options["images"] = value;
       }
       get custom() {
         return this.options;
@@ -3555,19 +3643,19 @@
       set stroke(_value) {}
       get character() {
         var _a;
-        return (_a = this.options[ShapeType.character]) !== null && _a !== void 0 ? _a : this.options[ShapeType.char];
+        return (_a = this.options["character"]) !== null && _a !== void 0 ? _a : this.options["char"];
       }
       set character(value) {
-        this.options[ShapeType.character] = value;
-        this.options[ShapeType.char] = value;
+        this.options["character"] = value;
+        this.options["char"] = value;
       }
       get polygon() {
         var _a;
-        return (_a = this.options[ShapeType.polygon]) !== null && _a !== void 0 ? _a : this.options[ShapeType.star];
+        return (_a = this.options["polygon"]) !== null && _a !== void 0 ? _a : this.options["star"];
       }
       set polygon(value) {
-        this.options[ShapeType.polygon] = value;
-        this.options[ShapeType.star] = value;
+        this.options["polygon"] = value;
+        this.options["star"] = value;
       }
       load(data) {
         var _a, _b, _c;
@@ -3583,9 +3671,9 @@
             }
           }
         }
-        this.loadShape(data.character, ShapeType.character, ShapeType.char, true);
-        this.loadShape(data.polygon, ShapeType.polygon, ShapeType.star, false);
-        this.loadShape((_c = data.image) !== null && _c !== void 0 ? _c : data.images, ShapeType.image, ShapeType.images, true);
+        this.loadShape(data.character, "character", "char", true);
+        this.loadShape(data.polygon, "polygon", "star", false);
+        this.loadShape((_c = data.image) !== null && _c !== void 0 ? _c : data.images, "image", "images", true);
         if (data.type !== undefined) {
           this.type = data.type;
         }
@@ -3623,10 +3711,10 @@
     class SizeAnimation extends AnimationOptions {
       constructor() {
         super();
-        this.destroy = DestroyType.none;
+        this.destroy = "none";
         this.enable = false;
         this.speed = 5;
-        this.startValue = StartValueType.random;
+        this.startValue = "random";
         this.sync = false;
       }
       get size_min() {
@@ -3710,7 +3798,7 @@
       constructor() {
         super();
         this.animation = new RotateAnimation;
-        this.direction = RotateDirection.clockwise;
+        this.direction = "clockwise";
         this.path = false;
         this.value = 0;
       }
@@ -3899,7 +3987,7 @@
       constructor() {
         this.bounce = new Bounce;
         this.enable = false;
-        this.mode = CollisionMode.bounce;
+        this.mode = "bounce";
         this.overlap = new CollisionsOverlap;
       }
       load(data) {
@@ -4042,7 +4130,7 @@
     }
     class Destroy {
       constructor() {
-        this.mode = DestroyMode.none;
+        this.mode = "none";
         this.split = new Split;
       }
       load(data) {
@@ -4101,7 +4189,7 @@
       constructor() {
         super();
         this.animation = new TiltAnimation;
-        this.direction = TiltDirection.clockwise;
+        this.direction = "clockwise";
         this.enable = false;
         this.value = 0;
       }
@@ -4141,7 +4229,7 @@
         this.darken = new RollLight;
         this.enable = false;
         this.enlighten = new RollLight;
-        this.mode = RollMode.vertical;
+        this.mode = "vertical";
         this.speed = 25;
       }
       load(data) {
@@ -4267,7 +4355,7 @@
       constructor() {
         this.angle = new GradientAngle;
         this.colors = [];
-        this.type = GradientType.random;
+        this.type = "random";
       }
       load(data) {
         if (!data) {
@@ -4290,7 +4378,7 @@
       constructor() {
         this.value = 0;
         this.animation = new GradientAngleAnimation;
-        this.direction = RotateDirection.clockwise;
+        this.direction = "clockwise";
       }
       load(data) {
         if (!data) {
@@ -4374,7 +4462,7 @@
         this.enable = false;
         this.speed = 0;
         this.sync = false;
-        this.startValue = StartValueType.random;
+        this.startValue = "random";
       }
       load(data) {
         if (!data) {
@@ -4478,90 +4566,37 @@
         if (collisions !== undefined) {
           this.collisions.enable = collisions;
         }
-        this.collisions.load(data.collisions);
-        const strokeToLoad = (_g = data.stroke) !== null && _g !== void 0 ? _g : (_h = data.shape) === null || _h === void 0 ? void 0 : _h.stroke;
-        if (strokeToLoad) {
-          if (strokeToLoad instanceof Array) {
-            this.stroke = strokeToLoad.map((s => {
-              const tmp = new Stroke;
-              tmp.load(s);
-              return tmp;
-            }));
-          } else {
-            if (this.stroke instanceof Array) {
-              this.stroke = new Stroke;
-            }
-            this.stroke.load(strokeToLoad);
-          }
-        }
-        const gradientToLoad = data.gradient;
-        if (gradientToLoad) {
-          if (gradientToLoad instanceof Array) {
-            this.gradient = gradientToLoad.map((s => {
-              const tmp = new AnimatableGradient;
-              tmp.load(s);
-              return tmp;
-            }));
-          } else {
-            if (this.gradient instanceof Array) {
-              this.gradient = new AnimatableGradient;
-            }
-            this.gradient.load(gradientToLoad);
-          }
-        }
-      }
-    }
-    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;
-        }
+        this.collisions.load(data.collisions);
+        const strokeToLoad = (_g = data.stroke) !== null && _g !== void 0 ? _g : (_h = data.shape) === null || _h === void 0 ? void 0 : _h.stroke;
+        if (strokeToLoad) {
+          if (strokeToLoad instanceof Array) {
+            this.stroke = strokeToLoad.map((s => {
+              const tmp = new Stroke;
+              tmp.load(s);
+              return tmp;
+            }));
+          } else {
+            if (this.stroke instanceof Array) {
+              this.stroke = new Stroke;
+            }
+            this.stroke.load(strokeToLoad);
+          }
+        }
+        const gradientToLoad = data.gradient;
+        if (gradientToLoad) {
+          if (gradientToLoad instanceof Array) {
+            this.gradient = gradientToLoad.map((s => {
+              const tmp = new AnimatableGradient;
+              tmp.load(s);
+              return tmp;
+            }));
+          } else {
+            if (this.gradient instanceof Array) {
+              this.gradient = new AnimatableGradient;
+            }
+            this.gradient.load(gradientToLoad);
+          }
+        }
       }
     }
     const fixOutMode = data => {
@@ -4632,22 +4667,22 @@
         };
         const sizeAnimation = sizeOptions.animation;
         if (sizeAnimation.enable) {
-          this.size.status = AnimationStatus.increasing;
+          this.size.status = 0;
           switch (sizeAnimation.startValue) {
-           case StartValueType.min:
+           case "min":
             this.size.value = this.size.min;
-            this.size.status = AnimationStatus.increasing;
+            this.size.status = 0;
             break;
 
-           case StartValueType.random:
+           case "random":
             this.size.value = randomInRange(this.size) * pxRatio;
-            this.size.status = Math.random() >= .5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
+            this.size.status = Math.random() >= .5 ? 0 : 1;
             break;
 
-           case StartValueType.max:
+           case "max":
            default:
             this.size.value = this.size.max;
-            this.size.status = AnimationStatus.decreasing;
+            this.size.status = 1;
             break;
           }
           this.size.velocity = ((_g = this.retina.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
@@ -4699,7 +4734,7 @@
           const distance = getDistance(pos, spinCenter);
           this.spin = {
             center: spinCenter,
-            direction: this.velocity.x >= 0 ? RotateDirection.clockwise : RotateDirection.counterClockwise,
+            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)
@@ -4775,353 +4810,141 @@
         if (this.unbreakable) {
           return;
         }
-        this.destroyed = true;
-        this.bubble.inRange = false;
-        for (const [, plugin] of this.container.plugins) {
-          if (plugin.particleDestroyed) {
-            plugin.particleDestroyed(this, override);
-          }
-        }
-        if (override) {
-          return;
-        }
-        const destroyOptions = this.options.destroy;
-        if (destroyOptions.mode === DestroyMode.split) {
-          this.split();
-        }
-      }
-      reset() {
-        if (this.opacity) {
-          this.opacity.loops = 0;
-        }
-        this.size.loops = 0;
-      }
-      split() {
-        const splitOptions = this.options.destroy.split;
-        if (splitOptions.count >= 0 && this.splitCount++ > splitOptions.count) {
-          return;
-        }
-        const rate = getRangeValue(splitOptions.rate.value);
-        for (let i = 0; i < rate; i++) {
-          this.container.particles.addSplitParticle(this);
-        }
-      }
-      calcPosition(container, position, zIndex, tryCount = 0) {
-        var _a, _b, _c, _d, _e, _f;
-        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 => {
-          fixOutMode({
-            outMode: outMode,
-            checkModes: [ OutMode.bounce, OutMode.bounceHorizontal ],
-            coord: pos.x,
-            maxCoord: container.canvas.size.width,
-            setCb: value => pos.x += value,
-            radius: radius
-          });
-        }, fixVertical = outMode => {
-          fixOutMode({
-            outMode: outMode,
-            checkModes: [ OutMode.bounce, OutMode.bounceVertical ],
-            coord: pos.y,
-            maxCoord: container.canvas.size.height,
-            setCb: value => pos.y += value,
-            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);
-        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();
-        if (!collisionsOptions.enable) {
-          return false;
-        }
-        const overlapOptions = collisionsOptions.overlap;
-        if (overlapOptions.enable) {
-          return false;
-        }
-        const retries = overlapOptions.retries;
-        if (retries >= 0 && tryCount > retries) {
-          throw new Error("Particle is overlapping and can't be placed");
-        }
-        let overlaps = false;
-        for (const particle of this.container.particles.array) {
-          if (getDistance(pos, particle.position) < radius + particle.getRadius()) {
-            overlaps = true;
-            break;
-          }
-        }
-        return overlaps;
-      }
-      calculateVelocity() {
-        const baseVelocity = getParticleBaseVelocity(this.direction);
-        const res = baseVelocity.copy();
-        const moveOptions = this.options.move;
-        const rad = Math.PI / 180 * moveOptions.angle.value;
-        const radOffset = Math.PI / 180 * moveOptions.angle.offset;
-        const range = {
-          left: radOffset - rad / 2,
-          right: radOffset + rad / 2
-        };
-        if (!moveOptions.straight) {
-          res.angle += randomInRange(setRangeValue(range.left, range.right));
-        }
-        if (moveOptions.random && typeof moveOptions.speed === "number") {
-          res.length *= Math.random();
-        }
-        return res;
-      }
-      loadShapeData(shapeOptions, reduceDuplicates) {
-        const shapeData = shapeOptions.options[this.shape];
-        if (shapeData) {
-          return deepExtend({}, shapeData instanceof Array ? itemFromArray(shapeData, this.id, reduceDuplicates) : shapeData);
-        }
-      }
-      loadLife() {
-        const container = this.container;
-        const particlesOptions = this.options;
-        const lifeOptions = particlesOptions.life;
-        const 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,
-          time: 0,
-          count: particlesOptions.life.count
-        };
-        if (life.duration <= 0) {
-          life.duration = -1;
-        }
-        if (life.count <= 0) {
-          life.count = -1;
-        }
-        return life;
-      }
-    }
-    class InteractionManager {
-      constructor(container) {
-        this.container = container;
-        this.externalInteractors = [];
-        this.particleInteractors = [];
-        this.init();
-      }
-      init() {
-        const interactors = Plugins.getInteractors(this.container, true);
-        for (const interactor of interactors) {
-          switch (interactor.type) {
-           case InteractorType.External:
-            this.externalInteractors.push(interactor);
-            break;
-
-           case InteractorType.Particles:
-            this.particleInteractors.push(interactor);
-            break;
-          }
-        }
-      }
-      externalInteract(delta) {
-        for (const interactor of this.externalInteractors) {
-          if (interactor.isEnabled()) {
-            interactor.interact(delta);
-          }
-        }
-      }
-      particlesInteract(particle, delta) {
-        for (const interactor of this.externalInteractors) {
-          interactor.reset(particle);
-        }
-        for (const interactor of this.particleInteractors) {
-          if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
-          }
-        }
-      }
-    }
-    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 Mover {
-      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 = moveOptions.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);
+        this.destroyed = true;
+        this.bubble.inRange = false;
+        for (const [, plugin] of this.container.plugins) {
+          if (plugin.particleDestroyed) {
+            plugin.particleDestroyed(this, override);
+          }
         }
-        const decay = particle.moveDecay;
-        if (decay != 1) {
-          particle.velocity.multTo(decay);
+        if (override) {
+          return;
         }
-        const velocity = particle.velocity.mult(moveSpeed);
-        const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
-        if (gravityOptions.enable && gravityOptions.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 destroyOptions = this.options.destroy;
+        if (destroyOptions.mode === "split") {
+          this.split();
         }
-        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));
-          }
+      }
+      reset() {
+        if (this.opacity) {
+          this.opacity.loops = 0;
         }
-        applyDistance(particle);
+        this.size.loops = 0;
       }
-      spin(particle, moveSpeed) {
-        const container = this.container;
-        if (!particle.spin) {
+      split() {
+        const splitOptions = this.options.destroy.split;
+        if (splitOptions.count >= 0 && this.splitCount++ > splitOptions.count) {
           return;
         }
-        const updateFunc = {
-          x: particle.spin.direction === RotateDirection.clockwise ? Math.cos : Math.sin,
-          y: particle.spin.direction === RotateDirection.clockwise ? Math.sin : Math.cos
+        const rate = getRangeValue(splitOptions.rate.value);
+        for (let i = 0; i < rate; i++) {
+          this.container.particles.addSplitParticle(this);
+        }
+      }
+      calcPosition(container, position, zIndex, tryCount = 0) {
+        var _a, _b, _c, _d, _e, _f;
+        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 => {
+          fixOutMode({
+            outMode: outMode,
+            checkModes: [ "bounce", "bounce-horizontal" ],
+            coord: pos.x,
+            maxCoord: container.canvas.size.width,
+            setCb: value => pos.x += value,
+            radius: radius
+          });
+        }, fixVertical = outMode => {
+          fixOutMode({
+            outMode: outMode,
+            checkModes: [ "bounce", "bounce-vertical" ],
+            coord: pos.y,
+            maxCoord: container.canvas.size.height,
+            setCb: value => pos.y += value,
+            radius: radius
+          });
         };
-        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;
+        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);
+        if (this.checkOverlap(pos, tryCount)) {
+          return this.calcPosition(container, undefined, zIndex, tryCount + 1);
         }
-        particle.spin.angle += moveSpeed / 100 * (1 - particle.spin.radius / maxCanvasSize);
+        return pos;
       }
-      applyPath(particle, delta) {
-        const particlesOptions = particle.options;
-        const pathOptions = particlesOptions.move.path;
-        const pathEnabled = pathOptions.enable;
-        if (!pathEnabled) {
-          return;
+      checkOverlap(pos, tryCount = 0) {
+        const collisionsOptions = this.options.collisions;
+        const radius = this.getRadius();
+        if (!collisionsOptions.enable) {
+          return false;
         }
-        const container = this.container;
-        if (particle.lastPathTime <= particle.pathDelay) {
-          particle.lastPathTime += delta.value;
-          return;
+        const overlapOptions = collisionsOptions.overlap;
+        if (overlapOptions.enable) {
+          return false;
         }
-        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);
+        const retries = overlapOptions.retries;
+        if (retries >= 0 && tryCount > retries) {
+          throw new Error("Particle is overlapping and can't be placed");
         }
-        particle.lastPathTime -= particle.pathDelay;
+        let overlaps = false;
+        for (const particle of this.container.particles.array) {
+          if (getDistance(pos, particle.position) < radius + particle.getRadius()) {
+            overlaps = true;
+            break;
+          }
+        }
+        return overlaps;
       }
-      moveParallax(particle) {
-        const container = this.container;
-        const options = container.actualOptions;
-        if (isSsr() || !options.interactivity.events.onHover.parallax.enable) {
-          return;
+      calculateVelocity() {
+        const baseVelocity = getParticleBaseVelocity(this.direction);
+        const res = baseVelocity.copy();
+        const moveOptions = this.options.move;
+        const rad = Math.PI / 180 * moveOptions.angle.value;
+        const radOffset = Math.PI / 180 * moveOptions.angle.offset;
+        const range = {
+          left: radOffset - rad / 2,
+          right: radOffset + rad / 2
+        };
+        if (!moveOptions.straight) {
+          res.angle += randomInRange(setRangeValue(range.left, range.right));
         }
-        const parallaxForce = options.interactivity.events.onHover.parallax.force;
-        const mousePos = container.interactivity.mouse.position;
-        if (!mousePos) {
-          return;
+        if (moveOptions.random && typeof moveOptions.speed === "number") {
+          res.length *= Math.random();
         }
-        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;
+        return res;
       }
-      getProximitySpeedFactor(particle) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const active = isInArray(HoverMode.slow, options.interactivity.events.onHover.mode);
-        if (!active) {
-          return 1;
+      loadShapeData(shapeOptions, reduceDuplicates) {
+        const shapeData = shapeOptions.options[this.shape];
+        if (shapeData) {
+          return deepExtend({}, shapeData instanceof Array ? itemFromArray(shapeData, this.id, reduceDuplicates) : shapeData);
         }
-        const mousePos = this.container.interactivity.mouse.position;
-        if (!mousePos) {
-          return 1;
+      }
+      loadLife() {
+        const container = this.container;
+        const particlesOptions = this.options;
+        const lifeOptions = particlesOptions.life;
+        const 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,
+          time: 0,
+          count: particlesOptions.life.count
+        };
+        if (life.duration <= 0) {
+          life.duration = -1;
         }
-        const particlePos = particle.getPosition();
-        const dist = getDistance(mousePos, particlePos);
-        const radius = container.retina.slowModeRadius;
-        if (dist > radius) {
-          return 1;
+        if (life.count <= 0) {
+          life.count = -1;
         }
-        const proximityFactor = dist / radius || 0;
-        const slowFactor = options.interactivity.modes.slow.factor;
-        return proximityFactor / slowFactor;
+        return life;
       }
     }
     class Particles {
@@ -5130,7 +4953,7 @@
         this.nextId = 0;
         this.array = [];
         this.zArray = [];
-        this.mover = new Mover(container);
+        this.mover = new ParticlesMover(container);
         this.limit = 0;
         this.needsSort = false;
         this.lastZIndex = 0;
@@ -5284,9 +5107,7 @@
         this.pushing = false;
       }
       addParticle(position, overrideOptions, group) {
-        const container = this.container;
-        const options = container.actualOptions;
-        const limit = options.particles.number.limit * container.density;
+        const container = this.container, options = container.actualOptions, limit = options.particles.number.limit * container.density;
         if (limit > 0) {
           const countToRemove = this.count + 1 - limit;
           if (countToRemove > 0) {
@@ -5296,8 +5117,7 @@
         return this.pushParticle(position, overrideOptions, group);
       }
       addSplitParticle(parent) {
-        const splitOptions = parent.options.destroy.split;
-        const options = new ParticlesOptions;
+        const splitOptions = parent.options.destroy.split, options = new ParticlesOptions;
         options.load(parent.options);
         const factor = getRangeValue(splitOptions.factor.value);
         options.color.load({
@@ -5334,7 +5154,7 @@
         this.removeAt(0, quantity, group);
       }
       getLinkFrequency(p1, p2) {
-        const key = `${Math.min(p1.id, p2.id)}_${Math.max(p1.id, p2.id)}`;
+        const range = setRangeValue(p1.id, p2.id), key = `${getRangeMin(range)}_${getRangeMax(range)}`;
         let res = this.freqs.links.get(key);
         if (res === undefined) {
           res = Math.random();
@@ -5362,8 +5182,7 @@
         return res;
       }
       addManualParticles() {
-        const container = this.container;
-        const options = container.actualOptions;
+        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,
@@ -5402,8 +5221,7 @@
         if (!container.canvas.element || !densityOptions.enable) {
           return 1;
         }
-        const canvas = container.canvas.element;
-        const pxRatio = container.retina.pixelRatio;
+        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
         return canvas.width * canvas.height / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
       }
       pushParticle(position, overrideOptions, group, initializer) {
@@ -5503,50 +5321,13 @@
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
         props.maxSpeed = options.move.gravity.maxSpeed * ratio;
       }
-      handleMotionChange(mediaQuery) {
-        const options = this.container.actualOptions;
-        if (mediaQuery.matches) {
-          const motion = options.motion;
-          this.reduceFactor = motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1;
-        } else {
-          this.reduceFactor = 1;
-        }
-      }
-    }
-    class FrameManager {
-      constructor(container) {
-        this.container = container;
-      }
-      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;
-          }
-          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);
+      handleMotionChange(mediaQuery) {
+        const options = this.container.actualOptions;
+        if (mediaQuery.matches) {
+          const motion = options.motion;
+          this.reduceFactor = motion.disable ? 0 : motion.reduce.value ? 1 / motion.reduce.factor : 1;
+        } else {
+          this.reduceFactor = 1;
         }
       }
     }
@@ -5572,7 +5353,7 @@
         this.selectors = [];
         this.enable = false;
         this.mode = [];
-        this.type = DivType.circle;
+        this.type = "circle";
       }
       get elementId() {
         return this.ids;
@@ -5941,7 +5722,7 @@
         this.factor = 100;
         this.speed = 1;
         this.maxSpeed = 50;
-        this.easing = EasingType.easeOutQuad;
+        this.easing = "ease-out-quad";
       }
       load(data) {
         if (!data) {
@@ -6068,7 +5849,7 @@
       constructor() {
         this.distance = 200;
         this.duration = .4;
-        this.easing = EasingType.easeOutQuad;
+        this.easing = "ease-out-quad";
         this.factor = 1;
         this.maxSpeed = 50;
         this.speed = 1;
@@ -6201,7 +5982,7 @@
     }
     class Interactivity {
       constructor() {
-        this.detectsOn = InteractivityDetect.window;
+        this.detectsOn = "window";
         this.events = new Events;
         this.modes = new Modes;
       }
@@ -6224,11 +6005,11 @@
         this.modes.load(data.modes);
         if (((_c = (_b = data.modes) === null || _b === void 0 ? void 0 : _b.slow) === null || _c === void 0 ? void 0 : _c.active) === true) {
           if (this.events.onHover.mode instanceof Array) {
-            if (this.events.onHover.mode.indexOf(HoverMode.slow) < 0) {
-              this.events.onHover.mode.push(HoverMode.slow);
+            if (this.events.onHover.mode.indexOf("slow") < 0) {
+              this.events.onHover.mode.push("slow");
             }
-          } else if (this.events.onHover.mode !== HoverMode.slow) {
-            this.events.onHover.mode = [ this.events.onHover.mode, HoverMode.slow ];
+          } else if (this.events.onHover.mode !== "slow") {
+            this.events.onHover.mode = [ this.events.onHover.mode, "slow" ];
           }
         }
       }
@@ -6314,7 +6095,7 @@
     class ThemeDefault {
       constructor() {
         this.auto = false;
-        this.mode = ThemeMode.any;
+        this.mode = "any";
         this.value = false;
       }
       load(data) {
@@ -6420,7 +6201,7 @@
       constructor() {
         this.maxWidth = Infinity;
         this.options = {};
-        this.mode = ResponsiveMode.canvas;
+        this.mode = "canvas";
       }
       load(data) {
         if (!data) {
@@ -6430,10 +6211,10 @@
           this.maxWidth = data.maxWidth;
         }
         if (data.mode !== undefined) {
-          if (data.mode === ResponsiveMode.screen) {
-            this.mode = ResponsiveMode.screen;
+          if (data.mode === "screen") {
+            this.mode = "screen";
           } else {
-            this.mode = ResponsiveMode.canvas;
+            this.mode = "canvas";
           }
         }
         if (data.options !== undefined) {
@@ -6464,6 +6245,7 @@
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
       }
@@ -6540,6 +6322,7 @@
         }
         this.motion.load(data.motion);
         this.particles.load(data.particles);
+        this.style = deepExtend(this.style, data.style);
         Plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
           for (const responsive of data.responsive) {
@@ -6556,8 +6339,8 @@
             this.themes.push(optTheme);
           }
         }
-        this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.dark)) === null || _d === void 0 ? void 0 : _d.name;
-        this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.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) {
@@ -6566,7 +6349,7 @@
             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 ? ThemeMode.dark : ThemeMode.light);
+          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);
           }
@@ -6574,7 +6357,7 @@
       }
       setResponsive(width, pxRatio, defaultOptions) {
         this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t => t.mode === ResponsiveMode.screen && screen ? t.maxWidth * pxRatio > screen.availWidth : t.maxWidth * pxRatio > width));
+        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;
       }
@@ -6584,7 +6367,7 @@
     }
     _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 === ThemeMode.any));
+      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"));
     };
     class Container {
       constructor(id, sourceOptions, ...presets) {
@@ -7006,22 +6789,17 @@
           }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
           canvasEl = domContainer;
-          generatedCanvas = false;
+          canvasEl.dataset[Constants.generatedAttribute] = "false";
         } else {
           const existingCanvases = domContainer.getElementsByTagName("canvas");
           if (existingCanvases.length) {
             canvasEl = existingCanvases[0];
-            if (!canvasEl.className) {
-              canvasEl.className = Constants.canvasClass;
-            }
-            generatedCanvas = false;
+            canvasEl.dataset[Constants.generatedAttribute] = "false";
           } else {
-            generatedCanvas = true;
             canvasEl = document.createElement("canvas");
-            canvasEl.className = Constants.canvasClass;
+            canvasEl.dataset[Constants.generatedAttribute] = "true";
             canvasEl.style.width = "100%";
             canvasEl.style.height = "100%";
             domContainer.appendChild(canvasEl);
@@ -7033,7 +6811,7 @@
         } else {
           dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
       }
@@ -7143,20 +6921,20 @@
       return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
       value;
     };
-    var main_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
+    var engine_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 _Main_initialized;
-    class Main {
+    var _Engine_initialized;
+    class Engine {
       constructor() {
-        _Main_initialized.set(this, void 0);
-        __classPrivateFieldSet(this, _Main_initialized, false, "f");
+        _Engine_initialized.set(this, void 0);
+        __classPrivateFieldSet(this, _Engine_initialized, false, "f");
       }
       init() {
-        if (!main_classPrivateFieldGet(this, _Main_initialized, "f")) {
-          __classPrivateFieldSet(this, _Main_initialized, true, "f");
+        if (!engine_classPrivateFieldGet(this, _Engine_initialized, "f")) {
+          __classPrivateFieldSet(this, _Engine_initialized, true, "f");
         }
       }
       async loadFromArray(tagId, options, index) {
@@ -7224,7 +7002,7 @@
         await this.refresh();
       }
     }
-    _Main_initialized = new WeakMap;
+    _Engine_initialized = new WeakMap;
     class CircleDrawer {
       getSidesCount() {
         return 12;
@@ -7298,12 +7076,6 @@
     async function loadLifeUpdater(tsParticles) {
       await tsParticles.addParticleUpdater("life", (container => new LifeUpdater(container)));
     }
-    class ExternalInteractorBase {
-      constructor(container) {
-        this.container = container;
-        this.type = InteractorType.External;
-      }
-    }
     class Connector extends ExternalInteractorBase {
       constructor(container) {
         super(container);
@@ -7313,7 +7085,7 @@
         if (!(events.onHover.enable && mouse.position)) {
           return false;
         }
-        return isInArray(HoverMode.connect, events.onHover.mode);
+        return isInArray("connect", events.onHover.mode);
       }
       reset() {}
       interact() {
@@ -7343,13 +7115,13 @@
     }
     function checkDestroy(particle, value, minValue, maxValue) {
       switch (particle.options.opacity.animation.destroy) {
-       case DestroyType.max:
+       case "max":
         if (value >= maxValue) {
           particle.destroy();
         }
         break;
 
-       case DestroyType.min:
+       case "min":
         if (value <= minValue) {
           particle.destroy();
         }
@@ -7367,9 +7139,9 @@
         return;
       }
       switch (particle.opacity.status) {
-       case AnimationStatus.increasing:
+       case 0:
         if (particle.opacity.value >= maxValue) {
-          particle.opacity.status = AnimationStatus.decreasing;
+          particle.opacity.status = 1;
           if (!particle.opacity.loops) {
             particle.opacity.loops = 0;
           }
@@ -7379,9 +7151,9 @@
         }
         break;
 
-       case AnimationStatus.decreasing:
+       case 1:
         if (particle.opacity.value <= minValue) {
-          particle.opacity.status = AnimationStatus.increasing;
+          particle.opacity.status = 0;
           if (!particle.opacity.loops) {
             particle.opacity.loops = 0;
           }
@@ -7412,25 +7184,25 @@
         };
         const opacityAnimation = opacityOptions.animation;
         if (opacityAnimation.enable) {
-          particle.opacity.status = AnimationStatus.increasing;
+          particle.opacity.status = 0;
           const opacityRange = opacityOptions.value;
           particle.opacity.min = getRangeMin(opacityRange);
           particle.opacity.max = getRangeMax(opacityRange);
           switch (opacityAnimation.startValue) {
-           case StartValueType.min:
+           case "min":
             particle.opacity.value = particle.opacity.min;
-            particle.opacity.status = AnimationStatus.increasing;
+            particle.opacity.status = 0;
             break;
 
-           case StartValueType.random:
+           case "random":
             particle.opacity.value = randomInRange(particle.opacity);
-            particle.opacity.status = Math.random() >= .5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
+            particle.opacity.status = Math.random() >= .5 ? 0 : 1;
             break;
 
-           case StartValueType.max:
+           case "max":
            default:
             particle.opacity.value = particle.opacity.max;
-            particle.opacity.status = AnimationStatus.decreasing;
+            particle.opacity.status = 1;
             break;
           }
           particle.opacity.velocity = opacityAnimation.speed / 100 * this.container.retina.reduceFactor;
@@ -7453,56 +7225,94 @@
     async function loadOpacityUpdater(tsParticles) {
       await tsParticles.addParticleUpdater("opacity", (container => new OpacityUpdater(container)));
     }
-    function loadImage(source) {
-      return new Promise(((resolve, reject) => {
-        if (!source) {
-          reject("Error tsParticles - No image.src");
-          return;
-        }
-        const image = {
-          source: source,
-          type: source.substr(source.length - 3)
-        };
+    const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
+    function replaceColorSvg(imageShape, color, opacity) {
+      const {svgData: svgData} = imageShape;
+      if (!svgData) {
+        return "";
+      }
+      const colorStyle = getStyleFromHsl(color, opacity);
+      if (svgData.includes("fill")) {
+        return svgData.replace(currentColorRegex, (() => colorStyle));
+      }
+      const preFillIndex = svgData.indexOf(">");
+      return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+    }
+    async function loadImage(image) {
+      return new Promise((resolve => {
+        image.loading = true;
         const img = new Image;
         img.addEventListener("load", (() => {
           image.element = img;
-          resolve(image);
+          image.loading = false;
+          resolve();
         }));
         img.addEventListener("error", (() => {
-          reject(`Error tsParticles - loading image: ${source}`);
+          image.error = true;
+          image.loading = false;
+          console.error(`Error tsParticles - loading image: ${image.source}`);
+          resolve();
         }));
-        img.src = source;
+        img.src = image.source;
       }));
     }
-    async function downloadSvgImage(source) {
-      if (!source) {
-        throw new Error("Error tsParticles - No image.src");
-      }
-      const image = {
-        source: source,
-        type: source.substr(source.length - 3)
-      };
+    async function downloadSvgImage(image) {
       if (image.type !== "svg") {
-        return loadImage(source);
+        await loadImage(image);
+        return;
       }
+      image.loading = true;
       const response = await fetch(image.source);
+      image.loading = false;
       if (!response.ok) {
-        throw new Error("Error tsParticles - Image not found");
-      }
-      image.svgData = await response.text();
-      return image;
-    }
-    function replaceColorSvg(imageShape, color, opacity) {
-      const {svgData: svgData} = imageShape;
-      if (!svgData) {
-        return "";
+        console.error("Error tsParticles - Image not found");
+        image.error = true;
       }
-      if (svgData.includes("fill")) {
-        const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-        return svgData.replace(currentColor, (() => getStyleFromHsl(color, opacity)));
+      if (!image.error) {
+        image.svgData = await response.text();
       }
-      const preFillIndex = svgData.indexOf(">");
-      return `${svgData.substring(0, preFillIndex)} fill="${getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
+    }
+    function replaceImageColor(image, imageData, color, particle) {
+      var _a, _b, _c;
+      const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1);
+      const svg = new Blob([ svgColoredData ], {
+        type: "image/svg+xml"
+      });
+      const domUrl = URL || window.URL || window.webkitURL || window;
+      const url = domUrl.createObjectURL(svg);
+      const img = new Image;
+      const imageRes = {
+        data: Object.assign(Object.assign({}, image), {
+          svgData: svgColoredData
+        }),
+        ratio: imageData.width / imageData.height,
+        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        source: imageData.src
+      };
+      img.addEventListener("load", (() => {
+        const pImage = particle.image;
+        if (pImage) {
+          pImage.loaded = true;
+          image.element = img;
+        }
+        domUrl.revokeObjectURL(url);
+      }));
+      img.addEventListener("error", (() => {
+        domUrl.revokeObjectURL(url);
+        const img2 = Object.assign(Object.assign({}, image), {
+          error: false,
+          loading: true
+        });
+        loadImage(img2).then((() => {
+          const pImage = particle.image;
+          if (pImage) {
+            image.element = img2.element;
+            pImage.loaded = true;
+          }
+        }));
+      }));
+      img.src = url;
+      return imageRes;
     }
     var ImageDrawer_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
       if (kind === "m") throw new TypeError("Private method is not writable");
@@ -7541,80 +7351,30 @@
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
       }
-      async init(container) {
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-        for (const manualParticle of container.actualOptions.manualParticles) {
-          await this.loadImagesFromParticlesOptions(container, manualParticle.options);
-        }
-        const emitterOptions = container.actualOptions;
-        if (emitterOptions.emitters) {
-          if (emitterOptions.emitters instanceof Array) {
-            for (const emitter of emitterOptions.emitters) {
-              await this.loadImagesFromParticlesOptions(container, emitter.particles);
-            }
-          } else {
-            await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-          }
-        }
-        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-        if (interactiveEmitters) {
-          if (interactiveEmitters instanceof Array) {
-            for (const emitter of interactiveEmitters) {
-              await this.loadImagesFromParticlesOptions(container, emitter.particles);
-            }
-          } else {
-            await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-          }
-        }
-      }
       destroy() {
         ImageDrawer_classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
       }
-      async loadImagesFromParticlesOptions(container, options) {
-        var _a, _b, _c;
-        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type)) {
-          return;
-        }
-        const idx = ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t => t.id === container.id));
-        if (idx >= 0) {
-          ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-        }
-        const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
-        if (imageOptions instanceof Array) {
-          for (const optionsImage of imageOptions) {
-            await this.loadImageShape(container, optionsImage);
-          }
-        } else {
-          await this.loadImageShape(container, imageOptions);
-        }
-        if (options === null || options === void 0 ? void 0 : options.groups) {
-          for (const groupName in options.groups) {
-            const group = options.groups[groupName];
-            await this.loadImagesFromParticlesOptions(container, group);
-          }
-        }
-        if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-          await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-        }
-      }
       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;
-          const image = await imageFunc(imageShape.src);
-          if (image) {
-            this.addImage(container, image);
-          }
+          await imageFunc(image);
         } catch (_a) {
-          console.warn(`tsParticles error - ${imageShape.src} not found`);
+          throw new Error(`tsParticles error - ${imageShape.src} not found`);
         }
       }
       draw(context, particle, radius, opacity) {
         var _a, _b;
-        if (!context) {
-          return;
-        }
         const image = particle.image;
         const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
         if (!element) {
@@ -7634,67 +7394,40 @@
         }
       }
       loadShape(particle) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
           return;
         }
         const images = this.getImages(particle.container).images;
         const imageData = particle.shapeData;
-        const image = (_a = images.find((t => t.source === imageData.src))) !== null && _a !== void 0 ? _a : images[0];
-        const color = particle.getFillColor();
+        const image = images.find((t => t.source === imageData.src));
         let imageRes;
         if (!image) {
+          this.loadImageShape(particle.container, imageData).then((() => {
+            this.loadShape(particle);
+          }));
           return;
         }
-        if (image.svgData !== undefined && imageData.replaceColor && color) {
-          const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
-          const svg = new Blob([ svgColoredData ], {
-            type: "image/svg+xml"
-          });
-          const domUrl = URL || window.URL || window.webkitURL || window;
-          const url = domUrl.createObjectURL(svg);
-          const img = new Image;
-          imageRes = {
-            data: Object.assign(Object.assign({}, image), {
-              svgData: svgColoredData
-            }),
-            ratio: imageData.width / imageData.height,
-            replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
-            source: imageData.src
-          };
-          img.addEventListener("load", (() => {
-            const pImage = particle.image;
-            if (pImage) {
-              pImage.loaded = true;
-              image.element = img;
-            }
-            domUrl.revokeObjectURL(url);
-          }));
-          img.addEventListener("error", (() => {
-            domUrl.revokeObjectURL(url);
-            loadImage(imageData.src).then((img2 => {
-              const pImage = particle.image;
-              if (pImage) {
-                image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
-                pImage.loaded = true;
-              }
-            }));
-          }));
-          img.src = url;
+        if (image.error) {
+          return;
+        }
+        const color = particle.getFillColor();
+        if (image.svgData && imageData.replaceColor && color) {
+          imageRes = replaceImageColor(image, imageData, color, particle);
         } else {
           imageRes = {
             data: image,
             loaded: true,
             ratio: imageData.width / imageData.height,
-            replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
+            replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
             source: imageData.src
           };
         }
         if (!imageRes.ratio) {
           imageRes.ratio = 1;
         }
-        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
-        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
+        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+        const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
         const imageShape = {
           image: imageRes,
           fill: fill,
@@ -7788,12 +7521,6 @@
       await loadGenericPolygonShape(tsParticles);
       await loadTriangleShape(tsParticles);
     }
-    var ProcessBubbleType;
-    (function(ProcessBubbleType) {
-      ProcessBubbleType["color"] = "color";
-      ProcessBubbleType["opacity"] = "opacity";
-      ProcessBubbleType["size"] = "size";
-    })(ProcessBubbleType || (ProcessBubbleType = {}));
     function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
       if (modeValue >= optionsValue) {
         const value = particleValue + (modeValue - optionsValue) * ratio;
@@ -7808,13 +7535,13 @@
         super(container);
       }
       isEnabled() {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divBubble = isDivModeEnabled(DivMode.bubble, divs);
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divBubble = isDivModeEnabled("bubble", divs);
         if (!(divBubble || events.onHover.enable && mouse.position || events.onClick.enable && mouse.clickPosition)) {
           return false;
         }
         const hoverMode = events.onHover.mode;
         const clickMode = events.onClick.mode;
-        return isInArray(HoverMode.bubble, hoverMode) || isInArray(ClickMode.bubble, clickMode) || divBubble;
+        return isInArray("bubble", hoverMode) || isInArray("bubble", clickMode) || divBubble;
       }
       reset(particle, force) {
         if (!(!particle.bubble.inRange || force)) {
@@ -7827,12 +7554,12 @@
       }
       interact() {
         const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
-        if (hoverEnabled && isInArray(HoverMode.bubble, hoverMode)) {
+        if (hoverEnabled && isInArray("bubble", hoverMode)) {
           this.hoverBubble();
-        } else if (clickEnabled && isInArray(ClickMode.bubble, clickMode)) {
+        } else if (clickEnabled && isInArray("bubble", clickMode)) {
           this.clickBubble();
         } else {
-          divModeExecute(DivMode.bubble, divs, ((selector, div) => this.singleSelectorHover(selector, div)));
+          divModeExecute("bubble", divs, ((selector, div) => this.singleSelectorHover(selector, div)));
         }
       }
       singleSelectorHover(selector, div) {
@@ -7844,7 +7571,7 @@
           const elem = item, pxRatio = container.retina.pixelRatio, pos = {
             x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
             y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
-          }, repulseRadius = elem.offsetWidth / 2 * pxRatio, area = div.type === DivType.circle ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area);
+          }, repulseRadius = elem.offsetWidth / 2 * pxRatio, area = div.type === "circle" ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area);
           for (const particle of query) {
             if (!area.contains(particle.getPosition())) {
               continue;
@@ -7876,26 +7603,26 @@
             const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
             if (obj !== bubbleParam) {
               const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;
-              if (type === ProcessBubbleType.size) {
+              if (type === "size") {
                 particle.bubble.radius = value;
               }
-              if (type === ProcessBubbleType.opacity) {
+              if (type === "opacity") {
                 particle.bubble.opacity = value;
               }
             }
           } else {
-            if (type === ProcessBubbleType.size) {
+            if (type === "size") {
               delete particle.bubble.radius;
             }
-            if (type === ProcessBubbleType.opacity) {
+            if (type === "opacity") {
               delete particle.bubble.opacity;
             }
           }
         } else if (pObjBubble) {
-          if (type === ProcessBubbleType.size) {
+          if (type === "size") {
             delete particle.bubble.radius;
           }
-          if (type === ProcessBubbleType.opacity) {
+          if (type === "opacity") {
             delete particle.bubble.opacity;
           }
         }
@@ -7929,7 +7656,7 @@
               optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
               value: particle.size.value
             },
-            type: ProcessBubbleType.size
+            type: "size"
           };
           this.process(particle, distMouse, timeSpent, sizeData);
           const opacityData = {
@@ -7941,7 +7668,7 @@
               optValue: getRangeMax(particle.options.opacity.value),
               value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1
             },
-            type: ProcessBubbleType.opacity
+            type: "opacity"
           };
           this.process(particle, distMouse, timeSpent, opacityData);
           if (!container.bubble.durationEnd) {
@@ -8039,14 +7766,14 @@
           return false;
         }
         const hoverMode = events.onHover.mode, clickMode = events.onClick.mode;
-        return isInArray(HoverMode.attract, hoverMode) || isInArray(ClickMode.attract, clickMode);
+        return isInArray("attract", hoverMode) || isInArray("attract", clickMode);
       }
       reset() {}
       interact() {
         const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode;
-        if (mouseMoveStatus && hoverEnabled && isInArray(HoverMode.attract, hoverMode)) {
+        if (mouseMoveStatus && hoverEnabled && isInArray("attract", hoverMode)) {
           this.hoverAttract();
-        } else if (clickEnabled && isInArray(ClickMode.attract, clickMode)) {
+        } else if (clickEnabled && isInArray("attract", clickMode)) {
           this.clickAttract();
         }
       }
@@ -8104,7 +7831,7 @@
       }
       isEnabled() {
         const container = this.container, mouse = container.interactivity.mouse, events = container.actualOptions.interactivity.events;
-        return events.onHover.enable && !!mouse.position && isInArray(HoverMode.grab, events.onHover.mode);
+        return events.onHover.enable && !!mouse.position && isInArray("grab", events.onHover.mode);
       }
       reset() {}
       interact() {
@@ -8164,12 +7891,6 @@
     async function loadStarShape(tsParticles) {
       await tsParticles.addShape("star", new StarDrawer);
     }
-    class ParticlesInteractorBase {
-      constructor(container) {
-        this.container = container;
-        this.type = InteractorType.Particles;
-      }
-    }
     class Attractor_Attractor extends ParticlesInteractorBase {
       constructor(container) {
         super(container);
@@ -8218,16 +7939,16 @@
       }
       const offset = randomInRange(valueAnimation.offset);
       const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6;
-      if (!decrease || colorValue.status === AnimationStatus.increasing) {
+      if (!decrease || colorValue.status === 0) {
         colorValue.value += velocity;
         if (decrease && colorValue.value > max) {
-          colorValue.status = AnimationStatus.decreasing;
+          colorValue.status = 1;
           colorValue.value -= colorValue.value % max;
         }
       } else {
         colorValue.value -= velocity;
         if (colorValue.value < 0) {
-          colorValue.status = AnimationStatus.increasing;
+          colorValue.status = 0;
           colorValue.value += colorValue.value;
         }
       }
@@ -8291,16 +8012,16 @@
       }
       const offset = randomInRange(valueAnimation.offset);
       const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor + offset * 3.6;
-      if (!decrease || colorValue.status === AnimationStatus.increasing) {
+      if (!decrease || colorValue.status === 0) {
         colorValue.value += velocity;
         if (decrease && colorValue.value > max) {
-          colorValue.status = AnimationStatus.decreasing;
+          colorValue.status = 1;
           colorValue.value -= colorValue.value % max;
         }
       } else {
         colorValue.value -= velocity;
         if (colorValue.value < 0) {
-          colorValue.status = AnimationStatus.increasing;
+          colorValue.status = 0;
           colorValue.value += colorValue.value;
         }
       }
@@ -8393,19 +8114,19 @@
       }
       resolveCollision(p1, p2) {
         switch (p1.options.collisions.mode) {
-         case CollisionMode.absorb:
+         case "absorb":
           {
             this.absorb(p1, p2);
             break;
           }
 
-         case CollisionMode.bounce:
+         case "bounce":
           {
             bounce(p1, p2);
             break;
           }
 
-         case CollisionMode.destroy:
+         case "destroy":
           {
             destroy(p1, p2);
             break;
@@ -8457,14 +8178,14 @@
         return;
       }
       switch (rotate.status) {
-       case AnimationStatus.increasing:
+       case 0:
         rotate.value += speed;
         if (rotate.value > max) {
           rotate.value -= max;
         }
         break;
 
-       case AnimationStatus.decreasing:
+       case 1:
        default:
         rotate.value -= speed;
         if (rotate.value < 0) {
@@ -8484,18 +8205,18 @@
           value: getRangeValue(rotateOptions.value) * Math.PI / 180
         };
         let rotateDirection = rotateOptions.direction;
-        if (rotateDirection === RotateDirection.random) {
+        if (rotateDirection === "random") {
           const index = Math.floor(Math.random() * 2);
-          rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
+          rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
-         case RotateDirection.counterClockwise:
+         case "counter-clockwise":
          case "counterClockwise":
-          particle.rotate.status = AnimationStatus.decreasing;
+          particle.rotate.status = 1;
           break;
 
-         case RotateDirection.clockwise:
-          particle.rotate.status = AnimationStatus.increasing;
+         case "clockwise":
+          particle.rotate.status = 0;
           break;
         }
         const rotateAnimation = particle.options.rotate.animation;
@@ -8522,12 +8243,12 @@
       await tsParticles.addParticleUpdater("angle", (container => new AngleUpdater(container)));
     }
     function bounceHorizontal(data) {
-      if (!(data.outMode === OutMode.bounce || data.outMode === OutMode.bounceHorizontal || data.outMode === "bounceHorizontal" || data.outMode === OutMode.split)) {
+      if (!(data.outMode === "bounce" || data.outMode === "bounce-horizontal" || data.outMode === "bounceHorizontal" || data.outMode === "split")) {
         return;
       }
       const velocity = data.particle.velocity.x;
       let bounced = false;
-      if (data.direction === OutModeDirection.right && data.bounds.right >= data.canvasSize.width && velocity > 0 || data.direction === OutModeDirection.left && data.bounds.left <= 0 && velocity < 0) {
+      if (data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0 || data.direction === "left" && data.bounds.left <= 0 && velocity < 0) {
         const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
         data.particle.velocity.x *= -newVelocity;
         bounced = true;
@@ -8541,15 +8262,15 @@
       } else if (data.bounds.left <= 0) {
         data.particle.position.x = minPos;
       }
-      if (data.outMode === OutMode.split) {
+      if (data.outMode === "split") {
         data.particle.destroy();
       }
     }
     function bounceVertical(data) {
-      if (data.outMode === OutMode.bounce || data.outMode === OutMode.bounceVertical || data.outMode === "bounceVertical" || data.outMode === OutMode.split) {
+      if (data.outMode === "bounce" || data.outMode === "bounce-vertical" || data.outMode === "bounceVertical" || data.outMode === "split") {
         const velocity = data.particle.velocity.y;
         let bounced = false;
-        if (data.direction === OutModeDirection.bottom && data.bounds.bottom >= data.canvasSize.height && velocity > 0 || data.direction === OutModeDirection.top && data.bounds.top <= 0 && velocity < 0) {
+        if (data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0 || data.direction === "top" && data.bounds.top <= 0 && velocity < 0) {
           const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
           data.particle.velocity.y *= -newVelocity;
           bounced = true;
@@ -8563,7 +8284,7 @@
         } else if (data.bounds.top <= 0) {
           data.particle.position.y = minPos;
         }
-        if (data.outMode === OutMode.split) {
+        if (data.outMode === "split") {
           data.particle.destroy();
         }
       }
@@ -8579,31 +8300,31 @@
       update(particle, delta) {
         var _a, _b, _c, _d;
         const outModes = particle.options.move.outModes;
-        this.updateOutMode(particle, delta, (_a = outModes.bottom) !== null && _a !== void 0 ? _a : outModes.default, OutModeDirection.bottom);
-        this.updateOutMode(particle, delta, (_b = outModes.left) !== null && _b !== void 0 ? _b : outModes.default, OutModeDirection.left);
-        this.updateOutMode(particle, delta, (_c = outModes.right) !== null && _c !== void 0 ? _c : outModes.default, OutModeDirection.right);
-        this.updateOutMode(particle, delta, (_d = outModes.top) !== null && _d !== void 0 ? _d : outModes.default, OutModeDirection.top);
+        this.updateOutMode(particle, delta, (_a = outModes.bottom) !== null && _a !== void 0 ? _a : outModes.default, "bottom");
+        this.updateOutMode(particle, delta, (_b = outModes.left) !== null && _b !== void 0 ? _b : outModes.default, "left");
+        this.updateOutMode(particle, delta, (_c = outModes.right) !== null && _c !== void 0 ? _c : outModes.default, "right");
+        this.updateOutMode(particle, delta, (_d = outModes.top) !== null && _d !== void 0 ? _d : outModes.default, "top");
       }
       updateOutMode(particle, delta, outMode, direction) {
         switch (outMode) {
-         case OutMode.bounce:
-         case OutMode.bounceVertical:
-         case OutMode.bounceHorizontal:
+         case "bounce":
+         case "bounce-vertical":
+         case "bounce-horizontal":
          case "bounceVertical":
          case "bounceHorizontal":
-         case OutMode.split:
+         case "split":
           this.bounce(particle, delta, direction, outMode);
           break;
 
-         case OutMode.destroy:
+         case "destroy":
           this.destroy(particle, direction);
           break;
 
-         case OutMode.out:
+         case "out":
           this.out(particle, direction);
           break;
 
-         case OutMode.none:
+         case "none":
          default:
           this.none(particle, direction);
           break;
@@ -8627,14 +8348,14 @@
           right: canvasSize.width + particle.getRadius() + particle.offset.x,
           top: -particle.getRadius() - particle.offset.y
         }, sizeValue = particle.getRadius(), nextBounds = calculateBounds(particle.position, sizeValue);
-        if (direction === OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
+        if (direction === "right" && nextBounds.left > canvasSize.width + particle.offset.x) {
           particle.position.x = newPos.left;
           particle.initialPosition.x = particle.position.x;
           if (!wrap) {
             particle.position.y = Math.random() * canvasSize.height;
             particle.initialPosition.y = particle.position.y;
           }
-        } else if (direction === OutModeDirection.left && nextBounds.right < -particle.offset.x) {
+        } else if (direction === "left" && nextBounds.right < -particle.offset.x) {
           particle.position.x = newPos.right;
           particle.initialPosition.x = particle.position.x;
           if (!wrap) {
@@ -8642,14 +8363,14 @@
             particle.initialPosition.y = particle.position.y;
           }
         }
-        if (direction === OutModeDirection.bottom && nextBounds.top > canvasSize.height + particle.offset.y) {
+        if (direction === "bottom" && nextBounds.top > canvasSize.height + particle.offset.y) {
           if (!wrap) {
             particle.position.x = Math.random() * canvasSize.width;
             particle.initialPosition.x = particle.position.x;
           }
           particle.position.y = newPos.top;
           particle.initialPosition.y = particle.position.y;
-        } else if (direction === OutModeDirection.top && nextBounds.bottom < -particle.offset.y) {
+        } else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
           if (!wrap) {
             particle.position.x = Math.random() * canvasSize.width;
             particle.initialPosition.x = particle.position.x;
@@ -8693,7 +8414,7 @@
         });
       }
       none(particle, direction) {
-        if (particle.options.move.distance.horizontal && (direction === OutModeDirection.left || direction === OutModeDirection.right) || particle.options.move.distance.vertical && (direction === OutModeDirection.top || direction === OutModeDirection.bottom)) {
+        if (particle.options.move.distance.horizontal && (direction === "left" || direction === "right") || particle.options.move.distance.vertical && (direction === "top" || direction === "bottom")) {
           return;
         }
         const gravityOptions = particle.options.move.gravity, container = this.container;
@@ -8708,7 +8429,7 @@
           }
         } else {
           const position = particle.position;
-          if (!gravityOptions.inverse && position.y > canvasSize.height + pRadius && direction === OutModeDirection.bottom || gravityOptions.inverse && position.y < -pRadius && direction === OutModeDirection.top) {
+          if (!gravityOptions.inverse && position.y > canvasSize.height + pRadius && direction === "bottom" || gravityOptions.inverse && position.y < -pRadius && direction === "top") {
             container.particles.remove(particle);
           }
         }
@@ -8722,22 +8443,22 @@
         super(container);
       }
       isEnabled() {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divRepulse = isDivModeEnabled(DivMode.repulse, divs);
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv, divRepulse = isDivModeEnabled("repulse", divs);
         if (!(divRepulse || events.onHover.enable && mouse.position || events.onClick.enable && mouse.clickPosition)) {
           return false;
         }
         const hoverMode = events.onHover.mode, clickMode = events.onClick.mode;
-        return isInArray(HoverMode.repulse, hoverMode) || isInArray(ClickMode.repulse, clickMode) || divRepulse;
+        return isInArray("repulse", hoverMode) || isInArray("repulse", clickMode) || divRepulse;
       }
       reset() {}
       interact() {
         const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode, divs = events.onDiv;
-        if (mouseMoveStatus && hoverEnabled && isInArray(HoverMode.repulse, hoverMode)) {
+        if (mouseMoveStatus && hoverEnabled && isInArray("repulse", hoverMode)) {
           this.hoverRepulse();
-        } else if (clickEnabled && isInArray(ClickMode.repulse, clickMode)) {
+        } else if (clickEnabled && isInArray("repulse", clickMode)) {
           this.clickRepulse();
         } else {
-          divModeExecute(DivMode.repulse, divs, ((selector, div) => this.singleSelectorRepulse(selector, div)));
+          divModeExecute("repulse", divs, ((selector, div) => this.singleSelectorRepulse(selector, div)));
         }
       }
       singleSelectorRepulse(selector, div) {
@@ -8749,7 +8470,7 @@
           const elem = item, pxRatio = container.retina.pixelRatio, pos = {
             x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
             y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
-          }, repulseRadius = elem.offsetWidth / 2 * pxRatio, area = div.type === DivType.circle ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = container.actualOptions.interactivity.modes.repulse.divs, divRepulse = divMode(divs, elem);
+          }, repulseRadius = elem.offsetWidth / 2 * pxRatio, area = div.type === "circle" ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = container.actualOptions.interactivity.modes.repulse.divs, divRepulse = divMode(divs, elem);
           this.processRepulse(pos, repulseRadius, area, divRepulse);
         }));
       }
@@ -8824,14 +8545,14 @@
       }
       isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv;
-        return mouse.position && events.onHover.enable && isInArray(HoverMode.bounce, events.onHover.mode) || isDivModeEnabled(DivMode.bounce, divs);
+        return mouse.position && events.onHover.enable && isInArray("bounce", events.onHover.mode) || isDivModeEnabled("bounce", divs);
       }
       interact() {
         const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === Constants.mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
-        if (mouseMoveStatus && hoverEnabled && isInArray(HoverMode.bounce, hoverMode)) {
+        if (mouseMoveStatus && hoverEnabled && isInArray("bounce", hoverMode)) {
           this.processMouseBounce();
         } else {
-          divModeExecute(DivMode.bounce, divs, ((selector, div) => this.singleSelectorBounce(selector, div)));
+          divModeExecute("bounce", divs, ((selector, div) => this.singleSelectorBounce(selector, div)));
         }
       }
       reset() {}
@@ -8852,7 +8573,7 @@
             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 === DivType.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);
+          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);
           this.processBounce(pos, radius, area);
         }));
       }
@@ -8939,93 +8660,6 @@
         await tsParticles.addShape(type, drawer);
       }
     }
-    function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
-      let distance = getDistance(pos1, pos2);
-      if (!warp || distance <= optDistance) {
-        return distance;
-      }
-      const pos2NE = {
-        x: pos2.x - canvasSize.width,
-        y: pos2.y
-      };
-      distance = getDistance(pos1, pos2NE);
-      if (distance <= optDistance) {
-        return distance;
-      }
-      const pos2SE = {
-        x: pos2.x - canvasSize.width,
-        y: pos2.y - canvasSize.height
-      };
-      distance = getDistance(pos1, pos2SE);
-      if (distance <= optDistance) {
-        return distance;
-      }
-      const pos2SW = {
-        x: pos2.x,
-        y: pos2.y - canvasSize.height
-      };
-      distance = getDistance(pos1, pos2SW);
-      return distance;
-    }
-    class Linker extends ParticlesInteractorBase {
-      constructor(container) {
-        super(container);
-      }
-      isEnabled(particle) {
-        return particle.options.links.enable;
-      }
-      reset() {}
-      interact(p1) {
-        var _a;
-        p1.links = [];
-        const pos1 = p1.getPosition();
-        const container = this.container;
-        const 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);
-        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) {
-            continue;
-          }
-          const pos2 = p2.getPosition();
-          if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
-            continue;
-          }
-          const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
-          if (distance > optDistance) {
-            return;
-          }
-          const opacityLine = (1 - distance / optDistance) * optOpacity;
-          this.setColor(p1);
-          p1.links.push({
-            destination: p2,
-            opacity: opacityLine
-          });
-        }
-      }
-      setColor(p1) {
-        const container = this.container;
-        const linksOptions = p1.options.links;
-        let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);
-        if (!linkColor) {
-          const optColor = linksOptions.color;
-          linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
-          if (linksOptions.id === undefined) {
-            container.particles.linksColor = linkColor;
-          } else {
-            container.particles.linksColors.set(linksOptions.id, linkColor);
-          }
-        }
-      }
-    }
     class LinkInstance {
       constructor(container) {
         this.container = container;
@@ -9125,35 +8759,122 @@
               opacity = twinkle.opacity;
             }
           }
-          if (!colorLine) {
-            const linksOptions = p1.options.links;
-            const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;
-            colorLine = getLinkColor(p1, p2, linkColor);
+          if (!colorLine) {
+            const linksOptions = p1.options.links;
+            const 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;
+          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);
+        }));
+      }
+    }
+    class LinksPlugin {
+      constructor() {
+        this.id = "links";
+      }
+      getPlugin(container) {
+        return new LinkInstance(container);
+      }
+      needsPlugin() {
+        return true;
+      }
+      loadOptions() {}
+    }
+    async function loadPlugin(tsParticles) {
+      const plugin = new LinksPlugin;
+      await tsParticles.addPlugin(plugin);
+    }
+    function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
+      let distance = getDistance(pos1, pos2);
+      if (!warp || distance <= optDistance) {
+        return distance;
+      }
+      const pos2NE = {
+        x: pos2.x - canvasSize.width,
+        y: pos2.y
+      };
+      distance = getDistance(pos1, pos2NE);
+      if (distance <= optDistance) {
+        return distance;
+      }
+      const pos2SE = {
+        x: pos2.x - canvasSize.width,
+        y: pos2.y - canvasSize.height
+      };
+      distance = getDistance(pos1, pos2SE);
+      if (distance <= optDistance) {
+        return distance;
+      }
+      const pos2SW = {
+        x: pos2.x,
+        y: pos2.y - canvasSize.height
+      };
+      distance = getDistance(pos1, pos2SW);
+      return distance;
+    }
+    class Linker extends ParticlesInteractorBase {
+      constructor(container) {
+        super(container);
+      }
+      isEnabled(particle) {
+        return particle.options.links.enable;
+      }
+      reset() {}
+      interact(p1) {
+        var _a;
+        p1.links = [];
+        const pos1 = p1.getPosition();
+        const container = this.container;
+        const 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);
+        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) {
+            continue;
+          }
+          const pos2 = p2.getPosition();
+          if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+            continue;
           }
-          if (!colorLine) {
+          const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
+          if (distance > optDistance) {
             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;
-          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);
-        }));
-      }
-    }
-    class Plugin {
-      constructor() {
-        this.id = "links";
-      }
-      getPlugin(container) {
-        return new LinkInstance(container);
+          const opacityLine = (1 - distance / optDistance) * optOpacity;
+          this.setColor(p1);
+          p1.links.push({
+            destination: p2,
+            opacity: opacityLine
+          });
+        }
       }
-      needsPlugin() {
-        return true;
+      setColor(p1) {
+        const container = this.container;
+        const linksOptions = p1.options.links;
+        let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);
+        if (!linkColor) {
+          const optColor = linksOptions.color;
+          linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+          if (linksOptions.id === undefined) {
+            container.particles.linksColor = linkColor;
+          } else {
+            container.particles.linksColors.set(linksOptions.id, linkColor);
+          }
+        }
       }
-      loadOptions() {}
-    }
-    async function loadPlugin(tsParticles) {
-      const plugin = new Plugin;
-      await tsParticles.addPlugin(plugin);
     }
     async function loadInteraction(tsParticles) {
       await tsParticles.addInteractor("particlesLinks", (container => new Linker(container)));
@@ -9164,13 +8885,13 @@
     }
     function SizeUpdater_checkDestroy(particle, value, minValue, maxValue) {
       switch (particle.options.size.animation.destroy) {
-       case DestroyType.max:
+       case "max":
         if (value >= maxValue) {
           particle.destroy();
         }
         break;
 
-       case DestroyType.min:
+       case "min":
         if (value <= minValue) {
           particle.destroy();
         }
@@ -9186,9 +8907,9 @@
         return;
       }
       switch (particle.size.status) {
-       case AnimationStatus.increasing:
+       case 0:
         if (particle.size.value >= maxValue) {
-          particle.size.status = AnimationStatus.decreasing;
+          particle.size.status = 1;
           if (!particle.size.loops) {
             particle.size.loops = 0;
           }
@@ -9198,9 +8919,9 @@
         }
         break;
 
-       case AnimationStatus.decreasing:
+       case 1:
         if (particle.size.value <= minValue) {
-          particle.size.status = AnimationStatus.increasing;
+          particle.size.status = 0;
           if (!particle.size.loops) {
             particle.size.loops = 0;
           }
@@ -9293,7 +9014,7 @@
       }
       isEnabled() {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events;
-        return mouse.clicking && mouse.inside && !!mouse.position && isInArray(ClickMode.trail, events.onClick.mode) || mouse.inside && !!mouse.position && isInArray(HoverMode.trail, events.onHover.mode);
+        return mouse.clicking && mouse.inside && !!mouse.position && isInArray("trail", events.onClick.mode) || mouse.inside && !!mouse.position && isInArray("trail", events.onHover.mode);
       }
       reset() {}
     }
@@ -9313,14 +9034,14 @@
         return;
       }
       switch (particle.tilt.status) {
-       case AnimationStatus.increasing:
+       case 0:
         particle.tilt.value += speed;
         if (particle.tilt.value > max) {
           particle.tilt.value -= max;
         }
         break;
 
-       case AnimationStatus.decreasing:
+       case 1:
        default:
         particle.tilt.value -= speed;
         if (particle.tilt.value < 0) {
@@ -9342,18 +9063,18 @@
           cosDirection: Math.random() >= .5 ? 1 : -1
         };
         let tiltDirection = tiltOptions.direction;
-        if (tiltDirection === TiltDirection.random) {
+        if (tiltDirection === "random") {
           const index = Math.floor(Math.random() * 2);
-          tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
+          tiltDirection = index > 0 ? "counter-clockwise" : "clockwise";
         }
         switch (tiltDirection) {
-         case TiltDirection.counterClockwise:
+         case "counter-clockwise":
          case "counterClockwise":
-          particle.tilt.status = AnimationStatus.decreasing;
+          particle.tilt.status = 1;
           break;
 
-         case TiltDirection.clockwise:
-          particle.tilt.status = AnimationStatus.increasing;
+         case "clockwise":
+          particle.tilt.status = 0;
           break;
         }
         const tiltAnimation = particle.options.tilt.animation;
@@ -9427,6 +9148,66 @@
     async function loadWobbleUpdater(tsParticles) {
       await tsParticles.addParticleUpdater("wobble", (container => new WobbleUpdater(container)));
     }
+    function updateRoll(particle, delta) {
+      const roll = particle.options.roll;
+      if (!particle.roll || !roll.enable) {
+        return;
+      }
+      const speed = particle.roll.speed * delta.factor;
+      const max = 2 * Math.PI;
+      particle.roll.angle += speed;
+      if (particle.roll.angle > max) {
+        particle.roll.angle -= max;
+      }
+    }
+    class RollUpdater {
+      init(particle) {
+        const rollOpt = particle.options.roll;
+        if (rollOpt.enable) {
+          particle.roll = {
+            angle: Math.random() * Math.PI * 2,
+            speed: getRangeValue(rollOpt.speed) / 360
+          };
+          if (rollOpt.backColor) {
+            particle.backColor = colorToHsl(rollOpt.backColor);
+          } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+            const alterType = Math.random() >= .5 ? "darken" : "enlighten";
+            particle.roll.alter = {
+              type: alterType,
+              value: alterType === "darken" ? rollOpt.darken.value : rollOpt.enlighten.value
+            };
+          } else if (rollOpt.darken.enable) {
+            particle.roll.alter = {
+              type: "darken",
+              value: rollOpt.darken.value
+            };
+          } else if (rollOpt.enlighten.enable) {
+            particle.roll.alter = {
+              type: "enlighten",
+              value: rollOpt.enlighten.value
+            };
+          }
+        } else {
+          particle.roll = {
+            angle: 0,
+            speed: 0
+          };
+        }
+      }
+      isEnabled(particle) {
+        const roll = particle.options.roll;
+        return !particle.destroyed && !particle.spawning && roll.enable;
+      }
+      update(particle, delta) {
+        if (!this.isEnabled(particle)) {
+          return;
+        }
+        updateRoll(particle, delta);
+      }
+    }
+    async function loadRollUpdater(tsParticles) {
+      await tsParticles.addParticleUpdater("roll", (() => new RollUpdater));
+    }
     class AbsorberInstance {
       constructor(absorbers, container, options, position) {
         var _a, _b, _c, _d, _e;
@@ -9547,7 +9328,7 @@
             particle.absorberOrbit.length = minSize * (1 + (Math.random() * .2 - .1));
           }
           if (particle.absorberOrbitDirection === undefined) {
-            particle.absorberOrbitDirection = particle.velocity.x >= 0 ? RotateDirection.clockwise : RotateDirection.counterClockwise;
+            particle.absorberOrbitDirection = particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
           }
           const orbitRadius = particle.absorberOrbit.length;
           const orbitAngle = particle.absorberOrbit.angle;
@@ -9555,8 +9336,8 @@
           particle.velocity.x = 0;
           particle.velocity.y = 0;
           const updateFunc = {
-            x: orbitDirection === RotateDirection.clockwise ? Math.cos : Math.sin,
-            y: orbitDirection === RotateDirection.clockwise ? Math.sin : Math.cos
+            x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
+            y: orbitDirection === "clockwise" ? Math.sin : Math.cos
           };
           particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
           particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
@@ -9651,10 +9432,6 @@
         }
       }
     }
-    var AbsorberClickMode;
-    (function(AbsorberClickMode) {
-      AbsorberClickMode["absorber"] = "absorber";
-    })(AbsorberClickMode || (AbsorberClickMode = {}));
     class Absorbers {
       constructor(container) {
         this.container = container;
@@ -9734,7 +9511,7 @@
         const container = this.container;
         const absorberOptions = this.absorbers;
         const modeAbsorbers = this.interactivityAbsorbers;
-        if (mode === AbsorberClickMode.absorber) {
+        if (mode === "absorber") {
           let absorbersModeOptions;
           if (modeAbsorbers instanceof Array) {
             if (modeAbsorbers.length > 0) {
@@ -9760,7 +9537,7 @@
         }
       }
     }
-    class plugin_Plugin {
+    class AbsorbersPlugin {
       constructor() {
         this.id = "absorbers";
       }
@@ -9780,7 +9557,7 @@
           }
         } else if (absorbers !== undefined) {
           loadAbsorbers = 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(AbsorberClickMode.absorber, options.interactivity.events.onClick.mode)) {
+        } 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 loadAbsorbers;
@@ -9825,12 +9602,12 @@
       }
     }
     async function loadAbsorbersPlugin(tsParticles) {
-      const plugin = new plugin_Plugin;
+      const plugin = new AbsorbersPlugin;
       await tsParticles.addPlugin(plugin);
     }
     class EmitterSize {
       constructor() {
-        this.mode = SizeMode.percent;
+        this.mode = "percent";
         this.height = 0;
         this.width = 0;
       }
@@ -9909,7 +9686,7 @@
           const size = new EmitterSize;
           size.load({
             height: 0,
-            mode: SizeMode.percent,
+            mode: "percent",
             width: 0
           });
           return size;
@@ -10035,8 +9812,8 @@
         const container = this.container;
         const position = this.position;
         const offset = {
-          x: this.size.mode === SizeMode.percent ? container.canvas.size.width * this.size.width / 100 : this.size.width,
-          y: this.size.mode === SizeMode.percent ? container.canvas.size.height * this.size.height / 100 : this.size.height
+          x: this.size.mode === "percent" ? container.canvas.size.width * this.size.width / 100 : this.size.width,
+          y: this.size.mode === "percent" ? container.canvas.size.height * this.size.height / 100 : this.size.height
         };
         for (let i = 0; i < quantity; i++) {
           const particlesOptions = deepExtend({}, this.particlesOptions);
@@ -10118,22 +9895,13 @@
         }
       }
     }
-    var EmitterClickMode;
-    (function(EmitterClickMode) {
-      EmitterClickMode["emitter"] = "emitter";
-    })(EmitterClickMode || (EmitterClickMode = {}));
-    var EmitterShapeType;
-    (function(EmitterShapeType) {
-      EmitterShapeType["circle"] = "circle";
-      EmitterShapeType["square"] = "square";
-    })(EmitterShapeType || (EmitterShapeType = {}));
     class Emitter {
       constructor() {
         this.autoPlay = true;
         this.fill = true;
         this.life = new EmitterLife;
         this.rate = new EmitterRate;
-        this.shape = EmitterShapeType.square;
+        this.shape = "square";
         this.startCount = 0;
       }
       load(data) {
@@ -10267,7 +10035,7 @@
         const container = this.container;
         const emitterOptions = this.emitters;
         const modeEmitters = this.interactivityEmitters;
-        if (mode === EmitterClickMode.emitter) {
+        if (mode === "emitter") {
           let emitterModeOptions;
           if (modeEmitters instanceof Array) {
             if (modeEmitters.length > 0) {
@@ -10377,7 +10145,7 @@
           return false;
         }
         const emitters = options.emitters;
-        return emitters instanceof Array && !!emitters.length || emitters !== undefined || !!((_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(EmitterClickMode.emitter, options.interactivity.events.onClick.mode);
+        return emitters instanceof Array && !!emitters.length || emitters !== undefined || !!((_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("emitter", options.interactivity.events.onClick.mode);
       }
       loadOptions(options, source) {
         var _a, _b;
@@ -10426,30 +10194,10 @@
           ShapeManager.addShape(name, shape);
         };
       }
-      tsParticles.addEmitterShape(EmitterShapeType.circle, new CircleShape);
-      tsParticles.addEmitterShape(EmitterShapeType.square, new SquareShape);
-    }
-    var InlineArrangement;
-    (function(InlineArrangement) {
-      InlineArrangement["equidistant"] = "equidistant";
-      InlineArrangement["onePerPoint"] = "one-per-point";
-      InlineArrangement["perPoint"] = "per-point";
-      InlineArrangement["randomLength"] = "random-length";
-      InlineArrangement["randomPoint"] = "random-point";
-    })(InlineArrangement || (InlineArrangement = {}));
-    var MoveType;
-    (function(MoveType) {
-      MoveType["path"] = "path";
-      MoveType["radius"] = "radius";
-    })(MoveType || (MoveType = {}));
-    var Type;
-    (function(Type) {
-      Type["inline"] = "inline";
-      Type["inside"] = "inside";
-      Type["outside"] = "outside";
-      Type["none"] = "none";
-    })(Type || (Type = {}));
-    class DrawStroke {
+      tsParticles.addEmitterShape("circle", new CircleShape);
+      tsParticles.addEmitterShape("square", new SquareShape);
+    }
+    class PolygonMaskDrawStroke {
       constructor() {
         this.color = new OptionsColor;
         this.width = .5;
@@ -10457,24 +10205,25 @@
       }
       load(data) {
         var _a;
-        if (data !== undefined) {
-          this.color = OptionsColor.create(this.color, data.color);
-          if (typeof this.color.value === "string") {
-            this.opacity = (_a = stringToAlpha(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
-          }
-          if (data.opacity !== undefined) {
-            this.opacity = data.opacity;
-          }
-          if (data.width !== undefined) {
-            this.width = data.width;
-          }
+        if (!data) {
+          return;
+        }
+        this.color = OptionsColor.create(this.color, data.color);
+        if (typeof this.color.value === "string") {
+          this.opacity = (_a = stringToAlpha(this.color.value)) !== null && _a !== void 0 ? _a : this.opacity;
+        }
+        if (data.opacity !== undefined) {
+          this.opacity = data.opacity;
+        }
+        if (data.width !== undefined) {
+          this.width = data.width;
         }
       }
     }
-    class Draw {
+    class PolygonMaskDraw {
       constructor() {
         this.enable = false;
-        this.stroke = new DrawStroke;
+        this.stroke = new PolygonMaskDrawStroke;
       }
       get lineWidth() {
         return this.stroke.width;
@@ -10490,47 +10239,50 @@
       }
       load(data) {
         var _a;
-        if (data !== undefined) {
-          if (data.enable !== undefined) {
-            this.enable = data.enable;
-          }
-          const stroke = (_a = data.stroke) !== null && _a !== void 0 ? _a : {
-            color: data.lineColor,
-            width: data.lineWidth
-          };
-          this.stroke.load(stroke);
+        if (!data) {
+          return;
         }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+        const stroke = (_a = data.stroke) !== null && _a !== void 0 ? _a : {
+          color: data.lineColor,
+          width: data.lineWidth
+        };
+        this.stroke.load(stroke);
       }
     }
-    class Move_Move {
+    class PolygonMaskMove {
       constructor() {
         this.radius = 10;
-        this.type = MoveType.path;
+        this.type = "path";
       }
       load(data) {
-        if (data !== undefined) {
-          if (data.radius !== undefined) {
-            this.radius = data.radius;
-          }
-          if (data.type !== undefined) {
-            this.type = data.type;
-          }
+        if (!data) {
+          return;
+        }
+        if (data.radius !== undefined) {
+          this.radius = data.radius;
+        }
+        if (data.type !== undefined) {
+          this.type = data.type;
         }
       }
     }
-    class Inline {
+    class PolygonMaskInline {
       constructor() {
-        this.arrangement = InlineArrangement.onePerPoint;
+        this.arrangement = "one-per-point";
       }
       load(data) {
-        if (data !== undefined) {
-          if (data.arrangement !== undefined) {
-            this.arrangement = data.arrangement;
-          }
+        if (!data) {
+          return;
+        }
+        if (data.arrangement !== undefined) {
+          this.arrangement = data.arrangement;
         }
       }
     }
-    class LocalSvg {
+    class PolygonMaskLocalSvg {
       constructor() {
         this.path = [];
         this.size = {
@@ -10539,29 +10291,30 @@
         };
       }
       load(data) {
-        if (data !== undefined) {
-          if (data.path !== undefined) {
-            this.path = data.path;
+        if (!data) {
+          return;
+        }
+        if (data.path !== undefined) {
+          this.path = data.path;
+        }
+        if (data.size !== undefined) {
+          if (data.size.width !== undefined) {
+            this.size.width = data.size.width;
           }
-          if (data.size !== undefined) {
-            if (data.size.width !== undefined) {
-              this.size.width = data.size.width;
-            }
-            if (data.size.height !== undefined) {
-              this.size.height = data.size.height;
-            }
+          if (data.size.height !== undefined) {
+            this.size.height = data.size.height;
           }
         }
       }
     }
     class PolygonMask {
       constructor() {
-        this.draw = new Draw;
+        this.draw = new PolygonMaskDraw;
         this.enable = false;
-        this.inline = new Inline;
-        this.move = new Move_Move;
+        this.inline = new PolygonMaskInline;
+        this.move = new PolygonMaskMove;
         this.scale = 1;
-        this.type = Type.none;
+        this.type = "none";
       }
       get inlineArrangement() {
         return this.inline.arrangement;
@@ -10571,41 +10324,42 @@
       }
       load(data) {
         var _a;
-        if (data !== undefined) {
-          this.draw.load(data.draw);
-          const inline = (_a = data.inline) !== null && _a !== void 0 ? _a : {
-            arrangement: data.inlineArrangement
-          };
-          if (inline !== undefined) {
-            this.inline.load(inline);
-          }
-          this.move.load(data.move);
-          if (data.scale !== undefined) {
-            this.scale = data.scale;
-          }
-          if (data.type !== undefined) {
-            this.type = data.type;
-          }
-          if (data.enable !== undefined) {
-            this.enable = data.enable;
+        if (!data) {
+          return;
+        }
+        this.draw.load(data.draw);
+        const inline = (_a = data.inline) !== null && _a !== void 0 ? _a : {
+          arrangement: data.inlineArrangement
+        };
+        if (inline !== undefined) {
+          this.inline.load(inline);
+        }
+        this.move.load(data.move);
+        if (data.scale !== undefined) {
+          this.scale = data.scale;
+        }
+        if (data.type !== undefined) {
+          this.type = data.type;
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        } else {
+          this.enable = this.type !== "none";
+        }
+        if (data.url !== undefined) {
+          this.url = data.url;
+        }
+        if (data.data !== undefined) {
+          if (typeof data.data === "string") {
+            this.data = data.data;
           } else {
-            this.enable = this.type !== Type.none;
-          }
-          if (data.url !== undefined) {
-            this.url = data.url;
-          }
-          if (data.data !== undefined) {
-            if (typeof data.data === "string") {
-              this.data = data.data;
-            } else {
-              this.data = new LocalSvg;
-              this.data.load(data.data);
-            }
-          }
-          if (data.position !== undefined) {
-            this.position = deepExtend({}, data.position);
+            this.data = new PolygonMaskLocalSvg;
+            this.data.load(data.data);
           }
         }
+        if (data.position !== undefined) {
+          this.position = deepExtend({}, data.position);
+        }
       }
     }
     function drawPolygonMask(context, rawData, stroke) {
@@ -10707,29 +10461,27 @@
       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);
-      let x = s1.x + dxx * t;
-      let y = s1.y + dyy * t;
+      const res = {
+        x: s1.x + dxx * t,
+        y: s1.x + dyy * t,
+        isOnSegment: t >= 0 && t <= 1
+      };
       if (t < 0) {
-        x = s1.x;
-        y = s1.y;
+        res.x = s1.x;
+        res.y = s1.y;
       } else if (t > 1) {
-        x = s2.x;
-        y = s2.y;
+        res.x = s2.x;
+        res.y = s2.y;
       }
-      return {
-        x: x,
-        y: y,
-        isOnSegment: t >= 0 && t <= 1
-      };
+      return res;
     }
     function segmentBounce(start, stop, velocity) {
       const {dx: dx, dy: dy} = getDistances(start, stop);
       const wallAngle = Math.atan2(dy, dx);
-      const wallNormalX = Math.sin(wallAngle);
-      const wallNormalY = -Math.cos(wallAngle);
-      const d = 2 * (velocity.x * wallNormalX + velocity.y * wallNormalY);
-      velocity.x -= d * wallNormalX;
-      velocity.y -= d * wallNormalY;
+      const wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle));
+      const d = 2 * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
+      wallNormal.multTo(d);
+      velocity.subFrom(wallNormal);
     }
     class PolygonMaskInstance {
       constructor(container) {
@@ -10753,7 +10505,7 @@
       resize() {
         const container = this.container;
         const options = this.options;
-        if (!(options.enable && options.type !== Type.none)) {
+        if (!(options.enable && options.type !== "none")) {
           return;
         }
         if (this.redrawTimeout) {
@@ -10770,7 +10522,7 @@
       }
       particlesInitialization() {
         const options = this.options;
-        if (options.enable && options.type === Type.inline && (options.inline.arrangement === InlineArrangement.onePerPoint || options.inline.arrangement === InlineArrangement.perPoint)) {
+        if (options.enable && options.type === "inline" && (options.inline.arrangement === "one-per-point" || options.inline.arrangement === "per-point")) {
           this.drawPoints();
           return true;
         }
@@ -10789,7 +10541,7 @@
       }
       clickPositionValid(position) {
         const options = this.options;
-        return options.enable && options.type !== Type.none && options.type !== Type.inline && this.checkInsidePolygon(position);
+        return options.enable && options.type !== "none" && options.type !== "inline" && this.checkInsidePolygon(position);
       }
       draw(context) {
         var _a;
@@ -10817,10 +10569,10 @@
       }
       polygonBounce(particle, _delta, direction) {
         const options = this.options;
-        if (!this.raw || !options.enable || direction !== OutModeDirection.top) {
+        if (!this.raw || !options.enable || direction !== "top") {
           return false;
         }
-        if (options.type === Type.inside || options.type === Type.outside) {
+        if (options.type === "inside" || options.type === "outside") {
           let closest, dx, dy;
           const pos = particle.getPosition(), radius = particle.getRadius();
           for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
@@ -10849,7 +10601,7 @@
             particle.velocity.mult(-1);
             return true;
           }
-        } else if (options.type === Type.inline && particle.initialPosition) {
+        } else if (options.type === "inline" && particle.initialPosition) {
           const dist = getDistance(particle.initialPosition, particle.getPosition());
           if (dist > this.polygonMaskMoveRadius) {
             particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
@@ -10863,7 +10615,7 @@
         var _a, _b;
         const container = this.container;
         const options = this.options;
-        if (!options.enable || options.type === Type.none || options.type === Type.inline) {
+        if (!options.enable || options.type === "none" || options.type === "inline") {
           return true;
         }
         if (!this.raw) {
@@ -10881,7 +10633,7 @@
             inside = !inside;
           }
         }
-        return options.type === Type.inside ? inside : options.type === Type.outside ? !inside : false;
+        return options.type === "inside" ? inside : options.type === "outside" ? !inside : false;
       }
       parseSvgPath(xml, force) {
         var _a, _b, _c;
@@ -10950,22 +10702,22 @@
         const container = this.container;
         const options = this.options;
         let position;
-        if (options.type === Type.inline) {
+        if (options.type === "inline") {
           switch (options.inline.arrangement) {
-           case InlineArrangement.randomPoint:
+           case "random-point":
             position = this.getRandomPoint();
             break;
 
-           case InlineArrangement.randomLength:
+           case "random-length":
             position = this.getRandomPointByLength();
             break;
 
-           case InlineArrangement.equidistant:
+           case "equidistant":
             position = this.getEquidistantPointByIndex(container.particles.count);
             break;
 
-           case InlineArrangement.onePerPoint:
-           case InlineArrangement.perPoint:
+           case "one-per-point":
+           case "per-point":
            default:
             position = this.getPointByIndex(container.particles.count);
           }
@@ -11093,7 +10845,7 @@
         this.createPath2D();
       }
     }
-    class PolygonMask_plugin_Plugin {
+    class PolygonMaskPlugin {
       constructor() {
         this.id = "polygonMask";
       }
@@ -11102,7 +10854,7 @@
       }
       needsPlugin(options) {
         var _a, _b, _c;
-        return (_b = (_a = options === null || options === void 0 ? void 0 : options.polygon) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : ((_c = options === null || options === void 0 ? void 0 : options.polygon) === null || _c === void 0 ? void 0 : _c.type) !== undefined && options.polygon.type !== Type.none;
+        return (_b = (_a = options === null || options === void 0 ? void 0 : options.polygon) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : ((_c = options === null || options === void 0 ? void 0 : options.polygon) === null || _c === void 0 ? void 0 : _c.type) !== undefined && options.polygon.type !== "none";
       }
       loadOptions(options, source) {
         if (!this.needsPlugin(source)) {
@@ -11117,72 +10869,12 @@
       }
     }
     async function loadPolygonMaskPlugin(tsParticles) {
-      if (!isSsr() && !window.SVGPathSeg) {
-        await __webpack_require__.e(917).then(__webpack_require__.t.bind(__webpack_require__, 167, 23));
+      if (!isSsr() && !("SVGPathSeg" in window)) {
+        await __webpack_require__.e(404).then(__webpack_require__.t.bind(__webpack_require__, 167, 23));
       }
-      const plugin = new PolygonMask_plugin_Plugin;
+      const plugin = new PolygonMaskPlugin;
       await tsParticles.addPlugin(plugin);
     }
-    function updateRoll(particle, delta) {
-      const roll = particle.options.roll;
-      if (!particle.roll || !roll.enable) {
-        return;
-      }
-      const speed = particle.roll.speed * delta.factor;
-      const max = 2 * Math.PI;
-      particle.roll.angle += speed;
-      if (particle.roll.angle > max) {
-        particle.roll.angle -= max;
-      }
-    }
-    class RollUpdater {
-      init(particle) {
-        const rollOpt = particle.options.roll;
-        if (rollOpt.enable) {
-          particle.roll = {
-            angle: Math.random() * Math.PI * 2,
-            speed: getRangeValue(rollOpt.speed) / 360
-          };
-          if (rollOpt.backColor) {
-            particle.backColor = colorToHsl(rollOpt.backColor);
-          } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
-            const alterType = Math.random() >= .5 ? AlterType.darken : AlterType.enlighten;
-            particle.roll.alter = {
-              type: alterType,
-              value: alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value
-            };
-          } else if (rollOpt.darken.enable) {
-            particle.roll.alter = {
-              type: AlterType.darken,
-              value: rollOpt.darken.value
-            };
-          } else if (rollOpt.enlighten.enable) {
-            particle.roll.alter = {
-              type: AlterType.enlighten,
-              value: rollOpt.enlighten.value
-            };
-          }
-        } else {
-          particle.roll = {
-            angle: 0,
-            speed: 0
-          };
-        }
-      }
-      isEnabled(particle) {
-        const roll = particle.options.roll;
-        return !particle.destroyed && !particle.spawning && roll.enable;
-      }
-      update(particle, delta) {
-        if (!this.isEnabled(particle)) {
-          return;
-        }
-        updateRoll(particle, delta);
-      }
-    }
-    async function loadRollUpdater(tsParticles) {
-      await tsParticles.addParticleUpdater("roll", (() => new RollUpdater));
-    }
     async function loadFull(tsParticles) {
       await loadSlim(tsParticles);
       await loadExternalTrailInteraction(tsParticles);
@@ -11193,7 +10885,7 @@
       await loadEmittersPlugin(tsParticles);
       await loadPolygonMaskPlugin(tsParticles);
     }
-    const tsParticles = new Main;
+    const tsParticles = new Engine;
     tsParticles.init();
     const {particlesJS: particlesJS, pJSDom: pJSDom} = initPjs(tsParticles);
     loadFull(tsParticles);