tsparticles 2.8.0 → 3.0.0-alpha.1

package/tsparticles.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v2.8.0
+ * v3.0.0-alpha.1
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -59,6 +59,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   "AnimatableColor": () => (/* reexport */ AnimatableColor),
   "AnimationOptions": () => (/* reexport */ AnimationOptions),
+  "AnimationValueWithRandom": () => (/* reexport */ AnimationValueWithRandom),
   "Background": () => (/* reexport */ Background),
   "BackgroundMask": () => (/* reexport */ BackgroundMask),
   "BackgroundMaskCover": () => (/* reexport */ BackgroundMaskCover),
@@ -85,6 +86,7 @@ __webpack_require__.d(__webpack_exports__, {
   "MoveGravity": () => (/* reexport */ MoveGravity),
   "MovePath": () => (/* reexport */ MovePath),
   "MoveTrail": () => (/* reexport */ MoveTrail),
+  "MoveTrailFill": () => (/* reexport */ MoveTrailFill),
   "Opacity": () => (/* reexport */ Opacity),
   "OpacityAnimation": () => (/* reexport */ OpacityAnimation),
   "Options": () => (/* reexport */ Options),
@@ -99,6 +101,8 @@ __webpack_require__.d(__webpack_exports__, {
   "ParticlesOptions": () => (/* reexport */ ParticlesOptions),
   "Point": () => (/* reexport */ Point),
   "Range": () => (/* reexport */ Range),
+  "RangedAnimationOptions": () => (/* reexport */ RangedAnimationOptions),
+  "RangedAnimationValueWithRandom": () => (/* reexport */ RangedAnimationValueWithRandom),
   "Rectangle": () => (/* reexport */ Rectangle),
   "ResizeEvent": () => (/* reexport */ ResizeEvent),
   "Responsive": () => (/* reexport */ Responsive),
@@ -132,6 +136,7 @@ __webpack_require__.d(__webpack_exports__, {
   "circleBounceDataFromParticle": () => (/* reexport */ circleBounceDataFromParticle),
   "clamp": () => (/* reexport */ clamp),
   "clear": () => (/* reexport */ clear),
+  "clearCanvas": () => (/* reexport */ clearCanvas),
   "collisionVelocity": () => (/* reexport */ collisionVelocity),
   "colorMix": () => (/* reexport */ colorMix),
   "colorToHsl": () => (/* reexport */ colorToHsl),
@@ -149,6 +154,7 @@ __webpack_require__.d(__webpack_exports__, {
   "executeOnSingleOrMultiple": () => (/* reexport */ executeOnSingleOrMultiple),
   "findItemFromSingleOrMultiple": () => (/* reexport */ findItemFromSingleOrMultiple),
   "generatedAttribute": () => (/* reexport */ generatedAttribute),
+  "getContext": () => (/* reexport */ getContext),
   "getDistance": () => (/* reexport */ getDistance),
   "getDistances": () => (/* reexport */ getDistances),
   "getEasing": () => (/* reexport */ getEasing),
@@ -169,6 +175,7 @@ __webpack_require__.d(__webpack_exports__, {
   "hasMatchMedia": () => (/* reexport */ hasMatchMedia),
   "hslToRgb": () => (/* reexport */ hslToRgb),
   "hslaToRgba": () => (/* reexport */ hslaToRgba),
+  "initParticleNumericAnimationValue": () => (/* reexport */ initParticleNumericAnimationValue),
   "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled),
   "isInArray": () => (/* reexport */ isInArray),
   "isPointInside": () => (/* reexport */ isPointInside),
@@ -186,8 +193,7 @@ __webpack_require__.d(__webpack_exports__, {
   "mouseMoveEvent": () => (/* reexport */ mouseMoveEvent),
   "mouseOutEvent": () => (/* reexport */ mouseOutEvent),
   "mouseUpEvent": () => (/* reexport */ mouseUpEvent),
-  "paintBase": () => (/* reexport */ paintBase),
-  "paintImage": () => (/* reexport */ paintImage),
+  "paintCanvas": () => (/* reexport */ paintCanvas),
   "parseAlpha": () => (/* reexport */ parseAlpha),
   "randomInRange": () => (/* reexport */ randomInRange),
   "rangeColorToHsl": () => (/* reexport */ rangeColorToHsl),
@@ -209,50 +215,6 @@ __webpack_require__.d(__webpack_exports__, {
   "visibilityChangeEvent": () => (/* reexport */ visibilityChangeEvent)
 });
 
-;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/EventDispatcher.js
-class EventDispatcher {
-  constructor() {
-    this._listeners = new Map();
-  }
-  addEventListener(type, listener) {
-    var _a;
-    this.removeEventListener(type, listener);
-    if (!this._listeners.get(type)) {
-      this._listeners.set(type, []);
-    }
-    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
-  }
-  dispatchEvent(type, args) {
-    var _a;
-    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args));
-  }
-  hasEventListener(type) {
-    return !!this._listeners.get(type);
-  }
-  removeAllEventListeners(type) {
-    if (!type) {
-      this._listeners = new Map();
-    } else {
-      this._listeners.delete(type);
-    }
-  }
-  removeEventListener(type, listener) {
-    const arr = this._listeners.get(type);
-    if (!arr) {
-      return;
-    }
-    const length = arr.length,
-      idx = arr.indexOf(listener);
-    if (idx < 0) {
-      return;
-    }
-    if (length === 1) {
-      this._listeners.delete(type);
-    } else {
-      arr.splice(idx, 1);
-    }
-  }
-}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Vector3d.js
 class Vector3d {
   constructor(xOrCoords, y, z) {
@@ -750,6 +712,59 @@ function itemFromSingleOrMultiple(obj, index, useIndex) {
 function findItemFromSingleOrMultiple(obj, callback) {
   return obj instanceof Array ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
 }
+function initParticleNumericAnimationValue(options, pxRatio) {
+  const valueRange = options.value,
+    animationOptions = options.animation;
+  const res = {
+    enable: options.animation.enable,
+    value: getRangeValue(options.value) * pxRatio,
+    max: getRangeMax(valueRange) * pxRatio,
+    min: getRangeMin(valueRange) * pxRatio,
+    loops: 0,
+    maxLoops: getRangeValue(options.animation.count)
+  };
+  if (animationOptions.enable) {
+    res.decay = 1 - getRangeValue(animationOptions.decay);
+    let autoStatus = false;
+    switch (animationOptions.mode) {
+      case "increase":
+        res.status = "increasing";
+        break;
+      case "decrease":
+        res.status = "decreasing";
+        break;
+      case "random":
+        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        break;
+      case "auto":
+        autoStatus = true;
+        break;
+    }
+    switch (animationOptions.startValue) {
+      case "min":
+        res.value = res.min;
+        if (autoStatus) {
+          res.status = "increasing";
+        }
+        break;
+      case "random":
+        res.value = randomInRange(res);
+        if (autoStatus) {
+          res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        }
+        break;
+      case "max":
+      default:
+        res.value = res.max;
+        if (autoStatus) {
+          res.status = "decreasing";
+        }
+        break;
+    }
+  }
+  res.initialValue = res.value;
+  return res;
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/ColorUtils.js
 
 
@@ -1033,6 +1048,49 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/CanvasUtils.js
 
+function paintBase(context, dimension, baseColor) {
+  context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
+  context.fillRect(0, 0, dimension.width, dimension.height);
+}
+function paintImage(context, dimension, image, opacity) {
+  if (!image) {
+    return;
+  }
+  context.globalAlpha = opacity;
+  context.drawImage(image, 0, 0, dimension.width, dimension.height);
+  context.globalAlpha = 1;
+}
+function getContext(canvas) {
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Error tsParticles - No canvas context found");
+  }
+  return context;
+}
+function clearCanvas(context, size, options, trailFill, coverColorStyle) {
+  if (options.backgroundMask.enable) {
+    paintCanvas(context, size, options, coverColorStyle);
+  } else {
+    const trail = options.particles.move.trail;
+    if (trail.enable && trail.length > 0 && trailFill) {
+      if (trailFill.color) {
+        paintBase(context, size, getStyleFromRgb(trailFill.color, trailFill.opacity));
+      } else if (trailFill.image) {
+        paintImage(context, size, trailFill.image, trailFill.opacity);
+      }
+    } else {
+      clear(context, size);
+    }
+  }
+}
+function paintCanvas(context, size, options, coverColorStyle) {
+  if (options.backgroundMask.enable && coverColorStyle) {
+    clear(context, size);
+    paintBase(context, size, coverColorStyle);
+  } else {
+    paintBase(context, size);
+  }
+}
 function drawLine(context, begin, end) {
   context.beginPath();
   context.moveTo(begin.x, begin.y);
@@ -1046,18 +1104,6 @@ function drawTriangle(context, p1, p2, p3) {
   context.lineTo(p3.x, p3.y);
   context.closePath();
 }
-function paintBase(context, dimension, baseColor) {
-  context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
-  context.fillRect(0, 0, dimension.width, dimension.height);
-}
-function paintImage(context, dimension, image, opacity) {
-  if (!image) {
-    return;
-  }
-  context.globalAlpha = opacity;
-  context.drawImage(image, 0, 0, dimension.width, dimension.height);
-  context.globalAlpha = 1;
-}
 function clear(context, dimension) {
   context.clearRect(0, 0, dimension.width, dimension.height);
 }
@@ -1211,22 +1257,9 @@ class Canvas {
     return this.container.actualOptions.fullScreen.enable;
   }
   clear() {
-    const options = this.container.actualOptions,
-      trail = options.particles.move.trail,
-      trailFill = this._trailFill;
-    if (options.backgroundMask.enable) {
-      this.paint();
-    } else if (trail.enable && trail.length > 0 && trailFill) {
-      if (trailFill.color) {
-        this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
-      } else if (trailFill.image) {
-        this._paintImage(trailFill.image, trailFill.opacity);
-      }
-    } else {
-      this.draw(ctx => {
-        clear(ctx, this.size);
-      });
-    }
+    this.draw(ctx => {
+      clearCanvas(ctx, this.size, this.container.actualOptions, this._trailFill, this._coverColorStyle);
+    });
   }
   destroy() {
     var _a, _b;
@@ -1314,7 +1347,7 @@ class Canvas {
   }
   async init() {
     var _a;
-    this.resize();
+    this._resize();
     this._initStyle();
     this._initCover();
     try {
@@ -1322,57 +1355,18 @@ class Canvas {
     } catch (e) {
       console.error(e);
     }
-    this.initBackground();
+    this._initBackground();
     if (this.element) {
       (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, {
         attributes: true
       });
     }
-    this.initUpdaters();
-    this.initPlugins();
-    this.paint();
-  }
-  initBackground() {
-    const options = this.container.actualOptions,
-      background = options.background,
-      element = this.element,
-      elementStyle = element === null || element === void 0 ? void 0 : element.style;
-    if (!elementStyle) {
-      return;
-    }
-    if (background.color) {
-      const color = rangeColorToRgb(background.color);
-      elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
-    } else {
-      elementStyle.backgroundColor = "";
-    }
-    elementStyle.backgroundImage = background.image || "";
-    elementStyle.backgroundPosition = background.position || "";
-    elementStyle.backgroundRepeat = background.repeat || "";
-    elementStyle.backgroundSize = background.size || "";
-  }
-  initPlugins() {
-    this._resizePlugins = [];
-    for (const [, plugin] of this.container.plugins) {
-      if (plugin.resize) {
-        this._resizePlugins.push(plugin);
-      }
-      if (plugin.particleFillColor || plugin.particleStrokeColor) {
-        this._colorPlugins.push(plugin);
-      }
-    }
-  }
-  initUpdaters() {
-    this._preDrawUpdaters = [];
-    this._postDrawUpdaters = [];
-    for (const updater of this.container.particles.updaters) {
-      if (updater.afterDraw) {
-        this._postDrawUpdaters.push(updater);
-      }
-      if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
-        this._preDrawUpdaters.push(updater);
-      }
-    }
+    this._initUpdaters();
+    this._initPlugins();
+    this._paint();
+    this.container.updateActualOptions();
+    this._resize();
+    this._initBackground();
   }
   loadCanvas(canvas) {
     var _a, _b;
@@ -1385,53 +1379,18 @@ class Canvas {
     this._originalStyle = deepExtend({}, this.element.style);
     this.size.height = canvas.offsetHeight;
     this.size.width = canvas.offsetWidth;
-    this._context = this.element.getContext("2d");
+    this._context = getContext(canvas);
     (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this.element, {
       attributes: true
     });
     this.container.retina.init();
-    this.initBackground();
-  }
-  paint() {
-    const options = this.container.actualOptions;
-    this.draw(ctx => {
-      if (options.backgroundMask.enable && options.backgroundMask.cover) {
-        clear(ctx, this.size);
-        this._paintBase(this._coverColorStyle);
-      } else {
-        this._paintBase();
-      }
-    });
-  }
-  resize() {
-    if (!this.element) {
-      return;
-    }
-    const container = this.container,
-      pxRatio = container.retina.pixelRatio,
-      size = container.canvas.size,
-      newSize = {
-        width: this.element.offsetWidth * pxRatio,
-        height: this.element.offsetHeight * pxRatio
-      };
-    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
-      return;
-    }
-    const oldSize = Object.assign({}, size);
-    this.element.width = size.width = this.element.offsetWidth * pxRatio;
-    this.element.height = size.height = this.element.offsetHeight * pxRatio;
-    if (this.container.started) {
-      this.resizeFactor = {
-        width: size.width / oldSize.width,
-        height: size.height / oldSize.height
-      };
-    }
+    this._initBackground();
   }
   async windowResize() {
     if (!this.element) {
       return;
     }
-    this.resize();
+    this._resize();
     const container = this.container,
       needsRefresh = container.updateActualOptions();
     container.particles.setDensity();
@@ -1492,6 +1451,25 @@ class Canvas {
     }
     return [fColor, sColor];
   }
+  _initBackground() {
+    const options = this.container.actualOptions,
+      background = options.background,
+      element = this.element,
+      elementStyle = element === null || element === void 0 ? void 0 : element.style;
+    if (!elementStyle) {
+      return;
+    }
+    if (background.color) {
+      const color = rangeColorToRgb(background.color);
+      elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
+    } else {
+      elementStyle.backgroundColor = "";
+    }
+    elementStyle.backgroundImage = background.image || "";
+    elementStyle.backgroundPosition = background.position || "";
+    elementStyle.backgroundRepeat = background.repeat || "";
+    elementStyle.backgroundSize = background.size || "";
+  }
   _initCover() {
     const options = this.container.actualOptions,
       cover = options.backgroundMask.cover,
@@ -1507,6 +1485,17 @@ class Canvas {
       this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
     }
   }
+  _initPlugins() {
+    this._resizePlugins = [];
+    for (const [, plugin] of this.container.plugins) {
+      if (plugin.resize) {
+        this._resizePlugins.push(plugin);
+      }
+      if (plugin.particleFillColor || plugin.particleStrokeColor) {
+        this._colorPlugins.push(plugin);
+      }
+    }
+  }
   _initStyle() {
     const element = this.element,
       options = this.container.actualOptions;
@@ -1567,14 +1556,21 @@ class Canvas {
       });
     }
   }
-  _paintBase(baseColor) {
-    this.draw(ctx => {
-      paintBase(ctx, this.size, baseColor);
-    });
+  _initUpdaters() {
+    this._preDrawUpdaters = [];
+    this._postDrawUpdaters = [];
+    for (const updater of this.container.particles.updaters) {
+      if (updater.afterDraw) {
+        this._postDrawUpdaters.push(updater);
+      }
+      if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+        this._preDrawUpdaters.push(updater);
+      }
+    }
   }
-  _paintImage(image, opacity) {
+  _paint() {
     this.draw(ctx => {
-      paintImage(ctx, this.size, image, opacity);
+      paintCanvas(ctx, this.size, this.container.actualOptions, this._coverColorStyle);
     });
   }
   _repairStyle() {
@@ -1585,7 +1581,7 @@ class Canvas {
     }
     (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this._initStyle();
-    this.initBackground();
+    this._initBackground();
     (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(element, {
       attributes: true
     });
@@ -1603,6 +1599,30 @@ class Canvas {
     element.style.width = originalStyle.width;
     element.style.height = originalStyle.height;
   }
+  _resize() {
+    if (!this.element) {
+      return;
+    }
+    const container = this.container,
+      pxRatio = container.retina.pixelRatio,
+      size = container.canvas.size,
+      newSize = {
+        width: this.element.offsetWidth * pxRatio,
+        height: this.element.offsetHeight * pxRatio
+      };
+    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
+      return;
+    }
+    const oldSize = Object.assign({}, size);
+    this.element.width = size.width = this.element.offsetWidth * pxRatio;
+    this.element.height = size.height = this.element.offsetHeight * pxRatio;
+    if (this.container.started) {
+      this.resizeFactor = {
+        width: size.width / oldSize.width,
+        height: size.height / oldSize.height
+      };
+    }
+  }
   _setFullScreenStyle() {
     const element = this.element;
     if (!element) {
@@ -1641,28 +1661,28 @@ class EventListeners {
     this.container = container;
     this.canPush = true;
     this.handlers = {
-      mouseMove: e => this.mouseTouchMove(e),
-      touchStart: e => this.mouseTouchMove(e),
-      touchMove: e => this.mouseTouchMove(e),
-      touchEnd: () => this.mouseTouchFinish(),
-      mouseLeave: () => this.mouseTouchFinish(),
-      touchCancel: () => this.mouseTouchFinish(),
-      touchEndClick: e => this.mouseTouchClick(e),
-      mouseUp: e => this.mouseTouchClick(e),
-      mouseDown: () => this.mouseDown(),
-      visibilityChange: () => this.handleVisibilityChange(),
-      themeChange: e => this.handleThemeChange(e),
-      oldThemeChange: e => this.handleThemeChange(e),
-      resize: () => this.handleWindowResize()
+      mouseMove: e => this._mouseTouchMove(e),
+      touchStart: e => this._mouseTouchMove(e),
+      touchMove: e => this._mouseTouchMove(e),
+      touchEnd: () => this._mouseTouchFinish(),
+      mouseLeave: () => this._mouseTouchFinish(),
+      touchCancel: () => this._mouseTouchFinish(),
+      touchEndClick: e => this._mouseTouchClick(e),
+      mouseUp: e => this._mouseTouchClick(e),
+      mouseDown: () => this._mouseDown(),
+      visibilityChange: () => this._handleVisibilityChange(),
+      themeChange: e => this._handleThemeChange(e),
+      oldThemeChange: e => this._handleThemeChange(e),
+      resize: () => this._handleWindowResize()
     };
   }
   addListeners() {
-    this.manageListeners(true);
+    this._manageListeners(true);
   }
   removeListeners() {
-    this.manageListeners(false);
+    this._manageListeners(false);
   }
-  doMouseTouchClick(e) {
+  _doMouseTouchClick(e) {
     const container = this.container,
       options = container.actualOptions;
     if (this.canPush) {
@@ -1674,16 +1694,16 @@ class EventListeners {
       mouseInteractivity.clickPosition = Object.assign({}, mousePos);
       mouseInteractivity.clickTime = new Date().getTime();
       const onClick = options.interactivity.events.onClick;
-      executeOnSingleOrMultiple(onClick.mode, mode => this.handleClickMode(mode));
+      executeOnSingleOrMultiple(onClick.mode, mode => this._handleClickMode(mode));
     }
     if (e.type === "touchend") {
-      setTimeout(() => this.mouseTouchFinish(), 500);
+      setTimeout(() => this._mouseTouchFinish(), 500);
     }
   }
-  handleClickMode(mode) {
+  _handleClickMode(mode) {
     this.container.handleClickMode(mode);
   }
-  handleThemeChange(e) {
+  _handleThemeChange(e) {
     const mediaEvent = e,
       container = this.container,
       options = container.options,
@@ -1694,18 +1714,17 @@ class EventListeners {
       container.loadTheme(themeName);
     }
   }
-  handleVisibilityChange() {
+  _handleVisibilityChange() {
     const container = this.container,
       options = container.actualOptions;
-    this.mouseTouchFinish();
+    this._mouseTouchFinish();
     if (!options.pauseOnBlur) {
       return;
     }
-    if (document === null || document === void 0 ? void 0 : document.hidden) {
-      container.pageHidden = true;
+    container.pageHidden = (document === null || document === void 0 ? void 0 : document.hidden) || false;
+    if (container.pageHidden) {
       container.pause();
     } else {
-      container.pageHidden = false;
       if (container.getAnimationStatus()) {
         container.play(true);
       } else {
@@ -1713,7 +1732,7 @@ class EventListeners {
       }
     }
   }
-  handleWindowResize() {
+  _handleWindowResize() {
     if (this.resizeTimeout) {
       clearTimeout(this.resizeTimeout);
       delete this.resizeTimeout;
@@ -1723,7 +1742,7 @@ class EventListeners {
       return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
     }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
   }
-  manageListeners(add) {
+  _manageInteractivityEvents(add) {
     var _a;
     const handlers = this.handlers,
       container = this.container,
@@ -1739,18 +1758,6 @@ class EventListeners {
     } else {
       container.interactivity.element = container.canvas.element;
     }
-    const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
-    if (mediaMatch) {
-      if (mediaMatch.addEventListener !== undefined) {
-        manageListener(mediaMatch, "change", handlers.themeChange, add);
-      } else if (mediaMatch.addListener !== undefined) {
-        if (add) {
-          mediaMatch.addListener(handlers.oldThemeChange);
-        } else {
-          mediaMatch.removeListener(handlers.oldThemeChange);
-        }
-      }
-    }
     const interactivityEl = container.interactivity.element;
     if (!interactivityEl) {
       return;
@@ -1773,33 +1780,66 @@ class EventListeners {
     if (container.canvas.element) {
       container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
     }
-    if (options.interactivity.events.resize) {
-      if (typeof ResizeObserver !== "undefined") {
-        if (this.resizeObserver && !add) {
-          if (container.canvas.element) {
-            this.resizeObserver.unobserve(container.canvas.element);
-          }
-          this.resizeObserver.disconnect();
-          delete this.resizeObserver;
-        } else if (!this.resizeObserver && add && container.canvas.element) {
-          this.resizeObserver = new ResizeObserver(entries => {
-            const entry = entries.find(e => e.target === container.canvas.element);
-            if (!entry) {
-              return;
-            }
-            this.handleWindowResize();
-          });
-          this.resizeObserver.observe(container.canvas.element);
-        }
+  }
+  _manageListeners(add) {
+    this._manageMediaEvents(add);
+    this._manageInteractivityEvents(add);
+    this._manageResizeEvent(add);
+    this._manageVisibilityEvent(add);
+  }
+  _manageMediaEvents(add) {
+    const handlers = this.handlers,
+      mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
+    if (!mediaMatch) {
+      return;
+    }
+    if (mediaMatch.addEventListener !== undefined) {
+      manageListener(mediaMatch, "change", handlers.themeChange, add);
+      return;
+    }
+    if (mediaMatch.addListener !== undefined) {
+      if (add) {
+        mediaMatch.addListener(handlers.oldThemeChange);
       } else {
-        manageListener(window, resizeEvent, handlers.resize, add);
+        mediaMatch.removeListener(handlers.oldThemeChange);
       }
     }
-    if (document) {
-      manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+  }
+  _manageResizeEvent(add) {
+    const handlers = this.handlers,
+      container = this.container,
+      options = container.actualOptions;
+    if (!options.interactivity.events.resize) {
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      manageListener(window, resizeEvent, handlers.resize, add);
+      return;
+    }
+    if (this.resizeObserver && !add) {
+      if (container.canvas.element) {
+        this.resizeObserver.unobserve(container.canvas.element);
+      }
+      this.resizeObserver.disconnect();
+      delete this.resizeObserver;
+    } else if (!this.resizeObserver && add && container.canvas.element) {
+      this.resizeObserver = new ResizeObserver(entries => {
+        const entry = entries.find(e => e.target === container.canvas.element);
+        if (!entry) {
+          return;
+        }
+        this._handleWindowResize();
+      });
+      this.resizeObserver.observe(container.canvas.element);
     }
   }
-  mouseDown() {
+  _manageVisibilityEvent(add) {
+    if (!document) {
+      return;
+    }
+    manageListener(document, visibilityChangeEvent, this.handlers.visibilityChange, add);
+  }
+  _mouseDown() {
     const interactivity = this.container.interactivity;
     if (interactivity) {
       const mouse = interactivity.mouse;
@@ -1807,7 +1847,7 @@ class EventListeners {
       mouse.downPosition = mouse.position;
     }
   }
-  mouseTouchClick(e) {
+  _mouseTouchClick(e) {
     const container = this.container,
       options = container.actualOptions,
       mouse = container.interactivity.mouse;
@@ -1827,11 +1867,11 @@ class EventListeners {
       }
     }
     if (!handled) {
-      this.doMouseTouchClick(e);
+      this._doMouseTouchClick(e);
     }
     mouse.clicking = false;
   }
-  mouseTouchFinish() {
+  _mouseTouchFinish() {
     const interactivity = this.container.interactivity;
     if (!interactivity) {
       return;
@@ -1844,7 +1884,7 @@ class EventListeners {
     mouse.inside = false;
     mouse.clicking = false;
   }
-  mouseTouchMove(e) {
+  _mouseTouchMove(e) {
     var _a, _b, _c, _d, _e, _f, _g;
     const container = this.container,
       options = container.actualOptions;
@@ -2313,14 +2353,15 @@ class Interactivity {
 
 class ManualParticle {
   load(data) {
-    var _a, _b;
+    var _a, _b, _c;
     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
+        y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
+        mode: (_c = data.position.mode) !== null && _c !== void 0 ? _c : "percent"
       };
     }
     if (data.options !== undefined) {
@@ -2519,6 +2560,59 @@ class CollisionsOverlap {
     }
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/AnimationOptions.js
+
+class AnimationOptions {
+  constructor() {
+    this.count = 0;
+    this.enable = false;
+    this.speed = 1;
+    this.decay = 0;
+    this.sync = false;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.count !== undefined) {
+      this.count = setRangeValue(data.count);
+    }
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
+    if (data.speed !== undefined) {
+      this.speed = setRangeValue(data.speed);
+    }
+    if (data.decay !== undefined) {
+      this.decay = setRangeValue(data.decay);
+    }
+    if (data.sync !== undefined) {
+      this.sync = data.sync;
+    }
+  }
+}
+class RangedAnimationOptions extends AnimationOptions {
+  constructor() {
+    super();
+    this.mode = "auto";
+    this.startValue = "random";
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.minimumValue !== undefined) {
+      this.minimumValue = data.minimumValue;
+    }
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
+    if (data.startValue !== undefined) {
+      this.startValue = data.startValue;
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Random.js
 class Random {
   constructor() {
@@ -2540,6 +2634,8 @@ class Random {
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/ValueWithRandom.js
 
 
+
+
 class ValueWithRandom {
   constructor() {
     this.random = new Random();
@@ -2559,6 +2655,44 @@ class ValueWithRandom {
     }
   }
 }
+class AnimationValueWithRandom extends ValueWithRandom {
+  constructor() {
+    super();
+    this.animation = new AnimationOptions();
+  }
+  get anim() {
+    return this.animation;
+  }
+  set anim(value) {
+    this.animation = value;
+  }
+  load(data) {
+    var _a;
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+    if (animation !== undefined) {
+      this.animation.load(animation);
+    }
+  }
+}
+class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+  constructor() {
+    super();
+    this.animation = new RangedAnimationOptions();
+  }
+  load(data) {
+    super.load(data);
+    if (!data) {
+      return;
+    }
+    if (data.animation !== undefined) {
+      this.value = setRangeValue(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
+    }
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js
 
 class ParticlesBounceFactor extends ValueWithRandom {
@@ -2963,47 +3097,13 @@ class Move {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/AnimationOptions.js
-
-class AnimationOptions {
-  constructor() {
-    this.count = 0;
-    this.enable = false;
-    this.speed = 1;
-    this.decay = 0;
-    this.sync = false;
-  }
-  load(data) {
-    if (!data) {
-      return;
-    }
-    if (data.count !== undefined) {
-      this.count = setRangeValue(data.count);
-    }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    if (data.speed !== undefined) {
-      this.speed = setRangeValue(data.speed);
-    }
-    if (data.decay !== undefined) {
-      this.decay = setRangeValue(data.decay);
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
-  }
-}
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Opacity/OpacityAnimation.js
 
-class OpacityAnimation extends AnimationOptions {
+class OpacityAnimation extends RangedAnimationOptions {
   constructor() {
     super();
     this.destroy = "none";
-    this.enable = false;
     this.speed = 2;
-    this.startValue = "random";
-    this.sync = false;
   }
   get opacity_min() {
     return this.minimumValue;
@@ -3012,34 +3112,22 @@ class OpacityAnimation extends AnimationOptions {
     this.minimumValue = value;
   }
   load(data) {
-    var _a;
+    if ((data === null || data === void 0 ? void 0 : data.opacity_min) !== undefined && data.minimumValue === undefined) {
+      data.minimumValue = data.opacity_min;
+    }
+    super.load(data);
     if (!data) {
       return;
     }
-    super.load(data);
     if (data.destroy !== undefined) {
       this.destroy = data.destroy;
     }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.opacity_min;
-    if (data.speed !== undefined) {
-      this.speed = data.speed;
-    }
-    if (data.startValue !== undefined) {
-      this.startValue = data.startValue;
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Opacity/Opacity.js
 
 
-
-class Opacity extends ValueWithRandom {
+class Opacity extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new OpacityAnimation();
@@ -3052,18 +3140,6 @@ class Opacity extends ValueWithRandom {
   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);
-    }
-  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Number/ParticlesDensity.js
 class ParticlesDensity {
@@ -3174,106 +3250,45 @@ class Shadow {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Shape/Shape.js
 
-const charKey = "character",
-  charAltKey = "char",
-  imageKey = "image",
-  imageAltKey = "images",
-  polygonKey = "polygon",
-  polygonAltKey = "star";
 class Shape {
   constructor() {
     this.options = {};
     this.type = "circle";
+    this.close = true;
+    this.fill = true;
   }
-  get character() {
-    var _a;
-    return (_a = this.options[charKey]) !== null && _a !== void 0 ? _a : this.options[charAltKey];
-  }
-  set character(value) {
-    this.options[charAltKey] = this.options[charKey] = value;
-  }
-  get custom() {
-    return this.options;
-  }
-  set custom(value) {
-    this.options = value;
-  }
-  get image() {
-    var _a;
-    return (_a = this.options[imageKey]) !== null && _a !== void 0 ? _a : this.options[imageAltKey];
-  }
-  set image(value) {
-    this.options[imageAltKey] = this.options[imageKey] = value;
-  }
-  get images() {
-    return this.image;
-  }
-  set images(value) {
-    this.image = value;
-  }
-  get polygon() {
-    var _a;
-    return (_a = this.options[polygonKey]) !== null && _a !== void 0 ? _a : this.options[polygonAltKey];
-  }
-  set polygon(value) {
-    this.options[polygonAltKey] = this.options[polygonKey] = value;
-  }
-  get stroke() {
-    return [];
-  }
-  set stroke(_value) {}
   load(data) {
-    var _a, _b, _c;
+    var _a;
     if (!data) {
       return;
     }
-    const options = (_a = data.options) !== null && _a !== void 0 ? _a : data.custom;
+    if (data.close !== undefined) {
+      this.close = data.close;
+    }
+    if (data.fill !== undefined) {
+      this.fill = data.fill;
+    }
+    const options = data.options;
     if (options !== undefined) {
       for (const shape in options) {
         const item = options[shape];
         if (item) {
-          this.options[shape] = deepExtend((_b = this.options[shape]) !== null && _b !== void 0 ? _b : {}, item);
+          this.options[shape] = deepExtend((_a = this.options[shape]) !== null && _a !== void 0 ? _a : {}, item);
         }
       }
     }
-    this.loadShape(data.character, charKey, charAltKey, true);
-    this.loadShape(data.polygon, polygonKey, polygonAltKey, false);
-    this.loadShape((_c = data.image) !== null && _c !== void 0 ? _c : data.images, imageKey, imageAltKey, true);
     if (data.type !== undefined) {
       this.type = data.type;
     }
   }
-  loadShape(item, mainKey, altKey, altOverride) {
-    var _a, _b;
-    if (!item) {
-      return;
-    }
-    const isArray = item instanceof Array;
-    const emptyValue = isArray ? [] : {},
-      mainDifferentValues = isArray !== this.options[mainKey] instanceof Array,
-      altDifferentValues = isArray !== this.options[altKey] instanceof Array;
-    if (mainDifferentValues) {
-      this.options[mainKey] = emptyValue;
-    }
-    if (altDifferentValues && altOverride) {
-      this.options[altKey] = emptyValue;
-    }
-    this.options[mainKey] = deepExtend((_a = this.options[mainKey]) !== null && _a !== void 0 ? _a : emptyValue, item);
-    if (!this.options[altKey] || altOverride) {
-      this.options[altKey] = deepExtend((_b = this.options[altKey]) !== null && _b !== void 0 ? _b : emptyValue, item);
-    }
-  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Size/SizeAnimation.js
 
-class SizeAnimation extends AnimationOptions {
+class SizeAnimation extends RangedAnimationOptions {
   constructor() {
     super();
     this.destroy = "none";
-    this.enable = false;
     this.speed = 5;
-    this.startValue = "random";
-    this.sync = false;
   }
   get size_min() {
     return this.minimumValue;
@@ -3282,7 +3297,9 @@ class SizeAnimation extends AnimationOptions {
     this.minimumValue = value;
   }
   load(data) {
-    var _a;
+    if ((data === null || data === void 0 ? void 0 : data.size_min) !== undefined && data.minimumValue === undefined) {
+      data.minimumValue = data.size_min;
+    }
     super.load(data);
     if (!data) {
       return;
@@ -3290,26 +3307,12 @@ class SizeAnimation extends AnimationOptions {
     if (data.destroy !== undefined) {
       this.destroy = data.destroy;
     }
-    if (data.enable !== undefined) {
-      this.enable = data.enable;
-    }
-    this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.size_min;
-    if (data.speed !== undefined) {
-      this.speed = data.speed;
-    }
-    if (data.startValue !== undefined) {
-      this.startValue = data.startValue;
-    }
-    if (data.sync !== undefined) {
-      this.sync = data.sync;
-    }
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Size/Size.js
 
 
-
-class Size extends ValueWithRandom {
+class Size extends RangedAnimationValueWithRandom {
   constructor() {
     super();
     this.animation = new SizeAnimation();
@@ -3319,20 +3322,8 @@ class Size extends ValueWithRandom {
   get anim() {
     return this.animation;
   }
-  set anim(value) {
-    this.animation = value;
-  }
-  load(data) {
-    var _a;
-    super.load(data);
-    if (!data) {
-      return;
-    }
-    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);
-    }
+  set anim(value) {
+    this.animation = value;
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Options/Classes/Particles/Stroke.js
@@ -3415,7 +3406,7 @@ class ParticlesOptions {
     this.zIndex = new ZIndex();
   }
   load(data) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     if (!data) {
       return;
     }
@@ -3447,9 +3438,9 @@ class ParticlesOptions {
     if (data.interactivity !== undefined) {
       this.interactivity = deepExtend({}, data.interactivity);
     }
-    const strokeToLoad = (_e = data.stroke) !== null && _e !== void 0 ? _e : (_f = data.shape) === null || _f === void 0 ? void 0 : _f.stroke;
-    if (strokeToLoad) {
-      this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
+    const stroke = data.stroke;
+    if (stroke) {
+      this.stroke = executeOnSingleOrMultiple(stroke, t => {
         const tmp = new Stroke();
         tmp.load(t);
         return tmp;
@@ -3513,6 +3504,7 @@ class Options {
     this.fpsLimit = 120;
     this.interactivity = new Interactivity(engine, container);
     this.manualParticles = [];
+    this.name = "default";
     this.particles = loadParticlesOptions(this._engine, this._container);
     this.pauseOnBlur = true;
     this.pauseOnOutsideViewport = true;
@@ -3792,7 +3784,7 @@ class Particle {
     return this._getRollColor((_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor));
   }
   init(id, position, overrideOptions, group) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const container = this.container,
       engine = this._engine;
     this.id = id;
@@ -3844,39 +3836,8 @@ class Particle {
         this.pathGenerator.init(container);
       }
     }
-    const zIndexValue = getRangeValue(this.options.zIndex.value);
     container.retina.initParticle(this);
-    const sizeOptions = this.options.size,
-      sizeRange = sizeOptions.value,
-      sizeAnimation = sizeOptions.animation;
-    this.size = {
-      enable: sizeOptions.animation.enable,
-      value: getRangeValue(sizeOptions.value) * container.retina.pixelRatio,
-      max: getRangeMax(sizeRange) * pxRatio,
-      min: getRangeMin(sizeRange) * pxRatio,
-      loops: 0,
-      maxLoops: getRangeValue(sizeOptions.animation.count)
-    };
-    if (sizeAnimation.enable) {
-      this.size.status = "increasing";
-      this.size.decay = 1 - getRangeValue(sizeAnimation.decay);
-      switch (sizeAnimation.startValue) {
-        case "min":
-          this.size.value = this.size.min;
-          this.size.status = "increasing";
-          break;
-        case "random":
-          this.size.value = randomInRange(this.size);
-          this.size.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
-          break;
-        case "max":
-        default:
-          this.size.value = this.size.max;
-          this.size.status = "decreasing";
-          break;
-      }
-    }
-    this.size.initialValue = this.size.value;
+    this.size = initParticleNumericAnimationValue(this.options.size, pxRatio);
     this.bubble = {
       inRange: false
     };
@@ -3884,30 +3845,10 @@ class Particle {
       inRange: false,
       factor: 1
     };
-    this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
-    this.initialPosition = this.position.copy();
-    const canvasSize = container.canvas.size,
-      moveCenter = Object.assign({}, this.options.move.center),
-      isCenterPercent = moveCenter.mode === "percent";
-    this.moveCenter = {
-      x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
-      y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
-      radius: (_f = this.options.move.center.radius) !== null && _f !== void 0 ? _f : 0,
-      mode: (_g = this.options.move.center.mode) !== null && _g !== void 0 ? _g : "percent"
-    };
-    this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
-    switch (this.options.move.direction) {
-      case "inside":
-        this.outType = "inside";
-        break;
-      case "outside":
-        this.outType = "outside";
-        break;
-    }
+    this._initPosition(position);
     this.initialVelocity = this._calculateVelocity();
     this.velocity = this.initialVelocity.copy();
     this.moveDecay = 1 - getRangeValue(this.options.move.decay);
-    this.offset = Vector.origin;
     const particles = container.particles;
     particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
     particles.lastZIndex = this.position.z;
@@ -3933,13 +3874,13 @@ class Particle {
       updater.init(this);
     }
     for (const mover of container.particles.movers) {
-      (_h = mover.init) === null || _h === void 0 ? void 0 : _h.call(mover, this);
+      (_f = mover.init) === null || _f === void 0 ? void 0 : _f.call(mover, this);
     }
     if (drawer === null || drawer === void 0 ? void 0 : drawer.particleInit) {
       drawer.particleInit(container, this);
     }
     for (const [, plugin] of container.plugins) {
-      (_j = plugin.particleCreated) === null || _j === void 0 ? void 0 : _j.call(plugin, this);
+      (_g = plugin.particleCreated) === null || _g === void 0 ? void 0 : _g.call(plugin, this);
     }
   }
   isInsideCanvas() {
@@ -4064,10 +4005,39 @@ class Particle {
     }
     return color;
   }
+  _initPosition(position) {
+    var _a, _b;
+    const container = this.container,
+      zIndexValue = getRangeValue(this.options.zIndex.value);
+    this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+    this.initialPosition = this.position.copy();
+    const canvasSize = container.canvas.size,
+      moveCenter = Object.assign({}, this.options.move.center),
+      isCenterPercent = moveCenter.mode === "percent";
+    this.moveCenter = {
+      x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
+      y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
+      radius: (_a = this.options.move.center.radius) !== null && _a !== void 0 ? _a : 0,
+      mode: (_b = this.options.move.center.mode) !== null && _b !== void 0 ? _b : "percent"
+    };
+    this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
+    switch (this.options.move.direction) {
+      case "inside":
+        this.outType = "inside";
+        break;
+      case "outside":
+        this.outType = "outside";
+        break;
+    }
+    this.offset = Vector.origin;
+  }
   _loadShapeData(shapeOptions, reduceDuplicates) {
     const shapeData = shapeOptions.options[this.shape];
     if (shapeData) {
-      return deepExtend({}, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
+      return deepExtend({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill
+      }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
     }
   }
 }
@@ -4250,10 +4220,10 @@ class Particles {
     const container = this.container,
       options = container.actualOptions;
     for (const particle of options.manualParticles) {
-      this.addParticle(calcPositionFromSize({
+      this.addParticle(particle.position ? particle.position.mode === "precise" ? particle.position : calcPositionFromSize({
         size: container.canvas.size,
         position: particle.position
-      }), particle.options);
+      }) : undefined, particle.options);
     }
   }
   addParticle(position, overrideOptions, group, initializer) {
@@ -4357,22 +4327,9 @@ class Particles {
     }
     let deleted = 0;
     for (let i = index; deleted < quantity && i < this.count; i++) {
-      const particle = this.array[i];
-      if (!particle || particle.group !== group) {
-        continue;
+      if (this._removeParticle(i--, group, override)) {
+        deleted++;
       }
-      particle.destroy(override);
-      this.array.splice(i--, 1);
-      const zIdx = this.zArray.indexOf(particle);
-      this.zArray.splice(zIdx, 1);
-      this.pool.push(particle);
-      deleted++;
-      this._engine.dispatchEvent("particleRemoved", {
-        container: this.container,
-        data: {
-          particle
-        }
-      });
     }
   }
   removeQuantity(quantity, group) {
@@ -4493,6 +4450,24 @@ class Particles {
       return;
     }
   }
+  _removeParticle(index, group, override) {
+    const particle = this.array[index];
+    if (!particle || particle.group !== group) {
+      return false;
+    }
+    particle.destroy(override);
+    this.array.splice(index, 1);
+    const zIdx = this.zArray.indexOf(particle);
+    this.zArray.splice(zIdx, 1);
+    this.pool.push(particle);
+    this._engine.dispatchEvent("particleRemoved", {
+      container: this.container,
+      data: {
+        particle
+      }
+    });
+    return true;
+  }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Retina.js
 
@@ -4787,9 +4762,6 @@ class Container {
     }
     this.retina.init();
     await this.canvas.init();
-    this.updateActualOptions();
-    this.canvas.initBackground();
-    this.canvas.resize();
     this.zLayers = this.actualOptions.zLayers;
     this.duration = getRangeValue(this.actualOptions.duration) * 1000;
     this._delay = getRangeValue(this.actualOptions.delay) * 1000;
@@ -4992,158 +4964,48 @@ class Container {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Loader.js
-
-
-
-
-async function getDataFromUrl(jsonUrl, index) {
-  const url = itemFromSingleOrMultiple(jsonUrl, index);
-  if (!url) {
-    return;
-  }
-  const response = await fetch(url);
-  if (response.ok) {
-    return response.json();
-  }
-  console.error(`tsParticles - Error ${response.status} while retrieving config file`);
-}
-class Loader {
-  constructor(engine) {
-    this._engine = engine;
+;// CONCATENATED MODULE: ../../engine/dist/esm/Utils/EventDispatcher.js
+class EventDispatcher {
+  constructor() {
+    this._listeners = new Map();
   }
-  load(tagId, options, index) {
-    const params = {
-      index,
-      remote: false
-    };
-    if (typeof tagId === "string") {
-      params.tagId = tagId;
-    } else {
-      params.options = tagId;
-    }
-    if (typeof options === "number") {
-      params.index = options;
-    } else {
-      params.options = options !== null && options !== void 0 ? options : params.options;
+  addEventListener(type, listener) {
+    var _a;
+    this.removeEventListener(type, listener);
+    if (!this._listeners.get(type)) {
+      this._listeners.set(type, []);
     }
-    return this.loadOptions(params);
+    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
   }
-  async loadJSON(tagId, jsonUrl, index) {
-    let url, id;
-    if (typeof jsonUrl === "number" || jsonUrl === undefined) {
-      url = tagId;
-    } else {
-      id = tagId;
-      url = jsonUrl;
-    }
-    return this.loadRemoteOptions({
-      tagId: id,
-      url,
-      index,
-      remote: true
-    });
+  dispatchEvent(type, args) {
+    var _a;
+    (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach(handler => handler(args));
   }
-  async loadOptions(params) {
-    var _a, _b, _c;
-    const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(getRandom() * 10000)}`,
-      {
-        index,
-        url: jsonUrl,
-        remote
-      } = params,
-      options = remote ? await getDataFromUrl(jsonUrl, index) : params.options;
-    let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
-    if (!domContainer) {
-      domContainer = document.createElement("div");
-      domContainer.id = tagId;
-      (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
-    }
-    const currentOptions = itemFromSingleOrMultiple(options, index),
-      dom = this._engine.dom(),
-      oldIndex = dom.findIndex(v => v.id === tagId);
-    if (oldIndex >= 0) {
-      const old = this._engine.domItem(oldIndex);
-      if (old && !old.destroyed) {
-        old.destroy();
-        dom.splice(oldIndex, 1);
-      }
-    }
-    let canvasEl;
-    if (domContainer.tagName.toLowerCase() === "canvas") {
-      canvasEl = domContainer;
-      canvasEl.dataset[generatedAttribute] = "false";
-    } else {
-      const existingCanvases = domContainer.getElementsByTagName("canvas");
-      if (existingCanvases.length) {
-        canvasEl = existingCanvases[0];
-        canvasEl.dataset[generatedAttribute] = "false";
-      } else {
-        canvasEl = document.createElement("canvas");
-        canvasEl.dataset[generatedAttribute] = "true";
-        domContainer.appendChild(canvasEl);
-      }
-    }
-    if (!canvasEl.style.width) {
-      canvasEl.style.width = "100%";
-    }
-    if (!canvasEl.style.height) {
-      canvasEl.style.height = "100%";
-    }
-    const newItem = new Container(this._engine, tagId, currentOptions);
-    if (oldIndex >= 0) {
-      dom.splice(oldIndex, 0, newItem);
+  hasEventListener(type) {
+    return !!this._listeners.get(type);
+  }
+  removeAllEventListeners(type) {
+    if (!type) {
+      this._listeners = new Map();
     } else {
-      dom.push(newItem);
+      this._listeners.delete(type);
     }
-    newItem.canvas.loadCanvas(canvasEl);
-    await newItem.start();
-    return newItem;
-  }
-  async loadRemoteOptions(params) {
-    return this.loadOptions(params);
   }
-  async set(id, domContainer, options, index) {
-    const params = {
-      index,
-      remote: false
-    };
-    if (typeof id === "string") {
-      params.tagId = id;
-    } else {
-      params.element = id;
+  removeEventListener(type, listener) {
+    const arr = this._listeners.get(type);
+    if (!arr) {
+      return;
     }
-    if (domContainer instanceof HTMLElement) {
-      params.element = domContainer;
-    } else {
-      params.options = domContainer;
+    const length = arr.length,
+      idx = arr.indexOf(listener);
+    if (idx < 0) {
+      return;
     }
-    if (typeof options === "number") {
-      params.index = options;
+    if (length === 1) {
+      this._listeners.delete(type);
     } else {
-      params.options = options !== null && options !== void 0 ? options : params.options;
+      arr.splice(idx, 1);
     }
-    return this.loadOptions(params);
-  }
-  async setJSON(id, domContainer, jsonUrl, index) {
-    let url, newId, newIndex, element;
-    if (id instanceof HTMLElement) {
-      element = id;
-      url = domContainer;
-      newIndex = jsonUrl;
-    } else {
-      newId = id;
-      element = domContainer;
-      url = jsonUrl;
-      newIndex = index;
-    }
-    return this.loadRemoteOptions({
-      tagId: newId,
-      url,
-      index: newIndex,
-      element,
-      remote: true
-    });
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/esm/Core/Utils/Plugins.js
@@ -5263,14 +5125,46 @@ class Plugins {
 
 
 
+
+
+
+async function getDataFromUrl(data) {
+  const url = itemFromSingleOrMultiple(data.url, data.index);
+  if (!url) {
+    return data.fallback;
+  }
+  const response = await fetch(url);
+  if (response.ok) {
+    return response.json();
+  }
+  console.error(`tsParticles - Error ${response.status} while retrieving config file`);
+  return data.fallback;
+}
 class Engine {
   constructor() {
+    this._configs = new Map();
     this._domArray = [];
     this._eventDispatcher = new EventDispatcher();
-    this._initialized = false;
-    this._loader = new Loader(this);
     this.plugins = new Plugins(this);
   }
+  get configs() {
+    const res = {};
+    for (const [name, config] of this._configs) {
+      res[name] = config;
+    }
+    return res;
+  }
+  addConfig(nameOrConfig, config) {
+    var _a;
+    if (typeof nameOrConfig === "string") {
+      if (config) {
+        config.name = nameOrConfig;
+        this._configs.set(nameOrConfig, config);
+      }
+    } else {
+      this._configs.set((_a = nameOrConfig.name) !== null && _a !== void 0 ? _a : "default", nameOrConfig);
+    }
+  }
   addEventListener(type, listener) {
     this._eventDispatcher.addEventListener(type, listener);
   }
@@ -5327,19 +5221,64 @@ class Engine {
     }
     dom.splice(index, 1);
   }
-  init() {
-    if (!this._initialized) {
-      this._initialized = true;
+  async load(params) {
+    var _a, _b, _c;
+    const id = (_a = params.id) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(getRandom() * 10000)}`,
+      {
+        index,
+        url
+      } = params,
+      options = url ? await getDataFromUrl({
+        fallback: params.options,
+        index,
+        url: url
+      }) : params.options;
+    let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(id);
+    if (!domContainer) {
+      domContainer = document.createElement("div");
+      domContainer.id = id;
+      (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
     }
-  }
-  async load(tagId, options) {
-    return this._loader.load(tagId, options);
-  }
-  async loadFromArray(tagId, options, index) {
-    return this._loader.load(tagId, options, index);
-  }
-  async loadJSON(tagId, pathConfigJson, index) {
-    return this._loader.loadJSON(tagId, pathConfigJson, index);
+    const currentOptions = itemFromSingleOrMultiple(options, index),
+      dom = this.dom(),
+      oldIndex = dom.findIndex(v => v.id === id);
+    if (oldIndex >= 0) {
+      const old = this.domItem(oldIndex);
+      if (old && !old.destroyed) {
+        old.destroy();
+        dom.splice(oldIndex, 1);
+      }
+    }
+    let canvasEl;
+    if (domContainer.tagName.toLowerCase() === "canvas") {
+      canvasEl = domContainer;
+      canvasEl.dataset[generatedAttribute] = "false";
+    } else {
+      const existingCanvases = domContainer.getElementsByTagName("canvas");
+      if (existingCanvases.length) {
+        canvasEl = existingCanvases[0];
+        canvasEl.dataset[generatedAttribute] = "false";
+      } else {
+        canvasEl = document.createElement("canvas");
+        canvasEl.dataset[generatedAttribute] = "true";
+        domContainer.appendChild(canvasEl);
+      }
+    }
+    if (!canvasEl.style.width) {
+      canvasEl.style.width = "100%";
+    }
+    if (!canvasEl.style.height) {
+      canvasEl.style.height = "100%";
+    }
+    const newItem = new Container(this, id, currentOptions);
+    if (oldIndex >= 0) {
+      dom.splice(oldIndex, 0, newItem);
+    } else {
+      dom.push(newItem);
+    }
+    newItem.canvas.loadCanvas(canvasEl);
+    await newItem.start();
+    return newItem;
   }
   async refresh() {
     for (const instance of this.dom()) {
@@ -5349,16 +5288,10 @@ class Engine {
   removeEventListener(type, listener) {
     this._eventDispatcher.removeEventListener(type, listener);
   }
-  async set(id, element, options) {
-    return this._loader.set(id, element, options);
-  }
-  async setJSON(id, element, pathConfigJson, index) {
-    return this._loader.setJSON(id, element, pathConfigJson, index);
-  }
   setOnClickHandler(callback) {
     const dom = this.dom();
     if (!dom.length) {
-      throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
+      throw new Error("Can only set click handlers after calling tsParticles.load()");
     }
     for (const domItem of dom) {
       domItem.addClickHandler(callback);
@@ -5472,7 +5405,15 @@ const rgbColorManager = new RgbColorManager(),
 addColorManager(rgbColorManager);
 addColorManager(hslColorManager);
 const tsParticles = new Engine();
-tsParticles.init();
+
+
+
+
+
+
+
+
+
 
 
 
@@ -7163,10 +7104,16 @@ async function loadRollUpdater(engine) {
 ;// CONCATENATED MODULE: ../pjs/dist/esm/index.js
 const initPjs = engine => {
   const particlesJS = (tagId, options) => {
-    return engine.load(tagId, options);
+    return engine.load({
+      id: tagId,
+      options: options
+    });
   };
   particlesJS.load = (tagId, pathConfigJson, callback) => {
-    engine.loadJSON(tagId, pathConfigJson).then(container => {
+    engine.load({
+      id: tagId,
+      url: pathConfigJson
+    }).then(container => {
       if (container) {
         callback(container);
       }
@@ -9683,42 +9630,14 @@ class OpacityUpdater {
   }
   init(particle) {
     const opacityOptions = particle.options.opacity;
-    particle.opacity = {
-      enable: opacityOptions.animation.enable,
-      max: getRangeMax(opacityOptions.value),
-      min: getRangeMin(opacityOptions.value),
-      value: getRangeValue(opacityOptions.value),
-      loops: 0,
-      maxLoops: getRangeValue(opacityOptions.animation.count)
-    };
+    particle.opacity = initParticleNumericAnimationValue(opacityOptions, 1);
     const opacityAnimation = opacityOptions.animation;
     if (opacityAnimation.enable) {
-      particle.opacity.decay = 1 - getRangeValue(opacityAnimation.decay);
-      particle.opacity.status = "increasing";
-      const opacityRange = opacityOptions.value;
-      particle.opacity.min = getRangeMin(opacityRange);
-      particle.opacity.max = getRangeMax(opacityRange);
-      switch (opacityAnimation.startValue) {
-        case "min":
-          particle.opacity.value = particle.opacity.min;
-          particle.opacity.status = "increasing";
-          break;
-        case "random":
-          particle.opacity.value = randomInRange(particle.opacity);
-          particle.opacity.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
-          break;
-        case "max":
-        default:
-          particle.opacity.value = particle.opacity.max;
-          particle.opacity.status = "decreasing";
-          break;
-      }
       particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * this.container.retina.reduceFactor;
       if (!opacityAnimation.sync) {
         particle.opacity.velocity *= getRandom();
       }
     }
-    particle.opacity.initialValue = particle.opacity.value;
   }
   isEnabled(particle) {
     var _a, _b, _c, _d;