tsparticles 1.39.0 → 1.39.1

package/tsparticles.updater.outModes.js

@@ -1170,366 +1170,278 @@
         }));
       }
     }
-    class ValueWithRandom_ValueWithRandom {
+    class Trail_Trail {
       constructor() {
-        this.random = new Random;
-        this.value = 0;
+        this.delay = 1;
+        this.pauseOnStop = false;
+        this.quantity = 1;
       }
       load(data) {
-        if (!data) {
+        if (data === undefined) {
           return;
         }
-        if (typeof data.random === "boolean") {
-          this.random.enable = data.random;
-        } else {
-          this.random.load(data.random);
+        if (data.delay !== undefined) {
+          this.delay = data.delay;
         }
-        if (data.value !== undefined) {
-          this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
+        if (data.quantity !== undefined) {
+          this.quantity = data.quantity;
+        }
+        if (data.particles !== undefined) {
+          this.particles = deepExtend({}, data.particles);
+        }
+        if (data.pauseOnStop !== undefined) {
+          this.pauseOnStop = data.pauseOnStop;
         }
       }
     }
-    class PathDelay_PathDelay extends(null && ValueWithRandom){
+    class Modes_Modes {
       constructor() {
-        super();
+        this.attract = new Attract;
+        this.bounce = new Bounce;
+        this.bubble = new Bubble;
+        this.connect = new Connect;
+        this.grab = new Grab;
+        this.light = new Light;
+        this.push = new Push;
+        this.remove = new Remove;
+        this.repulse = new Repulse;
+        this.slow = new Slow;
+        this.trail = new Trail;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        this.attract.load(data.attract);
+        this.bubble.load(data.bubble);
+        this.connect.load(data.connect);
+        this.grab.load(data.grab);
+        this.light.load(data.light);
+        this.push.load(data.push);
+        this.remove.load(data.remove);
+        this.repulse.load(data.repulse);
+        this.slow.load(data.slow);
+        this.trail.load(data.trail);
       }
     }
-    class Path_Path {
+    class Interactivity_Interactivity {
       constructor() {
-        this.clamp = true;
-        this.delay = new PathDelay;
-        this.enable = false;
-        this.options = {};
+        this.detectsOn = "window";
+        this.events = new Events;
+        this.modes = new Modes;
+      }
+      get detect_on() {
+        return this.detectsOn;
+      }
+      set detect_on(value) {
+        this.detectsOn = value;
       }
       load(data) {
+        var _a, _b, _c;
         if (data === undefined) {
           return;
         }
-        if (data.clamp !== undefined) {
-          this.clamp = data.clamp;
-        }
-        this.delay.load(data.delay);
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
+        const detectsOn = (_a = data.detectsOn) !== null && _a !== void 0 ? _a : data.detect_on;
+        if (detectsOn !== undefined) {
+          this.detectsOn = detectsOn;
         }
-        this.generator = data.generator;
-        if (data.options) {
-          this.options = deepExtend(this.options, data.options);
+        this.events.load(data.events);
+        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("slow") < 0) {
+              this.events.onHover.mode.push("slow");
+            }
+          } else if (this.events.onHover.mode !== "slow") {
+            this.events.onHover.mode = [ this.events.onHover.mode, "slow" ];
+          }
         }
       }
     }
-    class Spin_Spin {
-      constructor() {
-        this.acceleration = 0;
-        this.enable = false;
-      }
+    class ManualParticle_ManualParticle {
       load(data) {
+        var _a, _b;
         if (!data) {
           return;
         }
-        if (data.acceleration !== undefined) {
-          this.acceleration = setRangeValue(data.acceleration);
+        if (data.position !== undefined) {
+          this.position = {
+            x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
+            y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50
+          };
         }
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
+        if (data.options !== undefined) {
+          this.options = deepExtend({}, data.options);
         }
-        this.position = data.position ? deepExtend({}, data.position) : undefined;
       }
     }
-    class Move_Move {
+    class ColorAnimation_ColorAnimation {
       constructor() {
-        this.angle = new MoveAngle;
-        this.attract = new Attract;
-        this.decay = 0;
-        this.distance = {};
-        this.direction = "none";
-        this.drift = 0;
+        this.count = 0;
         this.enable = false;
-        this.gravity = new MoveGravity;
-        this.path = new Path;
-        this.outModes = new OutModes;
-        this.random = false;
-        this.size = false;
-        this.speed = 2;
-        this.spin = new Spin;
-        this.straight = false;
-        this.trail = new Trail;
-        this.vibrate = false;
-        this.warp = false;
-      }
-      get collisions() {
-        return false;
-      }
-      set collisions(value) {}
-      get bounce() {
-        return this.collisions;
-      }
-      set bounce(value) {
-        this.collisions = value;
-      }
-      get out_mode() {
-        return this.outMode;
-      }
-      set out_mode(value) {
-        this.outMode = value;
-      }
-      get outMode() {
-        return this.outModes.default;
-      }
-      set outMode(value) {
-        this.outModes.default = value;
-      }
-      get noise() {
-        return this.path;
-      }
-      set noise(value) {
-        this.path = value;
+        this.offset = 0;
+        this.speed = 1;
+        this.sync = true;
       }
       load(data) {
-        var _a, _b, _c;
         if (data === undefined) {
           return;
         }
-        if (data.angle !== undefined) {
-          if (typeof data.angle === "number") {
-            this.angle.value = data.angle;
-          } else {
-            this.angle.load(data.angle);
-          }
-        }
-        this.attract.load(data.attract);
-        if (data.decay !== undefined) {
-          this.decay = data.decay;
-        }
-        if (data.direction !== undefined) {
-          this.direction = data.direction;
-        }
-        if (data.distance !== undefined) {
-          this.distance = typeof data.distance === "number" ? {
-            horizontal: data.distance,
-            vertical: data.distance
-          } : deepExtend({}, data.distance);
-        }
-        if (data.drift !== undefined) {
-          this.drift = setRangeValue(data.drift);
+        if (data.count !== undefined) {
+          this.count = data.count;
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
-        this.gravity.load(data.gravity);
-        const outMode = (_a = data.outMode) !== null && _a !== void 0 ? _a : data.out_mode;
-        if (data.outModes !== undefined || outMode !== undefined) {
-          if (typeof data.outModes === "string" || data.outModes === undefined && outMode !== undefined) {
-            this.outModes.load({
-              default: (_b = data.outModes) !== null && _b !== void 0 ? _b : outMode
-            });
-          } else {
-            this.outModes.load(data.outModes);
-          }
-        }
-        this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
-        if (data.random !== undefined) {
-          this.random = data.random;
-        }
-        if (data.size !== undefined) {
-          this.size = data.size;
+        if (data.offset !== undefined) {
+          this.offset = setRangeValue(data.offset);
         }
         if (data.speed !== undefined) {
-          this.speed = setRangeValue(data.speed);
-        }
-        this.spin.load(data.spin);
-        if (data.straight !== undefined) {
-          this.straight = data.straight;
-        }
-        this.trail.load(data.trail);
-        if (data.vibrate !== undefined) {
-          this.vibrate = data.vibrate;
+          this.speed = data.speed;
         }
-        if (data.warp !== undefined) {
-          this.warp = data.warp;
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
         }
       }
     }
-    class Opacity_Opacity extends(null && ValueWithRandom){
+    class HslAnimation_HslAnimation {
       constructor() {
-        super();
-        this.animation = new OpacityAnimation;
-        this.random.minimumValue = .1;
-        this.value = 1;
-      }
-      get anim() {
-        return this.animation;
-      }
-      set anim(value) {
-        this.animation = value;
+        this.h = new ColorAnimation;
+        this.s = new ColorAnimation;
+        this.l = new ColorAnimation;
       }
       load(data) {
-        var _a;
         if (!data) {
           return;
         }
-        super.load(data);
-        const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
-        if (animation !== undefined) {
-          this.animation.load(animation);
-          this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
-        }
+        this.h.load(data.h);
+        this.s.load(data.s);
+        this.l.load(data.l);
       }
     }
-    class Shape_Shape {
+    class AnimatableColor_AnimatableColor extends(null && OptionsColor){
       constructor() {
-        this.options = {};
-        this.type = "circle";
-      }
-      get image() {
-        var _a;
-        return (_a = this.options["image"]) !== null && _a !== void 0 ? _a : this.options["images"];
+        super();
+        this.animation = new HslAnimation;
       }
-      set image(value) {
-        this.options["image"] = value;
-        this.options["images"] = value;
-      }
-      get custom() {
-        return this.options;
-      }
-      set custom(value) {
-        this.options = value;
-      }
-      get images() {
-        return this.image;
-      }
-      set images(value) {
-        this.image = value;
-      }
-      get stroke() {
-        return [];
-      }
-      set stroke(_value) {}
-      get character() {
-        var _a;
-        return (_a = this.options["character"]) !== null && _a !== void 0 ? _a : this.options["char"];
-      }
-      set character(value) {
-        this.options["character"] = value;
-        this.options["char"] = value;
+      static create(source, data) {
+        const color = new AnimatableColor_AnimatableColor;
+        color.load(source);
+        if (data !== undefined) {
+          if (typeof data === "string" || data instanceof Array) {
+            color.load({
+              value: data
+            });
+          } else {
+            color.load(data);
+          }
+        }
+        return color;
       }
-      get polygon() {
-        var _a;
-        return (_a = this.options["polygon"]) !== null && _a !== void 0 ? _a : this.options["star"];
+      load(data) {
+        super.load(data);
+        if (!data) {
+          return;
+        }
+        const colorAnimation = data.animation;
+        if (colorAnimation !== undefined) {
+          if (colorAnimation.enable !== undefined) {
+            this.animation.h.load(colorAnimation);
+          } else {
+            this.animation.load(data.animation);
+          }
+        }
       }
-      set polygon(value) {
-        this.options["polygon"] = value;
-        this.options["star"] = value;
+    }
+    class AnimatableGradient_AnimatableGradient {
+      constructor() {
+        this.angle = new GradientAngle;
+        this.colors = [];
+        this.type = "random";
       }
       load(data) {
-        var _a, _b, _c;
-        if (data === undefined) {
+        if (!data) {
           return;
         }
-        const options = (_a = data.options) !== null && _a !== void 0 ? _a : data.custom;
-        if (options !== undefined) {
-          for (const shape in options) {
-            const item = options[shape];
-            if (item !== undefined) {
-              this.options[shape] = deepExtend((_b = this.options[shape]) !== null && _b !== void 0 ? _b : {}, item);
-            }
-          }
+        this.angle.load(data.angle);
+        if (data.colors !== undefined) {
+          this.colors = data.colors.map((s => {
+            const tmp = new AnimatableGradientColor;
+            tmp.load(s);
+            return tmp;
+          }));
         }
-        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;
         }
       }
-      loadShape(item, mainKey, altKey, altOverride) {
-        var _a, _b, _c, _d;
-        if (item === undefined) {
+    }
+    class GradientAngle {
+      constructor() {
+        this.value = 0;
+        this.animation = new GradientAngleAnimation;
+        this.direction = "clockwise";
+      }
+      load(data) {
+        if (!data) {
           return;
         }
-        if (item instanceof Array) {
-          if (!(this.options[mainKey] instanceof Array)) {
-            this.options[mainKey] = [];
-            if (!this.options[altKey] || altOverride) {
-              this.options[altKey] = [];
-            }
-          }
-          this.options[mainKey] = deepExtend((_a = this.options[mainKey]) !== null && _a !== void 0 ? _a : [], item);
-          if (!this.options[altKey] || altOverride) {
-            this.options[altKey] = deepExtend((_b = this.options[altKey]) !== null && _b !== void 0 ? _b : [], item);
-          }
-        } else {
-          if (this.options[mainKey] instanceof Array) {
-            this.options[mainKey] = {};
-            if (!this.options[altKey] || altOverride) {
-              this.options[altKey] = {};
-            }
-          }
-          this.options[mainKey] = deepExtend((_c = this.options[mainKey]) !== null && _c !== void 0 ? _c : {}, item);
-          if (!this.options[altKey] || altOverride) {
-            this.options[altKey] = deepExtend((_d = this.options[altKey]) !== null && _d !== void 0 ? _d : {}, item);
-          }
+        this.animation.load(data.animation);
+        if (data.value !== undefined) {
+          this.value = data.value;
+        }
+        if (data.direction !== undefined) {
+          this.direction = data.direction;
         }
       }
     }
-    class Size_Size extends(null && ValueWithRandom){
+    class GradientColorOpacity {
       constructor() {
-        super();
-        this.animation = new SizeAnimation;
-        this.random.minimumValue = 1;
-        this.value = 3;
-      }
-      get anim() {
-        return this.animation;
-      }
-      set anim(value) {
-        this.animation = value;
+        this.value = 0;
+        this.animation = new GradientColorOpacityAnimation;
       }
       load(data) {
-        var _a;
         if (!data) {
           return;
         }
-        super.load(data);
-        const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
-        if (animation !== undefined) {
-          this.animation.load(animation);
-          this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
+        this.animation.load(data.animation);
+        if (data.value !== undefined) {
+          this.value = setRangeValue(data.value);
         }
       }
     }
-    class Rotate_Rotate extends(null && ValueWithRandom){
+    class AnimatableGradientColor {
       constructor() {
-        super();
-        this.animation = new RotateAnimation;
-        this.direction = "clockwise";
-        this.path = false;
-        this.value = 0;
+        this.stop = 0;
+        this.value = new AnimatableColor;
       }
       load(data) {
         if (!data) {
           return;
         }
-        super.load(data);
-        if (data.direction !== undefined) {
-          this.direction = data.direction;
+        if (data.stop !== undefined) {
+          this.stop = data.stop;
         }
-        this.animation.load(data.animation);
-        if (data.path !== undefined) {
-          this.path = data.path;
+        this.value = AnimatableColor.create(this.value, data.value);
+        if (data.opacity !== undefined) {
+          this.opacity = new GradientColorOpacity;
+          if (typeof data.opacity === "number") {
+            this.opacity.value = data.opacity;
+          } else {
+            this.opacity.load(data.opacity);
+          }
         }
       }
     }
-    class ColorAnimation_ColorAnimation {
+    class GradientAngleAnimation {
       constructor() {
         this.count = 0;
         this.enable = false;
-        this.offset = 0;
-        this.speed = 1;
-        this.sync = true;
+        this.speed = 0;
+        this.sync = false;
       }
       load(data) {
-        if (data === undefined) {
+        if (!data) {
           return;
         }
         if (data.count !== undefined) {
@@ -1538,9 +1450,6 @@
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
-        if (data.offset !== undefined) {
-          this.offset = setRangeValue(data.offset);
-        }
         if (data.speed !== undefined) {
           this.speed = data.speed;
         }
@@ -1549,79 +1458,59 @@
         }
       }
     }
-    class HslAnimation_HslAnimation {
+    class GradientColorOpacityAnimation {
       constructor() {
-        this.h = new ColorAnimation;
-        this.s = new ColorAnimation;
-        this.l = new ColorAnimation;
+        this.count = 0;
+        this.enable = false;
+        this.speed = 0;
+        this.sync = false;
+        this.startValue = "random";
       }
       load(data) {
         if (!data) {
           return;
         }
-        this.h.load(data.h);
-        this.s.load(data.s);
-        this.l.load(data.l);
+        if (data.count !== undefined) {
+          this.count = data.count;
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+        if (data.speed !== undefined) {
+          this.speed = data.speed;
+        }
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
+        }
+        if (data.startValue !== undefined) {
+          this.startValue = data.startValue;
+        }
       }
     }
-    class AnimatableColor_AnimatableColor extends(null && OptionsColor){
+    class ValueWithRandom_ValueWithRandom {
       constructor() {
-        super();
-        this.animation = new HslAnimation;
-      }
-      static create(source, data) {
-        const color = new AnimatableColor_AnimatableColor;
-        color.load(source);
-        if (data !== undefined) {
-          if (typeof data === "string" || data instanceof Array) {
-            color.load({
-              value: data
-            });
-          } else {
-            color.load(data);
-          }
-        }
-        return color;
+        this.random = new Random;
+        this.value = 0;
       }
       load(data) {
-        super.load(data);
         if (!data) {
           return;
         }
-        const colorAnimation = data.animation;
-        if (colorAnimation !== undefined) {
-          if (colorAnimation.enable !== undefined) {
-            this.animation.h.load(colorAnimation);
-          } else {
-            this.animation.load(data.animation);
-          }
+        if (typeof data.random === "boolean") {
+          this.random.enable = data.random;
+        } else {
+          this.random.load(data.random);
+        }
+        if (data.value !== undefined) {
+          this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
         }
       }
     }
-    class Stroke_Stroke {
+    class BounceFactor_BounceFactor extends(null && ValueWithRandom){
       constructor() {
-        this.width = 0;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.color !== undefined) {
-          this.color = AnimatableColor.create(this.color, data.color);
-        }
-        if (data.width !== undefined) {
-          this.width = data.width;
-        }
-        if (data.opacity !== undefined) {
-          this.opacity = data.opacity;
-        }
-      }
-    }
-    class BounceFactor_BounceFactor extends(null && ValueWithRandom){
-      constructor() {
-        super();
-        this.random.minimumValue = .1;
-        this.value = 1;
+        super();
+        this.random.minimumValue = .1;
+        this.value = 1;
       }
     }
     class Bounce_Bounce {
@@ -1658,54 +1547,6 @@
         this.overlap.load(data.overlap);
       }
     }
-    class LifeDelay_LifeDelay extends(null && ValueWithRandom){
-      constructor() {
-        super();
-        this.sync = false;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        super.load(data);
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
-        }
-      }
-    }
-    class LifeDuration_LifeDuration extends(null && ValueWithRandom){
-      constructor() {
-        super();
-        this.random.minimumValue = 1e-4;
-        this.sync = false;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        super.load(data);
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
-        }
-      }
-    }
-    class Life_Life {
-      constructor() {
-        this.count = 0;
-        this.delay = new LifeDelay;
-        this.duration = new LifeDuration;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.count !== undefined) {
-          this.count = data.count;
-        }
-        this.delay.load(data.delay);
-        this.duration.load(data.duration);
-      }
-    }
     class SplitFactor_SplitFactor extends(null && ValueWithRandom){
       constructor() {
         super();
@@ -1760,322 +1601,586 @@
         this.split.load(data.split);
       }
     }
-    class Wobble_Wobble {
-      constructor() {
-        this.distance = 5;
-        this.enable = false;
-        this.speed = 50;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        if (data.distance !== undefined) {
-          this.distance = setRangeValue(data.distance);
-        }
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-          this.speed = setRangeValue(data.speed);
-        }
-      }
-    }
-    class Tilt_Tilt extends(null && ValueWithRandom){
+    class LifeDelay_LifeDelay extends(null && ValueWithRandom){
       constructor() {
         super();
-        this.animation = new TiltAnimation;
-        this.direction = "clockwise";
-        this.enable = false;
-        this.value = 0;
+        this.sync = false;
       }
       load(data) {
         if (!data) {
           return;
         }
         super.load(data);
-        this.animation.load(data.animation);
-        if (data.direction !== undefined) {
-          this.direction = data.direction;
-        }
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
         }
       }
     }
-    class Roll_Roll {
+    class LifeDuration_LifeDuration extends(null && ValueWithRandom){
       constructor() {
-        this.darken = new RollLight;
-        this.enable = false;
-        this.enlighten = new RollLight;
-        this.mode = "vertical";
-        this.speed = 25;
+        super();
+        this.random.minimumValue = 1e-4;
+        this.sync = false;
       }
       load(data) {
-        if (!data) {
+        if (data === undefined) {
           return;
         }
-        if (data.backColor !== undefined) {
-          this.backColor = OptionsColor.create(this.backColor, data.backColor);
-        }
-        this.darken.load(data.darken);
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
-        }
-        this.enlighten.load(data.enlighten);
-        if (data.mode !== undefined) {
-          this.mode = data.mode;
-        }
-        if (data.speed !== undefined) {
-          this.speed = setRangeValue(data.speed);
+        super.load(data);
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
         }
       }
     }
-    class ZIndex_ZIndex extends(null && ValueWithRandom){
+    class Life_Life {
       constructor() {
-        super();
-        this.opacityRate = 1;
-        this.sizeRate = 1;
-        this.velocityRate = 1;
+        this.count = 0;
+        this.delay = new LifeDelay;
+        this.duration = new LifeDuration;
       }
       load(data) {
-        super.load(data);
-        if (!data) {
+        if (data === undefined) {
           return;
         }
-        if (data.opacityRate !== undefined) {
-          this.opacityRate = data.opacityRate;
-        }
-        if (data.sizeRate !== undefined) {
-          this.sizeRate = data.sizeRate;
-        }
-        if (data.velocityRate !== undefined) {
-          this.velocityRate = data.velocityRate;
+        if (data.count !== undefined) {
+          this.count = data.count;
         }
+        this.delay.load(data.delay);
+        this.duration.load(data.duration);
       }
     }
-    class OrbitRotation_OrbitRotation extends(null && ValueWithRandom){
+    class PathDelay_PathDelay extends(null && ValueWithRandom){
       constructor() {
         super();
-        this.value = 45;
-        this.random.enable = false;
-        this.random.minimumValue = 0;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        super.load(data);
       }
     }
-    class Orbit_Orbit {
+    class Path_Path {
       constructor() {
-        this.animation = new AnimationOptions;
+        this.clamp = true;
+        this.delay = new PathDelay;
         this.enable = false;
-        this.opacity = 1;
-        this.rotation = new OrbitRotation;
-        this.width = 1;
+        this.options = {};
       }
       load(data) {
         if (data === undefined) {
           return;
         }
-        this.animation.load(data.animation);
-        this.rotation.load(data.rotation);
+        if (data.clamp !== undefined) {
+          this.clamp = data.clamp;
+        }
+        this.delay.load(data.delay);
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
-        if (data.opacity !== undefined) {
-          this.opacity = data.opacity;
-        }
-        if (data.width !== undefined) {
-          this.width = data.width;
-        }
-        if (data.radius !== undefined) {
-          this.radius = data.radius;
-        }
-        if (data.color !== undefined) {
-          this.color = OptionsColor.create(this.color, data.color);
+        this.generator = data.generator;
+        if (data.options) {
+          this.options = deepExtend(this.options, data.options);
         }
       }
     }
-    class Repulse_Repulse extends(null && ValueWithRandom){
+    class Spin_Spin {
       constructor() {
-        super();
-        this.enabled = false;
-        this.distance = 1;
-        this.duration = 1;
-        this.factor = 1;
-        this.speed = 1;
+        this.acceleration = 0;
+        this.enable = false;
       }
       load(data) {
-        super.load(data);
         if (!data) {
           return;
         }
-        if (data.enabled !== undefined) {
-          this.enabled = data.enabled;
-        }
-        if (data.distance !== undefined) {
-          this.distance = data.distance;
-        }
-        if (data.duration !== undefined) {
-          this.duration = data.duration;
-        }
-        if (data.factor !== undefined) {
-          this.factor = data.factor;
+        if (data.acceleration !== undefined) {
+          this.acceleration = setRangeValue(data.acceleration);
         }
-        if (data.speed !== undefined) {
-          this.speed = data.speed;
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
         }
+        this.position = data.position ? deepExtend({}, data.position) : undefined;
       }
     }
-    class AnimatableGradient_AnimatableGradient {
+    class Move_Move {
       constructor() {
-        this.angle = new GradientAngle;
-        this.colors = [];
-        this.type = "random";
+        this.angle = new MoveAngle;
+        this.attract = new Attract;
+        this.decay = 0;
+        this.distance = {};
+        this.direction = "none";
+        this.drift = 0;
+        this.enable = false;
+        this.gravity = new MoveGravity;
+        this.path = new Path;
+        this.outModes = new OutModes;
+        this.random = false;
+        this.size = false;
+        this.speed = 2;
+        this.spin = new Spin;
+        this.straight = false;
+        this.trail = new Trail;
+        this.vibrate = false;
+        this.warp = false;
       }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        this.angle.load(data.angle);
-        if (data.colors !== undefined) {
-          this.colors = data.colors.map((s => {
-            const tmp = new AnimatableGradientColor;
-            tmp.load(s);
-            return tmp;
-          }));
-        }
-        if (data.type !== undefined) {
-          this.type = data.type;
-        }
+      get collisions() {
+        return false;
       }
-    }
-    class GradientAngle {
-      constructor() {
-        this.value = 0;
-        this.animation = new GradientAngleAnimation;
-        this.direction = "clockwise";
+      set collisions(value) {}
+      get bounce() {
+        return this.collisions;
+      }
+      set bounce(value) {
+        this.collisions = value;
+      }
+      get out_mode() {
+        return this.outMode;
+      }
+      set out_mode(value) {
+        this.outMode = value;
+      }
+      get outMode() {
+        return this.outModes.default;
+      }
+      set outMode(value) {
+        this.outModes.default = value;
+      }
+      get noise() {
+        return this.path;
+      }
+      set noise(value) {
+        this.path = value;
       }
       load(data) {
-        if (!data) {
+        var _a, _b, _c;
+        if (data === undefined) {
           return;
         }
-        this.animation.load(data.animation);
-        if (data.value !== undefined) {
-          this.value = data.value;
+        if (data.angle !== undefined) {
+          if (typeof data.angle === "number") {
+            this.angle.value = data.angle;
+          } else {
+            this.angle.load(data.angle);
+          }
+        }
+        this.attract.load(data.attract);
+        if (data.decay !== undefined) {
+          this.decay = data.decay;
         }
         if (data.direction !== undefined) {
           this.direction = data.direction;
         }
+        if (data.distance !== undefined) {
+          this.distance = typeof data.distance === "number" ? {
+            horizontal: data.distance,
+            vertical: data.distance
+          } : deepExtend({}, data.distance);
+        }
+        if (data.drift !== undefined) {
+          this.drift = setRangeValue(data.drift);
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+        this.gravity.load(data.gravity);
+        const outMode = (_a = data.outMode) !== null && _a !== void 0 ? _a : data.out_mode;
+        if (data.outModes !== undefined || outMode !== undefined) {
+          if (typeof data.outModes === "string" || data.outModes === undefined && outMode !== undefined) {
+            this.outModes.load({
+              default: (_b = data.outModes) !== null && _b !== void 0 ? _b : outMode
+            });
+          } else {
+            this.outModes.load(data.outModes);
+          }
+        }
+        this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
+        if (data.random !== undefined) {
+          this.random = data.random;
+        }
+        if (data.size !== undefined) {
+          this.size = data.size;
+        }
+        if (data.speed !== undefined) {
+          this.speed = setRangeValue(data.speed);
+        }
+        this.spin.load(data.spin);
+        if (data.straight !== undefined) {
+          this.straight = data.straight;
+        }
+        this.trail.load(data.trail);
+        if (data.vibrate !== undefined) {
+          this.vibrate = data.vibrate;
+        }
+        if (data.warp !== undefined) {
+          this.warp = data.warp;
+        }
       }
     }
-    class GradientColorOpacity {
+    class Opacity_Opacity extends(null && ValueWithRandom){
       constructor() {
-        this.value = 0;
-        this.animation = new GradientColorOpacityAnimation;
+        super();
+        this.animation = new OpacityAnimation;
+        this.random.minimumValue = .1;
+        this.value = 1;
+      }
+      get anim() {
+        return this.animation;
+      }
+      set anim(value) {
+        this.animation = value;
       }
       load(data) {
+        var _a;
         if (!data) {
           return;
         }
-        this.animation.load(data.animation);
-        if (data.value !== undefined) {
-          this.value = setRangeValue(data.value);
+        super.load(data);
+        const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+        if (animation !== undefined) {
+          this.animation.load(animation);
+          this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
         }
       }
     }
-    class AnimatableGradientColor {
+    class OrbitRotation_OrbitRotation extends(null && ValueWithRandom){
       constructor() {
-        this.stop = 0;
-        this.value = new AnimatableColor;
+        super();
+        this.value = 45;
+        this.random.enable = false;
+        this.random.minimumValue = 0;
       }
       load(data) {
-        if (!data) {
+        if (data === undefined) {
           return;
         }
-        if (data.stop !== undefined) {
-          this.stop = data.stop;
+        super.load(data);
+      }
+    }
+    class Orbit_Orbit {
+      constructor() {
+        this.animation = new AnimationOptions;
+        this.enable = false;
+        this.opacity = 1;
+        this.rotation = new OrbitRotation;
+        this.width = 1;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        this.animation.load(data.animation);
+        this.rotation.load(data.rotation);
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
         }
-        this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
-          this.opacity = new GradientColorOpacity;
-          if (typeof data.opacity === "number") {
-            this.opacity.value = data.opacity;
-          } else {
-            this.opacity.load(data.opacity);
-          }
+          this.opacity = data.opacity;
+        }
+        if (data.width !== undefined) {
+          this.width = data.width;
+        }
+        if (data.radius !== undefined) {
+          this.radius = data.radius;
+        }
+        if (data.color !== undefined) {
+          this.color = OptionsColor.create(this.color, data.color);
         }
       }
     }
-    class GradientAngleAnimation {
+    class Repulse_Repulse extends(null && ValueWithRandom){
       constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.sync = false;
+        super();
+        this.enabled = false;
+        this.distance = 1;
+        this.duration = 1;
+        this.factor = 1;
+        this.speed = 1;
       }
       load(data) {
+        super.load(data);
         if (!data) {
           return;
         }
-        if (data.count !== undefined) {
-          this.count = data.count;
+        if (data.enabled !== undefined) {
+          this.enabled = data.enabled;
         }
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
+        if (data.distance !== undefined) {
+          this.distance = data.distance;
+        }
+        if (data.duration !== undefined) {
+          this.duration = data.duration;
+        }
+        if (data.factor !== undefined) {
+          this.factor = data.factor;
         }
         if (data.speed !== undefined) {
           this.speed = data.speed;
         }
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
-        }
       }
     }
-    class GradientColorOpacityAnimation {
+    class Roll_Roll {
       constructor() {
-        this.count = 0;
+        this.darken = new RollLight;
         this.enable = false;
-        this.speed = 0;
-        this.sync = false;
-        this.startValue = "random";
+        this.enlighten = new RollLight;
+        this.mode = "vertical";
+        this.speed = 25;
       }
       load(data) {
         if (!data) {
           return;
         }
-        if (data.count !== undefined) {
-          this.count = data.count;
+        if (data.backColor !== undefined) {
+          this.backColor = OptionsColor.create(this.backColor, data.backColor);
         }
+        this.darken.load(data.darken);
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
+        this.enlighten.load(data.enlighten);
+        if (data.mode !== undefined) {
+          this.mode = data.mode;
+        }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
+      }
+    }
+    class Rotate_Rotate extends(null && ValueWithRandom){
+      constructor() {
+        super();
+        this.animation = new RotateAnimation;
+        this.direction = "clockwise";
+        this.path = false;
+        this.value = 0;
+      }
+      load(data) {
+        if (!data) {
+          return;
         }
-        if (data.startValue !== undefined) {
-          this.startValue = data.startValue;
+        super.load(data);
+        if (data.direction !== undefined) {
+          this.direction = data.direction;
+        }
+        this.animation.load(data.animation);
+        if (data.path !== undefined) {
+          this.path = data.path;
         }
       }
     }
-    class ParticlesOptions_ParticlesOptions {
+    class Shape_Shape {
       constructor() {
-        this.bounce = new Bounce;
-        this.collisions = new Collisions;
-        this.color = new AnimatableColor;
-        this.destroy = new Destroy;
-        this.gradient = [];
-        this.groups = {};
-        this.life = new Life;
-        this.links = new Links;
-        this.move = new Move;
-        this.number = new ParticlesNumber;
+        this.options = {};
+        this.type = "circle";
+      }
+      get image() {
+        var _a;
+        return (_a = this.options["image"]) !== null && _a !== void 0 ? _a : this.options["images"];
+      }
+      set image(value) {
+        this.options["image"] = value;
+        this.options["images"] = value;
+      }
+      get custom() {
+        return this.options;
+      }
+      set custom(value) {
+        this.options = value;
+      }
+      get images() {
+        return this.image;
+      }
+      set images(value) {
+        this.image = value;
+      }
+      get stroke() {
+        return [];
+      }
+      set stroke(_value) {}
+      get character() {
+        var _a;
+        return (_a = this.options["character"]) !== null && _a !== void 0 ? _a : this.options["char"];
+      }
+      set character(value) {
+        this.options["character"] = value;
+        this.options["char"] = value;
+      }
+      get polygon() {
+        var _a;
+        return (_a = this.options["polygon"]) !== null && _a !== void 0 ? _a : this.options["star"];
+      }
+      set polygon(value) {
+        this.options["polygon"] = value;
+        this.options["star"] = value;
+      }
+      load(data) {
+        var _a, _b, _c;
+        if (data === undefined) {
+          return;
+        }
+        const options = (_a = data.options) !== null && _a !== void 0 ? _a : data.custom;
+        if (options !== undefined) {
+          for (const shape in options) {
+            const item = options[shape];
+            if (item !== undefined) {
+              this.options[shape] = deepExtend((_b = this.options[shape]) !== null && _b !== void 0 ? _b : {}, item);
+            }
+          }
+        }
+        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;
+        }
+      }
+      loadShape(item, mainKey, altKey, altOverride) {
+        var _a, _b, _c, _d;
+        if (item === undefined) {
+          return;
+        }
+        if (item instanceof Array) {
+          if (!(this.options[mainKey] instanceof Array)) {
+            this.options[mainKey] = [];
+            if (!this.options[altKey] || altOverride) {
+              this.options[altKey] = [];
+            }
+          }
+          this.options[mainKey] = deepExtend((_a = this.options[mainKey]) !== null && _a !== void 0 ? _a : [], item);
+          if (!this.options[altKey] || altOverride) {
+            this.options[altKey] = deepExtend((_b = this.options[altKey]) !== null && _b !== void 0 ? _b : [], item);
+          }
+        } else {
+          if (this.options[mainKey] instanceof Array) {
+            this.options[mainKey] = {};
+            if (!this.options[altKey] || altOverride) {
+              this.options[altKey] = {};
+            }
+          }
+          this.options[mainKey] = deepExtend((_c = this.options[mainKey]) !== null && _c !== void 0 ? _c : {}, item);
+          if (!this.options[altKey] || altOverride) {
+            this.options[altKey] = deepExtend((_d = this.options[altKey]) !== null && _d !== void 0 ? _d : {}, item);
+          }
+        }
+      }
+    }
+    class Size_Size extends(null && ValueWithRandom){
+      constructor() {
+        super();
+        this.animation = new SizeAnimation;
+        this.random.minimumValue = 1;
+        this.value = 3;
+      }
+      get anim() {
+        return this.animation;
+      }
+      set anim(value) {
+        this.animation = value;
+      }
+      load(data) {
+        var _a;
+        if (!data) {
+          return;
+        }
+        super.load(data);
+        const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+        if (animation !== undefined) {
+          this.animation.load(animation);
+          this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
+        }
+      }
+    }
+    class Stroke_Stroke {
+      constructor() {
+        this.width = 0;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.color !== undefined) {
+          this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.width !== undefined) {
+          this.width = data.width;
+        }
+        if (data.opacity !== undefined) {
+          this.opacity = data.opacity;
+        }
+      }
+    }
+    class Tilt_Tilt extends(null && ValueWithRandom){
+      constructor() {
+        super();
+        this.animation = new TiltAnimation;
+        this.direction = "clockwise";
+        this.enable = false;
+        this.value = 0;
+      }
+      load(data) {
+        if (!data) {
+          return;
+        }
+        super.load(data);
+        this.animation.load(data.animation);
+        if (data.direction !== undefined) {
+          this.direction = data.direction;
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+      }
+    }
+    class Wobble_Wobble {
+      constructor() {
+        this.distance = 5;
+        this.enable = false;
+        this.speed = 50;
+      }
+      load(data) {
+        if (!data) {
+          return;
+        }
+        if (data.distance !== undefined) {
+          this.distance = setRangeValue(data.distance);
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+        if (data.speed !== undefined) {
+          this.speed = setRangeValue(data.speed);
+        }
+      }
+    }
+    class ZIndex_ZIndex extends(null && ValueWithRandom){
+      constructor() {
+        super();
+        this.opacityRate = 1;
+        this.sizeRate = 1;
+        this.velocityRate = 1;
+      }
+      load(data) {
+        super.load(data);
+        if (!data) {
+          return;
+        }
+        if (data.opacityRate !== undefined) {
+          this.opacityRate = data.opacityRate;
+        }
+        if (data.sizeRate !== undefined) {
+          this.sizeRate = data.sizeRate;
+        }
+        if (data.velocityRate !== undefined) {
+          this.velocityRate = data.velocityRate;
+        }
+      }
+    }
+    class ParticlesOptions_ParticlesOptions {
+      constructor() {
+        this.bounce = new Bounce;
+        this.collisions = new Collisions;
+        this.color = new AnimatableColor;
+        this.destroy = new Destroy;
+        this.gradient = [];
+        this.groups = {};
+        this.life = new Life;
+        this.links = new Links;
+        this.move = new Move;
+        this.number = new ParticlesNumber;
         this.opacity = new Opacity;
         this.orbit = new Orbit;
         this.reduceDuplicates = false;
@@ -2178,25 +2283,215 @@
         }
       }
     }
-    const fixOutMode = data => {
-      if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
-        if (data.coord > data.maxCoord - data.radius * 2) {
-          data.setCb(-data.radius);
-        } else if (data.coord < data.radius * 2) {
-          data.setCb(data.radius);
+    class Responsive_Responsive {
+      constructor() {
+        this.maxWidth = Infinity;
+        this.options = {};
+        this.mode = "canvas";
+      }
+      load(data) {
+        if (!data) {
+          return;
+        }
+        if (data.maxWidth !== undefined) {
+          this.maxWidth = data.maxWidth;
+        }
+        if (data.mode !== undefined) {
+          if (data.mode === "screen") {
+            this.mode = "screen";
+          } else {
+            this.mode = "canvas";
+          }
+        }
+        if (data.options !== undefined) {
+          this.options = deepExtend({}, data.options);
         }
       }
-    };
-    class Particle_Particle {
-      constructor(id, container, position, overrideOptions, group) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        this.id = id;
-        this.container = container;
-        this.group = group;
-        this.fill = true;
-        this.close = true;
-        this.lastPathTime = 0;
-        this.destroyed = false;
+    }
+    class Theme_Theme {
+      constructor() {
+        this.name = "";
+        this.default = new ThemeDefault;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.name !== undefined) {
+          this.name = data.name;
+        }
+        this.default.load(data.default);
+        if (data.options !== undefined) {
+          this.options = deepExtend({}, data.options);
+        }
+      }
+    }
+    var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+      return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    };
+    var _Options_instances, _Options_findDefaultTheme;
+    class Options_Options {
+      constructor() {
+        _Options_instances.add(this);
+        this.autoPlay = true;
+        this.background = new Background;
+        this.backgroundMask = new BackgroundMask;
+        this.fullScreen = new FullScreen;
+        this.detectRetina = true;
+        this.duration = 0;
+        this.fpsLimit = 60;
+        this.interactivity = new Interactivity;
+        this.manualParticles = [];
+        this.motion = new Motion;
+        this.particles = new ParticlesOptions;
+        this.pauseOnBlur = true;
+        this.pauseOnOutsideViewport = true;
+        this.responsive = [];
+        this.style = {};
+        this.themes = [];
+        this.zLayers = 100;
+      }
+      get fps_limit() {
+        return this.fpsLimit;
+      }
+      set fps_limit(value) {
+        this.fpsLimit = value;
+      }
+      get retina_detect() {
+        return this.detectRetina;
+      }
+      set retina_detect(value) {
+        this.detectRetina = value;
+      }
+      get backgroundMode() {
+        return this.fullScreen;
+      }
+      set backgroundMode(value) {
+        this.fullScreen.load(value);
+      }
+      load(data) {
+        var _a, _b, _c, _d, _e;
+        if (data === undefined) {
+          return;
+        }
+        if (data.preset !== undefined) {
+          if (data.preset instanceof Array) {
+            for (const preset of data.preset) {
+              this.importPreset(preset);
+            }
+          } else {
+            this.importPreset(data.preset);
+          }
+        }
+        if (data.autoPlay !== undefined) {
+          this.autoPlay = data.autoPlay;
+        }
+        const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
+        if (detectRetina !== undefined) {
+          this.detectRetina = detectRetina;
+        }
+        if (data.duration !== undefined) {
+          this.duration = data.duration;
+        }
+        const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
+        if (fpsLimit !== undefined) {
+          this.fpsLimit = fpsLimit;
+        }
+        if (data.pauseOnBlur !== undefined) {
+          this.pauseOnBlur = data.pauseOnBlur;
+        }
+        if (data.pauseOnOutsideViewport !== undefined) {
+          this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
+        }
+        if (data.zLayers !== undefined) {
+          this.zLayers = data.zLayers;
+        }
+        this.background.load(data.background);
+        const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
+        if (typeof fullScreen === "boolean") {
+          this.fullScreen.enable = fullScreen;
+        } else {
+          this.fullScreen.load(fullScreen);
+        }
+        this.backgroundMask.load(data.backgroundMask);
+        this.interactivity.load(data.interactivity);
+        if (data.manualParticles !== undefined) {
+          this.manualParticles = data.manualParticles.map((t => {
+            const tmp = new ManualParticle;
+            tmp.load(t);
+            return tmp;
+          }));
+        }
+        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) {
+            const optResponsive = new Responsive;
+            optResponsive.load(responsive);
+            this.responsive.push(optResponsive);
+          }
+        }
+        this.responsive.sort(((a, b) => a.maxWidth - b.maxWidth));
+        if (data.themes !== undefined) {
+          for (const theme of data.themes) {
+            const optTheme = new Theme;
+            optTheme.load(theme);
+            this.themes.push(optTheme);
+          }
+        }
+        this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "dark")) === null || _d === void 0 ? void 0 : _d.name;
+        this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "light")) === null || _e === void 0 ? void 0 : _e.name;
+      }
+      setTheme(name) {
+        if (name) {
+          const chosenTheme = this.themes.find((theme => theme.name === name));
+          if (chosenTheme) {
+            this.load(chosenTheme.options);
+          }
+        } else {
+          const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? "dark" : "light");
+          if (defaultTheme) {
+            this.load(defaultTheme.options);
+          }
+        }
+      }
+      setResponsive(width, pxRatio, defaultOptions) {
+        this.load(defaultOptions);
+        const responsiveOptions = this.responsive.find((t => t.mode === "screen" && screen ? t.maxWidth * pxRatio > screen.availWidth : t.maxWidth * pxRatio > width));
+        this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
+        return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
+      }
+      importPreset(preset) {
+        this.load(Plugins.getPreset(preset));
+      }
+    }
+    _Options_instances = new WeakSet, _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+      var _a;
+      return (_a = this.themes.find((theme => theme.default.value && theme.default.mode === mode))) !== null && _a !== void 0 ? _a : this.themes.find((theme => theme.default.value && theme.default.mode === "any"));
+    };
+    const fixOutMode = data => {
+      if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
+        if (data.coord > data.maxCoord - data.radius * 2) {
+          data.setCb(-data.radius);
+        } else if (data.coord < data.radius * 2) {
+          data.setCb(data.radius);
+        }
+      }
+    };
+    class Particle_Particle {
+      constructor(id, container, position, overrideOptions, group) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        this.id = id;
+        this.container = container;
+        this.group = group;
+        this.fill = true;
+        this.close = true;
+        this.lastPathTime = 0;
+        this.destroyed = false;
         this.unbreakable = false;
         this.splitCount = 0;
         this.misplaced = false;
@@ -2910,301 +3205,6 @@
         }
       }
     }
-    class Trail_Trail {
-      constructor() {
-        this.delay = 1;
-        this.pauseOnStop = false;
-        this.quantity = 1;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.delay !== undefined) {
-          this.delay = data.delay;
-        }
-        if (data.quantity !== undefined) {
-          this.quantity = data.quantity;
-        }
-        if (data.particles !== undefined) {
-          this.particles = deepExtend({}, data.particles);
-        }
-        if (data.pauseOnStop !== undefined) {
-          this.pauseOnStop = data.pauseOnStop;
-        }
-      }
-    }
-    class Modes_Modes {
-      constructor() {
-        this.attract = new Attract;
-        this.bounce = new Bounce;
-        this.bubble = new Bubble;
-        this.connect = new Connect;
-        this.grab = new Grab;
-        this.light = new Light;
-        this.push = new Push;
-        this.remove = new Remove;
-        this.repulse = new Repulse;
-        this.slow = new Slow;
-        this.trail = new Trail;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        this.attract.load(data.attract);
-        this.bubble.load(data.bubble);
-        this.connect.load(data.connect);
-        this.grab.load(data.grab);
-        this.light.load(data.light);
-        this.push.load(data.push);
-        this.remove.load(data.remove);
-        this.repulse.load(data.repulse);
-        this.slow.load(data.slow);
-        this.trail.load(data.trail);
-      }
-    }
-    class Interactivity_Interactivity {
-      constructor() {
-        this.detectsOn = "window";
-        this.events = new Events;
-        this.modes = new Modes;
-      }
-      get detect_on() {
-        return this.detectsOn;
-      }
-      set detect_on(value) {
-        this.detectsOn = value;
-      }
-      load(data) {
-        var _a, _b, _c;
-        if (data === undefined) {
-          return;
-        }
-        const detectsOn = (_a = data.detectsOn) !== null && _a !== void 0 ? _a : data.detect_on;
-        if (detectsOn !== undefined) {
-          this.detectsOn = detectsOn;
-        }
-        this.events.load(data.events);
-        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("slow") < 0) {
-              this.events.onHover.mode.push("slow");
-            }
-          } else if (this.events.onHover.mode !== "slow") {
-            this.events.onHover.mode = [ this.events.onHover.mode, "slow" ];
-          }
-        }
-      }
-    }
-    class Theme_Theme {
-      constructor() {
-        this.name = "";
-        this.default = new ThemeDefault;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.name !== undefined) {
-          this.name = data.name;
-        }
-        this.default.load(data.default);
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
-        }
-      }
-    }
-    class ManualParticle_ManualParticle {
-      load(data) {
-        var _a, _b;
-        if (!data) {
-          return;
-        }
-        if (data.position !== undefined) {
-          this.position = {
-            x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
-            y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50
-          };
-        }
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
-        }
-      }
-    }
-    class Responsive_Responsive {
-      constructor() {
-        this.maxWidth = Infinity;
-        this.options = {};
-        this.mode = "canvas";
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        if (data.maxWidth !== undefined) {
-          this.maxWidth = data.maxWidth;
-        }
-        if (data.mode !== undefined) {
-          if (data.mode === "screen") {
-            this.mode = "screen";
-          } else {
-            this.mode = "canvas";
-          }
-        }
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
-        }
-      }
-    }
-    var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
-      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-      return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    };
-    var _Options_instances, _Options_findDefaultTheme;
-    class Options_Options {
-      constructor() {
-        _Options_instances.add(this);
-        this.autoPlay = true;
-        this.background = new Background;
-        this.backgroundMask = new BackgroundMask;
-        this.fullScreen = new FullScreen;
-        this.detectRetina = true;
-        this.duration = 0;
-        this.fpsLimit = 60;
-        this.interactivity = new Interactivity;
-        this.manualParticles = [];
-        this.motion = new Motion;
-        this.particles = new ParticlesOptions;
-        this.pauseOnBlur = true;
-        this.pauseOnOutsideViewport = true;
-        this.responsive = [];
-        this.style = {};
-        this.themes = [];
-        this.zLayers = 100;
-      }
-      get fps_limit() {
-        return this.fpsLimit;
-      }
-      set fps_limit(value) {
-        this.fpsLimit = value;
-      }
-      get retina_detect() {
-        return this.detectRetina;
-      }
-      set retina_detect(value) {
-        this.detectRetina = value;
-      }
-      get backgroundMode() {
-        return this.fullScreen;
-      }
-      set backgroundMode(value) {
-        this.fullScreen.load(value);
-      }
-      load(data) {
-        var _a, _b, _c, _d, _e;
-        if (data === undefined) {
-          return;
-        }
-        if (data.preset !== undefined) {
-          if (data.preset instanceof Array) {
-            for (const preset of data.preset) {
-              this.importPreset(preset);
-            }
-          } else {
-            this.importPreset(data.preset);
-          }
-        }
-        if (data.autoPlay !== undefined) {
-          this.autoPlay = data.autoPlay;
-        }
-        const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
-        if (detectRetina !== undefined) {
-          this.detectRetina = detectRetina;
-        }
-        if (data.duration !== undefined) {
-          this.duration = data.duration;
-        }
-        const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
-        if (fpsLimit !== undefined) {
-          this.fpsLimit = fpsLimit;
-        }
-        if (data.pauseOnBlur !== undefined) {
-          this.pauseOnBlur = data.pauseOnBlur;
-        }
-        if (data.pauseOnOutsideViewport !== undefined) {
-          this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
-        }
-        if (data.zLayers !== undefined) {
-          this.zLayers = data.zLayers;
-        }
-        this.background.load(data.background);
-        const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
-        if (typeof fullScreen === "boolean") {
-          this.fullScreen.enable = fullScreen;
-        } else {
-          this.fullScreen.load(fullScreen);
-        }
-        this.backgroundMask.load(data.backgroundMask);
-        this.interactivity.load(data.interactivity);
-        if (data.manualParticles !== undefined) {
-          this.manualParticles = data.manualParticles.map((t => {
-            const tmp = new ManualParticle;
-            tmp.load(t);
-            return tmp;
-          }));
-        }
-        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) {
-            const optResponsive = new Responsive;
-            optResponsive.load(responsive);
-            this.responsive.push(optResponsive);
-          }
-        }
-        this.responsive.sort(((a, b) => a.maxWidth - b.maxWidth));
-        if (data.themes !== undefined) {
-          for (const theme of data.themes) {
-            const optTheme = new Theme;
-            optTheme.load(theme);
-            this.themes.push(optTheme);
-          }
-        }
-        this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "dark")) === null || _d === void 0 ? void 0 : _d.name;
-        this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "light")) === null || _e === void 0 ? void 0 : _e.name;
-      }
-      setTheme(name) {
-        if (name) {
-          const chosenTheme = this.themes.find((theme => theme.name === name));
-          if (chosenTheme) {
-            this.load(chosenTheme.options);
-          }
-        } else {
-          const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? "dark" : "light");
-          if (defaultTheme) {
-            this.load(defaultTheme.options);
-          }
-        }
-      }
-      setResponsive(width, pxRatio, defaultOptions) {
-        this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find((t => t.mode === "screen" && screen ? t.maxWidth * pxRatio > screen.availWidth : t.maxWidth * pxRatio > width));
-        this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
-        return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
-      }
-      importPreset(preset) {
-        this.load(Plugins.getPreset(preset));
-      }
-    }
-    _Options_instances = new WeakSet, _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
-      var _a;
-      return (_a = this.themes.find((theme => theme.default.value && theme.default.mode === mode))) !== null && _a !== void 0 ? _a : this.themes.find((theme => theme.default.value && theme.default.mode === "any"));
-    };
     class Container_Container {
       constructor(id, sourceOptions, ...presets) {
         this.id = id;
@@ -4990,8 +4990,8 @@
         }
       }
     }
-    async function loadOutModesUpdater(tsParticles) {
-      await tsParticles.addParticleUpdater("outModes", (container => new OutOfCanvasUpdater(container)));
+    async function loadOutModesUpdater(engine) {
+      await engine.addParticleUpdater("outModes", (container => new OutOfCanvasUpdater(container)));
     }
     return __webpack_exports__;
   }();