tsparticles 1.39.0 → 1.40.0

package/tsparticles.plugins.emitters.js

@@ -43,6 +43,31 @@
         return loadEmittersPlugin;
       }
     });
+    class CircleShape {
+      randomPosition(position, size, fill) {
+        const generateTheta = (x, y) => {
+          const u = Math.random() / 4;
+          const theta = Math.atan(y / x * Math.tan(2 * Math.PI * u));
+          const v = Math.random();
+          if (v < .25) {
+            return theta;
+          } else if (v < .5) {
+            return Math.PI - theta;
+          } else if (v < .75) {
+            return Math.PI + theta;
+          } else {
+            return -theta;
+          }
+        };
+        const radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
+        const [a, b] = [ size.width / 2, size.height / 2 ];
+        const randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
+        return {
+          x: position.x + randomRadius * Math.cos(randomTheta),
+          y: position.y + randomRadius * Math.sin(randomTheta)
+        };
+      }
+    }
     class Circle_Circle extends(null && Range){
       constructor(x, y, radius) {
         super(x, y);
@@ -506,15 +531,32 @@
         }
       }
     }
+    var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+      return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    };
+    var _InteractionManager_engine;
     class InteractionManager_InteractionManager {
-      constructor(container) {
+      constructor(engine, container) {
         this.container = container;
+        _InteractionManager_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
         this.externalInteractors = [];
         this.particleInteractors = [];
         this.init();
       }
       init() {
-        const interactors = Plugins.getInteractors(this.container, true);
+        const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
+        this.externalInteractors = [];
+        this.particleInteractors = [];
         for (const interactor of interactors) {
           switch (interactor.type) {
            case 0:
@@ -545,6 +587,7 @@
         }
       }
     }
+    _InteractionManager_engine = new WeakMap;
     function applyDistance(particle) {
       const initialPosition = particle.initialPosition;
       const {dx: dx, dy: dy} = getDistances(initialPosition, particle.position);
@@ -718,26 +761,38 @@
         return proximityFactor / slowFactor;
       }
     }
-    const plugins = null && [];
-    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_Plugins {
-      static getPlugin(plugin) {
-        return plugins.find((t => t.id === plugin));
+    var Plugins_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var _Plugins_engine;
+    class Plugins {
+      constructor(engine) {
+        _Plugins_engine.set(this, void 0);
+        Plugins_classPrivateFieldSet(this, _Plugins_engine, engine, "f");
+        this.plugins = [];
+        this.interactorsInitializers = new Map;
+        this.updatersInitializers = new Map;
+        this.interactors = new Map;
+        this.updaters = new Map;
+        this.presets = new Map;
+        this.drawers = new Map;
+        this.pathGenerators = new Map;
+      }
+      getPlugin(plugin) {
+        return this.plugins.find((t => t.id === plugin));
       }
-      static addPlugin(plugin) {
-        if (!Plugins_Plugins.getPlugin(plugin.id)) {
-          plugins.push(plugin);
+      addPlugin(plugin) {
+        if (!this.getPlugin(plugin.id)) {
+          this.plugins.push(plugin);
         }
       }
-      static getAvailablePlugins(container) {
+      getAvailablePlugins(container) {
         const res = new Map;
-        for (const plugin of plugins) {
+        for (const plugin of this.plugins) {
           if (!plugin.needsPlugin(container.actualOptions)) {
             continue;
           }
@@ -745,61 +800,62 @@
         }
         return res;
       }
-      static loadOptions(options, sourceOptions) {
-        for (const plugin of plugins) {
+      loadOptions(options, sourceOptions) {
+        for (const plugin of this.plugins) {
           plugin.loadOptions(options, sourceOptions);
         }
       }
-      static getPreset(preset) {
-        return presets.get(preset);
+      getPreset(preset) {
+        return this.presets.get(preset);
       }
-      static addPreset(presetKey, options, override = false) {
-        if (override || !Plugins_Plugins.getPreset(presetKey)) {
-          presets.set(presetKey, options);
+      addPreset(presetKey, options, override = false) {
+        if (override || !this.getPreset(presetKey)) {
+          this.presets.set(presetKey, options);
         }
       }
-      static addShapeDrawer(type, drawer) {
-        if (!Plugins_Plugins.getShapeDrawer(type)) {
-          drawers.set(type, drawer);
+      addShapeDrawer(type, drawer) {
+        if (!this.getShapeDrawer(type)) {
+          this.drawers.set(type, drawer);
         }
       }
-      static getShapeDrawer(type) {
-        return drawers.get(type);
+      getShapeDrawer(type) {
+        return this.drawers.get(type);
       }
-      static getSupportedShapes() {
-        return drawers.keys();
+      getSupportedShapes() {
+        return this.drawers.keys();
       }
-      static getPathGenerator(type) {
-        return pathGenerators.get(type);
+      getPathGenerator(type) {
+        return this.pathGenerators.get(type);
       }
-      static addPathGenerator(type, pathGenerator) {
-        if (!Plugins_Plugins.getPathGenerator(type)) {
-          pathGenerators.set(type, pathGenerator);
+      addPathGenerator(type, pathGenerator) {
+        if (!this.getPathGenerator(type)) {
+          this.pathGenerators.set(type, pathGenerator);
         }
       }
-      static getInteractors(container, force = false) {
-        let res = interactors.get(container);
+      getInteractors(container, force = false) {
+        let res = this.interactors.get(container);
         if (!res || force) {
-          res = [ ...interactorsInitializers.values() ].map((t => t(container)));
-          interactors.set(container, res);
+          res = [ ...this.interactorsInitializers.values() ].map((t => t(container)));
+          this.interactors.set(container, res);
         }
         return res;
       }
-      static addInteractor(name, initInteractor) {
-        interactorsInitializers.set(name, initInteractor);
+      addInteractor(name, initInteractor) {
+        this.interactorsInitializers.set(name, initInteractor);
       }
-      static getUpdaters(container, force = false) {
-        let res = updaters.get(container);
+      getUpdaters(container, force = false) {
+        let res = this.updaters.get(container);
         if (!res || force) {
-          res = [ ...updatersInitializers.values() ].map((t => t(container)));
-          updaters.set(container, res);
+          res = [ ...this.updatersInitializers.values() ].map((t => t(container)));
+          this.updaters.set(container, res);
         }
         return res;
       }
-      static addParticleUpdater(name, initUpdater) {
-        updatersInitializers.set(name, initUpdater);
+      addParticleUpdater(name, initUpdater) {
+        this.updatersInitializers.set(name, initUpdater);
       }
     }
+    _Plugins_engine = new WeakMap;
     class QuadTree_QuadTree {
       constructor(rectangle, capacity) {
         this.rectangle = rectangle;
@@ -1170,517 +1226,357 @@
         }));
       }
     }
-    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;
+        const detectsOn = (_a = data.detectsOn) !== null && _a !== void 0 ? _a : data.detect_on;
+        if (detectsOn !== undefined) {
+          this.detectsOn = detectsOn;
         }
-        this.delay.load(data.delay);
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
+        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" ];
+          }
         }
-        this.generator = data.generator;
-        if (data.options) {
-          this.options = deepExtend(this.options, 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 Spin_Spin {
+    class AnimatableGradient_AnimatableGradient {
       constructor() {
-        this.acceleration = 0;
-        this.enable = false;
+        this.angle = new GradientAngle;
+        this.colors = [];
+        this.type = "random";
       }
       load(data) {
         if (!data) {
           return;
         }
-        if (data.acceleration !== undefined) {
-          this.acceleration = setRangeValue(data.acceleration);
+        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.enable !== undefined) {
-          this.enable = data.enable;
+        if (data.type !== undefined) {
+          this.type = data.type;
         }
-        this.position = data.position ? deepExtend({}, data.position) : undefined;
       }
     }
-    class Move_Move {
+    class GradientAngle {
       constructor() {
-        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;
-      }
-      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.value = 0;
+        this.animation = new GradientAngleAnimation;
+        this.direction = "clockwise";
       }
       load(data) {
-        var _a, _b, _c;
-        if (data === undefined) {
+        if (!data) {
           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;
+        this.animation.load(data.animation);
+        if (data.value !== undefined) {
+          this.value = data.value;
         }
         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);
+      }
+    }
+    class GradientColorOpacity {
+      constructor() {
+        this.value = 0;
+        this.animation = new GradientColorOpacityAnimation;
+      }
+      load(data) {
+        if (!data) {
+          return;
         }
-        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;
+        this.animation.load(data.animation);
+        if (data.value !== undefined) {
+          this.value = setRangeValue(data.value);
         }
       }
     }
-    class Opacity_Opacity extends(null && ValueWithRandom){
+    class AnimatableGradientColor {
       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.stop = 0;
+        this.value = new AnimatableColor;
       }
       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);
+        if (data.stop !== undefined) {
+          this.stop = data.stop;
+        }
+        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 Shape_Shape {
+    class GradientAngleAnimation {
       constructor() {
-        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;
+        this.count = 0;
+        this.enable = false;
+        this.speed = 0;
+        this.sync = false;
       }
       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);
-            }
-          }
+        if (data.count !== undefined) {
+          this.count = data.count;
         }
-        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;
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
         }
-      }
-      loadShape(item, mainKey, altKey, altOverride) {
-        var _a, _b, _c, _d;
-        if (item === undefined) {
-          return;
+        if (data.speed !== undefined) {
+          this.speed = data.speed;
         }
-        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);
-          }
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
         }
       }
     }
-    class Size_Size extends(null && ValueWithRandom){
+    class GradientColorOpacityAnimation {
       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.count = 0;
+        this.enable = false;
+        this.speed = 0;
+        this.sync = false;
+        this.startValue = "random";
       }
       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);
+        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 Rotate_Rotate extends(null && ValueWithRandom){
+    class ValueWithRandom_ValueWithRandom {
       constructor() {
-        super();
-        this.animation = new RotateAnimation;
-        this.direction = "clockwise";
-        this.path = false;
+        this.random = new Random;
         this.value = 0;
       }
       load(data) {
         if (!data) {
           return;
         }
-        super.load(data);
-        if (data.direction !== undefined) {
-          this.direction = data.direction;
+        if (typeof data.random === "boolean") {
+          this.random.enable = data.random;
+        } else {
+          this.random.load(data.random);
         }
-        this.animation.load(data.animation);
-        if (data.path !== undefined) {
-          this.path = data.path;
+        if (data.value !== undefined) {
+          this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
         }
       }
     }
-    class OptionsColor_OptionsColor {
+    class BounceFactor_BounceFactor extends(null && ValueWithRandom){
       constructor() {
-        this.value = "#fff";
+        super();
+        this.random.minimumValue = .1;
+        this.value = 1;
       }
-      static create(source, data) {
-        const color = new OptionsColor_OptionsColor;
-        color.load(source);
-        if (data !== undefined) {
-          if (typeof data === "string" || data instanceof Array) {
-            color.load({
-              value: data
-            });
-          } else {
-            color.load(data);
-          }
-        }
-        return color;
+    }
+    class Bounce_Bounce {
+      constructor() {
+        this.horizontal = new BounceFactor;
+        this.vertical = new BounceFactor;
       }
       load(data) {
-        if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
+        if (!data) {
           return;
         }
-        this.value = data.value;
+        this.horizontal.load(data.horizontal);
+        this.vertical.load(data.vertical);
       }
     }
-    class ColorAnimation {
+    class Collisions_Collisions {
       constructor() {
-        this.count = 0;
+        this.bounce = new Bounce;
         this.enable = false;
-        this.offset = 0;
-        this.speed = 1;
-        this.sync = true;
+        this.mode = "bounce";
+        this.overlap = new CollisionsOverlap;
       }
       load(data) {
         if (data === undefined) {
           return;
         }
-        if (data.count !== undefined) {
-          this.count = data.count;
-        }
+        this.bounce.load(data.bounce);
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
-        if (data.offset !== undefined) {
-          this.offset = NumberUtils_setRangeValue(data.offset);
-        }
-        if (data.speed !== undefined) {
-          this.speed = data.speed;
-        }
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
+        if (data.mode !== undefined) {
+          this.mode = data.mode;
         }
+        this.overlap.load(data.overlap);
       }
     }
-    class HslAnimation {
+    class SplitFactor_SplitFactor extends(null && ValueWithRandom){
       constructor() {
-        this.h = new ColorAnimation;
-        this.s = new ColorAnimation;
-        this.l = new ColorAnimation;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        this.h.load(data.h);
-        this.s.load(data.s);
-        this.l.load(data.l);
+        super();
+        this.value = 3;
       }
     }
-    class AnimatableColor_AnimatableColor extends OptionsColor_OptionsColor {
+    class SplitRate_SplitRate extends(null && 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;
-      }
-      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);
-          }
-        }
+        this.value = {
+          min: 4,
+          max: 9
+        };
       }
     }
-    class Stroke_Stroke {
+    class Split_Split {
       constructor() {
-        this.width = 0;
+        this.count = 1;
+        this.factor = new SplitFactor;
+        this.rate = new SplitRate;
+        this.sizeOffset = true;
       }
       load(data) {
-        if (data === undefined) {
+        if (!data) {
           return;
         }
-        if (data.color !== undefined) {
-          this.color = AnimatableColor.create(this.color, data.color);
+        if (data.count !== undefined) {
+          this.count = data.count;
         }
-        if (data.width !== undefined) {
-          this.width = data.width;
+        this.factor.load(data.factor);
+        this.rate.load(data.rate);
+        if (data.particles !== undefined) {
+          this.particles = deepExtend({}, data.particles);
         }
-        if (data.opacity !== undefined) {
-          this.opacity = data.opacity;
+        if (data.sizeOffset !== undefined) {
+          this.sizeOffset = data.sizeOffset;
         }
       }
     }
-    class BounceFactor_BounceFactor extends(null && ValueWithRandom){
-      constructor() {
-        super();
-        this.random.minimumValue = .1;
-        this.value = 1;
-      }
-    }
-    class Bounce_Bounce {
+    class Destroy_Destroy {
       constructor() {
-        this.horizontal = new BounceFactor;
-        this.vertical = new BounceFactor;
+        this.mode = "none";
+        this.split = new Split;
       }
       load(data) {
         if (!data) {
           return;
         }
-        this.horizontal.load(data.horizontal);
-        this.vertical.load(data.vertical);
-      }
-    }
-    class Collisions_Collisions {
-      constructor() {
-        this.bounce = new Bounce;
-        this.enable = false;
-        this.mode = "bounce";
-        this.overlap = new CollisionsOverlap;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        this.bounce.load(data.bounce);
-        if (data.enable !== undefined) {
-          this.enable = data.enable;
-        }
         if (data.mode !== undefined) {
           this.mode = data.mode;
         }
-        this.overlap.load(data.overlap);
+        this.split.load(data.split);
       }
     }
     class LifeDelay_LifeDelay extends(null && ValueWithRandom){
@@ -1731,151 +1627,190 @@
         this.duration.load(data.duration);
       }
     }
-    class SplitFactor_SplitFactor extends(null && ValueWithRandom){
-      constructor() {
-        super();
-        this.value = 3;
-      }
-    }
-    class SplitRate_SplitRate extends(null && ValueWithRandom){
+    class PathDelay_PathDelay extends(null && ValueWithRandom){
       constructor() {
         super();
-        this.value = {
-          min: 4,
-          max: 9
-        };
-      }
-    }
-    class Split_Split {
-      constructor() {
-        this.count = 1;
-        this.factor = new SplitFactor;
-        this.rate = new SplitRate;
-        this.sizeOffset = true;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        if (data.count !== undefined) {
-          this.count = data.count;
-        }
-        this.factor.load(data.factor);
-        this.rate.load(data.rate);
-        if (data.particles !== undefined) {
-          this.particles = deepExtend({}, data.particles);
-        }
-        if (data.sizeOffset !== undefined) {
-          this.sizeOffset = data.sizeOffset;
-        }
-      }
-    }
-    class Destroy_Destroy {
-      constructor() {
-        this.mode = "none";
-        this.split = new Split;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
-        if (data.mode !== undefined) {
-          this.mode = data.mode;
-        }
-        this.split.load(data.split);
       }
     }
-    class Wobble_Wobble {
+    class Path_Path {
       constructor() {
-        this.distance = 5;
+        this.clamp = true;
+        this.delay = new PathDelay;
         this.enable = false;
-        this.speed = 50;
+        this.options = {};
       }
       load(data) {
-        if (!data) {
+        if (data === undefined) {
           return;
         }
-        if (data.distance !== undefined) {
-          this.distance = setRangeValue(data.distance);
+        if (data.clamp !== undefined) {
+          this.clamp = data.clamp;
         }
+        this.delay.load(data.delay);
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
-        if (data.speed !== undefined) {
-          this.speed = setRangeValue(data.speed);
+        this.generator = data.generator;
+        if (data.options) {
+          this.options = deepExtend(this.options, data.options);
         }
       }
     }
-    class Tilt_Tilt extends(null && ValueWithRandom){
+    class Spin_Spin {
       constructor() {
-        super();
-        this.animation = new TiltAnimation;
-        this.direction = "clockwise";
+        this.acceleration = 0;
         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.acceleration !== undefined) {
+          this.acceleration = setRangeValue(data.acceleration);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
+        this.position = data.position ? deepExtend({}, data.position) : undefined;
       }
     }
-    class Roll_Roll {
+    class Move_Move {
       constructor() {
-        this.darken = new RollLight;
+        this.angle = new MoveAngle;
+        this.attract = new Attract;
+        this.decay = 0;
+        this.distance = {};
+        this.direction = "none";
+        this.drift = 0;
         this.enable = false;
-        this.enlighten = new RollLight;
-        this.mode = "vertical";
-        this.speed = 25;
-      }
-      load(data) {
-        if (!data) {
-          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);
-        }
+        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;
+      }
+      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.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 ZIndex_ZIndex extends(null && ValueWithRandom){
+    class Opacity_Opacity extends(null && ValueWithRandom){
       constructor() {
         super();
-        this.opacityRate = 1;
-        this.sizeRate = 1;
-        this.velocityRate = 1;
+        this.animation = new OpacityAnimation;
+        this.random.minimumValue = .1;
+        this.value = 1;
+      }
+      get anim() {
+        return this.animation;
+      }
+      set anim(value) {
+        this.animation = value;
       }
       load(data) {
-        super.load(data);
+        var _a;
         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;
+        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);
         }
       }
     }
@@ -1955,137 +1890,260 @@
         }
       }
     }
-    class AnimatableGradient_AnimatableGradient {
+    class Roll_Roll {
       constructor() {
-        this.angle = new GradientAngle;
-        this.colors = [];
-        this.type = "random";
+        this.darken = new RollLight;
+        this.enable = false;
+        this.enlighten = new RollLight;
+        this.mode = "vertical";
+        this.speed = 25;
       }
       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.backColor !== undefined) {
+          this.backColor = OptionsColor.create(this.backColor, data.backColor);
         }
-        if (data.type !== undefined) {
-          this.type = data.type;
+        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);
         }
       }
     }
-    class GradientAngle {
+    class Rotate_Rotate extends(null && ValueWithRandom){
       constructor() {
-        this.value = 0;
-        this.animation = new GradientAngleAnimation;
+        super();
+        this.animation = new RotateAnimation;
         this.direction = "clockwise";
+        this.path = false;
+        this.value = 0;
       }
       load(data) {
         if (!data) {
           return;
         }
-        this.animation.load(data.animation);
-        if (data.value !== undefined) {
-          this.value = data.value;
-        }
+        super.load(data);
         if (data.direction !== undefined) {
           this.direction = data.direction;
         }
-      }
-    }
-    class GradientColorOpacity {
-      constructor() {
-        this.value = 0;
-        this.animation = new GradientColorOpacityAnimation;
-      }
-      load(data) {
-        if (!data) {
-          return;
-        }
         this.animation.load(data.animation);
-        if (data.value !== undefined) {
-          this.value = setRangeValue(data.value);
+        if (data.path !== undefined) {
+          this.path = data.path;
         }
       }
     }
-    class AnimatableGradientColor {
+    class Shape_Shape {
       constructor() {
-        this.stop = 0;
-        this.value = new AnimatableColor;
+        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) {
-        if (!data) {
+        var _a, _b, _c;
+        if (data === undefined) {
           return;
         }
-        if (data.stop !== undefined) {
-          this.stop = data.stop;
-        }
-        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);
+        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;
+        }
       }
-    }
-    class GradientAngleAnimation {
-      constructor() {
-        this.count = 0;
+      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.speed = 0;
-        this.sync = false;
+        this.value = 0;
       }
       load(data) {
         if (!data) {
           return;
         }
-        if (data.count !== undefined) {
-          this.count = data.count;
+        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.speed !== undefined) {
-          this.speed = data.speed;
-        }
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
-        }
       }
     }
-    class GradientColorOpacityAnimation {
+    class Wobble_Wobble {
       constructor() {
-        this.count = 0;
+        this.distance = 5;
         this.enable = false;
-        this.speed = 0;
-        this.sync = false;
-        this.startValue = "random";
+        this.speed = 50;
       }
       load(data) {
         if (!data) {
           return;
         }
-        if (data.count !== undefined) {
-          this.count = data.count;
+        if (data.distance !== undefined) {
+          this.distance = setRangeValue(data.distance);
         }
         if (data.enable !== undefined) {
           this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-          this.speed = data.speed;
+          this.speed = setRangeValue(data.speed);
         }
-        if (data.sync !== undefined) {
-          this.sync = data.sync;
+      }
+    }
+    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.startValue !== undefined) {
-          this.startValue = data.startValue;
+        if (data.opacityRate !== undefined) {
+          this.opacityRate = data.opacityRate;
+        }
+        if (data.sizeRate !== undefined) {
+          this.sizeRate = data.sizeRate;
+        }
+        if (data.velocityRate !== undefined) {
+          this.velocityRate = data.velocityRate;
         }
       }
     }
@@ -2203,303 +2261,517 @@
         }
       }
     }
-    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";
       }
-    };
-    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;
-        this.retina = {
-          maxDistance: {}
-        };
-        const pxRatio = container.retina.pixelRatio;
-        const mainOptions = container.actualOptions;
-        const particlesOptions = new ParticlesOptions;
-        particlesOptions.load(mainOptions.particles);
-        const shapeType = particlesOptions.shape.type;
-        const reduceDuplicates = particlesOptions.reduceDuplicates;
-        this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
-        if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
-          if (overrideOptions.shape.type) {
-            const overrideShapeType = overrideOptions.shape.type;
-            this.shape = overrideShapeType instanceof Array ? itemFromArray(overrideShapeType, this.id, reduceDuplicates) : overrideShapeType;
-          }
-          const shapeOptions = new Shape;
-          shapeOptions.load(overrideOptions.shape);
-          if (this.shape) {
-            this.shapeData = this.loadShapeData(shapeOptions, reduceDuplicates);
-          }
-        } else {
-          this.shapeData = this.loadShapeData(particlesOptions.shape, reduceDuplicates);
-        }
-        if (overrideOptions !== undefined) {
-          particlesOptions.load(overrideOptions);
+      load(data) {
+        if (!data) {
+          return;
         }
-        if (((_a = this.shapeData) === null || _a === void 0 ? void 0 : _a.particles) !== undefined) {
-          particlesOptions.load((_b = this.shapeData) === null || _b === void 0 ? void 0 : _b.particles);
+        if (data.maxWidth !== undefined) {
+          this.maxWidth = data.maxWidth;
         }
-        this.fill = (_d = (_c = this.shapeData) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.fill;
-        this.close = (_f = (_e = this.shapeData) === null || _e === void 0 ? void 0 : _e.close) !== null && _f !== void 0 ? _f : this.close;
-        this.options = particlesOptions;
-        this.pathDelay = getValue(this.options.move.path.delay) * 1e3;
-        const zIndexValue = getRangeValue(this.options.zIndex.value);
-        container.retina.initParticle(this);
-        const sizeOptions = this.options.size, sizeRange = sizeOptions.value;
-        this.size = {
-          enable: sizeOptions.animation.enable,
-          value: getValue(sizeOptions) * container.retina.pixelRatio,
-          max: getRangeMax(sizeRange) * pxRatio,
-          min: getRangeMin(sizeRange) * pxRatio,
-          loops: 0,
-          maxLoops: sizeOptions.animation.count
-        };
-        const sizeAnimation = sizeOptions.animation;
-        if (sizeAnimation.enable) {
-          this.size.status = 0;
-          switch (sizeAnimation.startValue) {
-           case "min":
-            this.size.value = this.size.min;
-            this.size.status = 0;
-            break;
-
-           case "random":
-            this.size.value = randomInRange(this.size) * pxRatio;
-            this.size.status = Math.random() >= .5 ? 0 : 1;
-            break;
-
-           case "max":
-           default:
-            this.size.value = this.size.max;
-            this.size.status = 1;
-            break;
-          }
-          this.size.velocity = ((_g = this.retina.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
-          if (!sizeAnimation.sync) {
-            this.size.velocity *= Math.random();
+        if (data.mode !== undefined) {
+          if (data.mode === "screen") {
+            this.mode = "screen";
+          } else {
+            this.mode = "canvas";
           }
         }
-        this.direction = getParticleDirectionAngle(this.options.move.direction);
-        this.bubble = {
-          inRange: false
-        };
-        this.initialVelocity = this.calculateVelocity();
-        this.velocity = this.initialVelocity.copy();
-        this.moveDecay = 1 - getRangeValue(this.options.move.decay);
-        this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
-        this.initialPosition = this.position.copy();
-        this.offset = Vector.origin;
-        const particles = container.particles;
-        particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
-        particles.lastZIndex = this.position.z;
-        this.zIndexFactor = this.position.z / container.zLayers;
-        this.sides = 24;
-        let drawer = container.drawers.get(this.shape);
-        if (!drawer) {
-          drawer = Plugins.getShapeDrawer(this.shape);
-          if (drawer) {
-            container.drawers.set(this.shape, drawer);
-          }
+        if (data.options !== undefined) {
+          this.options = deepExtend({}, data.options);
         }
-        if (drawer === null || drawer === void 0 ? void 0 : drawer.loadShape) {
-          drawer === null || drawer === void 0 ? void 0 : drawer.loadShape(this);
-        }
-        const sideCountFunc = drawer === null || drawer === void 0 ? void 0 : drawer.getSidesCount;
-        if (sideCountFunc) {
-          this.sides = sideCountFunc(this);
-        }
-        this.life = this.loadLife();
-        this.spawning = this.life.delay > 0;
-        if (this.options.move.spin.enable) {
-          const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : {
-            x: 50,
-            y: 50
-          };
-          const spinCenter = {
-            x: spinPos.x / 100 * container.canvas.size.width,
-            y: spinPos.y / 100 * container.canvas.size.height
-          };
-          const pos = this.getPosition();
-          const distance = getDistance(pos, spinCenter);
-          this.spin = {
-            center: spinCenter,
-            direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
-            angle: this.velocity.angle,
-            radius: distance,
-            acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration)
-          };
-        }
-        this.shadowColor = colorToRgb(this.options.shadow.color);
-        for (const updater of container.particles.updaters) {
-          if (updater.init) {
-            updater.init(this);
-          }
+      }
+    }
+    class Theme_Theme {
+      constructor() {
+        this.name = "";
+        this.default = new ThemeDefault;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
         }
-        if (drawer && drawer.particleInit) {
-          drawer.particleInit(container, this);
+        if (data.name !== undefined) {
+          this.name = data.name;
         }
-        for (const [, plugin] of container.plugins) {
-          if (plugin.particleCreated) {
-            plugin.particleCreated(this);
-          }
+        this.default.load(data.default);
+        if (data.options !== undefined) {
+          this.options = deepExtend({}, data.options);
         }
       }
-      isVisible() {
-        return !this.destroyed && !this.spawning && this.isInsideCanvas();
-      }
-      isInsideCanvas() {
-        const radius = this.getRadius();
-        const canvasSize = this.container.canvas.size;
-        return this.position.x >= -radius && this.position.y >= -radius && this.position.y <= canvasSize.height + radius && this.position.x <= canvasSize.width + radius;
+    }
+    var Options_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Options_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function(receiver, state, kind, f) {
+      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_engine, _Options_findDefaultTheme;
+    class Options_Options {
+      constructor(engine) {
+        _Options_instances.add(this);
+        _Options_engine.set(this, void 0);
+        Options_classPrivateFieldSet(this, _Options_engine, engine, "f");
+        this.autoPlay = true;
+        this.background = new Background;
+        this.backgroundMask = new BackgroundMask;
+        this.fullScreen = new FullScreen;
+        this.detectRetina = true;
+        this.duration = 0;
+        this.fpsLimit = 120;
+        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;
       }
-      draw(delta) {
-        const container = this.container;
-        for (const [, plugin] of container.plugins) {
-          container.canvas.drawParticlePlugin(plugin, this, delta);
-        }
-        container.canvas.drawParticle(this, delta);
+      get fps_limit() {
+        return this.fpsLimit;
       }
-      getPosition() {
-        return {
-          x: this.position.x + this.offset.x,
-          y: this.position.y + this.offset.y,
-          z: this.position.z
-        };
+      set fps_limit(value) {
+        this.fpsLimit = value;
       }
-      getRadius() {
-        var _a;
-        return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
+      get retina_detect() {
+        return this.detectRetina;
       }
-      getMass() {
-        return this.getRadius() ** 2 * Math.PI / 2;
+      set retina_detect(value) {
+        this.detectRetina = value;
       }
-      getFillColor() {
-        var _a, _b, _c;
-        const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
-        if (color && this.roll && (this.backColor || this.roll.alter)) {
-          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
-          if (rolled) {
-            if (this.backColor) {
-              return this.backColor;
-            }
-            if (this.roll.alter) {
-              return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
-            }
-          }
-        }
-        return color;
+      get backgroundMode() {
+        return this.fullScreen;
       }
-      getStrokeColor() {
-        var _a, _b;
-        return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
+      set backgroundMode(value) {
+        this.fullScreen.load(value);
       }
-      destroy(override) {
-        this.destroyed = true;
-        this.bubble.inRange = false;
-        if (this.unbreakable) {
+      load(data) {
+        var _a, _b, _c, _d, _e;
+        if (data === undefined) {
           return;
         }
-        this.destroyed = true;
-        this.bubble.inRange = false;
-        for (const [, plugin] of this.container.plugins) {
-          if (plugin.particleDestroyed) {
-            plugin.particleDestroyed(this, override);
+        if (data.preset !== undefined) {
+          if (data.preset instanceof Array) {
+            for (const preset of data.preset) {
+              this.importPreset(preset);
+            }
+          } else {
+            this.importPreset(data.preset);
           }
         }
-        if (override) {
-          return;
-        }
-        const destroyOptions = this.options.destroy;
-        if (destroyOptions.mode === "split") {
-          this.split();
+        if (data.autoPlay !== undefined) {
+          this.autoPlay = data.autoPlay;
         }
-      }
-      reset() {
-        if (this.opacity) {
-          this.opacity.loops = 0;
+        const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
+        if (detectRetina !== undefined) {
+          this.detectRetina = detectRetina;
         }
-        this.size.loops = 0;
-      }
-      split() {
-        const splitOptions = this.options.destroy.split;
-        if (splitOptions.count >= 0 && this.splitCount++ > splitOptions.count) {
-          return;
+        if (data.duration !== undefined) {
+          this.duration = data.duration;
         }
-        const rate = getRangeValue(splitOptions.rate.value);
-        for (let i = 0; i < rate; i++) {
-          this.container.particles.addSplitParticle(this);
+        const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
+        if (fpsLimit !== undefined) {
+          this.fpsLimit = fpsLimit;
         }
-      }
-      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);
-          }
+        if (data.pauseOnBlur !== undefined) {
+          this.pauseOnBlur = data.pauseOnBlur;
         }
-        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
-          });
-        };
-        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);
+        if (data.pauseOnOutsideViewport !== undefined) {
+          this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
         }
-        return pos;
-      }
-      checkOverlap(pos, tryCount = 0) {
-        const collisionsOptions = this.options.collisions;
-        const radius = this.getRadius();
-        if (!collisionsOptions.enable) {
-          return false;
+        if (data.zLayers !== undefined) {
+          this.zLayers = data.zLayers;
         }
-        const overlapOptions = collisionsOptions.overlap;
-        if (overlapOptions.enable) {
-          return false;
+        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);
         }
-        const retries = overlapOptions.retries;
-        if (retries >= 0 && tryCount > retries) {
-          throw new Error("Particle is overlapping and can't be placed");
+        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;
+          }));
         }
-        let overlaps = false;
-        for (const particle of this.container.particles.array) {
+        this.motion.load(data.motion);
+        this.particles.load(data.particles);
+        this.style = deepExtend(this.style, data.style);
+        Options_classPrivateFieldGet(this, _Options_engine, "f").plugins.loadOptions(this, data);
+        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 = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "dark")) === null || _d === void 0 ? void 0 : _d.name;
+        this.defaultLightTheme = (_e = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, "light")) === null || _e === void 0 ? void 0 : _e.name;
+      }
+      setTheme(name) {
+        if (name) {
+          const chosenTheme = this.themes.find((theme => theme.name === name));
+          if (chosenTheme) {
+            this.load(chosenTheme.options);
+          }
+        } else {
+          const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = Options_classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? "dark" : "light");
+          if (defaultTheme) {
+            this.load(defaultTheme.options);
+          }
+        }
+      }
+      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(Options_classPrivateFieldGet(this, _Options_engine, "f").plugins.getPreset(preset));
+      }
+    }
+    _Options_engine = new WeakMap, _Options_instances = new WeakSet, _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+      var _a;
+      return (_a = this.themes.find((theme => theme.default.value && theme.default.mode === mode))) !== null && _a !== void 0 ? _a : this.themes.find((theme => theme.default.value && theme.default.mode === "any"));
+    };
+    var Particle_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Particle_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 _Particle_engine;
+    const fixOutMode = data => {
+      if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
+        if (data.coord > data.maxCoord - data.radius * 2) {
+          data.setCb(-data.radius);
+        } else if (data.coord < data.radius * 2) {
+          data.setCb(data.radius);
+        }
+      }
+    };
+    class Particle_Particle {
+      constructor(engine, id, container, position, overrideOptions, group) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        this.id = id;
+        this.container = container;
+        this.group = group;
+        _Particle_engine.set(this, void 0);
+        Particle_classPrivateFieldSet(this, _Particle_engine, engine, "f");
+        this.fill = true;
+        this.close = true;
+        this.lastPathTime = 0;
+        this.destroyed = false;
+        this.unbreakable = false;
+        this.splitCount = 0;
+        this.misplaced = false;
+        this.retina = {
+          maxDistance: {}
+        };
+        const pxRatio = container.retina.pixelRatio;
+        const mainOptions = container.actualOptions;
+        const particlesOptions = new ParticlesOptions;
+        particlesOptions.load(mainOptions.particles);
+        const shapeType = particlesOptions.shape.type;
+        const reduceDuplicates = particlesOptions.reduceDuplicates;
+        this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
+        if (overrideOptions === null || overrideOptions === void 0 ? void 0 : overrideOptions.shape) {
+          if (overrideOptions.shape.type) {
+            const overrideShapeType = overrideOptions.shape.type;
+            this.shape = overrideShapeType instanceof Array ? itemFromArray(overrideShapeType, this.id, reduceDuplicates) : overrideShapeType;
+          }
+          const shapeOptions = new Shape;
+          shapeOptions.load(overrideOptions.shape);
+          if (this.shape) {
+            this.shapeData = this.loadShapeData(shapeOptions, reduceDuplicates);
+          }
+        } else {
+          this.shapeData = this.loadShapeData(particlesOptions.shape, reduceDuplicates);
+        }
+        if (overrideOptions !== undefined) {
+          particlesOptions.load(overrideOptions);
+        }
+        if (((_a = this.shapeData) === null || _a === void 0 ? void 0 : _a.particles) !== undefined) {
+          particlesOptions.load((_b = this.shapeData) === null || _b === void 0 ? void 0 : _b.particles);
+        }
+        this.fill = (_d = (_c = this.shapeData) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.fill;
+        this.close = (_f = (_e = this.shapeData) === null || _e === void 0 ? void 0 : _e.close) !== null && _f !== void 0 ? _f : this.close;
+        this.options = particlesOptions;
+        this.pathDelay = getValue(this.options.move.path.delay) * 1e3;
+        const zIndexValue = getRangeValue(this.options.zIndex.value);
+        container.retina.initParticle(this);
+        const sizeOptions = this.options.size, sizeRange = sizeOptions.value;
+        this.size = {
+          enable: sizeOptions.animation.enable,
+          value: getValue(sizeOptions) * container.retina.pixelRatio,
+          max: getRangeMax(sizeRange) * pxRatio,
+          min: getRangeMin(sizeRange) * pxRatio,
+          loops: 0,
+          maxLoops: sizeOptions.animation.count
+        };
+        const sizeAnimation = sizeOptions.animation;
+        if (sizeAnimation.enable) {
+          this.size.status = 0;
+          switch (sizeAnimation.startValue) {
+           case "min":
+            this.size.value = this.size.min;
+            this.size.status = 0;
+            break;
+
+           case "random":
+            this.size.value = randomInRange(this.size) * pxRatio;
+            this.size.status = Math.random() >= .5 ? 0 : 1;
+            break;
+
+           case "max":
+           default:
+            this.size.value = this.size.max;
+            this.size.status = 1;
+            break;
+          }
+          this.size.velocity = ((_g = this.retina.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
+          if (!sizeAnimation.sync) {
+            this.size.velocity *= Math.random();
+          }
+        }
+        this.direction = getParticleDirectionAngle(this.options.move.direction);
+        this.bubble = {
+          inRange: false
+        };
+        this.initialVelocity = this.calculateVelocity();
+        this.velocity = this.initialVelocity.copy();
+        this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+        this.position = this.calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+        this.initialPosition = this.position.copy();
+        this.offset = Vector.origin;
+        const particles = container.particles;
+        particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
+        particles.lastZIndex = this.position.z;
+        this.zIndexFactor = this.position.z / container.zLayers;
+        this.sides = 24;
+        let drawer = container.drawers.get(this.shape);
+        if (!drawer) {
+          drawer = Particle_classPrivateFieldGet(this, _Particle_engine, "f").plugins.getShapeDrawer(this.shape);
+          if (drawer) {
+            container.drawers.set(this.shape, drawer);
+          }
+        }
+        if (drawer === null || drawer === void 0 ? void 0 : drawer.loadShape) {
+          drawer === null || drawer === void 0 ? void 0 : drawer.loadShape(this);
+        }
+        const sideCountFunc = drawer === null || drawer === void 0 ? void 0 : drawer.getSidesCount;
+        if (sideCountFunc) {
+          this.sides = sideCountFunc(this);
+        }
+        this.life = this.loadLife();
+        this.spawning = this.life.delay > 0;
+        if (this.options.move.spin.enable) {
+          const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : {
+            x: 50,
+            y: 50
+          };
+          const spinCenter = {
+            x: spinPos.x / 100 * container.canvas.size.width,
+            y: spinPos.y / 100 * container.canvas.size.height
+          };
+          const pos = this.getPosition();
+          const distance = getDistance(pos, spinCenter);
+          this.spin = {
+            center: spinCenter,
+            direction: this.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
+            angle: this.velocity.angle,
+            radius: distance,
+            acceleration: (_j = this.retina.spinAcceleration) !== null && _j !== void 0 ? _j : getRangeValue(this.options.move.spin.acceleration)
+          };
+        }
+        this.shadowColor = colorToRgb(this.options.shadow.color);
+        for (const updater of container.particles.updaters) {
+          if (updater.init) {
+            updater.init(this);
+          }
+        }
+        if (drawer && drawer.particleInit) {
+          drawer.particleInit(container, this);
+        }
+        for (const [, plugin] of container.plugins) {
+          if (plugin.particleCreated) {
+            plugin.particleCreated(this);
+          }
+        }
+      }
+      isVisible() {
+        return !this.destroyed && !this.spawning && this.isInsideCanvas();
+      }
+      isInsideCanvas() {
+        const radius = this.getRadius();
+        const canvasSize = this.container.canvas.size;
+        return this.position.x >= -radius && this.position.y >= -radius && this.position.y <= canvasSize.height + radius && this.position.x <= canvasSize.width + radius;
+      }
+      draw(delta) {
+        const container = this.container;
+        for (const [, plugin] of container.plugins) {
+          container.canvas.drawParticlePlugin(plugin, this, delta);
+        }
+        container.canvas.drawParticle(this, delta);
+      }
+      getPosition() {
+        return {
+          x: this.position.x + this.offset.x,
+          y: this.position.y + this.offset.y,
+          z: this.position.z
+        };
+      }
+      getRadius() {
+        var _a;
+        return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
+      }
+      getMass() {
+        return this.getRadius() ** 2 * Math.PI / 2;
+      }
+      getFillColor() {
+        var _a, _b, _c;
+        const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
+        if (color && this.roll && (this.backColor || this.roll.alter)) {
+          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+          if (rolled) {
+            if (this.backColor) {
+              return this.backColor;
+            }
+            if (this.roll.alter) {
+              return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
+            }
+          }
+        }
+        return color;
+      }
+      getStrokeColor() {
+        var _a, _b;
+        return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
+      }
+      destroy(override) {
+        this.destroyed = true;
+        this.bubble.inRange = false;
+        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 === "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: [ "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
+          });
+        };
+        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;
@@ -2551,9 +2823,25 @@
         return life;
       }
     }
+    _Particle_engine = new WeakMap;
+    var Particles_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Particles_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 _Particles_engine;
     class Particles_Particles {
-      constructor(container) {
+      constructor(engine, container) {
         this.container = container;
+        _Particles_engine.set(this, void 0);
+        Particles_classPrivateFieldSet(this, _Particles_engine, engine, "f");
         this.nextId = 0;
         this.array = [];
         this.zArray = [];
@@ -2565,11 +2853,11 @@
           links: new Map,
           triangles: new Map
         };
-        this.interactionManager = new InteractionManager(container);
+        this.interactionManager = new InteractionManager(Particles_classPrivateFieldGet(this, _Particles_engine, "f"), container);
         const canvasSize = this.container.canvas.size;
         this.linksColors = new Map;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
-        this.updaters = Plugins.getUpdaters(container, true);
+        this.updaters = Particles_classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
       }
       get count() {
         return this.array.length;
@@ -2583,7 +2871,7 @@
         this.freqs.links = new Map;
         this.freqs.triangles = new Map;
         let handled = false;
-        this.updaters = Plugins.getUpdaters(container, true);
+        this.updaters = Particles_classPrivateFieldGet(this, _Particles_engine, "f").plugins.getUpdaters(container, true);
         this.interactionManager.init();
         for (const [, plugin] of container.plugins) {
           if (plugin.particlesInitialization !== undefined) {
@@ -2607,633 +2895,354 @@
           }
         }
         container.pathGenerator.init(container);
-      }
-      redraw() {
-        this.clear();
-        this.init();
-        this.draw({
-          value: 0,
-          factor: 0
-        });
-      }
-      removeAt(index, quantity = 1, group, override) {
-        if (!(index >= 0 && index <= this.count)) {
-          return;
-        }
-        let deleted = 0;
-        for (let i = index; deleted < quantity && i < this.count; i++) {
-          const particle = this.array[i];
-          if (!particle || particle.group !== group) {
-            continue;
-          }
-          particle.destroy(override);
-          this.array.splice(i--, 1);
-          const zIdx = this.zArray.indexOf(particle);
-          this.zArray.splice(zIdx, 1);
-          deleted++;
-        }
-      }
-      remove(particle, group, override) {
-        this.removeAt(this.array.indexOf(particle), undefined, group, override);
-      }
-      update(delta) {
-        const container = this.container;
-        const particlesToDelete = [];
-        container.pathGenerator.update();
-        for (const [, plugin] of container.plugins) {
-          if (plugin.update !== undefined) {
-            plugin.update(delta);
-          }
-        }
-        for (const particle of this.array) {
-          const resizeFactor = container.canvas.resizeFactor;
-          if (resizeFactor) {
-            particle.position.x *= resizeFactor.width;
-            particle.position.y *= resizeFactor.height;
-          }
-          particle.bubble.inRange = false;
-          for (const [, plugin] of this.container.plugins) {
-            if (particle.destroyed) {
-              break;
-            }
-            if (plugin.particleUpdate) {
-              plugin.particleUpdate(particle, delta);
-            }
-          }
-          this.mover.move(particle, delta);
-          if (particle.destroyed) {
-            particlesToDelete.push(particle);
-            continue;
-          }
-          this.quadTree.insert(new Point(particle.getPosition(), particle));
-        }
-        for (const particle of particlesToDelete) {
-          this.remove(particle);
-        }
-        this.interactionManager.externalInteract(delta);
-        for (const particle of container.particles.array) {
-          for (const updater of this.updaters) {
-            updater.update(particle, delta);
-          }
-          if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
-          }
-        }
-        delete container.canvas.resizeFactor;
-      }
-      draw(delta) {
-        const container = this.container;
-        container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
-        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
-        this.update(delta);
-        if (this.needsSort) {
-          this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
-          this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
-          this.needsSort = false;
-        }
-        for (const [, plugin] of container.plugins) {
-          container.canvas.drawPlugin(plugin, delta);
-        }
-        for (const p of this.zArray) {
-          p.draw(delta);
-        }
-      }
-      clear() {
-        this.array = [];
-        this.zArray = [];
-      }
-      push(nb, mouse, overrideOptions, group) {
-        this.pushing = true;
-        for (let i = 0; i < nb; i++) {
-          this.addParticle(mouse === null || mouse === void 0 ? void 0 : mouse.position, overrideOptions, group);
-        }
-        this.pushing = false;
-      }
-      addParticle(position, overrideOptions, group) {
-        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) {
-            this.removeQuantity(countToRemove);
-          }
-        }
-        return this.pushParticle(position, overrideOptions, group);
-      }
-      addSplitParticle(parent) {
-        const splitOptions = parent.options.destroy.split, options = new ParticlesOptions;
-        options.load(parent.options);
-        const factor = getRangeValue(splitOptions.factor.value);
-        options.color.load({
-          value: {
-            hsl: parent.getFillColor()
-          }
-        });
-        if (typeof options.size.value === "number") {
-          options.size.value /= factor;
-        } else {
-          options.size.value.min /= factor;
-          options.size.value.max /= factor;
-        }
-        options.load(splitOptions.particles);
-        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0;
-        const position = {
-          x: parent.position.x + randomInRange(offset),
-          y: parent.position.y + randomInRange(offset)
-        };
-        return this.pushParticle(position, options, parent.group, (particle => {
-          if (particle.size.value < .5) {
-            return false;
-          }
-          particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
-          particle.splitCount = parent.splitCount + 1;
-          particle.unbreakable = true;
-          setTimeout((() => {
-            particle.unbreakable = false;
-          }), 500);
-          return true;
-        }));
-      }
-      removeQuantity(quantity, group) {
-        this.removeAt(0, quantity, group);
-      }
-      getLinkFrequency(p1, p2) {
-        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();
-          this.freqs.links.set(key, res);
-        }
-        return res;
-      }
-      getTriangleFrequency(p1, p2, p3) {
-        let [id1, id2, id3] = [ p1.id, p2.id, p3.id ];
-        if (id1 > id2) {
-          [id2, id1] = [ id1, id2 ];
-        }
-        if (id2 > id3) {
-          [id3, id2] = [ id2, id3 ];
-        }
-        if (id1 > id3) {
-          [id3, id1] = [ id1, id3 ];
-        }
-        const key = `${id1}_${id2}_${id3}`;
-        let res = this.freqs.triangles.get(key);
-        if (res === undefined) {
-          res = Math.random();
-          this.freqs.triangles.set(key, res);
-        }
-        return res;
-      }
-      addManualParticles() {
-        const container = this.container, options = container.actualOptions;
-        for (const particle of options.manualParticles) {
-          const pos = particle.position ? {
-            x: particle.position.x * container.canvas.size.width / 100,
-            y: particle.position.y * container.canvas.size.height / 100
-          } : undefined;
-          this.addParticle(pos, particle.options);
-        }
-      }
-      setDensity() {
-        const options = this.container.actualOptions;
-        for (const group in options.particles.groups) {
-          this.applyDensity(options.particles.groups[group], 0, group);
-        }
-        this.applyDensity(options.particles, options.manualParticles.length);
-      }
-      applyDensity(options, manualCount, group) {
-        var _a;
-        if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
-          return;
-        }
-        const numberOptions = options.number;
-        const densityFactor = this.initDensityFactor(numberOptions.density);
-        const optParticlesNumber = numberOptions.value;
-        const optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber;
-        const particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount;
-        const particlesCount = Math.min(this.count, this.array.filter((t => t.group === group)).length);
-        this.limit = numberOptions.limit * densityFactor;
-        if (particlesCount < particlesNumber) {
-          this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
-        } else if (particlesCount > particlesNumber) {
-          this.removeQuantity(particlesCount - particlesNumber, group);
-        }
-      }
-      initDensityFactor(densityOptions) {
-        const container = this.container;
-        if (!container.canvas.element || !densityOptions.enable) {
-          return 1;
-        }
-        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) {
-        try {
-          const particle = new Particle(this.nextId, this.container, position, overrideOptions, group);
-          let canAdd = true;
-          if (initializer) {
-            canAdd = initializer(particle);
-          }
-          if (!canAdd) {
-            return;
-          }
-          this.array.push(particle);
-          this.zArray.push(particle);
-          this.nextId++;
-          return particle;
-        } catch (e) {
-          console.warn(`error adding particle: ${e}`);
+      }
+      redraw() {
+        this.clear();
+        this.init();
+        this.draw({
+          value: 0,
+          factor: 0
+        });
+      }
+      removeAt(index, quantity = 1, group, override) {
+        if (!(index >= 0 && index <= this.count)) {
           return;
         }
+        let deleted = 0;
+        for (let i = index; deleted < quantity && i < this.count; i++) {
+          const particle = this.array[i];
+          if (!particle || particle.group !== group) {
+            continue;
+          }
+          particle.destroy(override);
+          this.array.splice(i--, 1);
+          const zIdx = this.zArray.indexOf(particle);
+          this.zArray.splice(zIdx, 1);
+          deleted++;
+        }
       }
-    }
-    class Retina_Retina {
-      constructor(container) {
-        this.container = container;
+      remove(particle, group, override) {
+        this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      init() {
+      update(delta) {
         const container = this.container;
-        const options = container.actualOptions;
-        this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
-        const motionOptions = this.container.actualOptions.motion;
-        if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
-          if (isSsr() || typeof matchMedia === "undefined" || !matchMedia) {
-            this.reduceFactor = 1;
-          } else {
-            const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)");
-            if (mediaQuery) {
-              this.handleMotionChange(mediaQuery);
-              const handleChange = () => {
-                this.handleMotionChange(mediaQuery);
-                container.refresh().catch((() => {}));
-              };
-              if (mediaQuery.addEventListener !== undefined) {
-                mediaQuery.addEventListener("change", handleChange);
-              } else if (mediaQuery.addListener !== undefined) {
-                mediaQuery.addListener(handleChange);
-              }
-            }
+        const particlesToDelete = [];
+        container.pathGenerator.update();
+        for (const [, plugin] of container.plugins) {
+          if (plugin.update !== undefined) {
+            plugin.update(delta);
           }
-        } else {
-          this.reduceFactor = 1;
-        }
-        const ratio = this.pixelRatio;
-        if (container.canvas.element) {
-          const element = container.canvas.element;
-          container.canvas.size.width = element.offsetWidth * ratio;
-          container.canvas.size.height = element.offsetHeight * ratio;
         }
-        const particles = options.particles;
-        this.attractDistance = particles.move.attract.distance * ratio;
-        this.linksDistance = particles.links.distance * ratio;
-        this.linksWidth = particles.links.width * ratio;
-        this.sizeAnimationSpeed = particles.size.animation.speed * ratio;
-        this.maxSpeed = particles.move.gravity.maxSpeed * ratio;
-        if (particles.orbit.radius !== undefined) {
-          this.orbitRadius = particles.orbit.radius * this.container.retina.pixelRatio;
-        }
-        const modes = options.interactivity.modes;
-        this.connectModeDistance = modes.connect.distance * ratio;
-        this.connectModeRadius = modes.connect.radius * ratio;
-        this.grabModeDistance = modes.grab.distance * ratio;
-        this.repulseModeDistance = modes.repulse.distance * ratio;
-        this.bounceModeDistance = modes.bounce.distance * ratio;
-        this.attractModeDistance = modes.attract.distance * ratio;
-        this.slowModeRadius = modes.slow.radius * ratio;
-        this.bubbleModeDistance = modes.bubble.distance * ratio;
-        if (modes.bubble.size) {
-          this.bubbleModeSize = modes.bubble.size * ratio;
+        for (const particle of this.array) {
+          const resizeFactor = container.canvas.resizeFactor;
+          if (resizeFactor) {
+            particle.position.x *= resizeFactor.width;
+            particle.position.y *= resizeFactor.height;
+          }
+          particle.bubble.inRange = false;
+          for (const [, plugin] of this.container.plugins) {
+            if (particle.destroyed) {
+              break;
+            }
+            if (plugin.particleUpdate) {
+              plugin.particleUpdate(particle, delta);
+            }
+          }
+          this.mover.move(particle, delta);
+          if (particle.destroyed) {
+            particlesToDelete.push(particle);
+            continue;
+          }
+          this.quadTree.insert(new Point(particle.getPosition(), particle));
         }
-      }
-      initParticle(particle) {
-        const options = particle.options;
-        const ratio = this.pixelRatio;
-        const moveDistance = options.move.distance;
-        const props = particle.retina;
-        props.attractDistance = options.move.attract.distance * ratio;
-        props.linksDistance = options.links.distance * ratio;
-        props.linksWidth = options.links.width * ratio;
-        props.moveDrift = getRangeValue(options.move.drift) * ratio;
-        props.moveSpeed = getRangeValue(options.move.speed) * ratio;
-        props.sizeAnimationSpeed = options.size.animation.speed * ratio;
-        if (particle.spin) {
-          props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
+        for (const particle of particlesToDelete) {
+          this.remove(particle);
         }
-        const maxDistance = props.maxDistance;
-        maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
-        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;
+        this.interactionManager.externalInteract(delta);
+        for (const particle of container.particles.array) {
+          for (const updater of this.updaters) {
+            updater.update(particle, delta);
+          }
+          if (!particle.destroyed && !particle.spawning) {
+            this.interactionManager.particlesInteract(particle, delta);
+          }
         }
+        delete container.canvas.resizeFactor;
       }
-    }
-    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;
+      draw(delta) {
+        const container = this.container;
+        container.canvas.clear();
+        const canvasSize = this.container.canvas.size;
+        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
+        this.update(delta);
+        if (this.needsSort) {
+          this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
+          this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
+          this.needsSort = false;
         }
-        if (data.particles !== undefined) {
-          this.particles = deepExtend({}, data.particles);
+        for (const [, plugin] of container.plugins) {
+          container.canvas.drawPlugin(plugin, delta);
         }
-        if (data.pauseOnStop !== undefined) {
-          this.pauseOnStop = data.pauseOnStop;
+        for (const p of this.zArray) {
+          p.draw(delta);
         }
       }
-    }
-    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;
+      clear() {
+        this.array = [];
+        this.zArray = [];
       }
-      load(data) {
-        if (data === undefined) {
-          return;
+      push(nb, mouse, overrideOptions, group) {
+        this.pushing = true;
+        for (let i = 0; i < nb; i++) {
+          this.addParticle(mouse === null || mouse === void 0 ? void 0 : mouse.position, overrideOptions, group);
         }
-        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;
+        this.pushing = false;
       }
-      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;
+      addParticle(position, overrideOptions, group) {
+        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) {
+            this.removeQuantity(countToRemove);
+          }
         }
-        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" ];
+        return this.pushParticle(position, overrideOptions, group);
+      }
+      addSplitParticle(parent) {
+        const splitOptions = parent.options.destroy.split, options = new ParticlesOptions;
+        options.load(parent.options);
+        const factor = getRangeValue(splitOptions.factor.value);
+        options.color.load({
+          value: {
+            hsl: parent.getFillColor()
           }
+        });
+        if (typeof options.size.value === "number") {
+          options.size.value /= factor;
+        } else {
+          options.size.value.min /= factor;
+          options.size.value.max /= factor;
         }
+        options.load(splitOptions.particles);
+        const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0;
+        const position = {
+          x: parent.position.x + randomInRange(offset),
+          y: parent.position.y + randomInRange(offset)
+        };
+        return this.pushParticle(position, options, parent.group, (particle => {
+          if (particle.size.value < .5) {
+            return false;
+          }
+          particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
+          particle.splitCount = parent.splitCount + 1;
+          particle.unbreakable = true;
+          setTimeout((() => {
+            particle.unbreakable = false;
+          }), 500);
+          return true;
+        }));
       }
-    }
-    class Theme_Theme {
-      constructor() {
-        this.name = "";
-        this.default = new ThemeDefault;
+      removeQuantity(quantity, group) {
+        this.removeAt(0, quantity, group);
       }
-      load(data) {
-        if (data === undefined) {
-          return;
+      getLinkFrequency(p1, p2) {
+        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();
+          this.freqs.links.set(key, res);
         }
-        if (data.name !== undefined) {
-          this.name = data.name;
+        return res;
+      }
+      getTriangleFrequency(p1, p2, p3) {
+        let [id1, id2, id3] = [ p1.id, p2.id, p3.id ];
+        if (id1 > id2) {
+          [id2, id1] = [ id1, id2 ];
         }
-        this.default.load(data.default);
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
+        if (id2 > id3) {
+          [id3, id2] = [ id2, id3 ];
         }
-      }
-    }
-    class ManualParticle_ManualParticle {
-      load(data) {
-        var _a, _b;
-        if (!data) {
-          return;
+        if (id1 > id3) {
+          [id3, id1] = [ id1, id3 ];
         }
-        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
-          };
+        const key = `${id1}_${id2}_${id3}`;
+        let res = this.freqs.triangles.get(key);
+        if (res === undefined) {
+          res = Math.random();
+          this.freqs.triangles.set(key, res);
         }
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
+        return res;
+      }
+      addManualParticles() {
+        const container = this.container, options = container.actualOptions;
+        for (const particle of options.manualParticles) {
+          const pos = particle.position ? {
+            x: particle.position.x * container.canvas.size.width / 100,
+            y: particle.position.y * container.canvas.size.height / 100
+          } : undefined;
+          this.addParticle(pos, particle.options);
         }
       }
-    }
-    class Responsive_Responsive {
-      constructor() {
-        this.maxWidth = Infinity;
-        this.options = {};
-        this.mode = "canvas";
+      setDensity() {
+        const options = this.container.actualOptions;
+        for (const group in options.particles.groups) {
+          this.applyDensity(options.particles.groups[group], 0, group);
+        }
+        this.applyDensity(options.particles, options.manualParticles.length);
       }
-      load(data) {
-        if (!data) {
+      applyDensity(options, manualCount, group) {
+        var _a;
+        if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
           return;
         }
-        if (data.maxWidth !== undefined) {
-          this.maxWidth = data.maxWidth;
+        const numberOptions = options.number;
+        const densityFactor = this.initDensityFactor(numberOptions.density);
+        const optParticlesNumber = numberOptions.value;
+        const optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber;
+        const particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount;
+        const particlesCount = Math.min(this.count, this.array.filter((t => t.group === group)).length);
+        this.limit = numberOptions.limit * densityFactor;
+        if (particlesCount < particlesNumber) {
+          this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+        } else if (particlesCount > particlesNumber) {
+          this.removeQuantity(particlesCount - particlesNumber, group);
         }
-        if (data.mode !== undefined) {
-          if (data.mode === "screen") {
-            this.mode = "screen";
-          } else {
-            this.mode = "canvas";
-          }
+      }
+      initDensityFactor(densityOptions) {
+        const container = this.container;
+        if (!container.canvas.element || !densityOptions.enable) {
+          return 1;
         }
-        if (data.options !== undefined) {
-          this.options = deepExtend({}, data.options);
+        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) {
+        try {
+          const particle = new Particle(Particles_classPrivateFieldGet(this, _Particles_engine, "f"), this.nextId, this.container, position, overrideOptions, group);
+          let canAdd = true;
+          if (initializer) {
+            canAdd = initializer(particle);
+          }
+          if (!canAdd) {
+            return;
+          }
+          this.array.push(particle);
+          this.zArray.push(particle);
+          this.nextId++;
+          return particle;
+        } catch (e) {
+          console.warn(`error adding particle: ${e}`);
+          return;
         }
       }
     }
-    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);
+    _Particles_engine = new WeakMap;
+    class Retina_Retina {
+      constructor(container) {
+        this.container = container;
       }
-      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);
-            }
+      init() {
+        const container = this.container;
+        const options = container.actualOptions;
+        this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
+        const motionOptions = this.container.actualOptions.motion;
+        if (motionOptions && (motionOptions.disable || motionOptions.reduce.value)) {
+          if (isSsr() || typeof matchMedia === "undefined" || !matchMedia) {
+            this.reduceFactor = 1;
           } else {
-            this.importPreset(data.preset);
+            const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)");
+            if (mediaQuery) {
+              this.handleMotionChange(mediaQuery);
+              const handleChange = () => {
+                this.handleMotionChange(mediaQuery);
+                container.refresh().catch((() => {}));
+              };
+              if (mediaQuery.addEventListener !== undefined) {
+                mediaQuery.addEventListener("change", handleChange);
+              } else if (mediaQuery.addListener !== undefined) {
+                mediaQuery.addListener(handleChange);
+              }
+            }
           }
-        }
-        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.reduceFactor = 1;
+        }
+        const ratio = this.pixelRatio;
+        if (container.canvas.element) {
+          const element = container.canvas.element;
+          container.canvas.size.width = element.offsetWidth * ratio;
+          container.canvas.size.height = element.offsetHeight * ratio;
         }
-        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;
-          }));
+        const particles = options.particles;
+        this.attractDistance = particles.move.attract.distance * ratio;
+        this.linksDistance = particles.links.distance * ratio;
+        this.linksWidth = particles.links.width * ratio;
+        this.sizeAnimationSpeed = particles.size.animation.speed * ratio;
+        this.maxSpeed = particles.move.gravity.maxSpeed * ratio;
+        if (particles.orbit.radius !== undefined) {
+          this.orbitRadius = particles.orbit.radius * this.container.retina.pixelRatio;
         }
-        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);
-          }
+        const modes = options.interactivity.modes;
+        this.connectModeDistance = modes.connect.distance * ratio;
+        this.connectModeRadius = modes.connect.radius * ratio;
+        this.grabModeDistance = modes.grab.distance * ratio;
+        this.repulseModeDistance = modes.repulse.distance * ratio;
+        this.bounceModeDistance = modes.bounce.distance * ratio;
+        this.attractModeDistance = modes.attract.distance * ratio;
+        this.slowModeRadius = modes.slow.radius * ratio;
+        this.bubbleModeDistance = modes.bubble.distance * ratio;
+        if (modes.bubble.size) {
+          this.bubbleModeSize = modes.bubble.size * ratio;
         }
-        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);
-          }
+      }
+      initParticle(particle) {
+        const options = particle.options;
+        const ratio = this.pixelRatio;
+        const moveDistance = options.move.distance;
+        const props = particle.retina;
+        props.attractDistance = options.move.attract.distance * ratio;
+        props.linksDistance = options.links.distance * ratio;
+        props.linksWidth = options.links.width * ratio;
+        props.moveDrift = getRangeValue(options.move.drift) * ratio;
+        props.moveSpeed = getRangeValue(options.move.speed) * ratio;
+        props.sizeAnimationSpeed = options.size.animation.speed * ratio;
+        if (particle.spin) {
+          props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
         }
-        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;
+        const maxDistance = props.maxDistance;
+        maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
+        maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
+        props.maxSpeed = options.move.gravity.maxSpeed * ratio;
       }
-      setTheme(name) {
-        if (name) {
-          const chosenTheme = this.themes.find((theme => theme.name === name));
-          if (chosenTheme) {
-            this.load(chosenTheme.options);
-          }
+      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 {
-          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);
-          }
+          this.reduceFactor = 1;
         }
       }
-      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"));
+    var Container_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Container_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 _Container_engine;
     class Container_Container {
-      constructor(id, sourceOptions, ...presets) {
+      constructor(engine, id, sourceOptions, ...presets) {
         this.id = id;
-        this.fpsLimit = 60;
+        _Container_engine.set(this, void 0);
+        Container_classPrivateFieldSet(this, _Container_engine, engine, "f");
+        this.fpsLimit = 120;
         this.duration = 0;
         this.lifeTime = 0;
         this.firstStart = true;
@@ -3247,7 +3256,7 @@
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this);
-        this.particles = new Particles(this);
+        this.particles = new Particles(Container_classPrivateFieldGet(this, _Container_engine, "f"), this);
         this.drawer = new FrameManager(this);
         this.presets = presets;
         this.pathGenerator = {
@@ -3276,8 +3285,8 @@
         this.plugins = new Map;
         this.drawers = new Map;
         this.density = 1;
-        this._options = new Options;
-        this.actualOptions = new Options;
+        this._options = new Options(Container_classPrivateFieldGet(this, _Container_engine, "f"));
+        this.actualOptions = new Options(Container_classPrivateFieldGet(this, _Container_engine, "f"));
         this.eventListeners = new EventListeners(this);
         if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
           this.intersectionObserver = new IntersectionObserver((entries => this.intersectionManager(entries)));
@@ -3392,7 +3401,7 @@
         return this.start();
       }
       reset() {
-        this._options = new Options;
+        this._options = new Options(Container_classPrivateFieldGet(this, _Container_engine, "f"));
         return this.refresh();
       }
       stop() {
@@ -3406,7 +3415,7 @@
         this.particles.clear();
         this.canvas.clear();
         if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
-          this.intersectionObserver.observe(this.interactivity.element);
+          this.intersectionObserver.unobserve(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
           if (plugin.stop) {
@@ -3533,20 +3542,20 @@
         return false;
       }
       async init() {
-        this._options = new Options;
+        this._options = new Options(Container_classPrivateFieldGet(this, _Container_engine, "f"));
         for (const preset of this.presets) {
-          this._options.load(Plugins.getPreset(preset));
+          this._options.load(Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPreset(preset));
         }
-        const shapes = Plugins.getSupportedShapes();
+        const shapes = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getSupportedShapes();
         for (const type of shapes) {
-          const drawer = Plugins.getShapeDrawer(type);
+          const drawer = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getShapeDrawer(type);
           if (drawer) {
             this.drawers.set(type, drawer);
           }
         }
         this._options.load(this._initialSourceOptions);
         this._options.load(this._sourceOptions);
-        this.actualOptions = new Options;
+        this.actualOptions = new Options(Container_classPrivateFieldGet(this, _Container_engine, "f"));
         this.actualOptions.load(this._options);
         this.retina.init();
         this.canvas.init();
@@ -3556,8 +3565,8 @@
         this.zLayers = this.actualOptions.zLayers;
         this.duration = getRangeValue(this.actualOptions.duration);
         this.lifeTime = 0;
-        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 60;
-        const availablePlugins = Plugins.getAvailablePlugins(this);
+        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+        const availablePlugins = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getAvailablePlugins(this);
         for (const [id, plugin] of availablePlugins) {
           this.plugins.set(id, plugin);
         }
@@ -3575,7 +3584,7 @@
         }
         const pathOptions = this.actualOptions.particles.move.path;
         if (pathOptions.generator) {
-          const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
+          const customGenerator = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator);
           if (customGenerator) {
             if (customGenerator.init) {
               this.pathGenerator.init = customGenerator.init;
@@ -3612,24 +3621,41 @@
         }
       }
     }
-    const tsParticlesDom = null && [];
+    _Container_engine = new WeakMap;
+    var Loader_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Loader_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 _Loader_engine;
     function fetchError(statusCode) {
       console.error(`Error tsParticles - fetch status: ${statusCode}`);
       console.error("Error tsParticles - File config not found");
     }
     class Loader {
-      static dom() {
-        return tsParticlesDom;
+      constructor(engine) {
+        _Loader_engine.set(this, void 0);
+        Loader_classPrivateFieldSet(this, _Loader_engine, engine, "f");
       }
-      static domItem(index) {
-        const dom = Loader.dom();
+      dom() {
+        return Loader_classPrivateFieldGet(this, _Loader_engine, "f").domArray;
+      }
+      domItem(index) {
+        const dom = this.dom();
         const item = dom[index];
         if (item && !item.destroyed) {
           return item;
         }
         dom.splice(index, 1);
       }
-      static async loadOptions(params) {
+      async loadOptions(params) {
         var _a, _b, _c;
         const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 1e4)}`;
         const {options: options, index: index} = params;
@@ -3640,10 +3666,10 @@
           (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
         }
         const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-        const dom = Loader.dom();
+        const dom = this.dom();
         const oldIndex = dom.findIndex((v => v.id === tagId));
         if (oldIndex >= 0) {
-          const old = Loader.domItem(oldIndex);
+          const old = this.domItem(oldIndex);
           if (old && !old.destroyed) {
             old.destroy();
             dom.splice(oldIndex, 1);
@@ -3666,7 +3692,7 @@
             domContainer.appendChild(canvasEl);
           }
         }
-        const newItem = new Container(tagId, currentOptions);
+        const newItem = new Container(Loader_classPrivateFieldGet(this, _Loader_engine, "f"), tagId, currentOptions);
         if (oldIndex >= 0) {
           dom.splice(oldIndex, 0, newItem);
         } else {
@@ -3676,7 +3702,7 @@
         await newItem.start();
         return newItem;
       }
-      static async loadRemoteOptions(params) {
+      async loadRemoteOptions(params) {
         const {url: jsonUrl, index: index} = params;
         const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
         if (!url) {
@@ -3688,14 +3714,14 @@
           return;
         }
         const data = await response.json();
-        return await Loader.loadOptions({
+        return this.loadOptions({
           tagId: params.tagId,
           element: params.element,
           index: index,
           options: data
         });
       }
-      static load(tagId, options, index) {
+      load(tagId, options, index) {
         const params = {
           index: index
         };
@@ -3711,7 +3737,7 @@
         }
         return this.loadOptions(params);
       }
-      static async set(id, domContainer, options, index) {
+      async set(id, domContainer, options, index) {
         const params = {
           index: index
         };
@@ -3732,7 +3758,7 @@
         }
         return this.loadOptions(params);
       }
-      static async loadJSON(tagId, jsonUrl, index) {
+      async loadJSON(tagId, jsonUrl, index) {
         let url, id;
         if (typeof jsonUrl === "number" || jsonUrl === undefined) {
           url = tagId;
@@ -3740,13 +3766,13 @@
           id = tagId;
           url = jsonUrl;
         }
-        return await Loader.loadRemoteOptions({
+        return this.loadRemoteOptions({
           tagId: id,
           url: url,
           index: index
         });
       }
-      static async setJSON(id, domContainer, jsonUrl, index) {
+      async setJSON(id, domContainer, jsonUrl, index) {
         let url, newId, newIndex, element;
         if (id instanceof HTMLElement) {
           element = id;
@@ -3758,15 +3784,15 @@
           url = jsonUrl;
           newIndex = index;
         }
-        return await Loader.loadRemoteOptions({
+        return this.loadRemoteOptions({
           tagId: newId,
           url: url,
           index: newIndex,
           element: element
         });
       }
-      static setOnClickHandler(callback) {
-        const dom = Loader.dom();
+      setOnClickHandler(callback) {
+        const dom = this.dom();
         if (dom.length === 0) {
           throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
         }
@@ -3775,6 +3801,7 @@
         }
       }
     }
+    _Loader_engine = new WeakMap;
     function NumberUtils_clamp(num, min, max) {
       return Math.min(Math.max(num, min), max);
     }
@@ -4809,18 +4836,160 @@
       if (width === 0) {
         return;
       }
-      context.lineWidth = width;
-      const rotationRadian = rotation * Math.PI / 180;
-      context.beginPath();
-      context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
-      context.stroke();
-    }
-    function CanvasUtils_alterHsl(color, type, value) {
-      return {
-        h: color.h,
-        s: color.s,
-        l: color.l + (type === "darken" ? -1 : 1) * value
-      };
+      context.lineWidth = width;
+      const rotationRadian = rotation * Math.PI / 180;
+      context.beginPath();
+      context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
+      context.stroke();
+    }
+    function CanvasUtils_alterHsl(color, type, value) {
+      return {
+        h: color.h,
+        s: color.s,
+        l: color.l + (type === "darken" ? -1 : 1) * value
+      };
+    }
+    class ColorAnimation {
+      constructor() {
+        this.count = 0;
+        this.enable = false;
+        this.offset = 0;
+        this.speed = 1;
+        this.sync = true;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.count !== undefined) {
+          this.count = data.count;
+        }
+        if (data.enable !== undefined) {
+          this.enable = data.enable;
+        }
+        if (data.offset !== undefined) {
+          this.offset = NumberUtils_setRangeValue(data.offset);
+        }
+        if (data.speed !== undefined) {
+          this.speed = data.speed;
+        }
+        if (data.sync !== undefined) {
+          this.sync = data.sync;
+        }
+      }
+    }
+    class HslAnimation {
+      constructor() {
+        this.h = new ColorAnimation;
+        this.s = new ColorAnimation;
+        this.l = new ColorAnimation;
+      }
+      load(data) {
+        if (!data) {
+          return;
+        }
+        this.h.load(data.h);
+        this.s.load(data.s);
+        this.l.load(data.l);
+      }
+    }
+    class OptionsColor_OptionsColor {
+      constructor() {
+        this.value = "#fff";
+      }
+      static create(source, data) {
+        const color = new OptionsColor_OptionsColor;
+        color.load(source);
+        if (data !== undefined) {
+          if (typeof data === "string" || data instanceof Array) {
+            color.load({
+              value: data
+            });
+          } else {
+            color.load(data);
+          }
+        }
+        return color;
+      }
+      load(data) {
+        if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
+          return;
+        }
+        this.value = data.value;
+      }
+    }
+    class AnimatableColor_AnimatableColor extends OptionsColor_OptionsColor {
+      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;
+      }
+      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);
+          }
+        }
+      }
+    }
+    class EmitterLife {
+      constructor() {
+        this.wait = false;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.count !== undefined) {
+          this.count = data.count;
+        }
+        if (data.delay !== undefined) {
+          this.delay = data.delay;
+        }
+        if (data.duration !== undefined) {
+          this.duration = data.duration;
+        }
+        if (data.wait !== undefined) {
+          this.wait = data.wait;
+        }
+      }
+    }
+    class EmitterRate {
+      constructor() {
+        this.quantity = 1;
+        this.delay = .1;
+      }
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.quantity !== undefined) {
+          this.quantity = NumberUtils_setRangeValue(data.quantity);
+        }
+        if (data.delay !== undefined) {
+          this.delay = NumberUtils_setRangeValue(data.delay);
+        }
+      }
     }
     class EmitterSize {
       constructor() {
@@ -4843,21 +5012,62 @@
         }
       }
     }
-    const shapes = new Map;
-    class ShapeManager {
-      static addShape(name, drawer) {
-        if (!ShapeManager.getShape(name)) {
-          shapes.set(name, drawer);
-        }
-      }
-      static getShape(name) {
-        return shapes.get(name);
+    class Emitter {
+      constructor() {
+        this.autoPlay = true;
+        this.fill = true;
+        this.life = new EmitterLife;
+        this.rate = new EmitterRate;
+        this.shape = "square";
+        this.startCount = 0;
       }
-      static getSupportedShapes() {
-        return shapes.keys();
+      load(data) {
+        if (data === undefined) {
+          return;
+        }
+        if (data.autoPlay !== undefined) {
+          this.autoPlay = data.autoPlay;
+        }
+        if (data.size !== undefined) {
+          if (this.size === undefined) {
+            this.size = new EmitterSize;
+          }
+          this.size.load(data.size);
+        }
+        if (data.direction !== undefined) {
+          this.direction = data.direction;
+        }
+        this.domId = data.domId;
+        if (data.fill !== undefined) {
+          this.fill = data.fill;
+        }
+        this.life.load(data.life);
+        this.name = data.name;
+        if (data.particles !== undefined) {
+          this.particles = Utils_deepExtend({}, data.particles);
+        }
+        this.rate.load(data.rate);
+        if (data.shape !== undefined) {
+          this.shape = data.shape;
+        }
+        if (data.position !== undefined) {
+          this.position = {
+            x: data.position.x,
+            y: data.position.y
+          };
+        }
+        if (data.spawnColor !== undefined) {
+          if (this.spawnColor === undefined) {
+            this.spawnColor = new AnimatableColor_AnimatableColor;
+          }
+          this.spawnColor.load(data.spawnColor);
+        }
+        if (data.startCount !== undefined) {
+          this.startCount = data.startCount;
+        }
       }
     }
-    var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+    var EmitterInstance_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
       if (kind === "m") throw new TypeError("Private method is not writable");
       if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
       if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
@@ -4869,37 +5079,43 @@
       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 _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded;
+    var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
     class EmitterInstance {
-      constructor(emitters, container, emitterOptions, position) {
+      constructor(engine, emitters, container, options, position) {
         var _a, _b, _c, _d, _e, _f;
         var _g;
         this.emitters = emitters;
         this.container = container;
         _EmitterInstance_firstSpawn.set(this, void 0);
         _EmitterInstance_startParticlesAdded.set(this, void 0);
+        _EmitterInstance_engine.set(this, void 0);
+        EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_engine, engine, "f");
         this.currentDuration = 0;
         this.currentEmitDelay = 0;
         this.currentSpawnDelay = 0;
         this.initialPosition = position;
-        this.emitterOptions = Utils_deepExtend({}, emitterOptions);
-        this.spawnDelay = ((_a = this.emitterOptions.life.delay) !== null && _a !== void 0 ? _a : 0) * 1e3 / this.container.retina.reduceFactor;
-        this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
-        this.name = emitterOptions.name;
-        this.shape = ShapeManager.getShape(emitterOptions.shape);
-        this.fill = emitterOptions.fill;
-        __classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.emitterOptions.life.wait, "f");
-        __classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
-        let particlesOptions = Utils_deepExtend({}, this.emitterOptions.particles);
+        if (options instanceof Emitter) {
+          this.options = options;
+        } else {
+          this.options = new Emitter;
+          this.options.load(options);
+        }
+        this.spawnDelay = ((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1e3 / this.container.retina.reduceFactor;
+        this.name = this.options.name;
+        this.shape = (_b = EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _b === void 0 ? void 0 : _b.getShape(this.options.shape);
+        this.fill = this.options.fill;
+        EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
+        EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
+        let particlesOptions = Utils_deepExtend({}, this.options.particles);
         particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : particlesOptions = {};
         (_c = particlesOptions.move) !== null && _c !== void 0 ? _c : particlesOptions.move = {};
-        (_d = (_g = particlesOptions.move).direction) !== null && _d !== void 0 ? _d : _g.direction = this.emitterOptions.direction;
-        if (this.emitterOptions.spawnColor !== undefined) {
-          this.spawnColor = ColorUtils_colorToHsl(this.emitterOptions.spawnColor);
+        (_d = (_g = particlesOptions.move).direction) !== null && _d !== void 0 ? _d : _g.direction = this.options.direction;
+        if (this.options.spawnColor) {
+          this.spawnColor = ColorUtils_colorToHsl(this.options.spawnColor);
         }
-        this.paused = !this.emitterOptions.autoPlay;
+        this.paused = !this.options.autoPlay;
         this.particlesOptions = particlesOptions;
-        this.size = (_e = this.emitterOptions.size) !== null && _e !== void 0 ? _e : (() => {
+        this.size = (_e = this.options.size) !== null && _e !== void 0 ? _e : (() => {
           const size = new EmitterSize;
           size.load({
             height: 0,
@@ -4908,7 +5124,7 @@
           });
           return size;
         })();
-        this.lifeCount = (_f = this.emitterOptions.life.count) !== null && _f !== void 0 ? _f : -1;
+        this.lifeCount = (_f = this.options.life.count) !== null && _f !== void 0 ? _f : -1;
         this.immortal = this.lifeCount <= 0;
         this.play();
       }
@@ -4925,9 +5141,9 @@
         if (this.paused) {
           return;
         }
-        if (this.container.retina.reduceFactor && (this.lifeCount > 0 || this.immortal || !this.emitterOptions.life.count) && (EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
+        if (this.container.retina.reduceFactor && (this.lifeCount > 0 || this.immortal || !this.options.life.count) && (EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
           if (this.emitDelay === undefined) {
-            const delay = NumberUtils_getRangeValue(this.emitterOptions.rate.delay);
+            const delay = NumberUtils_getRangeValue(this.options.rate.delay);
             this.emitDelay = 1e3 * delay / this.container.retina.reduceFactor;
           }
           if (this.lifeCount > 0 || this.immortal) {
@@ -4951,13 +5167,13 @@
           return;
         }
         if (EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f")) {
-          __classPrivateFieldSet(this, _EmitterInstance_firstSpawn, false, "f");
+          EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_firstSpawn, false, "f");
           this.currentSpawnDelay = (_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0;
           this.currentEmitDelay = (_b = this.emitDelay) !== null && _b !== void 0 ? _b : 0;
         }
         if (!EmitterInstance_classPrivateFieldGet(this, _EmitterInstance_startParticlesAdded, "f")) {
-          __classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, true, "f");
-          this.emitParticles(this.emitterOptions.startCount);
+          EmitterInstance_classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, true, "f");
+          this.emitParticles(this.options.startCount);
         }
         if (this.duration !== undefined) {
           this.currentDuration += delta.value;
@@ -4971,7 +5187,7 @@
             }
             if (this.lifeCount > 0 || this.immortal) {
               this.position = this.calcPosition();
-              this.spawnDelay = ((_c = this.emitterOptions.life.delay) !== null && _c !== void 0 ? _c : 0) * 1e3 / this.container.retina.reduceFactor;
+              this.spawnDelay = ((_c = this.options.life.delay) !== null && _c !== void 0 ? _c : 0) * 1e3 / this.container.retina.reduceFactor;
             } else {
               this.destroy();
             }
@@ -4995,12 +5211,42 @@
           }
         }
       }
+      getPosition() {
+        if (this.options.domId) {
+          const container = this.container, element = document.getElementById(this.options.domId);
+          if (element) {
+            const elRect = element.getBoundingClientRect();
+            return {
+              x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
+              y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio
+            };
+          }
+        }
+        return this.position;
+      }
+      getSize() {
+        const container = this.container;
+        if (this.options.domId) {
+          const element = document.getElementById(this.options.domId);
+          if (element) {
+            const elRect = element.getBoundingClientRect();
+            return {
+              width: elRect.width * container.retina.pixelRatio,
+              height: elRect.height * container.retina.pixelRatio
+            };
+          }
+        }
+        return {
+          width: this.size.mode === "percent" ? container.canvas.size.width * this.size.width / 100 : this.size.width,
+          height: this.size.mode === "percent" ? container.canvas.size.height * this.size.height / 100 : this.size.height
+        };
+      }
       prepareToDie() {
         var _a;
         if (this.paused) {
           return;
         }
-        const duration = (_a = this.emitterOptions.life) === null || _a === void 0 ? void 0 : _a.duration;
+        const duration = (_a = this.options.life) === null || _a === void 0 ? void 0 : _a.duration;
         if (this.container.retina.reduceFactor && (this.lifeCount > 0 || this.immortal) && duration !== undefined && duration > 0) {
           this.duration = duration * 1e3;
         }
@@ -5011,7 +5257,7 @@
       calcPosition() {
         var _a, _b;
         const container = this.container;
-        const percentPosition = this.emitterOptions.position;
+        const percentPosition = this.options.position;
         return {
           x: ((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100 * container.canvas.size.width,
           y: ((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100 * container.canvas.size.height
@@ -5021,31 +5267,22 @@
         if (this.paused) {
           return;
         }
-        const quantity = NumberUtils_getRangeValue(this.emitterOptions.rate.quantity);
+        const quantity = NumberUtils_getRangeValue(this.options.rate.quantity);
         this.emitParticles(quantity);
       }
       emitParticles(quantity) {
         var _a, _b, _c;
         const container = this.container;
-        const position = this.position;
-        const offset = {
-          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
-        };
+        const position = this.getPosition();
+        const size = this.getSize();
         for (let i = 0; i < quantity; i++) {
           const particlesOptions = Utils_deepExtend({}, this.particlesOptions);
           if (this.spawnColor) {
-            const colorAnimation = (_a = this.emitterOptions.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
-            if (colorAnimation) {
-              const hueAnimation = colorAnimation;
-              if (hueAnimation.enable) {
-                this.spawnColor.h = this.setColorAnimation(hueAnimation, this.spawnColor.h, 360);
-              } else {
-                const hslAnimation = colorAnimation;
-                this.spawnColor.h = this.setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
-                this.spawnColor.s = this.setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
-                this.spawnColor.l = this.setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
-              }
+            const hslAnimation = (_a = this.options.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
+            if (hslAnimation) {
+              this.spawnColor.h = this.setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
+              this.spawnColor.s = this.setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
+              this.spawnColor.l = this.setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
             }
             if (!particlesOptions.color) {
               particlesOptions.color = {
@@ -5055,7 +5292,10 @@
               particlesOptions.color.value = this.spawnColor;
             }
           }
-          const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, offset, this.fill)) !== null && _c !== void 0 ? _c : position;
+          if (!position) {
+            return;
+          }
+          const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
           container.particles.addParticle(pPosition, particlesOptions);
         }
       }
@@ -5066,115 +5306,44 @@
           return initValue;
         }
         const colorOffset = NumberUtils_randomInRange(animation.offset);
-        const delay = NumberUtils_getRangeValue(this.emitterOptions.rate.delay);
+        const delay = NumberUtils_getRangeValue(this.options.rate.delay);
         const emitFactor = 1e3 * delay / container.retina.reduceFactor;
         const colorSpeed = (_a = animation.speed) !== null && _a !== void 0 ? _a : 0;
         return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * 3.6) % maxValue;
       }
     }
-    _EmitterInstance_firstSpawn = new WeakMap, _EmitterInstance_startParticlesAdded = new WeakMap;
-    class EmitterRate {
-      constructor() {
-        this.quantity = 1;
-        this.delay = .1;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.quantity !== undefined) {
-          this.quantity = NumberUtils_setRangeValue(data.quantity);
-        }
-        if (data.delay !== undefined) {
-          this.delay = NumberUtils_setRangeValue(data.delay);
-        }
-      }
-    }
-    class EmitterLife {
-      constructor() {
-        this.wait = false;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.count !== undefined) {
-          this.count = data.count;
-        }
-        if (data.delay !== undefined) {
-          this.delay = data.delay;
-        }
-        if (data.duration !== undefined) {
-          this.duration = data.duration;
-        }
-        if (data.wait !== undefined) {
-          this.wait = data.wait;
-        }
-      }
-    }
-    class Emitter {
-      constructor() {
-        this.autoPlay = true;
-        this.fill = true;
-        this.life = new EmitterLife;
-        this.rate = new EmitterRate;
-        this.shape = "square";
-        this.startCount = 0;
-      }
-      load(data) {
-        if (data === undefined) {
-          return;
-        }
-        if (data.autoPlay !== undefined) {
-          this.autoPlay = data.autoPlay;
-        }
-        if (data.size !== undefined) {
-          if (this.size === undefined) {
-            this.size = new EmitterSize;
-          }
-          this.size.load(data.size);
-        }
-        if (data.direction !== undefined) {
-          this.direction = data.direction;
-        }
-        if (data.fill !== undefined) {
-          this.fill = data.fill;
-        }
-        this.life.load(data.life);
-        this.name = data.name;
-        if (data.particles !== undefined) {
-          this.particles = Utils_deepExtend({}, data.particles);
-        }
-        this.rate.load(data.rate);
-        if (data.shape !== undefined) {
-          this.shape = data.shape;
-        }
-        if (data.position !== undefined) {
-          this.position = {
-            x: data.position.x,
-            y: data.position.y
-          };
-        }
-        if (data.spawnColor !== undefined) {
-          if (this.spawnColor === undefined) {
-            this.spawnColor = new AnimatableColor_AnimatableColor;
-          }
-          this.spawnColor.load(data.spawnColor);
-        }
-        if (data.startCount !== undefined) {
-          this.startCount = data.startCount;
-        }
-      }
-    }
+    _EmitterInstance_firstSpawn = new WeakMap, _EmitterInstance_startParticlesAdded = new WeakMap, 
+    _EmitterInstance_engine = new WeakMap;
+    var Emitters_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Emitters_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 _Emitters_engine;
     class Emitters {
-      constructor(container) {
+      constructor(engine, container) {
         this.container = container;
+        _Emitters_engine.set(this, void 0);
+        Emitters_classPrivateFieldSet(this, _Emitters_engine, engine, "f");
         this.array = [];
         this.emitters = [];
         this.interactivityEmitters = [];
         const overridableContainer = container;
         overridableContainer.getEmitter = idxOrName => idxOrName === undefined || typeof idxOrName === "number" ? this.array[idxOrName || 0] : this.array.find((t => t.name === idxOrName));
         overridableContainer.addEmitter = (options, position) => this.addEmitter(options, position);
+        overridableContainer.removeEmitter = idxOrName => {
+          const emitter = overridableContainer.getEmitter(idxOrName);
+          if (emitter) {
+            this.removeEmitter(emitter);
+          }
+        };
         overridableContainer.playEmitter = idxOrName => {
           const emitter = overridableContainer.getEmitter(idxOrName);
           if (emitter) {
@@ -5272,7 +5441,9 @@
         }
       }
       addEmitter(options, position) {
-        const emitter = new EmitterInstance(this, this.container, options, position);
+        const emitterOptions = new Emitter;
+        emitterOptions.load(options);
+        const emitter = new EmitterInstance(Emitters_classPrivateFieldGet(this, _Emitters_engine, "f"), this, this.container, emitterOptions, position);
         this.array.push(emitter);
         return emitter;
       }
@@ -5283,43 +5454,46 @@
         }
       }
     }
-    class CircleShape {
-      randomPosition(position, offset, fill) {
-        const generateTheta = (x, y) => {
-          const u = Math.random() / 4;
-          const theta = Math.atan(y / x * Math.tan(2 * Math.PI * u));
-          const v = Math.random();
-          if (v < .25) {
-            return theta;
-          } else if (v < .5) {
-            return Math.PI - theta;
-          } else if (v < .75) {
-            return Math.PI + theta;
-          } else {
-            return -theta;
-          }
-        };
-        const radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2);
-        const [a, b] = [ offset.x / 2, offset.y / 2 ];
-        const randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(Math.random()) : maxRadius;
-        return {
-          x: position.x + randomRadius * Math.cos(randomTheta),
-          y: position.y + randomRadius * Math.sin(randomTheta)
-        };
+    _Emitters_engine = new WeakMap;
+    var ShapeManager_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var _ShapeManager_engine;
+    const shapes = new Map;
+    class ShapeManager {
+      constructor(engine) {
+        _ShapeManager_engine.set(this, void 0);
+        ShapeManager_classPrivateFieldSet(this, _ShapeManager_engine, engine, "f");
+      }
+      addShape(name, drawer) {
+        if (!this.getShape(name)) {
+          shapes.set(name, drawer);
+        }
+      }
+      getShape(name) {
+        return shapes.get(name);
+      }
+      getSupportedShapes() {
+        return shapes.keys();
       }
     }
+    _ShapeManager_engine = new WeakMap;
     function randomSquareCoordinate(position, offset) {
       return position + offset * (Math.random() - .5);
     }
     class SquareShape {
-      randomPosition(position, offset, fill) {
+      randomPosition(position, size, fill) {
         if (fill) {
           return {
-            x: randomSquareCoordinate(position.x, offset.x),
-            y: randomSquareCoordinate(position.y, offset.y)
+            x: randomSquareCoordinate(position.x, size.width),
+            y: randomSquareCoordinate(position.y, size.height)
           };
         } else {
-          const halfW = offset.x / 2, halfH = offset.y / 2, side = Math.floor(Math.random() * 4), v = (Math.random() - .5) * 2;
+          const halfW = size.width / 2, halfH = size.height / 2, side = Math.floor(Math.random() * 4), v = (Math.random() - .5) * 2;
           switch (side) {
            case 0:
             return {
@@ -5349,12 +5523,27 @@
         }
       }
     }
+    var Plugins_Emitters_classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function(receiver, state, value, kind, f) {
+      if (kind === "m") throw new TypeError("Private method is not writable");
+      if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+      if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+      return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), 
+      value;
+    };
+    var Plugins_Emitters_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 _EmittersPlugin_engine;
     class EmittersPlugin {
-      constructor() {
+      constructor(engine) {
+        _EmittersPlugin_engine.set(this, void 0);
+        Plugins_Emitters_classPrivateFieldSet(this, _EmittersPlugin_engine, engine, "f");
         this.id = "emitters";
       }
       getPlugin(container) {
-        return new Emitters(container);
+        return new Emitters(Plugins_Emitters_classPrivateFieldGet(this, _EmittersPlugin_engine, "f"), container);
       }
       needsPlugin(options) {
         var _a, _b, _c;
@@ -5403,16 +5592,21 @@
         }
       }
     }
-    async function loadEmittersPlugin(tsParticles) {
-      const plugin = new EmittersPlugin;
-      await tsParticles.addPlugin(plugin);
-      if (!tsParticles.addEmitterShape) {
-        tsParticles.addEmitterShape = (name, shape) => {
-          ShapeManager.addShape(name, shape);
+    _EmittersPlugin_engine = new WeakMap;
+    async function loadEmittersPlugin(engine) {
+      if (!engine.emitterShapeManager) {
+        engine.emitterShapeManager = new ShapeManager(engine);
+      }
+      if (!engine.addEmitterShape) {
+        engine.addEmitterShape = (name, shape) => {
+          var _a;
+          (_a = engine.emitterShapeManager) === null || _a === void 0 ? void 0 : _a.addShape(name, shape);
         };
       }
-      tsParticles.addEmitterShape("circle", new CircleShape);
-      tsParticles.addEmitterShape("square", new SquareShape);
+      const plugin = new EmittersPlugin(engine);
+      await engine.addPlugin(plugin);
+      engine.addEmitterShape("circle", new CircleShape);
+      engine.addEmitterShape("square", new SquareShape);
     }
     return __webpack_exports__;
   }();