tsparticles 1.34.1 → 1.35.0

package/tsparticles.slim.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
- * v1.34.1
+ * v1.35.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -59,12 +59,10 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   "AlterType": () => (/* reexport */ AlterType),
   "AnimationStatus": () => (/* reexport */ AnimationStatus),
-  "CanvasUtils": () => (/* reexport */ CanvasUtils_namespaceObject),
   "Circle": () => (/* reexport */ Circle),
   "CircleWarp": () => (/* reexport */ CircleWarp),
   "ClickMode": () => (/* reexport */ ClickMode),
   "CollisionMode": () => (/* reexport */ CollisionMode),
-  "ColorUtils": () => (/* reexport */ ColorUtils_namespaceObject),
   "Constants": () => (/* reexport */ Constants),
   "Container": () => (/* reexport */ Container),
   "DestroyMode": () => (/* reexport */ DestroyMode),
@@ -79,7 +77,6 @@ __webpack_require__.d(__webpack_exports__, {
   "InteractorType": () => (/* reexport */ InteractorType),
   "Main": () => (/* reexport */ Main),
   "MoveDirection": () => (/* reexport */ MoveDirection),
-  "NumberUtils": () => (/* reexport */ NumberUtils_namespaceObject),
   "OrbitType": () => (/* reexport */ OrbitType),
   "OutMode": () => (/* reexport */ OutMode),
   "OutModeDirection": () => (/* reexport */ OutModeDirection),
@@ -87,113 +84,90 @@ __webpack_require__.d(__webpack_exports__, {
   "ParticlesInteractorBase": () => (/* reexport */ ParticlesInteractorBase),
   "Point": () => (/* reexport */ Point),
   "Rectangle": () => (/* reexport */ Rectangle),
+  "RollMode": () => (/* reexport */ RollMode),
   "RotateDirection": () => (/* reexport */ RotateDirection),
   "ShapeType": () => (/* reexport */ ShapeType),
   "SizeMode": () => (/* reexport */ SizeMode),
   "StartValueType": () => (/* reexport */ StartValueType),
   "ThemeMode": () => (/* reexport */ ThemeMode),
   "TiltDirection": () => (/* reexport */ TiltDirection),
-  "Utils": () => (/* reexport */ Utils_namespaceObject),
   "Vector": () => (/* reexport */ Vector),
+  "alterHsl": () => (/* reexport */ alterHsl),
+  "animate": () => (/* reexport */ animate),
+  "areBoundsInside": () => (/* reexport */ areBoundsInside),
+  "arrayRandomIndex": () => (/* reexport */ arrayRandomIndex),
+  "calcEasing": () => (/* reexport */ calcEasing),
+  "calculateBounds": () => (/* reexport */ calculateBounds),
+  "cancelAnimation": () => (/* reexport */ cancelAnimation),
+  "circleBounce": () => (/* reexport */ circleBounce),
+  "circleBounceDataFromParticle": () => (/* reexport */ circleBounceDataFromParticle),
+  "clamp": () => (/* reexport */ clamp),
+  "clear": () => (/* reexport */ clear),
+  "collisionVelocity": () => (/* reexport */ collisionVelocity),
+  "colorMix": () => (/* reexport */ colorMix),
+  "colorToHsl": () => (/* reexport */ colorToHsl),
+  "colorToRgb": () => (/* reexport */ colorToRgb),
+  "deepExtend": () => (/* reexport */ deepExtend),
+  "divMode": () => (/* reexport */ divMode),
+  "divModeExecute": () => (/* reexport */ divModeExecute),
+  "drawConnectLine": () => (/* reexport */ drawConnectLine),
+  "drawEllipse": () => (/* reexport */ drawEllipse),
+  "drawGrabLine": () => (/* reexport */ drawGrabLine),
+  "drawLinkLine": () => (/* reexport */ drawLinkLine),
+  "drawLinkTriangle": () => (/* reexport */ drawLinkTriangle),
+  "drawParticle": () => (/* reexport */ drawParticle),
+  "drawParticlePlugin": () => (/* reexport */ drawParticlePlugin),
+  "drawPlugin": () => (/* reexport */ drawPlugin),
+  "drawShape": () => (/* reexport */ drawShape),
+  "drawShapeAfterEffect": () => (/* reexport */ drawShapeAfterEffect),
+  "getDistance": () => (/* reexport */ getDistance),
+  "getDistances": () => (/* reexport */ getDistances),
+  "getHslAnimationFromHsl": () => (/* reexport */ getHslAnimationFromHsl),
+  "getHslFromAnimation": () => (/* reexport */ getHslFromAnimation),
+  "getLinkColor": () => (/* reexport */ getLinkColor),
+  "getLinkRandomColor": () => (/* reexport */ getLinkRandomColor),
+  "getParticleBaseVelocity": () => (/* reexport */ getParticleBaseVelocity),
+  "getParticleDirectionAngle": () => (/* reexport */ getParticleDirectionAngle),
+  "getRandomRgbColor": () => (/* reexport */ getRandomRgbColor),
+  "getRangeMax": () => (/* reexport */ getRangeMax),
+  "getRangeMin": () => (/* reexport */ getRangeMin),
+  "getRangeValue": () => (/* reexport */ getRangeValue),
+  "getStyleFromHsl": () => (/* reexport */ getStyleFromHsl),
+  "getStyleFromHsv": () => (/* reexport */ getStyleFromHsv),
+  "getStyleFromRgb": () => (/* reexport */ getStyleFromRgb),
+  "getValue": () => (/* reexport */ getValue),
+  "gradient": () => (/* reexport */ gradient),
+  "hslToHsv": () => (/* reexport */ hslToHsv),
+  "hslToRgb": () => (/* reexport */ hslToRgb),
+  "hslaToHsva": () => (/* reexport */ hslaToHsva),
+  "hslaToRgba": () => (/* reexport */ hslaToRgba),
+  "hsvToHsl": () => (/* reexport */ hsvToHsl),
+  "hsvToRgb": () => (/* reexport */ hsvToRgb),
+  "hsvaToHsla": () => (/* reexport */ hsvaToHsla),
+  "hsvaToRgba": () => (/* reexport */ hsvaToRgba),
+  "isDivModeEnabled": () => (/* reexport */ isDivModeEnabled),
+  "isInArray": () => (/* reexport */ isInArray),
+  "isPointInside": () => (/* reexport */ isPointInside),
+  "isSsr": () => (/* reexport */ isSsr),
+  "itemFromArray": () => (/* reexport */ itemFromArray),
+  "loadFont": () => (/* reexport */ loadFont),
   "loadSlim": () => (/* reexport */ loadSlim),
+  "mix": () => (/* reexport */ mix),
   "pJSDom": () => (/* binding */ pJSDom),
+  "paintBase": () => (/* reexport */ paintBase),
   "particlesJS": () => (/* binding */ particlesJS),
+  "randomInRange": () => (/* reexport */ randomInRange),
+  "rectBounce": () => (/* reexport */ rectBounce),
+  "rgbToHsl": () => (/* reexport */ rgbToHsl),
+  "rgbToHsv": () => (/* reexport */ rgbToHsv),
+  "rgbaToHsva": () => (/* reexport */ rgbaToHsva),
+  "setRangeValue": () => (/* reexport */ setRangeValue),
+  "singleDivModeExecute": () => (/* reexport */ singleDivModeExecute),
+  "stringToAlpha": () => (/* reexport */ stringToAlpha),
+  "stringToRgb": () => (/* reexport */ stringToRgb),
   "tsParticles": () => (/* binding */ tsParticles)
 });
 
-// NAMESPACE OBJECT: ./dist/browser/Utils/NumberUtils.js
-var NumberUtils_namespaceObject = {};
-__webpack_require__.r(NumberUtils_namespaceObject);
-__webpack_require__.d(NumberUtils_namespaceObject, {
-  "calcEasing": () => (calcEasing),
-  "clamp": () => (clamp),
-  "collisionVelocity": () => (collisionVelocity),
-  "getDistance": () => (getDistance),
-  "getDistances": () => (getDistances),
-  "getParticleBaseVelocity": () => (getParticleBaseVelocity),
-  "getParticleDirectionAngle": () => (getParticleDirectionAngle),
-  "getRangeMax": () => (getRangeMax),
-  "getRangeMin": () => (getRangeMin),
-  "getRangeValue": () => (getRangeValue),
-  "getValue": () => (getValue),
-  "mix": () => (mix),
-  "randomInRange": () => (randomInRange),
-  "setRangeValue": () => (setRangeValue)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/Utils.js
-var Utils_namespaceObject = {};
-__webpack_require__.r(Utils_namespaceObject);
-__webpack_require__.d(Utils_namespaceObject, {
-  "animate": () => (animate),
-  "areBoundsInside": () => (areBoundsInside),
-  "arrayRandomIndex": () => (arrayRandomIndex),
-  "calculateBounds": () => (calculateBounds),
-  "cancelAnimation": () => (cancelAnimation),
-  "circleBounce": () => (circleBounce),
-  "circleBounceDataFromParticle": () => (circleBounceDataFromParticle),
-  "deepExtend": () => (deepExtend),
-  "divMode": () => (divMode),
-  "divModeExecute": () => (divModeExecute),
-  "isDivModeEnabled": () => (isDivModeEnabled),
-  "isInArray": () => (isInArray),
-  "isPointInside": () => (isPointInside),
-  "isSsr": () => (isSsr),
-  "itemFromArray": () => (itemFromArray),
-  "loadFont": () => (loadFont),
-  "rectBounce": () => (rectBounce),
-  "singleDivModeExecute": () => (singleDivModeExecute)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/ColorUtils.js
-var ColorUtils_namespaceObject = {};
-__webpack_require__.r(ColorUtils_namespaceObject);
-__webpack_require__.d(ColorUtils_namespaceObject, {
-  "colorMix": () => (colorMix),
-  "colorToHsl": () => (colorToHsl),
-  "colorToRgb": () => (colorToRgb),
-  "getHslAnimationFromHsl": () => (getHslAnimationFromHsl),
-  "getHslFromAnimation": () => (getHslFromAnimation),
-  "getLinkColor": () => (getLinkColor),
-  "getLinkRandomColor": () => (getLinkRandomColor),
-  "getRandomRgbColor": () => (getRandomRgbColor),
-  "getStyleFromHsl": () => (getStyleFromHsl),
-  "getStyleFromHsv": () => (getStyleFromHsv),
-  "getStyleFromRgb": () => (getStyleFromRgb),
-  "hslToHsv": () => (hslToHsv),
-  "hslToRgb": () => (hslToRgb),
-  "hslaToHsva": () => (hslaToHsva),
-  "hslaToRgba": () => (hslaToRgba),
-  "hsvToHsl": () => (hsvToHsl),
-  "hsvToRgb": () => (hsvToRgb),
-  "hsvaToHsla": () => (hsvaToHsla),
-  "hsvaToRgba": () => (hsvaToRgba),
-  "rgbToHsl": () => (rgbToHsl),
-  "rgbToHsv": () => (rgbToHsv),
-  "rgbaToHsva": () => (rgbaToHsva),
-  "stringToAlpha": () => (stringToAlpha),
-  "stringToRgb": () => (stringToRgb)
-});
-
-// NAMESPACE OBJECT: ./dist/browser/Utils/CanvasUtils.js
-var CanvasUtils_namespaceObject = {};
-__webpack_require__.r(CanvasUtils_namespaceObject);
-__webpack_require__.d(CanvasUtils_namespaceObject, {
-  "clear": () => (clear),
-  "drawConnectLine": () => (drawConnectLine),
-  "drawEllipse": () => (drawEllipse),
-  "drawGrabLine": () => (drawGrabLine),
-  "drawLinkLine": () => (drawLinkLine),
-  "drawLinkTriangle": () => (drawLinkTriangle),
-  "drawParticle": () => (drawParticle),
-  "drawParticlePlugin": () => (drawParticlePlugin),
-  "drawPlugin": () => (drawPlugin),
-  "drawShape": () => (drawShape),
-  "drawShapeAfterEffect": () => (drawShapeAfterEffect),
-  "gradient": () => (gradient),
-  "paintBase": () => (paintBase)
-});
-
 ;// CONCATENATED MODULE: ./dist/browser/pjs.js
 const initPjs = main => {
   const particlesJS = (tagId, options) => {
@@ -327,6 +301,14 @@ var OutMode;
   OutMode["destroy"] = "destroy";
   OutMode["split"] = "split";
 })(OutMode || (OutMode = {}));
+;// CONCATENATED MODULE: ./dist/browser/Enums/Modes/RollMode.js
+var RollMode;
+
+(function (RollMode) {
+  RollMode["both"] = "both";
+  RollMode["horizontal"] = "horizontal";
+  RollMode["vertical"] = "vertical";
+})(RollMode || (RollMode = {}));
 ;// CONCATENATED MODULE: ./dist/browser/Enums/Modes/SizeMode.js
 var SizeMode;
 
@@ -351,6 +333,7 @@ var ThemeMode;
 
 
 
+
 ;// CONCATENATED MODULE: ./dist/browser/Enums/AnimationStatus.js
 var AnimationStatus;
 
@@ -504,7 +487,7 @@ class Vector {
   }
 
   get length() {
-    return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
+    return Math.sqrt(this.x ** 2 + this.y ** 2);
   }
 
   set length(length) {
@@ -552,7 +535,7 @@ class Vector {
   }
 
   getLengthSq() {
-    return Math.pow(this.x, 2) + Math.pow(this.y, 2);
+    return this.x ** 2 + this.y ** 2;
   }
 
   distanceToSq(v) {
@@ -692,16 +675,16 @@ function collisionVelocity(v1, v2, m1, m2) {
 function calcEasing(value, type) {
   switch (type) {
     case EasingType.easeOutQuad:
-      return 1 - Math.pow(1 - value, 2);
+      return 1 - (1 - value) ** 2;
 
     case EasingType.easeOutCubic:
-      return 1 - Math.pow(1 - value, 3);
+      return 1 - (1 - value) ** 3;
 
     case EasingType.easeOutQuart:
-      return 1 - Math.pow(1 - value, 4);
+      return 1 - (1 - value) ** 4;
 
     case EasingType.easeOutQuint:
-      return 1 - Math.pow(1 - value, 5);
+      return 1 - (1 - value) ** 5;
 
     case EasingType.easeOutExpo:
       return value === 1 ? 1 : 1 - Math.pow(2, -10 * value);
@@ -724,38 +707,6 @@ function calcEasing(value, type) {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Utils/Utils.js
-var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 
 
@@ -801,14 +752,12 @@ function cancelAnimation() {
 function isInArray(value, array) {
   return value === array || array instanceof Array && array.indexOf(value) > -1;
 }
-function loadFont(character) {
+async function loadFont(character) {
   var _a, _b;
 
-  return __awaiter(this, void 0, void 0, function* () {
-    try {
-      yield document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
-    } catch (_c) {}
-  });
+  try {
+    await document.fonts.load(`${(_a = character.weight) !== null && _a !== void 0 ? _a : "400"} 36px '${(_b = character.font) !== null && _b !== void 0 ? _b : "Verdana"}'`);
+  } catch (_c) {}
 }
 function arrayRandomIndex(array) {
   return Math.floor(Math.random() * array.length);
@@ -1675,7 +1624,7 @@ function drawGrabLine(context, width, begin, end, colorLine, opacity) {
   context.restore();
 }
 function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
 
   const pos = particle.getPosition();
   const tiltOptions = particle.options.tilt;
@@ -1683,13 +1632,17 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   context.save();
 
   if (tiltOptions.enable || rollOptions.enable) {
-    context.setTransform(rollOptions.enable ? Math.cos(particle.rollAngle) : 1, tiltOptions.enable ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tiltOptions.enable ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollOptions.enable ? Math.sin(particle.rollAngle) : 1, pos.x, pos.y);
+    const roll = rollOptions.enable && particle.roll;
+    const tilt = tiltOptions.enable && particle.tilt;
+    const rollHorizontal = roll && (rollOptions.mode === RollMode.horizontal || rollOptions.mode === RollMode.both);
+    const rollVertical = roll && (rollOptions.mode === RollMode.vertical || rollOptions.mode === RollMode.both);
+    context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
   } else {
     context.translate(pos.x, pos.y);
   }
 
   context.beginPath();
-  const angle = particle.rotate.value + (particle.options.rotate.path ? particle.velocity.angle : 0);
+  const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
 
   if (angle !== 0) {
     context.rotate(angle);
@@ -1717,7 +1670,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
         h: color.value.h.value,
         s: color.value.s.value,
         l: color.value.l.value
-      }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+      }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
     }
 
     context.fillStyle = fillGradient;
@@ -1728,7 +1681,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   }
 
   const stroke = particle.stroke;
-  context.lineWidth = particle.strokeWidth;
+  context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
 
   if (strokeColorValue) {
     context.strokeStyle = strokeColorValue;
@@ -1736,7 +1689,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
 
   drawShape(container, context, particle, radius, opacity, delta);
 
-  if (stroke.width > 0) {
+  if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
     context.stroke();
   }
 
@@ -1751,7 +1704,7 @@ function drawParticle(container, context, particle, delta, fillColorValue, strok
   context.restore();
   context.save();
 
-  if (tiltOptions.enable) {
+  if (tiltOptions.enable && particle.tilt) {
     context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
   } else {
     context.translate(pos.x, pos.y);
@@ -1827,6 +1780,13 @@ function drawEllipse(context, particle, fillColorValue, radius, opacity, width,
   context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
   context.stroke();
 }
+function alterHsl(color, type, value) {
+  return {
+    h: color.h,
+    s: color.s,
+    l: color.l + (type === AlterType.darken ? -1 : 1) * value
+  };
+}
 ;// CONCATENATED MODULE: ./dist/browser/Utils/Range.js
 class Range {
   constructor(x, y) {
@@ -2038,6 +1998,8 @@ class EventListeners {
 
     this.visibilityChangeHandler = () => this.handleVisibilityChange();
 
+    this.themeChangeHandler = e => this.handleThemeChange(e);
+
     this.resizeHandler = () => this.handleWindowResize();
   }
 
@@ -2067,6 +2029,12 @@ class EventListeners {
       container.interactivity.element = container.canvas.element;
     }
 
+    const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+
+    if (mediaMatch) {
+      manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+    }
+
     const interactivityEl = container.interactivity.element;
 
     if (!interactivityEl) {
@@ -2326,6 +2294,16 @@ class EventListeners {
     }
   }
 
+  handleThemeChange(e) {
+    const mediaEvent = e;
+    const themeName = mediaEvent.matches ? this.container.options.defaultDarkTheme : this.container.options.defaultLightTheme;
+    const theme = this.container.options.themes.find(theme => theme.name === themeName);
+
+    if (theme && theme.default.auto) {
+      this.container.loadTheme(themeName);
+    }
+  }
+
   handleClickMode(mode) {
     const container = this.container;
     const options = container.actualOptions;
@@ -2622,7 +2600,6 @@ class QuadTree {
 ;// CONCATENATED MODULE: ./dist/browser/Core/Canvas.js
 
 
-
 class Canvas {
   constructor(container) {
     this.container = container;
@@ -2765,7 +2742,7 @@ class Canvas {
 
       const pos1 = p1.getPosition();
       const pos2 = p2.getPosition();
-      drawConnectLine(ctx, (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+      drawConnectLine(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
     });
   }
 
@@ -2775,12 +2752,12 @@ class Canvas {
       var _a;
 
       const beginPos = particle.getPosition();
-      drawGrabLine(ctx, (_a = particle.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+      drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
     });
   }
 
   drawParticle(particle, delta) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
 
     if (particle.spawning || particle.destroyed) {
       return;
@@ -2812,10 +2789,10 @@ class Canvas {
 
     const options = this.container.actualOptions;
     const zIndexOptions = particle.options.zIndex;
-    const zOpacityFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.opacityRate);
+    const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
     const radius = particle.getRadius();
-    const opacity = twinkling ? twinkle.opacity : (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : particle.opacity.value;
-    const strokeOpacity = (_c = particle.stroke.opacity) !== null && _c !== void 0 ? _c : opacity;
+    const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+    const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
     const zOpacity = opacity * zOpacityFactor;
     const fillColorValue = fColor ? getStyleFromHsl(fColor, zOpacity) : undefined;
 
@@ -2823,9 +2800,8 @@ class Canvas {
       return;
     }
 
-    const orbitOptions = particle.options.orbit;
     this.draw(ctx => {
-      const zSizeFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.sizeRate);
+      const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
       const zStrokeOpacity = strokeOpacity * zOpacityFactor;
       const strokeColorValue = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : fillColorValue;
 
@@ -2833,42 +2809,24 @@ class Canvas {
         return;
       }
 
-      if (orbitOptions.enable) {
-        this.drawOrbit(particle, OrbitType.back);
+      const container = this.container;
+
+      for (const updater of container.particles.updaters) {
+        if (updater.beforeDraw) {
+          updater.beforeDraw(particle);
+        }
       }
 
       drawParticle(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
 
-      if (orbitOptions.enable) {
-        this.drawOrbit(particle, OrbitType.front);
+      for (const updater of container.particles.updaters) {
+        if (updater.afterDraw) {
+          updater.afterDraw(particle);
+        }
       }
     });
   }
 
-  drawOrbit(particle, type) {
-    const container = this.container;
-    const orbitOptions = particle.options.orbit;
-    let start;
-    let end;
-
-    if (type === OrbitType.back) {
-      start = Math.PI / 2;
-      end = Math.PI * 3 / 2;
-    } else if (type === OrbitType.front) {
-      start = Math.PI * 3 / 2;
-      end = Math.PI / 2;
-    } else {
-      start = 0;
-      end = 2 * Math.PI;
-    }
-
-    this.draw(ctx => {
-      var _a, _b, _c, _d;
-
-      drawEllipse(ctx, particle, (_a = particle.orbitColor) !== null && _a !== void 0 ? _a : particle.getFillColor(), (_c = (_b = particle.orbitRadius) !== null && _b !== void 0 ? _b : container.retina.orbitRadius) !== null && _c !== void 0 ? _c : particle.getRadius(), orbitOptions.opacity, orbitOptions.width, ((_d = particle.orbitRotation) !== null && _d !== void 0 ? _d : 0) * container.retina.pixelRatio, start, end);
-    });
-  }
-
   drawPlugin(plugin, delta) {
     this.draw(ctx => {
       drawPlugin(ctx, plugin, delta);
@@ -3015,7 +2973,8 @@ class OptionsColor {
   }
 
   static create(source, data) {
-    const color = source !== null && source !== void 0 ? source : new OptionsColor();
+    const color = new OptionsColor();
+    color.load(source);
 
     if (data !== undefined) {
       if (typeof data === "string" || data instanceof Array) {
@@ -4187,12 +4146,17 @@ class AnimatableColor extends OptionsColor {
   }
 
   static create(source, data) {
-    const color = source !== null && source !== void 0 ? source : new AnimatableColor();
+    const color = new AnimatableColor();
+    color.load(source);
 
     if (data !== undefined) {
-      color.load(typeof data === "string" ? {
-        value: data
-      } : data);
+      if (typeof data === "string" || data instanceof Array) {
+        color.load({
+          value: data
+        });
+      } else {
+        color.load(data);
+      }
     }
 
     return color;
@@ -4630,11 +4594,13 @@ class RollLight {
 
 
 
+
 class Roll {
   constructor() {
     this.darken = new RollLight();
     this.enable = false;
     this.enlighten = new RollLight();
+    this.mode = RollMode.vertical;
     this.speed = 25;
   }
 
@@ -4655,6 +4621,10 @@ class Roll {
 
     this.enlighten.load(data.enlighten);
 
+    if (data.mode !== undefined) {
+      this.mode = data.mode;
+    }
+
     if (data.speed !== undefined) {
       this.speed = setRangeValue(data.speed);
     }
@@ -5042,7 +5012,7 @@ class ParticlesOptions {
     }
 
     this.bounce.load(data.bounce);
-    this.color = AnimatableColor.create(this.color, data.color);
+    this.color.load(AnimatableColor.create(this.color, data.color));
     this.destroy.load(data.destroy);
     this.life.load(data.life);
     const links = (_b = (_a = data.links) !== null && _a !== void 0 ? _a : data.lineLinked) !== null && _b !== void 0 ? _b : data.line_linked;
@@ -5203,9 +5173,20 @@ class Vector3d extends Vector {
 
 
 
+
+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 {
   constructor(id, container, position, overrideOptions, group) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
     this.id = id;
     this.container = container;
@@ -5217,11 +5198,13 @@ class Particle {
     this.unbreakable = false;
     this.splitCount = 0;
     this.misplaced = false;
-    this.maxDistance = {};
+    this.retina = {
+      maxDistance: {}
+    };
     const pxRatio = container.retina.pixelRatio;
-    const options = container.actualOptions;
+    const mainOptions = container.actualOptions;
     const particlesOptions = new ParticlesOptions();
-    particlesOptions.load(options.particles);
+    particlesOptions.load(mainOptions.particles);
     const shapeType = particlesOptions.shape.type;
     const reduceDuplicates = particlesOptions.reduceDuplicates;
     this.shape = shapeType instanceof Array ? itemFromArray(shapeType, this.id, reduceDuplicates) : shapeType;
@@ -5253,16 +5236,14 @@ class Particle {
     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;
-    const zIndexValue = getRangeValue(this.options.zIndex.value);
     this.pathDelay = getValue(this.options.move.path.delay) * 1000;
-    this.wobbleDistance = 0;
+    const zIndexValue = getRangeValue(this.options.zIndex.value);
     container.retina.initParticle(this);
-    const sizeOptions = this.options.size;
-    const sizeValue = getValue(sizeOptions) * container.retina.pixelRatio;
-    const sizeRange = sizeOptions.value;
+    const sizeOptions = this.options.size,
+          sizeRange = sizeOptions.value;
     this.size = {
       enable: sizeOptions.animation.enable,
-      value: sizeValue,
+      value: getValue(sizeOptions) * container.retina.pixelRatio,
       max: getRangeMax(sizeRange) * pxRatio,
       min: getRangeMin(sizeRange) * pxRatio,
       loops: 0,
@@ -5291,7 +5272,7 @@ class Particle {
           break;
       }
 
-      this.size.velocity = ((_g = this.sizeAnimationSpeed) !== null && _g !== void 0 ? _g : container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
+      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();
@@ -5304,200 +5285,7 @@ class Particle {
     };
     this.initialVelocity = this.calculateVelocity();
     this.velocity = this.initialVelocity.copy();
-    const rotateOptions = this.options.rotate;
-    this.rotate = {
-      enable: rotateOptions.animation.enable,
-      value: getRangeValue(rotateOptions.value) * Math.PI / 180
-    };
-    let rotateDirection = rotateOptions.direction;
-
-    if (rotateDirection === RotateDirection.random) {
-      const index = Math.floor(Math.random() * 2);
-      rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-    }
-
-    switch (rotateDirection) {
-      case RotateDirection.counterClockwise:
-      case "counterClockwise":
-        this.rotate.status = AnimationStatus.decreasing;
-        break;
-
-      case RotateDirection.clockwise:
-        this.rotate.status = AnimationStatus.increasing;
-        break;
-    }
-
-    const rotateAnimation = this.options.rotate.animation;
-
-    if (rotateAnimation.enable) {
-      this.rotate.velocity = rotateAnimation.speed / 360 * container.retina.reduceFactor;
-
-      if (!rotateAnimation.sync) {
-        this.rotate.velocity *= Math.random();
-      }
-    }
-
-    const tiltOptions = this.options.tilt;
-    this.tilt = {
-      enable: tiltOptions.enable,
-      value: getRangeValue(tiltOptions.value) * Math.PI / 180,
-      sinDirection: Math.random() >= 0.5 ? 1 : -1,
-      cosDirection: Math.random() >= 0.5 ? 1 : -1
-    };
-    let tiltDirection = tiltOptions.direction;
-
-    if (tiltDirection === TiltDirection.random) {
-      const index = Math.floor(Math.random() * 2);
-      tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
-    }
-
-    switch (tiltDirection) {
-      case TiltDirection.counterClockwise:
-      case "counterClockwise":
-        this.tilt.status = AnimationStatus.decreasing;
-        break;
-
-      case TiltDirection.clockwise:
-        this.tilt.status = AnimationStatus.increasing;
-        break;
-    }
-
-    const tiltAnimation = this.options.tilt.animation;
-
-    if (tiltAnimation.enable) {
-      this.tilt.velocity = tiltAnimation.speed / 360 * container.retina.reduceFactor;
-
-      if (!tiltAnimation.sync) {
-        this.tilt.velocity *= Math.random();
-      }
-    }
-
-    const orbitOptions = particlesOptions.orbit;
-
-    if (orbitOptions.enable) {
-      this.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-      this.orbitColor = colorToHsl(orbitOptions.color);
-    }
-
-    const hslColor = colorToHsl(this.options.color, this.id, reduceDuplicates);
-
-    if (hslColor) {
-      this.color = getHslAnimationFromHsl(hslColor, this.options.color.animation, container.retina.reduceFactor);
-    }
-
-    const gradient = this.options.gradient instanceof Array ? itemFromArray(this.options.gradient) : this.options.gradient;
-
-    if (gradient) {
-      this.gradient = {
-        angle: {
-          value: gradient.angle.value,
-          enable: gradient.angle.animation.enable,
-          velocity: gradient.angle.animation.speed / 360 * container.retina.reduceFactor
-        },
-        type: gradient.type,
-        colors: []
-      };
-      let rotateDirection = gradient.angle.direction;
-
-      if (rotateDirection === RotateDirection.random) {
-        const index = Math.floor(Math.random() * 2);
-        rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
-      }
-
-      switch (rotateDirection) {
-        case RotateDirection.counterClockwise:
-        case "counterClockwise":
-          this.gradient.angle.status = AnimationStatus.decreasing;
-          break;
-
-        case RotateDirection.clockwise:
-          this.gradient.angle.status = AnimationStatus.increasing;
-          break;
-      }
-
-      for (const grColor of gradient.colors) {
-        const grHslColor = colorToHsl(grColor.value, this.id, reduceDuplicates);
-
-        if (grHslColor) {
-          const grHslAnimation = getHslAnimationFromHsl(grHslColor, grColor.value.animation, container.retina.reduceFactor);
-          const addColor = {
-            stop: grColor.stop,
-            value: grHslAnimation,
-            opacity: grColor.opacity ? {
-              enable: grColor.opacity.animation.enable,
-              max: getRangeMax(grColor.opacity.value),
-              min: getRangeMin(grColor.opacity.value),
-              status: AnimationStatus.increasing,
-              value: getRangeValue(grColor.opacity.value),
-              velocity: grColor.opacity.animation.speed / 100 * container.retina.reduceFactor
-            } : undefined
-          };
-
-          if (grColor.opacity && addColor.opacity) {
-            const opacityRange = grColor.opacity.value;
-            addColor.opacity.min = getRangeMin(opacityRange);
-            addColor.opacity.max = getRangeMax(opacityRange);
-            const opacityAnimation = grColor.opacity.animation;
-
-            switch (opacityAnimation.startValue) {
-              case StartValueType.min:
-                addColor.opacity.value = addColor.opacity.min;
-                addColor.opacity.status = AnimationStatus.increasing;
-                break;
-
-              case StartValueType.random:
-                addColor.opacity.value = randomInRange(addColor.opacity);
-                addColor.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                break;
-
-              case StartValueType.max:
-              default:
-                addColor.opacity.value = addColor.opacity.max;
-                addColor.opacity.status = AnimationStatus.decreasing;
-                break;
-            }
-          }
-
-          this.gradient.colors.push(addColor);
-        }
-      }
-    }
-
-    const rollOpt = this.options.roll;
-
-    if (rollOpt.enable) {
-      if (this.color) {
-        if (rollOpt.backColor) {
-          this.backColor = colorToHsl(rollOpt.backColor);
-        } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
-          this.alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
-          this.alterValue = this.alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value;
-        } else if (rollOpt.darken.enable) {
-          this.alterType = AlterType.darken;
-          this.alterValue = rollOpt.darken.value;
-        } else if (rollOpt.enlighten.enable) {
-          this.alterType = AlterType.enlighten;
-          this.alterValue = rollOpt.enlighten.value;
-        }
-      }
-
-      this.rollAngle = Math.random() * Math.PI * 2;
-      this.rollSpeed = getRangeValue(rollOpt.speed) / 360;
-    } else {
-      this.rollAngle = 0;
-      this.rollSpeed = 0;
-    }
-
-    const wobbleOpt = this.options.wobble;
-
-    if (wobbleOpt.enable) {
-      this.wobbleAngle = Math.random() * Math.PI * 2;
-      this.wobbleSpeed = getRangeValue(wobbleOpt.speed) / 360;
-    } else {
-      this.wobbleAngle = 0;
-      this.wobbleSpeed = 0;
-    }
-
+    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;
@@ -5505,48 +5293,6 @@ class Particle {
     particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
     particles.lastZIndex = this.position.z;
     this.zIndexFactor = this.position.z / container.zLayers;
-    const opacityOptions = this.options.opacity;
-    this.opacity = {
-      enable: opacityOptions.animation.enable,
-      max: getRangeMax(opacityOptions.value),
-      min: getRangeMin(opacityOptions.value),
-      value: getRangeValue(opacityOptions.value),
-      loops: 0,
-      maxLoops: opacityOptions.animation.count
-    };
-    const opacityAnimation = opacityOptions.animation;
-
-    if (opacityAnimation.enable) {
-      this.opacity.status = AnimationStatus.increasing;
-      const opacityRange = opacityOptions.value;
-      this.opacity.min = getRangeMin(opacityRange);
-      this.opacity.max = getRangeMax(opacityRange);
-
-      switch (opacityAnimation.startValue) {
-        case StartValueType.min:
-          this.opacity.value = this.opacity.min;
-          this.opacity.status = AnimationStatus.increasing;
-          break;
-
-        case StartValueType.random:
-          this.opacity.value = randomInRange(this.opacity);
-          this.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
-          break;
-
-        case StartValueType.max:
-        default:
-          this.opacity.value = this.opacity.max;
-          this.opacity.status = AnimationStatus.decreasing;
-          break;
-      }
-
-      this.opacity.velocity = opacityAnimation.speed / 100 * container.retina.reduceFactor;
-
-      if (!opacityAnimation.sync) {
-        this.opacity.velocity *= Math.random();
-      }
-    }
-
     this.sides = 24;
     let drawer = container.drawers.get(this.shape);
 
@@ -5568,19 +5314,11 @@ class Particle {
       this.sides = sideCountFunc(this);
     }
 
-    this.stroke = this.options.stroke instanceof Array ? itemFromArray(this.options.stroke, this.id, reduceDuplicates) : this.options.stroke;
-    this.strokeWidth = this.stroke.width * container.retina.pixelRatio;
-    const strokeHslColor = (_h = colorToHsl(this.stroke.color)) !== null && _h !== void 0 ? _h : this.getFillColor();
-
-    if (strokeHslColor) {
-      this.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_j = this.stroke.color) === null || _j === void 0 ? void 0 : _j.animation, container.retina.reduceFactor);
-    }
-
     this.life = this.loadLife();
     this.spawning = this.life.delay > 0;
 
     if (this.options.move.spin.enable) {
-      const spinPos = (_k = this.options.move.spin.position) !== null && _k !== void 0 ? _k : {
+      const spinPos = (_h = this.options.move.spin.position) !== null && _h !== void 0 ? _h : {
         x: 50,
         y: 50
       };
@@ -5595,12 +5333,18 @@ class Particle {
         direction: this.velocity.x >= 0 ? RotateDirection.clockwise : RotateDirection.counterClockwise,
         angle: this.velocity.angle,
         radius: distance,
-        acceleration: getRangeValue(this.options.move.spin.acceleration)
+        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);
     }
@@ -5641,33 +5385,30 @@ class Particle {
   }
 
   getRadius() {
-    return this.bubble.radius || this.size.value;
+    var _a;
+
+    return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
   }
 
   getMass() {
-    const radius = this.getRadius();
-    return Math.pow(radius, 2) * Math.PI / 2;
+    return this.getRadius() ** 2 * Math.PI / 2;
   }
 
   getFillColor() {
-    if (this.bubble.color) {
-      return this.bubble.color;
-    }
+    var _a, _b, _c;
 
-    const color = getHslFromAnimation(this.color);
+    const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
 
-    if (color && (this.backColor || this.alterType && this.alterValue !== undefined)) {
-      const rolled = Math.floor(this.rollAngle / (Math.PI / 2)) % 2;
+    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;
-        } else if (this.alterType && this.alterValue !== undefined) {
-          return {
-            h: color.h,
-            s: color.s,
-            l: color.l + (this.alterType === AlterType.darken ? -1 : 1) * this.alterValue
-          };
+        }
+
+        if (this.roll.alter) {
+          return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
         }
       }
     }
@@ -5710,7 +5451,10 @@ class Particle {
   }
 
   reset() {
-    this.opacity.loops = 0;
+    if (this.opacity) {
+      this.opacity.loops = 0;
+    }
+
     this.size.loops = 0;
   }
 
@@ -5742,26 +5486,27 @@ class Particle {
     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;
-
-    const fixHorizontal = outMode => {
-      if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceHorizontal)) {
-        if (pos.x > container.canvas.size.width - radius * 2) {
-          pos.x -= radius;
-        } else if (pos.x < radius * 2) {
-          pos.x += radius;
-        }
-      }
-    };
 
-    const fixVertical = outMode => {
-      if (isInArray(outMode, OutMode.bounce) || isInArray(outMode, OutMode.bounceVertical)) {
-        if (pos.y > container.canvas.size.height - radius * 2) {
-          pos.y -= radius;
-        } else if (pos.y < radius * 2) {
-          pos.y += radius;
-        }
-      }
+    const outModes = this.options.move.outModes,
+          fixHorizontal = outMode => {
+      fixOutMode({
+        outMode,
+        checkModes: [OutMode.bounce, OutMode.bounceHorizontal],
+        coord: pos.x,
+        maxCoord: container.canvas.size.width,
+        setCb: value => pos.x += value,
+        radius
+      });
+    },
+          fixVertical = outMode => {
+      fixOutMode({
+        outMode,
+        checkModes: [OutMode.bounce, OutMode.bounceVertical],
+        coord: pos.y,
+        maxCoord: container.canvas.size.height,
+        setCb: value => pos.y += value,
+        radius
+      });
     };
 
     fixHorizontal((_c = outModes.left) !== null && _c !== void 0 ? _c : outModes.default);
@@ -5918,8 +5663,8 @@ function applyDistance(particle) {
   } = getDistances(initialPosition, particle.position);
   const dxFixed = Math.abs(dx),
         dyFixed = Math.abs(dy);
-  const hDistance = particle.maxDistance.horizontal;
-  const vDistance = particle.maxDistance.vertical;
+  const hDistance = particle.retina.maxDistance.horizontal;
+  const vDistance = particle.retina.maxDistance.vertical;
 
   if (!hDistance && !vDistance) {
     return;
@@ -5968,6 +5713,8 @@ class Mover {
   moveParticle(particle, delta) {
     var _a, _b, _c;
 
+    var _d, _e;
+
     const particleOptions = particle.options;
     const moveOptions = particleOptions.move;
 
@@ -5977,8 +5724,8 @@ class Mover {
 
     const container = this.container,
           slowFactor = this.getProximitySpeedFactor(particle),
-          baseSpeed = ((_a = particle.moveSpeed) !== null && _a !== void 0 ? _a : particle.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor,
-          moveDrift = (_b = particle.moveDrift) !== null && _b !== void 0 ? _b : particle.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio,
+          baseSpeed = ((_a = (_d = particle.retina).moveSpeed) !== null && _a !== void 0 ? _a : _d.moveSpeed = getRangeValue(moveOptions.speed) * container.retina.pixelRatio) * container.retina.reduceFactor,
+          moveDrift = (_b = (_e = particle.retina).moveDrift) !== null && _b !== void 0 ? _b : _e.moveDrift = getRangeValue(particle.options.move.drift) * container.retina.pixelRatio,
           maxSize = getRangeMax(particleOptions.size.value) * container.retina.pixelRatio,
           sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1,
           diffFactor = 2,
@@ -5996,14 +5743,14 @@ class Mover {
       particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
     }
 
-    const decay = 1 - particle.options.move.decay;
+    const decay = particle.moveDecay;
 
     if (decay != 1) {
       particle.velocity.multTo(decay);
     }
 
     const velocity = particle.velocity.mult(moveSpeed);
-    const maxSpeed = (_c = particle.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
+    const maxSpeed = (_c = particle.retina.maxSpeed) !== null && _c !== void 0 ? _c : container.retina.maxSpeed;
 
     if (gravityOptions.enable && gravityOptions.maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
       velocity.y = gravityFactor * maxSpeed;
@@ -6014,7 +5761,7 @@ class Mover {
     }
 
     const zIndexOptions = particle.options.zIndex,
-          zVelocityFactor = Math.pow(1 - particle.zIndexFactor, zIndexOptions.velocityRate);
+          zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
 
     if (moveOptions.spin.enable) {
       this.spin(particle, moveSpeed);
@@ -6162,8 +5909,10 @@ class Particles {
     this.limit = 0;
     this.needsSort = false;
     this.lastZIndex = 0;
-    this.linksFreq = new Map();
-    this.trianglesFreq = new Map();
+    this.freqs = {
+      links: new Map(),
+      triangles: new Map()
+    };
     this.interactionManager = new InteractionManager(container);
     const canvasSize = this.container.canvas.size;
     this.linksColors = new Map();
@@ -6182,8 +5931,8 @@ class Particles {
     const options = container.actualOptions;
     this.lastZIndex = 0;
     this.needsSort = false;
-    this.linksFreq = new Map();
-    this.trianglesFreq = new Map();
+    this.freqs.links = new Map();
+    this.freqs.triangles = new Map();
     let handled = false;
 
     for (const [, plugin] of container.plugins) {
@@ -6408,11 +6157,11 @@ class Particles {
 
   getLinkFrequency(p1, p2) {
     const key = `${Math.min(p1.id, p2.id)}_${Math.max(p1.id, p2.id)}`;
-    let res = this.linksFreq.get(key);
+    let res = this.freqs.links.get(key);
 
     if (res === undefined) {
       res = Math.random();
-      this.linksFreq.set(key, res);
+      this.freqs.links.set(key, res);
     }
 
     return res;
@@ -6434,11 +6183,11 @@ class Particles {
     }
 
     const key = `${id1}_${id2}_${id3}`;
-    let res = this.trianglesFreq.get(key);
+    let res = this.freqs.triangles.get(key);
 
     if (res === undefined) {
       res = Math.random();
-      this.trianglesFreq.set(key, res);
+      this.freqs.triangles.set(key, res);
     }
 
     return res;
@@ -6498,7 +6247,7 @@ class Particles {
 
     const canvas = container.canvas.element;
     const pxRatio = container.retina.pixelRatio;
-    return canvas.width * canvas.height / (densityOptions.factor * Math.pow(pxRatio, 2) * densityOptions.area);
+    return canvas.width * canvas.height / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
   }
 
   pushParticle(position, overrideOptions, group, initializer) {
@@ -6601,24 +6350,22 @@ class Retina {
     const options = particle.options;
     const ratio = this.pixelRatio;
     const moveDistance = options.move.distance;
-    const orbit = options.orbit;
-    particle.attractDistance = options.move.attract.distance * ratio;
-    particle.linksDistance = options.links.distance * ratio;
-    particle.linksWidth = options.links.width * ratio;
-    particle.moveDrift = getRangeValue(options.move.drift) * ratio;
-    particle.moveSpeed = getRangeValue(options.move.speed) * ratio;
-    particle.sizeAnimationSpeed = options.size.animation.speed * ratio;
-    particle.orbitRadius = (orbit === null || orbit === void 0 ? void 0 : orbit.radius) !== undefined ? orbit.radius * ratio : undefined;
+    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) {
-      particle.spin.acceleration = getRangeValue(options.move.spin.acceleration) * ratio;
+      props.spinAcceleration = getRangeValue(options.move.spin.acceleration) * ratio;
     }
 
-    const maxDistance = particle.maxDistance;
+    const maxDistance = props.maxDistance;
     maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
     maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-    particle.wobbleDistance = getRangeValue(options.wobble.distance) * ratio;
-    particle.maxSpeed = options.move.gravity.maxSpeed * ratio;
+    props.maxSpeed = options.move.gravity.maxSpeed * ratio;
   }
 
   handleMotionChange(mediaQuery) {
@@ -7707,15 +7454,20 @@ class Background {
 
 class ThemeDefault {
   constructor() {
+    this.auto = false;
     this.mode = ThemeMode.any;
     this.value = false;
   }
 
   load(data) {
-    if (data === undefined) {
+    if (!data) {
       return;
     }
 
+    if (data.auto !== undefined) {
+      this.auto = data.auto;
+    }
+
     if (data.mode !== undefined) {
       this.mode = data.mode;
     }
@@ -7864,6 +7616,14 @@ class Responsive {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Options.js
+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;
+
 
 
 
@@ -7877,6 +7637,8 @@ class Responsive {
 
 class Options {
   constructor() {
+    _Options_instances.add(this);
+
     this.autoPlay = true;
     this.background = new Background();
     this.backgroundMask = new BackgroundMask();
@@ -7920,7 +7682,7 @@ class Options {
   }
 
   load(data) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
 
     if (data === undefined) {
       return;
@@ -7969,7 +7731,14 @@ class Options {
     }
 
     this.background.load(data.background);
-    this.fullScreen.load((_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode);
+    const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
+
+    if (typeof fullScreen === "boolean") {
+      this.fullScreen.enable = fullScreen;
+    } else {
+      this.fullScreen.load(fullScreen);
+    }
+
     this.backgroundMask.load(data.backgroundMask);
     this.interactivity.load(data.interactivity);
 
@@ -8002,6 +7771,9 @@ class Options {
         this.themes.push(optTheme);
       }
     }
+
+    this.defaultDarkTheme = (_d = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.dark)) === null || _d === void 0 ? void 0 : _d.name;
+    this.defaultLightTheme = (_e = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, ThemeMode.light)) === null || _e === void 0 ? void 0 : _e.name;
   }
 
   setTheme(name) {
@@ -8012,12 +7784,9 @@ class Options {
         this.load(chosenTheme.options);
       }
     } else {
-      const clientDarkMode = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)").matches;
-      let defaultTheme = this.themes.find(theme => theme.default.value && (theme.default.mode === ThemeMode.dark && clientDarkMode || theme.default.mode === ThemeMode.light && !clientDarkMode));
-
-      if (!defaultTheme) {
-        defaultTheme = this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any);
-      }
+      const mediaMatch = typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)"),
+            clientDarkMode = mediaMatch && mediaMatch.matches,
+            defaultTheme = __classPrivateFieldGet(this, _Options_instances, "m", _Options_findDefaultTheme).call(this, clientDarkMode ? ThemeMode.dark : ThemeMode.light);
 
       if (defaultTheme) {
         this.load(defaultTheme.options);
@@ -8025,10 +7794,6 @@ class Options {
     }
   }
 
-  importPreset(preset) {
-    this.load(Plugins.getPreset(preset));
-  }
-
   setResponsive(width, pxRatio, defaultOptions) {
     var _a;
 
@@ -8036,40 +7801,17 @@ class Options {
     this.load((_a = this.responsive.find(t => t.maxWidth * pxRatio > width)) === null || _a === void 0 ? void 0 : _a.options);
   }
 
-}
-;// CONCATENATED MODULE: ./dist/browser/Core/Container.js
-var Container_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
+  importPreset(preset) {
+    this.load(Plugins.getPreset(preset));
   }
 
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
+}
+_Options_instances = new WeakSet(), _Options_findDefaultTheme = function _Options_findDefaultTheme(mode) {
+  var _a;
 
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
+  return (_a = this.themes.find(theme => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any);
 };
-
+;// CONCATENATED MODULE: ./dist/browser/Core/Container.js
 
 
 
@@ -8321,37 +8063,33 @@ class Container {
     delete this.particles.linksColor;
   }
 
-  loadTheme(name) {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      this.currentTheme = name;
-      yield this.refresh();
-    });
+  async loadTheme(name) {
+    this.currentTheme = name;
+    await this.refresh();
   }
 
-  start() {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      if (this.started) {
-        return;
-      }
+  async start() {
+    if (this.started) {
+      return;
+    }
 
-      yield this.init();
-      this.started = true;
-      this.eventListeners.addListeners();
+    await this.init();
+    this.started = true;
+    this.eventListeners.addListeners();
 
-      if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
-        this.intersectionObserver.observe(this.interactivity.element);
-      }
+    if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
+      this.intersectionObserver.observe(this.interactivity.element);
+    }
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.startAsync !== undefined) {
-          yield plugin.startAsync();
-        } else if (plugin.start !== undefined) {
-          plugin.start();
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.startAsync !== undefined) {
+        await plugin.startAsync();
+      } else if (plugin.start !== undefined) {
+        plugin.start();
       }
+    }
 
-      this.play();
-    });
+    this.play();
   }
 
   addClickHandler(callback) {
@@ -8459,68 +8197,66 @@ class Container {
     this.actualOptions.setTheme(this.currentTheme);
   }
 
-  init() {
-    return Container_awaiter(this, void 0, void 0, function* () {
-      this.actualOptions = new Options();
-      this.actualOptions.load(this._options);
-      this.retina.init();
-      this.canvas.init();
-      this.updateActualOptions();
-      this.canvas.initBackground();
-      this.canvas.resize();
-      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);
-
-      for (const [id, plugin] of availablePlugins) {
-        this.plugins.set(id, plugin);
-      }
-
-      for (const [, drawer] of this.drawers) {
-        if (drawer.init) {
-          yield drawer.init(this);
-        }
+  async init() {
+    this.actualOptions = new Options();
+    this.actualOptions.load(this._options);
+    this.retina.init();
+    this.canvas.init();
+    this.updateActualOptions();
+    this.canvas.initBackground();
+    this.canvas.resize();
+    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);
+
+    for (const [id, plugin] of availablePlugins) {
+      this.plugins.set(id, plugin);
+    }
+
+    for (const [, drawer] of this.drawers) {
+      if (drawer.init) {
+        await drawer.init(this);
       }
+    }
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.init) {
-          plugin.init(this.actualOptions);
-        } else if (plugin.initAsync !== undefined) {
-          yield plugin.initAsync(this.actualOptions);
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.init) {
+        plugin.init(this.actualOptions);
+      } else if (plugin.initAsync !== undefined) {
+        await plugin.initAsync(this.actualOptions);
       }
+    }
 
-      const pathOptions = this.actualOptions.particles.move.path;
+    const pathOptions = this.actualOptions.particles.move.path;
 
-      if (pathOptions.generator) {
-        const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
+    if (pathOptions.generator) {
+      const customGenerator = Plugins.getPathGenerator(pathOptions.generator);
 
-        if (customGenerator) {
-          if (customGenerator.init) {
-            this.pathGenerator.init = customGenerator.init;
-          }
+      if (customGenerator) {
+        if (customGenerator.init) {
+          this.pathGenerator.init = customGenerator.init;
+        }
 
-          if (customGenerator.generate) {
-            this.pathGenerator.generate = customGenerator.generate;
-          }
+        if (customGenerator.generate) {
+          this.pathGenerator.generate = customGenerator.generate;
+        }
 
-          if (customGenerator.update) {
-            this.pathGenerator.update = customGenerator.update;
-          }
+        if (customGenerator.update) {
+          this.pathGenerator.update = customGenerator.update;
         }
       }
+    }
 
-      this.particles.init();
-      this.particles.setDensity();
+    this.particles.init();
+    this.particles.setDensity();
 
-      for (const [, plugin] of this.plugins) {
-        if (plugin.particlesSetup !== undefined) {
-          plugin.particlesSetup();
-        }
+    for (const [, plugin] of this.plugins) {
+      if (plugin.particlesSetup !== undefined) {
+        plugin.particlesSetup();
       }
-    });
+    }
   }
 
   intersectionManager(entries) {
@@ -8543,38 +8279,6 @@ class Container {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/Core/Loader.js
-var Loader_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 
 const tsParticlesDom = [];
@@ -8600,101 +8304,93 @@ class Loader {
     dom.splice(index, 1);
   }
 
-  static load(tagId, options, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      let domContainer = document.getElementById(tagId);
+  static async load(tagId, options, index) {
+    let domContainer = document.getElementById(tagId);
 
-      if (!domContainer) {
-        domContainer = document.createElement("div");
-        domContainer.id = tagId;
-        document.append(domContainer);
-      }
+    if (!domContainer) {
+      domContainer = document.createElement("div");
+      domContainer.id = tagId;
+      document.append(domContainer);
+    }
 
-      return Loader.set(tagId, domContainer, options, index);
-    });
+    return Loader.set(tagId, domContainer, options, index);
   }
 
-  static set(id, domContainer, options, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
-      const dom = Loader.dom();
-      const oldIndex = dom.findIndex(v => v.id === id);
+  static async set(id, domContainer, options, index) {
+    const currentOptions = options instanceof Array ? itemFromArray(options, index) : options;
+    const dom = Loader.dom();
+    const oldIndex = dom.findIndex(v => v.id === id);
 
-      if (oldIndex >= 0) {
-        const old = Loader.domItem(oldIndex);
+    if (oldIndex >= 0) {
+      const old = Loader.domItem(oldIndex);
 
-        if (old && !old.destroyed) {
-          old.destroy();
-          dom.splice(oldIndex, 1);
-        }
+      if (old && !old.destroyed) {
+        old.destroy();
+        dom.splice(oldIndex, 1);
       }
+    }
 
-      let canvasEl;
-      let generatedCanvas;
-
-      if (domContainer.tagName.toLowerCase() === "canvas") {
-        canvasEl = domContainer;
-        generatedCanvas = false;
-      } else {
-        const existingCanvases = domContainer.getElementsByTagName("canvas");
+    let canvasEl;
+    let generatedCanvas;
 
-        if (existingCanvases.length) {
-          canvasEl = existingCanvases[0];
+    if (domContainer.tagName.toLowerCase() === "canvas") {
+      canvasEl = domContainer;
+      generatedCanvas = false;
+    } else {
+      const existingCanvases = domContainer.getElementsByTagName("canvas");
 
-          if (!canvasEl.className) {
-            canvasEl.className = Constants.canvasClass;
-          }
+      if (existingCanvases.length) {
+        canvasEl = existingCanvases[0];
 
-          generatedCanvas = false;
-        } else {
-          generatedCanvas = true;
-          canvasEl = document.createElement("canvas");
+        if (!canvasEl.className) {
           canvasEl.className = Constants.canvasClass;
-          canvasEl.style.width = "100%";
-          canvasEl.style.height = "100%";
-          domContainer.appendChild(canvasEl);
         }
-      }
-
-      const newItem = new Container(id, currentOptions);
 
-      if (oldIndex >= 0) {
-        dom.splice(oldIndex, 0, newItem);
+        generatedCanvas = false;
       } else {
-        dom.push(newItem);
+        generatedCanvas = true;
+        canvasEl = document.createElement("canvas");
+        canvasEl.className = Constants.canvasClass;
+        canvasEl.style.width = "100%";
+        canvasEl.style.height = "100%";
+        domContainer.appendChild(canvasEl);
       }
+    }
 
-      newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
-      yield newItem.start();
-      return newItem;
-    });
+    const newItem = new Container(id, currentOptions);
+
+    if (oldIndex >= 0) {
+      dom.splice(oldIndex, 0, newItem);
+    } else {
+      dom.push(newItem);
+    }
+
+    newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+    await newItem.start();
+    return newItem;
   }
 
-  static loadJSON(tagId, jsonUrl, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
-      const response = yield fetch(url);
+  static async loadJSON(tagId, jsonUrl, index) {
+    const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+    const response = await fetch(url);
 
-      if (response.ok) {
-        return Loader.load(tagId, yield response.json());
-      } else {
-        fetchError(response.status);
-      }
-    });
+    if (response.ok) {
+      return Loader.load(tagId, await response.json());
+    } else {
+      fetchError(response.status);
+    }
   }
 
-  static setJSON(id, domContainer, jsonUrl, index) {
-    return Loader_awaiter(this, void 0, void 0, function* () {
-      const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
-      const response = yield fetch(url);
+  static async setJSON(id, domContainer, jsonUrl, index) {
+    const url = jsonUrl instanceof Array ? itemFromArray(jsonUrl, index) : jsonUrl;
+    const response = await fetch(url);
 
-      if (response.ok) {
-        const options = yield response.json();
-        return Loader.set(id, domContainer, options);
-      } else {
-        fetchError(response.status);
-      }
-    });
+    if (response.ok) {
+      const options = await response.json();
+      return Loader.set(id, domContainer, options);
+    } else {
+      fetchError(response.status);
+    }
   }
 
   static setOnClickHandler(callback) {
@@ -8711,38 +8407,6 @@ class Loader {
 
 }
 ;// CONCATENATED MODULE: ./dist/browser/main.js
-var main_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 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");
@@ -8750,7 +8414,7 @@ var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || fu
   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) {
+var main_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);
@@ -8768,37 +8432,29 @@ class Main {
   }
 
   init() {
-    if (!__classPrivateFieldGet(this, _Main_initialized, "f")) {
+    if (!main_classPrivateFieldGet(this, _Main_initialized, "f")) {
       __classPrivateFieldSet(this, _Main_initialized, true, "f");
     }
   }
 
-  loadFromArray(tagId, options, index) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.load(tagId, options, index);
-    });
+  async loadFromArray(tagId, options, index) {
+    return Loader.load(tagId, options, index);
   }
 
-  load(tagId, options) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.load(tagId, options);
-    });
+  async load(tagId, options) {
+    return Loader.load(tagId, options);
   }
 
-  set(id, element, options) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.set(id, element, options);
-    });
+  async set(id, element, options) {
+    return Loader.set(id, element, options);
   }
 
   loadJSON(tagId, pathConfigJson, index) {
     return Loader.loadJSON(tagId, pathConfigJson, index);
   }
 
-  setJSON(id, element, pathConfigJson, index) {
-    return main_awaiter(this, void 0, void 0, function* () {
-      return Loader.setJSON(id, element, pathConfigJson, index);
-    });
+  async setJSON(id, element, pathConfigJson, index) {
+    return Loader.setJSON(id, element, pathConfigJson, index);
   }
 
   setOnClickHandler(callback) {
@@ -8869,38 +8525,6 @@ function loadCircleShape(tsParticles) {
   tsParticles.addShape("circle", new CircleDrawer());
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Image/Utils.js
-var Utils_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 function loadImage(source) {
   return new Promise((resolve, reject) => {
@@ -8924,30 +8548,28 @@ function loadImage(source) {
     img.src = source;
   });
 }
-function downloadSvgImage(source) {
-  return Utils_awaiter(this, void 0, void 0, function* () {
-    if (!source) {
-      throw new Error("Error tsParticles - No image.src");
-    }
+async function downloadSvgImage(source) {
+  if (!source) {
+    throw new Error("Error tsParticles - No image.src");
+  }
 
-    const image = {
-      source: source,
-      type: source.substr(source.length - 3)
-    };
+  const image = {
+    source: source,
+    type: source.substr(source.length - 3)
+  };
 
-    if (image.type !== "svg") {
-      return loadImage(source);
-    }
+  if (image.type !== "svg") {
+    return loadImage(source);
+  }
 
-    const response = yield fetch(image.source);
+  const response = await fetch(image.source);
 
-    if (!response.ok) {
-      throw new Error("Error tsParticles - Image not found");
-    }
+  if (!response.ok) {
+    throw new Error("Error tsParticles - Image not found");
+  }
 
-    image.svgData = yield response.text();
-    return image;
-  });
+  image.svgData = await response.text();
+  return image;
 }
 function replaceColorSvg(imageShape, color, opacity) {
   const {
@@ -8967,38 +8589,6 @@ function replaceColorSvg(imageShape, color, opacity) {
   return `${svgData.substring(0, preFillIndex)} fill="${getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Image/ImageDrawer.js
-var ImageDrawer_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 var ImageDrawer_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");
@@ -9048,97 +8638,91 @@ class ImageDrawer {
     containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
   }
 
-  init(container) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
+  async init(container) {
+    await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
+    await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
 
-      for (const manualParticle of container.actualOptions.manualParticles) {
-        yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-      }
+    for (const manualParticle of container.actualOptions.manualParticles) {
+      await this.loadImagesFromParticlesOptions(container, manualParticle.options);
+    }
 
-      const emitterOptions = container.actualOptions;
+    const emitterOptions = container.actualOptions;
 
-      if (emitterOptions.emitters) {
-        if (emitterOptions.emitters instanceof Array) {
-          for (const emitter of emitterOptions.emitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
+    if (emitterOptions.emitters) {
+      if (emitterOptions.emitters instanceof Array) {
+        for (const emitter of emitterOptions.emitters) {
+          await this.loadImagesFromParticlesOptions(container, emitter.particles);
         }
+      } else {
+        await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
       }
+    }
 
-      const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
+    const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
 
-      if (interactiveEmitters) {
-        if (interactiveEmitters instanceof Array) {
-          for (const emitter of interactiveEmitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
+    if (interactiveEmitters) {
+      if (interactiveEmitters instanceof Array) {
+        for (const emitter of interactiveEmitters) {
+          await this.loadImagesFromParticlesOptions(container, emitter.particles);
         }
+      } else {
+        await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
       }
-    });
+    }
   }
 
   destroy() {
     ImageDrawer_classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
   }
 
-  loadImagesFromParticlesOptions(container, options) {
+  async loadImagesFromParticlesOptions(container, options) {
     var _a, _b, _c;
 
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
+    const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
 
-      if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type)) {
-        return;
-      }
+    if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type)) {
+      return;
+    }
 
-      const idx = ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex(t => t.id === container.id);
+    const idx = ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex(t => t.id === container.id);
 
-      if (idx >= 0) {
-        ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-      }
+    if (idx >= 0) {
+      ImageDrawer_classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
+    }
 
-      const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
+    const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
 
-      if (imageOptions instanceof Array) {
-        for (const optionsImage of imageOptions) {
-          yield this.loadImageShape(container, optionsImage);
-        }
-      } else {
-        yield this.loadImageShape(container, imageOptions);
+    if (imageOptions instanceof Array) {
+      for (const optionsImage of imageOptions) {
+        await this.loadImageShape(container, optionsImage);
       }
+    } else {
+      await this.loadImageShape(container, imageOptions);
+    }
 
-      if (options === null || options === void 0 ? void 0 : options.groups) {
-        for (const groupName in options.groups) {
-          const group = options.groups[groupName];
-          yield this.loadImagesFromParticlesOptions(container, group);
-        }
+    if (options === null || options === void 0 ? void 0 : options.groups) {
+      for (const groupName in options.groups) {
+        const group = options.groups[groupName];
+        await this.loadImagesFromParticlesOptions(container, group);
       }
+    }
 
-      if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-        yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-      }
-    });
+    if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
+      await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
+    }
   }
 
-  loadImageShape(container, imageShape) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      try {
-        const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-        const image = yield imageFunc(imageShape.src);
+  async loadImageShape(container, imageShape) {
+    try {
+      const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+      const image = await imageFunc(imageShape.src);
 
-        if (image) {
-          this.addImage(container, image);
-        }
-      } catch (_a) {
-        console.warn(`tsParticles error - ${imageShape.src} not found`);
+      if (image) {
+        this.addImage(container, image);
       }
-    });
+    } catch (_a) {
+      console.warn(`tsParticles error - ${imageShape.src} not found`);
+    }
   }
 
   draw(context, particle, radius, opacity) {
@@ -9173,7 +8757,7 @@ class ImageDrawer {
   }
 
   loadShape(particle) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
 
     if (particle.shape !== "image" && particle.shape !== "images") {
       return;
@@ -9190,7 +8774,7 @@ class ImageDrawer {
     }
 
     if (image.svgData !== undefined && imageData.replaceColor && color) {
-      const svgColoredData = replaceColorSvg(image, color, particle.opacity.value);
+      const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
       const svg = new Blob([svgColoredData], {
         type: "image/svg+xml"
       });
@@ -9202,7 +8786,7 @@ class ImageDrawer {
           svgData: svgColoredData
         }),
         ratio: imageData.width / imageData.height,
-        replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+        replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
         source: imageData.src
       };
       img.addEventListener("load", () => {
@@ -9232,7 +8816,7 @@ class ImageDrawer {
         data: image,
         loaded: true,
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
         source: imageData.src
       };
     }
@@ -9241,8 +8825,8 @@ class ImageDrawer {
       imageRes.ratio = 1;
     }
 
-    const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-    const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+    const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
+    const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
     const imageShape = {
       image: imageRes,
       fill,
@@ -9427,38 +9011,6 @@ function loadStarShape(tsParticles) {
   tsParticles.addShape("star", new StarDrawer());
 }
 ;// CONCATENATED MODULE: ./dist/browser/Shapes/Text/TextDrawer.js
-var TextDrawer_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
 
 const validTypes = ["text", "character", "char"];
 class TextDrawer {
@@ -9466,28 +9018,26 @@ class TextDrawer {
     return 12;
   }
 
-  init(container) {
-    return TextDrawer_awaiter(this, void 0, void 0, function* () {
-      const options = container.actualOptions;
+  async init(container) {
+    const options = container.actualOptions;
 
-      if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
-        const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
+    if (validTypes.find(t => isInArray(t, options.particles.shape.type))) {
+      const shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
 
-        if (shapeOptions instanceof Array) {
-          const promises = [];
+      if (shapeOptions instanceof Array) {
+        const promises = [];
 
-          for (const character of shapeOptions) {
-            promises.push(loadFont(character));
-          }
+        for (const character of shapeOptions) {
+          promises.push(loadFont(character));
+        }
 
-          yield Promise.allSettled(promises);
-        } else {
-          if (shapeOptions !== undefined) {
-            yield loadFont(shapeOptions);
-          }
+        await Promise.allSettled(promises);
+      } else {
+        if (shapeOptions !== undefined) {
+          await loadFont(shapeOptions);
         }
       }
-    });
+    }
   }
 
   draw(context, particle, radius, opacity) {
@@ -9547,34 +9097,41 @@ function loadTextShape(tsParticles) {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Angle/AngleUpdater.js
 
 
+
 function updateAngle(particle, delta) {
   var _a;
 
-  const rotate = particle.options.rotate;
-  const rotateAnimation = rotate.animation;
-  const speed = ((_a = particle.rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
+  const rotate = particle.rotate;
+
+  if (!rotate) {
+    return;
+  }
+
+  const rotateOptions = particle.options.rotate;
+  const rotateAnimation = rotateOptions.animation;
+  const speed = ((_a = rotate.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
   const max = 2 * Math.PI;
 
   if (!rotateAnimation.enable) {
     return;
   }
 
-  switch (particle.rotate.status) {
+  switch (rotate.status) {
     case AnimationStatus.increasing:
-      particle.rotate.value += speed;
+      rotate.value += speed;
 
-      if (particle.rotate.value > max) {
-        particle.rotate.value -= max;
+      if (rotate.value > max) {
+        rotate.value -= max;
       }
 
       break;
 
     case AnimationStatus.decreasing:
     default:
-      particle.rotate.value -= speed;
+      rotate.value -= speed;
 
-      if (particle.rotate.value < 0) {
-        particle.rotate.value += max;
+      if (rotate.value < 0) {
+        rotate.value += max;
       }
 
       break;
@@ -9582,6 +9139,45 @@ function updateAngle(particle, delta) {
 }
 
 class AngleUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const rotateOptions = particle.options.rotate;
+    particle.rotate = {
+      enable: rotateOptions.animation.enable,
+      value: getRangeValue(rotateOptions.value) * Math.PI / 180
+    };
+    let rotateDirection = rotateOptions.direction;
+
+    if (rotateDirection === RotateDirection.random) {
+      const index = Math.floor(Math.random() * 2);
+      rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise;
+    }
+
+    switch (rotateDirection) {
+      case RotateDirection.counterClockwise:
+      case "counterClockwise":
+        particle.rotate.status = AnimationStatus.decreasing;
+        break;
+
+      case RotateDirection.clockwise:
+        particle.rotate.status = AnimationStatus.increasing;
+        break;
+    }
+
+    const rotateAnimation = particle.options.rotate.animation;
+
+    if (rotateAnimation.enable) {
+      particle.rotate.velocity = rotateAnimation.speed / 360 * this.container.retina.reduceFactor;
+
+      if (!rotateAnimation.sync) {
+        particle.rotate.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     const rotate = particle.options.rotate;
     const rotateAnimation = rotate.animation;
@@ -9600,7 +9196,7 @@ class AngleUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Angle/index.js
 
 function loadAngleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("angle", () => new AngleUpdater());
+  tsParticles.addParticleUpdater("angle", container => new AngleUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Color/ColorUpdater.js
 
@@ -9658,6 +9254,18 @@ function updateColor(particle, delta) {
 }
 
 class ColorUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const hslColor = colorToHsl(particle.options.color, particle.id, particle.options.reduceDuplicates);
+
+    if (hslColor) {
+      particle.color = getHslAnimationFromHsl(hslColor, particle.options.color.animation, this.container.retina.reduceFactor);
+    }
+  }
+
   isEnabled(particle) {
     var _a, _b, _c;
 
@@ -9673,7 +9281,7 @@ class ColorUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Color/index.js
 
 function loadColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("color", () => new ColorUpdater());
+  tsParticles.addParticleUpdater("color", container => new ColorUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Life/LifeUpdater.js
 
@@ -9682,6 +9290,8 @@ class LifeUpdater {
     this.container = container;
   }
 
+  init() {}
+
   isEnabled(particle) {
     return !particle.destroyed;
   }
@@ -9781,6 +9391,10 @@ function checkDestroy(particle, value, minValue, maxValue) {
 function updateOpacity(particle, delta) {
   var _a, _b, _c, _d, _e;
 
+  if (!particle.opacity) {
+    return;
+  }
+
   const minValue = particle.opacity.min;
   const maxValue = particle.opacity.max;
 
@@ -9828,10 +9442,58 @@ function updateOpacity(particle, delta) {
 }
 
 class OpacityUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  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: opacityOptions.animation.count
+    };
+    const opacityAnimation = opacityOptions.animation;
+
+    if (opacityAnimation.enable) {
+      particle.opacity.status = AnimationStatus.increasing;
+      const opacityRange = opacityOptions.value;
+      particle.opacity.min = getRangeMin(opacityRange);
+      particle.opacity.max = getRangeMax(opacityRange);
+
+      switch (opacityAnimation.startValue) {
+        case StartValueType.min:
+          particle.opacity.value = particle.opacity.min;
+          particle.opacity.status = AnimationStatus.increasing;
+          break;
+
+        case StartValueType.random:
+          particle.opacity.value = randomInRange(particle.opacity);
+          particle.opacity.status = Math.random() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing;
+          break;
+
+        case StartValueType.max:
+        default:
+          particle.opacity.value = particle.opacity.max;
+          particle.opacity.status = AnimationStatus.decreasing;
+          break;
+      }
+
+      particle.opacity.velocity = opacityAnimation.speed / 100 * this.container.retina.reduceFactor;
+
+      if (!opacityAnimation.sync) {
+        particle.opacity.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     var _a, _b, _c;
 
-    return !particle.destroyed && !particle.spawning && particle.opacity.enable && (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0));
+    return !particle.destroyed && !particle.spawning && !!particle.opacity && particle.opacity.enable && (((_a = particle.opacity.maxLoops) !== null && _a !== void 0 ? _a : 0) <= 0 || ((_b = particle.opacity.loops) !== null && _b !== void 0 ? _b : 0) < ((_c = particle.opacity.maxLoops) !== null && _c !== void 0 ? _c : 0));
   }
 
   update(particle, delta) {
@@ -9846,7 +9508,7 @@ class OpacityUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Opacity/index.js
 
 function loadOpacityUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("opacity", () => new OpacityUpdater());
+  tsParticles.addParticleUpdater("opacity", container => new OpacityUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Size/SizeUpdater.js
 
@@ -9920,6 +9582,8 @@ function updateSize(particle, delta) {
 }
 
 class SizeUpdater {
+  init() {}
+
   isEnabled(particle) {
     var _a, _b, _c;
 
@@ -9978,26 +9642,26 @@ function StrokeColorUpdater_updateColorValue(delta, value, valueAnimation, max,
 }
 
 function updateStrokeColor(particle, delta) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 
-  if (!particle.stroke.color) {
+  if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
     return;
   }
 
   const animationOptions = particle.stroke.color.animation;
-  const h = (_b = (_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h) !== null && _b !== void 0 ? _b : (_c = particle.color) === null || _c === void 0 ? void 0 : _c.h;
+  const h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
 
   if (h) {
     StrokeColorUpdater_updateColorValue(delta, h, animationOptions.h, 360, false);
   }
 
-  const s = (_e = (_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.s) !== null && _e !== void 0 ? _e : (_f = particle.color) === null || _f === void 0 ? void 0 : _f.s;
+  const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
 
   if (s) {
     StrokeColorUpdater_updateColorValue(delta, s, animationOptions.s, 100, true);
   }
 
-  const l = (_h = (_g = particle.strokeColor) === null || _g === void 0 ? void 0 : _g.l) !== null && _h !== void 0 ? _h : (_j = particle.color) === null || _j === void 0 ? void 0 : _j.l;
+  const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
 
   if (l) {
     StrokeColorUpdater_updateColorValue(delta, l, animationOptions.l, 100, true);
@@ -10005,11 +9669,28 @@ function updateStrokeColor(particle, delta) {
 }
 
 class StrokeColorUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    var _a, _b;
+
+    const container = this.container;
+    particle.stroke = particle.options.stroke instanceof Array ? itemFromArray(particle.options.stroke, particle.id, particle.options.reduceDuplicates) : particle.options.stroke;
+    particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
+    const strokeHslColor = (_a = colorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+
+    if (strokeHslColor) {
+      particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+    }
+  }
+
   isEnabled(particle) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
 
-    const color = particle.stroke.color;
-    return !particle.destroyed && !particle.spawning && color !== undefined && (((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && color.animation.h.enable || ((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && color.animation.s.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && color.animation.l.enable);
+    const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+    return !particle.destroyed && !particle.spawning && !!color && (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable || ((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable);
   }
 
   update(particle, delta) {
@@ -10024,7 +9705,7 @@ class StrokeColorUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/StrokeColor/index.js
 
 function loadStrokeColorUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("strokeColor", () => new StrokeColorUpdater());
+  tsParticles.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/OutModes/Utils.js
 
@@ -10096,6 +9777,8 @@ class OutOfCanvasUpdater {
     this.container = container;
   }
 
+  init() {}
+
   isEnabled(particle) {
     return !particle.destroyed && !particle.spawning;
   }
@@ -10278,23 +9961,62 @@ function loadOutModesUpdater(tsParticles) {
   tsParticles.addParticleUpdater("outModes", container => new OutOfCanvasUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Roll/RollUpdater.js
+
+
+
 function updateRoll(particle, delta) {
   const roll = particle.options.roll;
-  const speed = particle.rollSpeed * delta.factor;
-  const max = 2 * Math.PI;
 
-  if (!roll.enable) {
+  if (!particle.roll || !roll.enable) {
     return;
   }
 
-  particle.rollAngle += speed;
+  const speed = particle.roll.speed * delta.factor;
+  const max = 2 * Math.PI;
+  particle.roll.angle += speed;
 
-  if (particle.rollAngle > max) {
-    particle.rollAngle -= max;
+  if (particle.roll.angle > max) {
+    particle.roll.angle -= max;
   }
 }
 
 class RollUpdater {
+  init(particle) {
+    const rollOpt = particle.options.roll;
+
+    if (rollOpt.enable) {
+      particle.roll = {
+        angle: Math.random() * Math.PI * 2,
+        speed: getRangeValue(rollOpt.speed) / 360
+      };
+
+      if (rollOpt.backColor) {
+        particle.backColor = colorToHsl(rollOpt.backColor);
+      } else if (rollOpt.darken.enable && rollOpt.enlighten.enable) {
+        const alterType = Math.random() >= 0.5 ? AlterType.darken : AlterType.enlighten;
+        particle.roll.alter = {
+          type: alterType,
+          value: alterType === AlterType.darken ? rollOpt.darken.value : rollOpt.enlighten.value
+        };
+      } else if (rollOpt.darken.enable) {
+        particle.roll.alter = {
+          type: AlterType.darken,
+          value: rollOpt.darken.value
+        };
+      } else if (rollOpt.enlighten.enable) {
+        particle.roll.alter = {
+          type: AlterType.enlighten,
+          value: rollOpt.enlighten.value
+        };
+      }
+    } else {
+      particle.roll = {
+        angle: 0,
+        speed: 0
+      };
+    }
+  }
+
   isEnabled(particle) {
     const roll = particle.options.roll;
     return !particle.destroyed && !particle.spawning && roll.enable;
@@ -10317,9 +10039,14 @@ function loadRollUpdater(tsParticles) {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Tilt/TiltUpdater.js
 
 
+
 function updateTilt(particle, delta) {
   var _a;
 
+  if (!particle.tilt) {
+    return;
+  }
+
   const tilt = particle.options.tilt;
   const tiltAnimation = tilt.animation;
   const speed = ((_a = particle.tilt.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor;
@@ -10352,6 +10079,47 @@ function updateTilt(particle, delta) {
 }
 
 class TiltUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const tiltOptions = particle.options.tilt;
+    particle.tilt = {
+      enable: tiltOptions.enable,
+      value: getRangeValue(tiltOptions.value) * Math.PI / 180,
+      sinDirection: Math.random() >= 0.5 ? 1 : -1,
+      cosDirection: Math.random() >= 0.5 ? 1 : -1
+    };
+    let tiltDirection = tiltOptions.direction;
+
+    if (tiltDirection === TiltDirection.random) {
+      const index = Math.floor(Math.random() * 2);
+      tiltDirection = index > 0 ? TiltDirection.counterClockwise : TiltDirection.clockwise;
+    }
+
+    switch (tiltDirection) {
+      case TiltDirection.counterClockwise:
+      case "counterClockwise":
+        particle.tilt.status = AnimationStatus.decreasing;
+        break;
+
+      case TiltDirection.clockwise:
+        particle.tilt.status = AnimationStatus.increasing;
+        break;
+    }
+
+    const tiltAnimation = particle.options.tilt.animation;
+
+    if (tiltAnimation.enable) {
+      particle.tilt.velocity = tiltAnimation.speed / 360 * this.container.retina.reduceFactor;
+
+      if (!tiltAnimation.sync) {
+        particle.tilt.velocity *= Math.random();
+      }
+    }
+  }
+
   isEnabled(particle) {
     const tilt = particle.options.tilt;
     const tiltAnimation = tilt.animation;
@@ -10370,33 +10138,58 @@ class TiltUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Tilt/index.js
 
 function loadTiltUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("tilt", () => new TiltUpdater());
+  tsParticles.addParticleUpdater("tilt", container => new TiltUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Wobble/WobbleUpdater.js
+
+
 function updateWobble(particle, delta) {
+  var _a;
+
   const wobble = particle.options.wobble;
-  const speed = particle.wobbleSpeed * delta.factor;
-  const distance = particle.wobbleDistance * delta.factor / (1000 / 60);
-  const max = 2 * Math.PI;
 
-  if (!wobble.enable) {
+  if (!wobble.enable || !particle.wobble) {
     return;
   }
 
-  particle.wobbleAngle += speed;
+  const speed = particle.wobble.speed * delta.factor;
+  const distance = ((_a = particle.retina.wobbleDistance) !== null && _a !== void 0 ? _a : 0) * delta.factor / (1000 / 60);
+  const max = 2 * Math.PI;
+  particle.wobble.angle += speed;
 
-  if (particle.wobbleAngle > max) {
-    particle.wobbleAngle -= max;
+  if (particle.wobble.angle > max) {
+    particle.wobble.angle -= max;
   }
 
-  particle.position.x += distance * Math.cos(particle.wobbleAngle);
-  particle.position.y += distance * Math.abs(Math.sin(particle.wobbleAngle));
+  particle.position.x += distance * Math.cos(particle.wobble.angle);
+  particle.position.y += distance * Math.abs(Math.sin(particle.wobble.angle));
 }
 
 class WobbleUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+
+  init(particle) {
+    const wobbleOpt = particle.options.wobble;
+
+    if (wobbleOpt.enable) {
+      particle.wobble = {
+        angle: Math.random() * Math.PI * 2,
+        speed: getRangeValue(wobbleOpt.speed) / 360
+      };
+    } else {
+      particle.wobble = {
+        angle: 0,
+        speed: 0
+      };
+    }
+
+    particle.retina.wobbleDistance = getRangeValue(wobbleOpt.distance) * this.container.retina.pixelRatio;
+  }
+
   isEnabled(particle) {
-    const wobble = particle.options.wobble;
-    return !particle.destroyed && !particle.spawning && wobble.enable;
+    return !particle.destroyed && !particle.spawning && particle.options.wobble.enable;
   }
 
   update(particle, delta) {
@@ -10411,7 +10204,7 @@ class WobbleUpdater {
 ;// CONCATENATED MODULE: ./dist/browser/Updaters/Wobble/index.js
 
 function loadWobbleUpdater(tsParticles) {
-  tsParticles.addParticleUpdater("wobble", () => new WobbleUpdater());
+  tsParticles.addParticleUpdater("wobble", container => new WobbleUpdater(container));
 }
 ;// CONCATENATED MODULE: ./dist/browser/Core/ExternalInteractorBase.js
 
@@ -10612,7 +10405,7 @@ class Bouncer extends ExternalInteractorBase {
         circleBounce(circleBounceDataFromParticle(particle), {
           position,
           radius,
-          mass: Math.pow(radius, 2) * Math.PI / 2,
+          mass: radius ** 2 * Math.PI / 2,
           velocity: Vector.origin,
           factor: Vector.origin
         });
@@ -10801,6 +10594,8 @@ class Bubbler extends ExternalInteractorBase {
   }
 
   clickBubble() {
+    var _a, _b;
+
     const container = this.container,
           options = container.actualOptions,
           mouseClickPos = container.interactivity.mouse.clickPosition;
@@ -10850,7 +10645,7 @@ class Bubbler extends ExternalInteractorBase {
         },
         particlesObj: {
           optValue: getRangeMax(particle.options.opacity.value),
-          value: particle.opacity.value
+          value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1
         },
         type: ProcessBubbleType.opacity
       };
@@ -10919,7 +10714,7 @@ class Bubbler extends ExternalInteractorBase {
   }
 
   hoverBubbleOpacity(particle, ratio, divBubble) {
-    var _a;
+    var _a, _b, _c;
 
     const container = this.container,
           options = container.actualOptions,
@@ -10930,7 +10725,7 @@ class Bubbler extends ExternalInteractorBase {
     }
 
     const optOpacity = particle.options.opacity.value;
-    const pOpacity = particle.opacity.value;
+    const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
     const opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
 
     if (opacity !== undefined) {
@@ -11245,7 +11040,7 @@ class Repulser extends ExternalInteractorBase {
           dy,
           distance
         } = getDistances(mouseClickPos, particle.position),
-              d = Math.pow(distance, 2),
+              d = distance ** 2,
               velocity = container.actualOptions.interactivity.modes.repulse.speed,
               force = -repulseRadius * velocity / d;
 
@@ -11362,7 +11157,7 @@ class Attractor_Attractor extends ParticlesInteractorBase {
     var _a;
 
     const container = this.container,
-          distance = (_a = p1.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance,
+          distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance,
           pos1 = p1.getPosition(),
           query = container.particles.quadTree.queryCircle(pos1, distance);
 
@@ -11588,7 +11383,7 @@ class Linker extends ParticlesInteractorBase {
 
     const linkOpt1 = p1.options.links;
     const optOpacity = linkOpt1.opacity;
-    const optDistance = (_a = p1.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
+    const optDistance = (_a = p1.retina.linksDistance) !== null && _a !== void 0 ? _a : container.retina.linksDistance;
     const warp = linkOpt1.warp;
     const range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance);
     const query = container.particles.quadTree.query(range);
@@ -11774,8 +11569,8 @@ class LinkInstance {
         return;
       }
 
-      const width = (_a = p1.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
-      const maxDistance = (_b = p1.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
+      const width = (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth;
+      const maxDistance = (_b = p1.retina.linksDistance) !== null && _b !== void 0 ? _b : container.retina.linksDistance;
       drawLinkLine(ctx, width, pos1, pos2, maxDistance, container.canvas.size, p1.options.links.warp, options.backgroundMask.enable, options.backgroundMask.composite, colorLine, opacity, p1.options.links.shadow);
     });
   }
@@ -11877,10 +11672,6 @@ function loadSlim(tsParticles) {
 
 
 
-
-
-
-
 const tsParticles = new Main();
 tsParticles.init();
 loadSlim(tsParticles);
@@ -11898,6 +11689,10 @@ const {
 
 
 
+
+
+
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;