@tsparticles/basic 3.0.2 → 3.1.0

package/tsparticles.basic.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -139,6 +139,7 @@ __webpack_require__.d(__webpack_exports__, {
   colorToHsl: () => (/* reexport */ colorToHsl),
   colorToRgb: () => (/* reexport */ colorToRgb),
   deepExtend: () => (/* reexport */ deepExtend),
+  degToRad: () => (/* reexport */ degToRad),
   divMode: () => (/* reexport */ divMode),
   divModeExecute: () => (/* reexport */ divModeExecute),
   drawEffect: () => (/* reexport */ drawEffect),
@@ -171,6 +172,7 @@ __webpack_require__.d(__webpack_exports__, {
   getSize: () => (/* reexport */ getSize),
   getStyleFromHsl: () => (/* reexport */ getStyleFromHsl),
   getStyleFromRgb: () => (/* reexport */ getStyleFromRgb),
+  halfRandom: () => (/* reexport */ halfRandom),
   hasMatchMedia: () => (/* reexport */ hasMatchMedia),
   hslToRgb: () => (/* reexport */ hslToRgb),
   hslaToRgba: () => (/* reexport */ hslaToRgba),
@@ -191,6 +193,7 @@ __webpack_require__.d(__webpack_exports__, {
   loadFont: () => (/* reexport */ loadFont),
   loadOptions: () => (/* reexport */ loadOptions),
   loadParticlesOptions: () => (/* reexport */ loadParticlesOptions),
+  millisecondsToSeconds: () => (/* reexport */ millisecondsToSeconds),
   mix: () => (/* reexport */ mix),
   mouseDownEvent: () => (/* reexport */ mouseDownEvent),
   mouseLeaveEvent: () => (/* reexport */ mouseLeaveEvent),
@@ -200,6 +203,7 @@ __webpack_require__.d(__webpack_exports__, {
   paintBase: () => (/* reexport */ paintBase),
   paintImage: () => (/* reexport */ paintImage),
   parseAlpha: () => (/* reexport */ parseAlpha),
+  percentDenominator: () => (/* reexport */ percentDenominator),
   randomInRange: () => (/* reexport */ randomInRange),
   rangeColorToHsl: () => (/* reexport */ rangeColorToHsl),
   rangeColorToRgb: () => (/* reexport */ rangeColorToRgb),
@@ -220,6 +224,9 @@ __webpack_require__.d(__webpack_exports__, {
   touchMoveEvent: () => (/* reexport */ touchMoveEvent),
   touchStartEvent: () => (/* reexport */ touchStartEvent),
   tsParticles: () => (/* reexport */ tsParticles),
+  updateAnimation: () => (/* reexport */ updateAnimation),
+  updateColor: () => (/* reexport */ updateColor),
+  updateColorValue: () => (/* reexport */ updateColorValue),
   visibilityChangeEvent: () => (/* reexport */ visibilityChangeEvent)
 });
 
@@ -237,9 +244,19 @@ const touchCancelEvent = "touchcancel";
 const resizeEvent = "resize";
 const visibilityChangeEvent = "visibilitychange";
 const errorPrefix = "tsParticles - Error";
+const percentDenominator = 100;
+const halfRandom = 0.5;
+const millisecondsToSeconds = 1000;
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/Vector3d.js
 
 
+const origin = {
+    x: 0,
+    y: 0,
+    z: 0
+  },
+  squareExp = 2,
+  inverseFactorNumerator = 1.0;
 class Vector3d {
   constructor(xOrCoords, y, z) {
     this._updateFromAngle = (angle, length) => {
@@ -250,17 +267,17 @@ class Vector3d {
       this.x = xOrCoords.x;
       this.y = xOrCoords.y;
       const coords3d = xOrCoords;
-      this.z = coords3d.z ? coords3d.z : 0;
+      this.z = coords3d.z ? coords3d.z : origin.z;
     } else if (xOrCoords !== undefined && y !== undefined) {
       this.x = xOrCoords;
       this.y = y;
-      this.z = z ?? 0;
+      this.z = z ?? origin.z;
     } else {
       throw new Error(`${errorPrefix} Vector3d not initialized correctly`);
     }
   }
   static get origin() {
-    return Vector3d.create(0, 0, 0);
+    return Vector3d.create(origin.x, origin.y, origin.z);
   }
   get angle() {
     return Math.atan2(this.y, this.x);
@@ -306,7 +323,7 @@ class Vector3d {
     this.z /= n;
   }
   getLengthSq() {
-    return this.x ** 2 + this.y ** 2;
+    return this.x ** squareExp + this.y ** squareExp;
   }
   mult(n) {
     return Vector3d.create(this.x * n, this.y * n, this.z * n);
@@ -317,19 +334,20 @@ class Vector3d {
     this.z *= n;
   }
   normalize() {
-    const length = this.length;
-    if (length != 0) {
-      this.multTo(1.0 / length);
+    const length = this.length,
+      noLength = 0;
+    if (length != noLength) {
+      this.multTo(inverseFactorNumerator / length);
     }
   }
   rotate(angle) {
-    return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0);
+    return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), origin.z);
   }
   setTo(c) {
     this.x = c.x;
     this.y = c.y;
     const v3d = c;
-    this.z = v3d.z ? v3d.z : 0;
+    this.z = v3d.z ? v3d.z : origin.z;
   }
   sub(v) {
     return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
@@ -342,12 +360,17 @@ class Vector3d {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/Vector.js
 
+const Vector_origin = {
+  x: 0,
+  y: 0,
+  z: 0
+};
 class Vector extends Vector3d {
   constructor(xOrCoords, y) {
-    super(xOrCoords, y, 0);
+    super(xOrCoords, y, Vector_origin.z);
   }
   static get origin() {
-    return Vector.create(0, 0);
+    return Vector.create(Vector_origin.x, Vector_origin.y);
   }
   static clone(source) {
     return Vector.create(source.x, source.y);
@@ -359,8 +382,11 @@ class Vector extends Vector3d {
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/NumberUtils.js
 
 
+
 let _random = Math.random;
-const easings = new Map();
+const easings = new Map(),
+  NumberUtils_double = 2,
+  doublePI = Math.PI * NumberUtils_double;
 function addEasing(name, easing) {
   if (easings.get(name)) {
     return;
@@ -368,13 +394,15 @@ function addEasing(name, easing) {
   easings.set(name, easing);
 }
 function getEasing(name) {
-  return easings.get(name) || (value => value);
+  return easings.get(name) ?? (value => value);
 }
 function setRandom(rnd = Math.random) {
   _random = rnd;
 }
 function getRandom() {
-  return clamp(_random(), 0, 1 - 1e-16);
+  const min = 0,
+    max = 1;
+  return clamp(_random(), min, max - Number.EPSILON);
 }
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
@@ -383,10 +411,11 @@ function mix(comp1, comp2, weight1, weight2) {
   return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
 }
 function randomInRange(r) {
-  const max = getRangeMax(r);
+  const max = getRangeMax(r),
+    minOffset = 0;
   let min = getRangeMin(r);
   if (max === min) {
-    min = 0;
+    min = minOffset;
   }
   return getRandom() * (max - min) + min;
 }
@@ -412,43 +441,52 @@ function setRangeValue(source, value) {
 }
 function getDistances(pointA, pointB) {
   const dx = pointA.x - pointB.x,
-    dy = pointA.y - pointB.y;
+    dy = pointA.y - pointB.y,
+    squareExp = 2;
   return {
     dx: dx,
     dy: dy,
-    distance: Math.sqrt(dx ** 2 + dy ** 2)
+    distance: Math.sqrt(dx ** squareExp + dy ** squareExp)
   };
 }
 function getDistance(pointA, pointB) {
   return getDistances(pointA, pointB).distance;
 }
+function degToRad(degrees) {
+  const PIDeg = 180;
+  return degrees * Math.PI / PIDeg;
+}
 function getParticleDirectionAngle(direction, position, center) {
   if (isNumber(direction)) {
-    return direction * Math.PI / 180;
+    return degToRad(direction);
   }
+  const empty = 0,
+    half = 0.5,
+    quarter = 0.25,
+    threeQuarter = half + quarter;
   switch (direction) {
     case "top":
-      return -Math.PI * 0.5;
+      return -Math.PI * half;
     case "top-right":
-      return -Math.PI * 0.25;
+      return -Math.PI * quarter;
     case "right":
-      return 0;
+      return empty;
     case "bottom-right":
-      return Math.PI * 0.25;
+      return Math.PI * quarter;
     case "bottom":
-      return Math.PI * 0.5;
+      return Math.PI * half;
     case "bottom-left":
-      return Math.PI * 0.75;
+      return Math.PI * threeQuarter;
     case "left":
       return Math.PI;
     case "top-left":
-      return -Math.PI * 0.75;
+      return -Math.PI * threeQuarter;
     case "inside":
       return Math.atan2(center.y - position.y, center.x - position.x);
     case "outside":
       return Math.atan2(position.y - center.y, position.x - center.x);
     default:
-      return getRandom() * Math.PI * 2;
+      return getRandom() * doublePI;
   }
 }
 function getParticleBaseVelocity(direction) {
@@ -458,18 +496,19 @@ function getParticleBaseVelocity(direction) {
   return baseVelocity;
 }
 function collisionVelocity(v1, v2, m1, m2) {
-  return Vector.create(v1.x * (m1 - m2) / (m1 + m2) + v2.x * 2 * m2 / (m1 + m2), v1.y);
+  const double = 2;
+  return Vector.create(v1.x * (m1 - m2) / (m1 + m2) + v2.x * double * m2 / (m1 + m2), v1.y);
 }
 function calcPositionFromSize(data) {
-  return data.position && data.position.x !== undefined && data.position.y !== undefined ? {
-    x: data.position.x * data.size.width / 100,
-    y: data.position.y * data.size.height / 100
+  return data.position?.x !== undefined && data.position.y !== undefined ? {
+    x: data.position.x * data.size.width / percentDenominator,
+    y: data.position.y * data.size.height / percentDenominator
   } : undefined;
 }
 function calcPositionOrRandomFromSize(data) {
   return {
-    x: (data.position?.x ?? getRandom() * 100) * data.size.width / 100,
-    y: (data.position?.y ?? getRandom() * 100) * data.size.height / 100
+    x: (data.position?.x ?? getRandom() * percentDenominator) * data.size.width / percentDenominator,
+    y: (data.position?.y ?? getRandom() * percentDenominator) * data.size.height / percentDenominator
   };
 }
 function calcPositionOrRandomFromSizeRanged(data) {
@@ -499,11 +538,16 @@ function calcExactPositionOrRandomFromSizeRanged(data) {
   });
 }
 function parseAlpha(input) {
-  return input ? input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input) : 1;
+  const defaultAlpha = 1;
+  if (!input) {
+    return defaultAlpha;
+  }
+  return input.endsWith("%") ? parseFloat(input) / percentDenominator : parseFloat(input);
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/Utils.js
 
 
+
 const _logger = {
   debug: console.debug,
   error: console.error,
@@ -534,11 +578,13 @@ function rectSideBounce(data) {
       rectOtherSide,
       velocity,
       factor
-    } = data;
+    } = data,
+    half = 0.5,
+    minVelocity = 0;
   if (pOtherSide.min < rectOtherSide.min || pOtherSide.min > rectOtherSide.max || pOtherSide.max < rectOtherSide.min || pOtherSide.max > rectOtherSide.max) {
     return res;
   }
-  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0) {
+  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * half && velocity > minVelocity || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity) {
     res.velocity = velocity * -factor;
     res.bounced = true;
   }
@@ -575,7 +621,8 @@ function safeMutationObserver(callback) {
   return new MutationObserver(callback);
 }
 function isInArray(value, array) {
-  return value === array || isArray(array) && array.indexOf(value) > -1;
+  const invalidIndex = -1;
+  return value === array || isArray(array) && array.indexOf(value) > invalidIndex;
 }
 async function loadFont(font, weight) {
   try {
@@ -589,7 +636,8 @@ function itemFromArray(array, index, useIndex = true) {
   return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
 function isPointInside(point, size, offset, radius, direction) {
-  return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
+  const minRadius = 0;
+  return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
 function areBoundsInside(bounds, size, offset, direction) {
   let inside = true;
@@ -686,8 +734,9 @@ function circleBounce(p1, p2) {
     {
       dx: xDist,
       dy: yDist
-    } = getDistances(pos2, pos1);
-  if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+    } = getDistances(pos2, pos1),
+    minimumDistance = 0;
+  if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
     return;
   }
   const angle = -Math.atan2(yDist, xDist),
@@ -767,19 +816,24 @@ function rectBounce(particle, divBounds) {
   }
 }
 function executeOnSingleOrMultiple(obj, callback) {
-  return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+  const defaultIndex = 0;
+  return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
 function itemFromSingleOrMultiple(obj, index, useIndex) {
   return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
 function findItemFromSingleOrMultiple(obj, callback) {
-  return isArray(obj) ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+  if (isArray(obj)) {
+    return obj.find((t, index) => callback(t, index));
+  }
+  const defaultIndex = 0;
+  return callback(obj, defaultIndex) ? obj : undefined;
 }
 function initParticleNumericAnimationValue(options, pxRatio) {
   const valueRange = options.value,
     animationOptions = options.animation,
     res = {
-      delayTime: getRangeValue(animationOptions.delay) * 1000,
+      delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds,
       enable: animationOptions.enable,
       value: getRangeValue(options.value) * pxRatio,
       max: getRangeMax(valueRange) * pxRatio,
@@ -787,9 +841,10 @@ function initParticleNumericAnimationValue(options, pxRatio) {
       loops: 0,
       maxLoops: getRangeValue(animationOptions.count),
       time: 0
-    };
+    },
+    decayOffset = 1;
   if (animationOptions.enable) {
-    res.decay = 1 - getRangeValue(animationOptions.decay);
+    res.decay = decayOffset - getRangeValue(animationOptions.decay);
     switch (animationOptions.mode) {
       case "increase":
         res.status = "increasing";
@@ -798,7 +853,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
         res.status = "decreasing";
         break;
       case "random":
-        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
         break;
     }
     const autoStatus = animationOptions.mode === "auto";
@@ -819,7 +874,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
       default:
         res.value = randomInRange(res);
         if (autoStatus) {
-          res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+          res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
         }
         break;
     }
@@ -839,13 +894,13 @@ function getPositionOrSize(positionOrSize, canvasSize) {
   const isPosition = ("x" in positionOrSize);
   if (isPosition) {
     return {
-      x: positionOrSize.x / 100 * canvasSize.width,
-      y: positionOrSize.y / 100 * canvasSize.height
+      x: positionOrSize.x / percentDenominator * canvasSize.width,
+      y: positionOrSize.y / percentDenominator * canvasSize.height
     };
   } else {
     return {
-      width: positionOrSize.width / 100 * canvasSize.width,
-      height: positionOrSize.height / 100 * canvasSize.height
+      width: positionOrSize.width / percentDenominator * canvasSize.width,
+      height: positionOrSize.height / percentDenominator * canvasSize.height
     };
   }
 }
@@ -873,9 +928,85 @@ function isObject(arg) {
 function isArray(arg) {
   return Array.isArray(arg);
 }
+function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+  switch (destroyType) {
+    case "max":
+      if (value >= maxValue) {
+        particle.destroy();
+      }
+      break;
+    case "min":
+      if (value <= minValue) {
+        particle.destroy();
+      }
+      break;
+  }
+}
+function updateAnimation(particle, data, changeDirection, destroyType, delta) {
+  const minLoops = 0,
+    minDelay = 0,
+    identity = 1,
+    minVelocity = 0,
+    minDecay = 1;
+  if (particle.destroyed || !data || !data.enable || (data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops)) {
+    return;
+  }
+  const velocity = (data.velocity ?? minVelocity) * delta.factor,
+    minValue = data.min,
+    maxValue = data.max,
+    decay = data.decay ?? minDecay;
+  if (!data.time) {
+    data.time = 0;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    data.time += delta.value;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    return;
+  }
+  switch (data.status) {
+    case "increasing":
+      if (data.value >= maxValue) {
+        if (changeDirection) {
+          data.status = "decreasing";
+        } else {
+          data.value -= maxValue;
+        }
+        if (!data.loops) {
+          data.loops = minLoops;
+        }
+        data.loops++;
+      } else {
+        data.value += velocity;
+      }
+      break;
+    case "decreasing":
+      if (data.value <= minValue) {
+        if (changeDirection) {
+          data.status = "increasing";
+        } else {
+          data.value += maxValue;
+        }
+        if (!data.loops) {
+          data.loops = minLoops;
+        }
+        data.loops++;
+      } else {
+        data.value -= velocity;
+      }
+  }
+  if (data.velocity && decay !== identity) {
+    data.velocity *= decay;
+  }
+  checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+  if (!particle.destroyed) {
+    data.value = clamp(data.value, minValue, maxValue);
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/ColorUtils.js
 
 
+
 const randomColorValue = "random",
   midColorValue = "mid",
   colorManagers = new Map();
@@ -893,12 +1024,15 @@ function stringToRgba(input) {
       return r + r + g + g + b + b + (a !== undefined ? a + a : "");
     }),
     regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i,
-    result = regex.exec(hexFixed);
+    result = regex.exec(hexFixed),
+    radix = 16,
+    defaultAlpha = 1,
+    alphaFactor = 0xff;
   return result ? {
-    a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1,
-    b: parseInt(result[3], 16),
-    g: parseInt(result[2], 16),
-    r: parseInt(result[1], 16)
+    a: result[4] !== undefined ? parseInt(result[4], radix) / alphaFactor : defaultAlpha,
+    b: parseInt(result[3], radix),
+    g: parseInt(result[2], radix),
+    r: parseInt(result[1], radix)
   } : undefined;
 }
 function rangeColorToRgb(input, index, useIndex = true) {
@@ -954,28 +1088,37 @@ function rangeColorToHsl(color, index, useIndex = true) {
   return rgb ? rgbToHsl(rgb) : undefined;
 }
 function rgbToHsl(color) {
-  const r1 = color.r / 255,
-    g1 = color.g / 255,
-    b1 = color.b / 255,
+  const rgbMax = 255,
+    hMax = 360,
+    sMax = 100,
+    lMax = 100,
+    hMin = 0,
+    sMin = 0,
+    hPhase = 60,
+    half = 0.5,
+    double = 2,
+    r1 = color.r / rgbMax,
+    g1 = color.g / rgbMax,
+    b1 = color.b / rgbMax,
     max = Math.max(r1, g1, b1),
     min = Math.min(r1, g1, b1),
     res = {
-      h: 0,
-      l: (max + min) * 0.5,
-      s: 0
+      h: hMin,
+      l: (max + min) * half,
+      s: sMin
     };
   if (max !== min) {
-    res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
-    res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min);
+    res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
+    res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min);
   }
-  res.l *= 100;
-  res.s *= 100;
-  res.h *= 60;
-  if (res.h < 0) {
-    res.h += 360;
+  res.l *= lMax;
+  res.s *= sMax;
+  res.h *= hPhase;
+  if (res.h < hMin) {
+    res.h += hMax;
   }
-  if (res.h >= 360) {
-    res.h -= 360;
+  if (res.h >= hMax) {
+    res.h -= hMax;
   }
   return res;
 }
@@ -986,43 +1129,59 @@ function stringToRgb(input) {
   return stringToRgba(input);
 }
 function hslToRgb(hsl) {
-  const h = (hsl.h % 360 + 360) % 360,
-    s = Math.max(0, Math.min(100, hsl.s)),
-    l = Math.max(0, Math.min(100, hsl.l)),
-    hNormalized = h / 360,
-    sNormalized = s / 100,
-    lNormalized = l / 100;
-  if (s === 0) {
-    const grayscaleValue = Math.round(lNormalized * 255);
+  const hMax = 360,
+    sMax = 100,
+    lMax = 100,
+    sMin = 0,
+    lMin = 0,
+    h = (hsl.h % hMax + hMax) % hMax,
+    s = Math.max(sMin, Math.min(sMax, hsl.s)),
+    l = Math.max(lMin, Math.min(lMax, hsl.l)),
+    hNormalized = h / hMax,
+    sNormalized = s / sMax,
+    lNormalized = l / lMax,
+    rgbFactor = 255,
+    triple = 3;
+  if (s === sMin) {
+    const grayscaleValue = Math.round(lNormalized * rgbFactor);
     return {
       r: grayscaleValue,
       g: grayscaleValue,
       b: grayscaleValue
     };
   }
-  const channel = (temp1, temp2, temp3) => {
-      if (temp3 < 0) {
-        temp3 += 1;
+  const half = 0.5,
+    double = 2,
+    channel = (temp1, temp2, temp3) => {
+      const temp3Min = 0,
+        temp3Max = 1,
+        sextuple = 6;
+      if (temp3 < temp3Min) {
+        temp3++;
       }
-      if (temp3 > 1) {
-        temp3 -= 1;
+      if (temp3 > temp3Max) {
+        temp3--;
       }
-      if (temp3 * 6 < 1) {
-        return temp1 + (temp2 - temp1) * 6 * temp3;
+      if (temp3 * sextuple < temp3Max) {
+        return temp1 + (temp2 - temp1) * sextuple * temp3;
       }
-      if (temp3 * 2 < 1) {
+      if (temp3 * double < temp3Max) {
         return temp2;
       }
-      if (temp3 * 3 < 2) {
-        return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+      if (temp3 * triple < temp3Max * double) {
+        const temp3Offset = double / triple;
+        return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
       }
       return temp1;
     },
-    temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized,
-    temp2 = 2 * lNormalized - temp1,
-    red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)),
-    green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)),
-    blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+    sNormalizedOffset = 1,
+    temp1 = lNormalized < half ? lNormalized * (sNormalizedOffset + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized,
+    temp2 = double * lNormalized - temp1,
+    phaseNumerator = 1,
+    phaseThird = phaseNumerator / triple,
+    red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)),
+    green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)),
+    blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
   return {
     r: Math.round(red),
     g: Math.round(green),
@@ -1039,18 +1198,22 @@ function hslaToRgba(hsla) {
   };
 }
 function getRandomRgbColor(min) {
-  const fixedMin = min ?? 0;
+  const defaultMin = 0,
+    fixedMin = min ?? defaultMin,
+    rgbMax = 256;
   return {
-    b: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-    g: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-    r: Math.floor(randomInRange(setRangeValue(fixedMin, 256)))
+    b: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+    g: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+    r: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax)))
   };
 }
 function getStyleFromRgb(color, opacity) {
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
+  const defaultOpacity = 1;
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
 }
 function getStyleFromHsl(color, opacity) {
-  return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
+  const defaultOpacity = 1;
+  return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
 }
 function colorMix(color1, color2, size1, size2) {
   let rgb1 = color1,
@@ -1136,25 +1299,120 @@ function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
   colorValue.enable = colorAnimation.enable;
+  const defaultVelocity = 0,
+    decayOffset = 1,
+    defaultLoops = 0,
+    defaultTime = 0;
   if (colorValue.enable) {
-    colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
-    colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
+    colorValue.velocity = getRangeValue(colorAnimation.speed) / percentDenominator * reduceFactor;
+    colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
     colorValue.status = "increasing";
-    colorValue.loops = 0;
+    colorValue.loops = defaultLoops;
     colorValue.maxLoops = getRangeValue(colorAnimation.count);
-    colorValue.time = 0;
-    colorValue.delayTime = getRangeValue(colorAnimation.delay) * 1000;
+    colorValue.time = defaultTime;
+    colorValue.delayTime = getRangeValue(colorAnimation.delay) * millisecondsToSeconds;
     if (!colorAnimation.sync) {
       colorValue.velocity *= getRandom();
       colorValue.value *= getRandom();
     }
     colorValue.initialValue = colorValue.value;
+    colorValue.offset = setRangeValue(colorAnimation.offset);
   } else {
-    colorValue.velocity = 0;
+    colorValue.velocity = defaultVelocity;
+  }
+}
+function updateColorValue(data, range, decrease, delta) {
+  const minLoops = 0,
+    minDelay = 0,
+    identity = 1,
+    minVelocity = 0,
+    minOffset = 0,
+    velocityFactor = 3.6;
+  if (!data || !data.enable || (data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops)) {
+    return;
+  }
+  if (!data.time) {
+    data.time = 0;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    data.time += delta.value;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    return;
+  }
+  const offset = data.offset ? randomInRange(data.offset) : minOffset,
+    velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor,
+    decay = data.decay ?? identity,
+    max = getRangeMax(range),
+    min = getRangeMin(range);
+  if (!decrease || data.status === "increasing") {
+    data.value += velocity;
+    if (data.value > max) {
+      if (!data.loops) {
+        data.loops = 0;
+      }
+      data.loops++;
+      if (decrease) {
+        data.status = "decreasing";
+      } else {
+        data.value -= max;
+      }
+    }
+  } else {
+    data.value -= velocity;
+    const minValue = 0;
+    if (data.value < minValue) {
+      if (!data.loops) {
+        data.loops = 0;
+      }
+      data.loops++;
+      data.status = "increasing";
+    }
+  }
+  if (data.velocity && decay !== identity) {
+    data.velocity *= decay;
+  }
+  data.value = clamp(data.value, min, max);
+}
+function updateColor(color, delta) {
+  if (!color) {
+    return;
+  }
+  const {
+    h,
+    s,
+    l
+  } = color;
+  const ranges = {
+    h: {
+      min: 0,
+      max: 360
+    },
+    s: {
+      min: 0,
+      max: 100
+    },
+    l: {
+      min: 0,
+      max: 100
+    }
+  };
+  if (h) {
+    updateColorValue(h, ranges.h, false, delta);
+  }
+  if (s) {
+    updateColorValue(s, ranges.s, true, delta);
+  }
+  if (l) {
+    updateColorValue(l, ranges.l, true, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/CanvasUtils.js
 
+const CanvasUtils_origin = {
+  x: 0,
+  y: 0
+};
 function drawLine(context, begin, end) {
   context.beginPath();
   context.moveTo(begin.x, begin.y);
@@ -1163,44 +1421,46 @@ function drawLine(context, begin, end) {
 }
 function paintBase(context, dimension, baseColor) {
   context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-  context.fillRect(0, 0, dimension.width, dimension.height);
+  context.fillRect(CanvasUtils_origin.x, CanvasUtils_origin.y, dimension.width, dimension.height);
 }
 function paintImage(context, dimension, image, opacity) {
   if (!image) {
     return;
   }
   context.globalAlpha = opacity;
-  context.drawImage(image, 0, 0, dimension.width, dimension.height);
+  context.drawImage(image, CanvasUtils_origin.x, CanvasUtils_origin.y, dimension.width, dimension.height);
   context.globalAlpha = 1;
 }
 function clear(context, dimension) {
-  context.clearRect(0, 0, dimension.width, dimension.height);
+  context.clearRect(CanvasUtils_origin.x, CanvasUtils_origin.y, dimension.width, dimension.height);
 }
 function drawParticle(data) {
   const {
-    container,
-    context,
-    particle,
-    delta,
-    colorStyles,
-    backgroundMask,
-    composite,
-    radius,
-    opacity,
-    shadow,
-    transform
-  } = data;
-  const pos = particle.getPosition(),
-    angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0),
+      container,
+      context,
+      particle,
+      delta,
+      colorStyles,
+      backgroundMask,
+      composite,
+      radius,
+      opacity,
+      shadow,
+      transform
+    } = data,
+    pos = particle.getPosition(),
+    defaultAngle = 0,
+    angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle),
     rotateData = {
       sin: Math.sin(angle),
       cos: Math.cos(angle)
     },
+    defaultTransformFactor = 1,
     transformData = {
-      a: rotateData.cos * (transform.a ?? 1),
-      b: rotateData.sin * (transform.b ?? 1),
-      c: -rotateData.sin * (transform.c ?? 1),
-      d: rotateData.cos * (transform.d ?? 1)
+      a: rotateData.cos * (transform.a ?? defaultTransformFactor),
+      b: rotateData.sin * (transform.b ?? defaultTransformFactor),
+      c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
+      d: rotateData.cos * (transform.d ?? defaultTransformFactor)
     };
   context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
   if (backgroundMask) {
@@ -1216,7 +1476,8 @@ function drawParticle(data) {
   if (colorStyles.fill) {
     context.fillStyle = colorStyles.fill;
   }
-  const strokeWidth = particle.strokeWidth ?? 0;
+  const minStrokeWidth = 0,
+    strokeWidth = particle.strokeWidth ?? minStrokeWidth;
   context.lineWidth = strokeWidth;
   if (colorStyles.stroke) {
     context.strokeStyle = colorStyles.stroke;
@@ -1228,23 +1489,14 @@ function drawParticle(data) {
     radius,
     opacity,
     delta,
-    transformData
+    transformData,
+    strokeWidth
   };
-  context.beginPath();
   drawShape(drawData);
-  if (particle.shapeClose) {
-    context.closePath();
-  }
-  if (strokeWidth > 0) {
-    context.stroke();
-  }
-  if (particle.shapeFill) {
-    context.fill();
-  }
   drawShapeAfterDraw(drawData);
   drawEffect(drawData);
   context.globalCompositeOperation = "source-over";
-  context.setTransform(1, 0, 0, 1, 0, 0);
+  context.resetTransform();
 }
 function drawEffect(data) {
   const {
@@ -1277,14 +1529,16 @@ function drawEffect(data) {
 }
 function drawShape(data) {
   const {
-    container,
-    context,
-    particle,
-    radius,
-    opacity,
-    delta,
-    transformData
-  } = data;
+      container,
+      context,
+      particle,
+      radius,
+      opacity,
+      delta,
+      strokeWidth,
+      transformData
+    } = data,
+    minStrokeWidth = 0;
   if (!particle.shape) {
     return;
   }
@@ -1292,6 +1546,7 @@ function drawShape(data) {
   if (!drawer) {
     return;
   }
+  context.beginPath();
   drawer.draw({
     context,
     particle,
@@ -1303,6 +1558,15 @@ function drawShape(data) {
       ...transformData
     }
   });
+  if (particle.shapeClose) {
+    context.closePath();
+  }
+  if (strokeWidth > minStrokeWidth) {
+    context.stroke();
+  }
+  if (particle.shapeFill) {
+    context.fill();
+  }
 }
 function drawShapeAfterDraw(data) {
   const {
@@ -1318,7 +1582,7 @@ function drawShapeAfterDraw(data) {
     return;
   }
   const drawer = container.shapeDrawers.get(particle.shape);
-  if (!drawer || !drawer.afterDraw) {
+  if (!drawer?.afterDraw) {
     return;
   }
   drawer.afterDraw({
@@ -1346,10 +1610,11 @@ function drawParticlePlugin(context, plugin, particle, delta) {
   plugin.drawParticle(context, particle, delta);
 }
 function alterHsl(color, type, value) {
+  const lFactor = 1;
   return {
     h: color.h,
     s: color.s,
-    l: color.l + (type === "darken" ? -1 : 1) * value
+    l: color.l + (type === "darken" ? -lFactor : lFactor) * value
   };
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Canvas.js
@@ -1358,9 +1623,10 @@ function alterHsl(color, type, value) {
 
 
 function setTransformValue(factor, newFactor, key) {
-  const newValue = newFactor[key];
+  const newValue = newFactor[key],
+    defaultValue = 1;
   if (newValue !== undefined) {
-    factor[key] = (factor[key] ?? 1) * newValue;
+    factor[key] = (factor[key] ?? defaultValue) * newValue;
   }
 }
 class Canvas {
@@ -1368,7 +1634,7 @@ class Canvas {
     this.container = container;
     this._applyPostDrawUpdaters = particle => {
       for (const updater of this._postDrawUpdaters) {
-        updater.afterDraw && updater.afterDraw(particle);
+        updater.afterDraw?.(particle);
       }
     };
     this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
@@ -1391,12 +1657,12 @@ class Canvas {
             setTransformValue(transform, updaterTransform, key);
           }
         }
-        updater.beforeDraw && updater.beforeDraw(particle);
+        updater.beforeDraw?.(particle);
       }
     };
     this._applyResizePlugins = () => {
       for (const plugin of this._resizePlugins) {
-        plugin.resize && plugin.resize();
+        plugin.resize?.();
       }
     };
     this._getPluginParticleColors = particle => {
@@ -1457,17 +1723,18 @@ class Canvas {
       if (!trail.enable) {
         return;
       }
+      const factorNumerator = 1,
+        opacity = factorNumerator / trail.length;
       if (trailFill.color) {
         const fillColor = rangeColorToRgb(trailFill.color);
         if (!fillColor) {
           return;
         }
-        const trail = options.particles.move.trail;
         this._trailFill = {
           color: {
             ...fillColor
           },
-          opacity: 1 / trail.length
+          opacity
         };
       } else {
         await new Promise((resolve, reject) => {
@@ -1478,7 +1745,7 @@ class Canvas {
           img.addEventListener("load", () => {
             this._trailFill = {
               image: img,
-              opacity: 1 / trail.length
+              opacity
             };
             resolve();
           });
@@ -1533,9 +1800,10 @@ class Canvas {
         return;
       }
       const priority = "important",
-        style = element.style;
+        style = element.style,
+        radix = 10;
       style.setProperty("position", "fixed", priority);
-      style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+      style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
       style.setProperty("top", "0", priority);
       style.setProperty("left", "0", priority);
       style.setProperty("width", "100%", priority);
@@ -1558,10 +1826,11 @@ class Canvas {
   clear() {
     const options = this.container.actualOptions,
       trail = options.particles.move.trail,
-      trailFill = this._trailFill;
+      trailFill = this._trailFill,
+      minimumLength = 0;
     if (options.backgroundMask.enable) {
       this.paint();
-    } else if (trail.enable && trail.length > 0 && trailFill) {
+    } else if (trail.enable && trail.length > minimumLength && trailFill) {
       if (trailFill.color) {
         this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
       } else if (trailFill.image) {
@@ -1577,7 +1846,7 @@ class Canvas {
     this.stop();
     if (this._generated) {
       const element = this.element;
-      element && element.remove();
+      element?.remove();
     } else {
       this._resetOriginalStyle();
     }
@@ -1597,8 +1866,9 @@ class Canvas {
     if (particle.spawning || particle.destroyed) {
       return;
     }
-    const radius = particle.getRadius();
-    if (radius <= 0) {
+    const radius = particle.getRadius(),
+      minimumSize = 0;
+    if (radius <= minimumSize) {
       return;
     }
     const pfColor = particle.getFillColor(),
@@ -1617,8 +1887,11 @@ class Canvas {
       const container = this.container,
         options = container.actualOptions,
         zIndexOptions = particle.options.zIndex,
-        zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate,
-        opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1,
+        zIndexFactorOffset = 1,
+        zIndexFactor = zIndexFactorOffset - particle.zIndexFactor,
+        zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,
+        defaultOpacity = 1,
+        opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity,
         strokeOpacity = particle.strokeOpacity ?? opacity,
         zOpacity = opacity * zOpacityFactor,
         zStrokeOpacity = strokeOpacity * zOpacityFactor,
@@ -1636,7 +1909,7 @@ class Canvas {
         colorStyles,
         backgroundMask: options.backgroundMask.enable,
         composite: options.backgroundMask.composite,
-        radius: radius * (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate,
+        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
         opacity: zOpacity,
         shadow: particle.options.shadow,
         transform
@@ -1708,7 +1981,7 @@ class Canvas {
       if (plugin.resize) {
         this._resizePlugins.push(plugin);
       }
-      if (plugin.particleFillColor || plugin.particleStrokeColor) {
+      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
         this._colorPlugins.push(plugin);
       }
     }
@@ -1720,7 +1993,7 @@ class Canvas {
       if (updater.afterDraw) {
         this._postDrawUpdaters.push(updater);
       }
-      if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
+      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
         this._preDrawUpdaters.push(updater);
       }
     }
@@ -1806,6 +2079,7 @@ class Canvas {
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/EventListeners.js
 
 
+const EventListeners_double = 2;
 function manageListener(element, event, handler, add, options) {
   if (add) {
     let addOptions = {
@@ -1842,7 +2116,8 @@ class EventListeners {
         executeOnSingleOrMultiple(onClick.mode, mode => this.container.handleClickMode(mode));
       }
       if (e.type === "touchend") {
-        setTimeout(() => this._mouseTouchFinish(), 500);
+        const touchDelay = 500;
+        setTimeout(() => this._mouseTouchFinish(), touchDelay);
       }
     };
     this._handleThemeChange = e => {
@@ -1853,7 +2128,7 @@ class EventListeners {
         themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,
         theme = options.themes.find(theme => theme.name === themeName);
       if (theme && theme.default.auto) {
-        container.loadTheme(themeName);
+        void container.loadTheme(themeName);
       }
     };
     this._handleVisibilityChange = () => {
@@ -1875,15 +2150,16 @@ class EventListeners {
         }
       }
     };
-    this._handleWindowResize = async () => {
+    this._handleWindowResize = () => {
       if (this._resizeTimeout) {
         clearTimeout(this._resizeTimeout);
         delete this._resizeTimeout;
       }
-      this._resizeTimeout = setTimeout(async () => {
+      const handleResize = async () => {
         const canvas = this.container.canvas;
-        canvas && (await canvas.windowResize());
-      }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+        await canvas?.windowResize();
+      };
+      this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * millisecondsToSeconds);
     };
     this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
       const handlers = this._handlers,
@@ -1974,12 +2250,12 @@ class EventListeners {
         this._resizeObserver.disconnect();
         delete this._resizeObserver;
       } else if (!this._resizeObserver && add && canvasEl) {
-        this._resizeObserver = new ResizeObserver(async entries => {
+        this._resizeObserver = new ResizeObserver(entries => {
           const entry = entries.find(e => e.target === canvasEl);
           if (!entry) {
             return;
           }
-          await this._handleWindowResize();
+          this._handleWindowResize();
         });
         this._resizeObserver.observe(canvasEl);
       }
@@ -2041,7 +2317,7 @@ class EventListeners {
         options = container.actualOptions,
         interactivity = container.interactivity,
         canvasEl = container.canvas.element;
-      if (!interactivity || !interactivity.element) {
+      if (!interactivity?.element) {
         return;
       }
       interactivity.mouse.inside = true;
@@ -2065,8 +2341,8 @@ class EventListeners {
               targetRect = target.getBoundingClientRect(),
               canvasRect = canvasEl.getBoundingClientRect();
             pos = {
-              x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
-              y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top)
+              x: mouseEvent.offsetX + EventListeners_double * sourceRect.left - (targetRect.left + canvasRect.left),
+              y: mouseEvent.offsetY + EventListeners_double * sourceRect.top - (targetRect.top + canvasRect.top)
             };
           } else {
             pos = {
@@ -2084,11 +2360,13 @@ class EventListeners {
         this._canPush = e.type !== "touchmove";
         if (canvasEl) {
           const touchEvent = e,
-            lastTouch = touchEvent.touches[touchEvent.touches.length - 1],
-            canvasRect = canvasEl.getBoundingClientRect();
+            lengthOffset = 1,
+            lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset],
+            canvasRect = canvasEl.getBoundingClientRect(),
+            defaultCoordinate = 0;
           pos = {
-            x: lastTouch.clientX - (canvasRect.left ?? 0),
-            y: lastTouch.clientY - (canvasRect.top ?? 0)
+            x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),
+            y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate)
           };
         }
       }
@@ -2465,6 +2743,7 @@ class Interactivity {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/ManualParticle.js
 
+const defaultPosition = 50;
 class ManualParticle {
   load(data) {
     if (!data) {
@@ -2472,8 +2751,8 @@ class ManualParticle {
     }
     if (data.position) {
       this.position = {
-        x: data.position.x ?? 50,
-        y: data.position.y ?? 50,
+        x: data.position.x ?? defaultPosition,
+        y: data.position.y ?? defaultPosition,
         mode: data.position.mode ?? "percent"
       };
     }
@@ -3562,6 +3841,9 @@ class Options {
     if (data.clear !== undefined) {
       this.clear = data.clear;
     }
+    if (data.key !== undefined) {
+      this.key = data.key;
+    }
     if (data.name !== undefined) {
       this.name = data.name;
     }
@@ -3674,12 +3956,14 @@ class InteractionManager {
   }
   async externalInteract(delta) {
     for (const interactor of this._externalInteractors) {
-      interactor.isEnabled() && (await interactor.interact(delta));
+      if (interactor.isEnabled()) {
+        await interactor.interact(delta);
+      }
     }
   }
   handleClickMode(mode) {
     for (const interactor of this._externalInteractors) {
-      interactor.handleClickMode && interactor.handleClickMode(mode);
+      interactor.handleClickMode?.(mode);
     }
   }
   init() {
@@ -3702,15 +3986,21 @@ class InteractionManager {
       interactor.clear(particle, delta);
     }
     for (const interactor of this._particleInteractors) {
-      interactor.isEnabled(particle) && (await interactor.interact(particle, delta));
+      if (interactor.isEnabled(particle)) {
+        await interactor.interact(particle, delta);
+      }
     }
   }
-  async reset(particle) {
+  reset(particle) {
     for (const interactor of this._externalInteractors) {
-      interactor.isEnabled() && interactor.reset(particle);
+      if (interactor.isEnabled()) {
+        interactor.reset(particle);
+      }
     }
     for (const interactor of this._particleInteractors) {
-      interactor.isEnabled(particle) && interactor.reset(particle);
+      if (interactor.isEnabled(particle)) {
+        interactor.reset(particle);
+      }
     }
   }
 }
@@ -3724,6 +4014,10 @@ class InteractionManager {
 
 
 
+const defaultRetryCount = 0,
+  Particle_double = 2,
+  half = 0.5,
+  Particle_squareExp = 2;
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
   const effectData = effectOptions.options[effect];
   if (!effectData) {
@@ -3748,7 +4042,7 @@ function fixOutMode(data) {
   if (!isInArray(data.outMode, data.checkModes)) {
     return;
   }
-  const diameter = data.radius * 2;
+  const diameter = data.radius * Particle_double;
   if (data.coord > data.maxCoord - diameter) {
     data.setCb(-data.radius);
   } else if (data.coord < diameter) {
@@ -3758,7 +4052,7 @@ function fixOutMode(data) {
 class Particle {
   constructor(engine, id, container, position, overrideOptions, group) {
     this.container = container;
-    this._calcPosition = (container, position, zIndex, tryCount = 0) => {
+    this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
       for (const [, plugin] of container.plugins) {
         const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
         if (pluginPos) {
@@ -3798,7 +4092,8 @@ class Particle {
       fixVertical(outModes.top ?? outModes.default);
       fixVertical(outModes.bottom ?? outModes.default);
       if (this._checkOverlap(pos, tryCount)) {
-        return this._calcPosition(container, undefined, zIndex, tryCount + 1);
+        const increment = 1;
+        return this._calcPosition(container, undefined, zIndex, tryCount + increment);
       }
       return pos;
     };
@@ -3809,11 +4104,11 @@ class Particle {
       if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
         return res;
       }
-      const rad = Math.PI / 180 * getRangeValue(moveOptions.angle.value),
-        radOffset = Math.PI / 180 * getRangeValue(moveOptions.angle.offset),
+      const rad = degToRad(getRangeValue(moveOptions.angle.value)),
+        radOffset = degToRad(getRangeValue(moveOptions.angle.offset)),
         range = {
-          left: radOffset - rad * 0.5,
-          right: radOffset + rad * 0.5
+          left: radOffset - rad * half,
+          right: radOffset + rad * half
         };
       if (!moveOptions.straight) {
         res.angle += randomInRange(setRangeValue(range.left, range.right));
@@ -3823,7 +4118,7 @@ class Particle {
       }
       return res;
     };
-    this._checkOverlap = (pos, tryCount = 0) => {
+    this._checkOverlap = (pos, tryCount = defaultRetryCount) => {
       const collisionsOptions = this.options.collisions,
         radius = this.getRadius();
       if (!collisionsOptions.enable) {
@@ -3833,8 +4128,9 @@ class Particle {
       if (overlapOptions.enable) {
         return false;
       }
-      const retries = overlapOptions.retries;
-      if (retries >= 0 && tryCount > retries) {
+      const retries = overlapOptions.retries,
+        minRetries = 0;
+      if (retries >= minRetries && tryCount > retries) {
         throw new Error(`${errorPrefix} particle is overlapping and can't be placed`);
       }
       return !!this.container.particles.find(particle => getDistance(pos, particle.position) < radius + particle.getRadius());
@@ -3843,9 +4139,11 @@ class Particle {
       if (!color || !this.roll || !this.backColor && !this.roll.alter) {
         return color;
       }
-      const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1,
-        backSum = this.roll.horizontal ? Math.PI * 0.5 : 0,
-        rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+      const rollFactor = 1,
+        none = 0,
+        backFactor = this.roll.horizontal && this.roll.vertical ? Particle_double * rollFactor : rollFactor,
+        backSum = this.roll.horizontal ? Math.PI * half : none,
+        rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % Particle_double;
       if (!rolled) {
         return color;
       }
@@ -3859,13 +4157,15 @@ class Particle {
     };
     this._initPosition = position => {
       const container = this.container,
-        zIndexValue = getRangeValue(this.options.zIndex.value);
-      this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
+        zIndexValue = getRangeValue(this.options.zIndex.value),
+        minZ = 0;
+      this.position = this._calcPosition(container, position, clamp(zIndexValue, minZ, container.zLayers));
       this.initialPosition = this.position.copy();
-      const canvasSize = container.canvas.size;
+      const canvasSize = container.canvas.size,
+        defaultRadius = 0;
       this.moveCenter = {
         ...getPosition(this.options.move.center, canvasSize),
-        radius: this.options.move.center.radius ?? 0,
+        radius: this.options.move.center.radius ?? defaultRadius,
         mode: this.options.move.center.mode ?? "percent"
       };
       this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);
@@ -3892,14 +4192,14 @@ class Particle {
     const container = this.container,
       pathGenerator = this.pathGenerator,
       shapeDrawer = container.shapeDrawers.get(this.shape);
-    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
+    shapeDrawer?.particleDestroy?.(this);
     for (const [, plugin] of container.plugins) {
-      plugin.particleDestroyed && plugin.particleDestroyed(this, override);
+      plugin.particleDestroyed?.(this, override);
     }
     for (const updater of container.particles.updaters) {
-      updater.particleDestroyed && updater.particleDestroyed(this, override);
+      updater.particleDestroyed?.(this, override);
     }
-    pathGenerator && pathGenerator.reset(this);
+    pathGenerator?.reset(this);
     this._engine.dispatchEvent("particleDestroyed", {
       container: this.container,
       data: {
@@ -3919,7 +4219,7 @@ class Particle {
     return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
   }
   getMass() {
-    return this.getRadius() ** 2 * Math.PI * 0.5;
+    return this.getRadius() ** Particle_squareExp * Math.PI * half;
   }
   getPosition() {
     return {
@@ -3967,7 +4267,7 @@ class Particle {
     const effectOptions = particlesOptions.effect,
       shapeOptions = particlesOptions.shape;
     if (overrideOptions) {
-      if (overrideOptions.effect && overrideOptions.effect.type) {
+      if (overrideOptions.effect?.type) {
         const overrideEffectType = overrideOptions.effect.type,
           effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
         if (effect) {
@@ -3975,7 +4275,7 @@ class Particle {
           effectOptions.load(overrideOptions.effect);
         }
       }
-      if (overrideOptions.shape && overrideOptions.shape.type) {
+      if (overrideOptions.shape?.type) {
         const overrideShapeType = overrideOptions.shape.type,
           shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
         if (shape) {
@@ -4005,7 +4305,7 @@ class Particle {
     this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
     this.options = particlesOptions;
     const pathOptions = this.options.move.path;
-    this.pathDelay = getRangeValue(pathOptions.delay.value) * 1000;
+    this.pathDelay = getRangeValue(pathOptions.delay.value) * millisecondsToSeconds;
     if (pathOptions.generator) {
       this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
       if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -4024,7 +4324,8 @@ class Particle {
     this._initPosition(position);
     this.initialVelocity = this._calculateVelocity();
     this.velocity = this.initialVelocity.copy();
-    this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+    const decayOffset = 1;
+    this.moveDecay = decayOffset - getRangeValue(this.options.move.decay);
     const particles = container.particles;
     particles.setLastZIndex(this.position.z);
     this.zIndexFactor = this.position.z / container.zLayers;
@@ -4036,7 +4337,7 @@ class Particle {
         container.effectDrawers.set(this.effect, effectDrawer);
       }
     }
-    if (effectDrawer && effectDrawer.loadEffect) {
+    if (effectDrawer?.loadEffect) {
       effectDrawer.loadEffect(this);
     }
     let shapeDrawer = container.shapeDrawers.get(this.shape);
@@ -4046,7 +4347,7 @@ class Particle {
         container.shapeDrawers.set(this.shape, shapeDrawer);
       }
     }
-    if (shapeDrawer && shapeDrawer.loadShape) {
+    if (shapeDrawer?.loadShape) {
       shapeDrawer.loadShape(this);
     }
     const sideCountFunc = shapeDrawer?.getSidesCount;
@@ -4059,16 +4360,12 @@ class Particle {
       updater.init(this);
     }
     for (const mover of particles.movers) {
-      mover.init && mover.init(this);
-    }
-    if (effectDrawer && effectDrawer.particleInit) {
-      effectDrawer.particleInit(container, this);
-    }
-    if (shapeDrawer && shapeDrawer.particleInit) {
-      shapeDrawer.particleInit(container, this);
+      mover.init?.(this);
     }
+    effectDrawer?.particleInit?.(container, this);
+    shapeDrawer?.particleInit?.(container, this);
     for (const [, plugin] of container.plugins) {
-      plugin.particleCreated && plugin.particleCreated(this);
+      plugin.particleCreated?.(this);
     }
   }
   isInsideCanvas() {
@@ -4082,7 +4379,7 @@ class Particle {
   }
   reset() {
     for (const updater of this.container.particles.updaters) {
-      updater.reset && updater.reset(this);
+      updater.reset?.(this);
     }
   }
 }
@@ -4140,6 +4437,7 @@ class Rectangle extends Range {
 
 
 
+const Circle_squareExp = 2;
 class Circle extends Range {
   constructor(x, y, radius) {
     super(x, y);
@@ -4158,15 +4456,15 @@ class Circle extends Range {
       r = this.radius;
     if (range instanceof Circle) {
       const rSum = r + range.radius,
-        dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
+        dist = Math.sqrt(distPos.x ** Circle_squareExp + distPos.y ** Circle_squareExp);
       return rSum > dist;
     } else if (range instanceof Rectangle) {
       const {
           width,
           height
         } = range.size,
-        edges = Math.pow(distPos.x - width, 2) + Math.pow(distPos.y - height, 2);
-      return edges <= r ** 2 || distPos.x <= r + width && distPos.y <= r + height || distPos.x <= width || distPos.y <= height;
+        edges = Math.pow(distPos.x - width, Circle_squareExp) + Math.pow(distPos.y - height, Circle_squareExp);
+      return edges <= r ** Circle_squareExp || distPos.x <= r + width && distPos.y <= r + height || distPos.x <= width || distPos.y <= height;
     }
     return false;
   }
@@ -4175,6 +4473,9 @@ class Circle extends Range {
 
 
 
+const QuadTree_half = 0.5,
+  QuadTree_double = 2,
+  subdivideCount = 4;
 class QuadTree {
   constructor(rectangle, capacity) {
     this.rectangle = rectangle;
@@ -4191,8 +4492,9 @@ class QuadTree {
         {
           capacity
         } = this;
-      for (let i = 0; i < 4; i++) {
-        this._subs.push(new QuadTree(new Rectangle(x + width * 0.5 * (i % 2), y + height * 0.5 * (Math.round(i * 0.5) - i % 2), width * 0.5, height * 0.5), capacity));
+      for (let i = 0; i < subdivideCount; i++) {
+        const fixedIndex = i % QuadTree_double;
+        this._subs.push(new QuadTree(new Rectangle(x + width * QuadTree_half * fixedIndex, y + height * QuadTree_half * (Math.round(i * QuadTree_half) - fixedIndex), width * QuadTree_half, height * QuadTree_half), capacity));
       }
       this._divided = true;
     };
@@ -4214,7 +4516,7 @@ class QuadTree {
     return this._subs.some(sub => sub.insert(point));
   }
   query(range, check, found) {
-    const res = found || [];
+    const res = found ?? [];
     if (!range.intersects(this.rectangle)) {
       return [];
     }
@@ -4246,7 +4548,9 @@ class QuadTree {
 
 
 
-const qTreeCapacity = 4;
+const qTreeCapacity = 4,
+  Particles_squareExp = 2,
+  defaultRemoveQuantity = 1;
 const qTreeRectangle = canvasSize => {
   const {
       height,
@@ -4275,7 +4579,8 @@ class Particles {
       }
       const densityFactor = this._initDensityFactor(numberOptions.density),
         optParticlesNumber = numberOptions.value,
-        optParticlesLimit = numberOptions.limit.value > 0 ? numberOptions.limit.value : optParticlesNumber,
+        minLimit = 0,
+        optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber,
         particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,
         particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
       if (group === undefined) {
@@ -4290,13 +4595,14 @@ class Particles {
       }
     };
     this._initDensityFactor = densityOptions => {
-      const container = this._container;
+      const container = this._container,
+        defaultFactor = 1;
       if (!container.canvas.element || !densityOptions.enable) {
-        return 1;
+        return defaultFactor;
       }
       const canvas = container.canvas.element,
         pxRatio = container.retina.pixelRatio;
-      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** 2);
+      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** Particles_squareExp);
     };
     this._pushParticle = (position, overrideOptions, group, initializer) => {
       try {
@@ -4325,7 +4631,6 @@ class Particles {
         return particle;
       } catch (e) {
         getLogger().warning(`${errorPrefix} adding particle: ${e}`);
-        return;
       }
     };
     this._removeParticle = (index, group, override) => {
@@ -4333,9 +4638,10 @@ class Particles {
       if (!particle || particle.group !== group) {
         return false;
       }
-      const zIdx = this._zArray.indexOf(particle);
-      this._array.splice(index, 1);
-      this._zArray.splice(zIdx, 1);
+      const zIdx = this._zArray.indexOf(particle),
+        deleteCount = 1;
+      this._array.splice(index, deleteCount);
+      this._zArray.splice(zIdx, deleteCount);
       particle.destroy(override);
       this._engine.dispatchEvent("particleRemoved", {
         container: this._container,
@@ -4375,11 +4681,14 @@ class Particles {
   addParticle(position, overrideOptions, group, initializer) {
     const limitOptions = this._container.actualOptions.particles.number.limit,
       limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,
-      currentCount = this.count;
-    if (limit > 0) {
+      currentCount = this.count,
+      minLimit = 0;
+    if (limit > minLimit) {
       if (limitOptions.mode === "delete") {
-        const countToRemove = currentCount + 1 - limit;
-        if (countToRemove > 0) {
+        const countOffset = 1,
+          minCount = 0,
+          countToRemove = currentCount + countOffset - limit;
+        if (countToRemove > minCount) {
           this.removeQuantity(countToRemove);
         }
       } else if (limitOptions.mode === "wait") {
@@ -4475,23 +4784,28 @@ class Particles {
   remove(particle, group, override) {
     this.removeAt(this._array.indexOf(particle), undefined, group, override);
   }
-  removeAt(index, quantity = 1, group, override) {
-    if (index < 0 || index > this.count) {
+  removeAt(index, quantity = defaultRemoveQuantity, group, override) {
+    const minIndex = 0;
+    if (index < minIndex || index > this.count) {
       return;
     }
     let deleted = 0;
     for (let i = index; deleted < quantity && i < this.count; i++) {
-      this._removeParticle(i--, group, override) && deleted++;
+      if (this._removeParticle(i--, group, override)) {
+        deleted++;
+      }
     }
   }
   removeQuantity(quantity, group) {
-    this.removeAt(0, quantity, group);
+    const defaultIndex = 0;
+    this.removeAt(defaultIndex, quantity, group);
   }
   setDensity() {
     const options = this._container.actualOptions,
-      groups = options.particles.groups;
+      groups = options.particles.groups,
+      manualCount = 0;
     for (const group in groups) {
-      this._applyDensity(groups[group], 0, group);
+      this._applyDensity(groups[group], manualCount, group);
     }
     this._applyDensity(options.particles, options.manualParticles.length);
   }
@@ -4510,7 +4824,7 @@ class Particles {
       pathGenerator.update();
     }
     for (const [, plugin] of container.plugins) {
-      plugin.update && (await plugin.update(delta));
+      await plugin.update?.(delta);
     }
     const resizeFactor = this._resizeFactor;
     for (const particle of this._array) {
@@ -4521,15 +4835,17 @@ class Particles {
         particle.initialPosition.y *= resizeFactor.height;
       }
       particle.ignoresResizeRatio = false;
-      await this._interactionManager.reset(particle);
+      this._interactionManager.reset(particle);
       for (const [, plugin] of this._container.plugins) {
         if (particle.destroyed) {
           break;
         }
-        plugin.particleUpdate && plugin.particleUpdate(particle, delta);
+        plugin.particleUpdate?.(particle, delta);
       }
       for (const mover of this.movers) {
-        mover.isEnabled(particle) && mover.move(particle, delta);
+        if (mover.isEnabled(particle)) {
+          mover.move(particle, delta);
+        }
       }
       if (particle.destroyed) {
         particlesToDelete.add(particle);
@@ -4564,7 +4880,8 @@ class Particles {
     if (this._needsSort) {
       const zArray = this._zArray;
       zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-      this._lastZIndex = zArray[zArray.length - 1].position.z;
+      const lengthOffset = 1;
+      this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;
       this._needsSort = false;
     }
   }
@@ -4572,17 +4889,19 @@ class Particles {
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Retina.js
 
 
+const defaultRatio = 1,
+  defaultReduceFactor = 1;
 class Retina {
   constructor(container) {
     this.container = container;
-    this.pixelRatio = 1;
-    this.reduceFactor = 1;
+    this.pixelRatio = defaultRatio;
+    this.reduceFactor = defaultReduceFactor;
   }
   init() {
     const container = this.container,
       options = container.actualOptions;
-    this.pixelRatio = !options.detectRetina || isSsr() ? 1 : window.devicePixelRatio;
-    this.reduceFactor = 1;
+    this.pixelRatio = !options.detectRetina || isSsr() ? defaultRatio : window.devicePixelRatio;
+    this.reduceFactor = defaultReduceFactor;
     const ratio = this.pixelRatio,
       canvas = container.canvas;
     if (canvas.element) {
@@ -4623,10 +4942,11 @@ class Retina {
 function guardCheck(container) {
   return container && !container.destroyed;
 }
-function initDelta(value, fpsLimit = 60, smooth = false) {
+const defaultFps = 60;
+function initDelta(value, fpsLimit = defaultFps, smooth = false) {
   return {
     value,
-    factor: smooth ? 60 / fpsLimit : 60 * value / 1000
+    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / millisecondsToSeconds
   };
 }
 function loadContainerOptions(engine, container, ...sourceOptionsArr) {
@@ -4644,12 +4964,16 @@ class Container {
         if (entry.target !== this.interactivity.element) {
           continue;
         }
-        (entry.isIntersecting ? this.play : this.pause)();
+        if (entry.isIntersecting) {
+          this.play();
+        } else {
+          this.pause();
+        }
       }
     };
     this._nextFrame = async timestamp => {
       try {
-        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
+        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
           this.draw(false);
           return;
         }
@@ -4657,7 +4981,7 @@ class Container {
         const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
         this.addLifeTime(delta.value);
         this._lastFrameTime = timestamp;
-        if (delta.value > 1000) {
+        if (delta.value > millisecondsToSeconds) {
           this.draw(false);
           return;
         }
@@ -4744,8 +5068,9 @@ class Container {
         pos = {
           x: mouseEvent.offsetX || mouseEvent.clientX,
           y: mouseEvent.offsetY || mouseEvent.clientY
-        };
-      clickOrTouchHandler(e, pos, 1);
+        },
+        radius = 1;
+      clickOrTouchHandler(e, pos, radius);
     };
     const touchStartHandler = () => {
       if (!guardCheck(this)) {
@@ -4766,18 +5091,20 @@ class Container {
       }
       if (touched && !touchMoved) {
         const touchEvent = e;
-        let lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+        const lengthOffset = 1;
+        let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];
         if (!lastTouch) {
-          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
+          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];
           if (!lastTouch) {
             return;
           }
         }
         const element = this.canvas.element,
           canvasRect = element ? element.getBoundingClientRect() : undefined,
+          minCoordinate = 0,
           pos = {
-            x: lastTouch.clientX - (canvasRect ? canvasRect.left : 0),
-            y: lastTouch.clientY - (canvasRect ? canvasRect.top : 0)
+            x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
+            y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)
           };
         clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
       }
@@ -4820,10 +5147,10 @@ class Container {
     this.particles.destroy();
     this.canvas.destroy();
     for (const [, effectDrawer] of this.effectDrawers) {
-      effectDrawer.destroy && effectDrawer.destroy(this);
+      effectDrawer.destroy?.(this);
     }
     for (const [, shapeDrawer] of this.shapeDrawers) {
-      shapeDrawer.destroy && shapeDrawer.destroy(this);
+      shapeDrawer.destroy?.(this);
     }
     for (const key of this.effectDrawers.keys()) {
       this.effectDrawers.delete(key);
@@ -4834,9 +5161,11 @@ class Container {
     this._engine.clearPlugins(this);
     this.destroyed = true;
     const mainArr = this._engine.dom(),
-      idx = mainArr.findIndex(t => t === this);
-    if (idx >= 0) {
-      mainArr.splice(idx, 1);
+      idx = mainArr.findIndex(t => t === this),
+      minIndex = 0;
+    if (idx >= minIndex) {
+      const deleteCount = 1;
+      mainArr.splice(idx, deleteCount);
     }
     this._engine.dispatchEvent("containerDestroyed", {
       container: this
@@ -4847,13 +5176,14 @@ class Container {
       return;
     }
     let refreshTime = force;
-    this._drawAnimationFrame = requestAnimationFrame(async timestamp => {
+    const frame = async timestamp => {
       if (refreshTime) {
         this._lastFrameTime = undefined;
         refreshTime = false;
       }
       await this._nextFrame(timestamp);
-    });
+    };
+    this._drawAnimationFrame = requestAnimationFrame(timestamp => void frame(timestamp));
   }
   async export(type, options = {}) {
     for (const [, plugin] of this.plugins) {
@@ -4877,7 +5207,7 @@ class Container {
     }
     this.particles.handleClickMode(mode);
     for (const [, plugin] of this.plugins) {
-      plugin.handleClickMode && plugin.handleClickMode(mode);
+      plugin.handleClickMode?.(mode);
     }
   }
   async init() {
@@ -4910,19 +5240,21 @@ class Container {
     this.canvas.initBackground();
     this.canvas.resize();
     this.zLayers = this.actualOptions.zLayers;
-    this._duration = getRangeValue(this.actualOptions.duration) * 1000;
-    this._delay = getRangeValue(this.actualOptions.delay) * 1000;
+    this._duration = getRangeValue(this.actualOptions.duration) * millisecondsToSeconds;
+    this._delay = getRangeValue(this.actualOptions.delay) * millisecondsToSeconds;
     this._lifeTime = 0;
-    this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+    const defaultFpsLimit = 120,
+      minFpsLimit = 0;
+    this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;
     this._smooth = this.actualOptions.smooth;
     for (const [, drawer] of this.effectDrawers) {
-      drawer.init && (await drawer.init(this));
+      await drawer.init?.(this);
     }
     for (const [, drawer] of this.shapeDrawers) {
-      drawer.init && (await drawer.init(this));
+      await drawer.init?.(this);
     }
     for (const [, plugin] of this.plugins) {
-      plugin.init && (await plugin.init());
+      await plugin.init?.();
     }
     this._engine.dispatchEvent("containerInit", {
       container: this
@@ -4930,7 +5262,7 @@ class Container {
     this.particles.init();
     this.particles.setDensity();
     for (const [, plugin] of this.plugins) {
-      plugin.particlesSetup && plugin.particlesSetup();
+      plugin.particlesSetup?.();
     }
     this._engine.dispatchEvent("particlesSetup", {
       container: this
@@ -4955,7 +5287,7 @@ class Container {
       return;
     }
     for (const [, plugin] of this.plugins) {
-      plugin.pause && plugin.pause();
+      plugin.pause?.();
     }
     if (!this.pageHidden) {
       this._paused = true;
@@ -4986,7 +5318,7 @@ class Container {
     this._engine.dispatchEvent("containerPlay", {
       container: this
     });
-    this.draw(needsUpdate || false);
+    this.draw(needsUpdate ?? false);
   }
   async refresh() {
     if (!guardCheck(this)) {
@@ -5011,20 +5343,21 @@ class Container {
     await this.init();
     this.started = true;
     await new Promise(resolve => {
-      this._delayTimeout = setTimeout(async () => {
+      const start = async () => {
         this._eventListeners.addListeners();
         if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
           this._intersectionObserver.observe(this.interactivity.element);
         }
         for (const [, plugin] of this.plugins) {
-          plugin.start && (await plugin.start());
+          await plugin.start?.();
         }
         this._engine.dispatchEvent("containerStarted", {
           container: this
         });
         this.play();
         resolve();
-      }, this._delay);
+      };
+      this._delayTimeout = setTimeout(() => void start(), this._delay);
     });
   }
   stop() {
@@ -5045,7 +5378,7 @@ class Container {
       this._intersectionObserver.unobserve(this.interactivity.element);
     }
     for (const [, plugin] of this.plugins) {
-      plugin.stop && plugin.stop();
+      plugin.stop?.();
     }
     for (const key of this.plugins.keys()) {
       this.plugins.delete(key);
@@ -5082,7 +5415,7 @@ class EventDispatcher {
   }
   dispatchEvent(type, args) {
     const listeners = this._listeners.get(type);
-    listeners && listeners.forEach(handler => handler(args));
+    listeners?.forEach(handler => handler(args));
   }
   hasEventListener(type) {
     return !!this._listeners.get(type);
@@ -5100,14 +5433,16 @@ class EventDispatcher {
       return;
     }
     const length = arr.length,
-      idx = arr.indexOf(listener);
-    if (idx < 0) {
+      idx = arr.indexOf(listener),
+      minIndex = 0;
+    if (idx < minIndex) {
       return;
     }
-    if (length === 1) {
+    const deleteCount = 1;
+    if (length === deleteCount) {
       this._listeners.delete(type);
     } else {
-      arr.splice(idx, 1);
+      arr.splice(idx, deleteCount);
     }
   }
 }
@@ -5165,21 +5500,23 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.2";
+    return "3.1.0";
   }
   addConfig(config) {
-    const name = config.name ?? "default";
-    this._configs.set(name, config);
+    const key = config.key ?? config.name ?? "default";
+    this._configs.set(key, config);
     this._eventDispatcher.dispatchEvent("configAdded", {
       data: {
-        name,
+        name: key,
         config
       }
     });
   }
   async addEffect(effect, drawer, refresh = true) {
     executeOnSingleOrMultiple(effect, type => {
-      !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+      if (!this.getEffectDrawer(type)) {
+        this.effectDrawers.set(type, drawer);
+      }
     });
     await this.refresh(refresh);
   }
@@ -5199,20 +5536,28 @@ class Engine {
     await this.refresh(refresh);
   }
   async addPathGenerator(name, generator, refresh = true) {
-    !this.getPathGenerator(name) && this.pathGenerators.set(name, generator);
+    if (!this.getPathGenerator(name)) {
+      this.pathGenerators.set(name, generator);
+    }
     await this.refresh(refresh);
   }
   async addPlugin(plugin, refresh = true) {
-    !this.getPlugin(plugin.id) && this.plugins.push(plugin);
+    if (!this.getPlugin(plugin.id)) {
+      this.plugins.push(plugin);
+    }
     await this.refresh(refresh);
   }
   async addPreset(preset, options, override = false, refresh = true) {
-    (override || !this.getPreset(preset)) && this.presets.set(preset, options);
+    if (override || !this.getPreset(preset)) {
+      this.presets.set(preset, options);
+    }
     await this.refresh(refresh);
   }
   async addShape(shape, drawer, refresh = true) {
     executeOnSingleOrMultiple(shape, type => {
-      !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
+      if (!this.getShapeDrawer(type)) {
+        this.shapeDrawers.set(type, drawer);
+      }
     });
     await this.refresh(refresh);
   }
@@ -5231,7 +5576,8 @@ class Engine {
     const dom = this.dom(),
       item = dom[index];
     if (!item || item.destroyed) {
-      dom.splice(index, 1);
+      const deleteCount = 1;
+      dom.splice(index, deleteCount);
       return;
     }
     return item;
@@ -5239,7 +5585,9 @@ class Engine {
   getAvailablePlugins(container) {
     const res = new Map();
     for (const plugin of this.plugins) {
-      plugin.needsPlugin(container.actualOptions) && res.set(plugin.id, plugin.getPlugin(container));
+      if (plugin.needsPlugin(container.actualOptions)) {
+        res.set(plugin.id, plugin.getPlugin(container));
+      }
     }
     return res;
   }
@@ -5280,7 +5628,8 @@ class Engine {
     this._initialized = true;
   }
   async load(params) {
-    const id = params.id ?? `tsparticles${Math.floor(getRandom() * 10000)}`,
+    const randomFactor = 10000,
+      id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * randomFactor)}`,
       {
         index,
         url
@@ -5298,12 +5647,14 @@ class Engine {
     }
     const currentOptions = itemFromSingleOrMultiple(options, index),
       dom = this.dom(),
-      oldIndex = dom.findIndex(v => v.id.description === id);
-    if (oldIndex >= 0) {
+      oldIndex = dom.findIndex(v => v.id.description === id),
+      minIndex = 0;
+    if (oldIndex >= minIndex) {
       const old = this.domItem(oldIndex);
       if (old && !old.destroyed) {
         old.destroy();
-        dom.splice(oldIndex, 1);
+        const deleteCount = 1;
+        dom.splice(oldIndex, deleteCount);
       }
     }
     let canvasEl;
@@ -5313,7 +5664,8 @@ class Engine {
     } else {
       const existingCanvases = domContainer.getElementsByTagName("canvas");
       if (existingCanvases.length) {
-        canvasEl = existingCanvases[0];
+        const firstIndex = 0;
+        canvasEl = existingCanvases[firstIndex];
         canvasEl.dataset[generatedAttribute] = "false";
       } else {
         canvasEl = document.createElement("canvas");
@@ -5328,8 +5680,9 @@ class Engine {
       canvasEl.style.height = "100%";
     }
     const newItem = new Container(this, id, currentOptions);
-    if (oldIndex >= 0) {
-      dom.splice(oldIndex, 0, newItem);
+    if (oldIndex >= minIndex) {
+      const deleteCount = 0;
+      dom.splice(oldIndex, deleteCount, newItem);
     } else {
       dom.push(newItem);
     }
@@ -5348,14 +5701,14 @@ class Engine {
       return;
     }
     for (const updater of updaters) {
-      updater.loadOptions && updater.loadOptions(options, ...sourceOptions);
+      updater.loadOptions?.(options, ...sourceOptions);
     }
   }
   async refresh(refresh = true) {
     if (!refresh) {
       return;
     }
-    this.dom().forEach(t => t.refresh());
+    await Promise.allSettled(this.dom().map(t => t.refresh()));
   }
   removeEventListener(type, listener) {
     this._eventDispatcher.removeEventListener(type, listener);
@@ -5401,12 +5754,15 @@ class HslColorManager {
       return;
     }
     const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i,
-      result = regex.exec(input);
+      result = regex.exec(input),
+      minLength = 4,
+      defaultAlpha = 1,
+      radix = 10;
     return result ? hslaToRgba({
-      a: result.length > 4 ? parseAlpha(result[5]) : 1,
-      h: parseInt(result[1], 10),
-      l: parseInt(result[3], 10),
-      s: parseInt(result[2], 10)
+      a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
+      h: parseInt(result[1], radix),
+      l: parseInt(result[3], radix),
+      s: parseInt(result[2], radix)
     }) : undefined;
   }
 }
@@ -5440,12 +5796,15 @@ class RgbColorManager {
       return;
     }
     const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.%]+)\s*)?\)/i,
-      result = regex.exec(input);
+      result = regex.exec(input),
+      radix = 10,
+      minLength = 4,
+      defaultAlpha = 1;
     return result ? {
-      a: result.length > 4 ? parseAlpha(result[5]) : 1,
-      b: parseInt(result[3], 10),
-      g: parseInt(result[2], 10),
-      r: parseInt(result[1], 10)
+      a: result.length > minLength ? parseAlpha(result[5]) : defaultAlpha,
+      b: parseInt(result[3], radix),
+      g: parseInt(result[2], radix),
+      r: parseInt(result[1], radix)
     } : undefined;
   }
 }
@@ -5466,15 +5825,15 @@ function init() {
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/ExternalInteractorBase.js
 class ExternalInteractorBase {
   constructor(container) {
-    this.container = container;
     this.type = "external";
+    this.container = container;
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/ParticlesInteractorBase.js
 class ParticlesInteractorBase {
   constructor(container) {
-    this.container = container;
     this.type = "particles";
+    this.container = container;
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/exports.js
@@ -5578,6 +5937,12 @@ if (!isSsr()) {
 
 ;// CONCATENATED MODULE: ../../move/base/dist/browser/Utils.js
 
+const Utils_half = 0.5,
+  minVelocity = 0,
+  identity = 1,
+  moveSpeedFactor = 60,
+  minSpinRadius = 0,
+  spinFactor = 0.01;
 function applyDistance(particle) {
   const initialPosition = particle.initialPosition,
     {
@@ -5594,23 +5959,25 @@ function applyDistance(particle) {
   if (!hDistance && !vDistance) {
     return;
   }
-  if ((hDistance && dxFixed >= hDistance || vDistance && dyFixed >= vDistance) && !particle.misplaced) {
+  const hasHDistance = (hDistance && dxFixed >= hDistance) ?? false,
+    hasVDistance = (vDistance && dyFixed >= vDistance) ?? false;
+  if ((hasHDistance || hasVDistance) && !particle.misplaced) {
     particle.misplaced = !!hDistance && dxFixed > hDistance || !!vDistance && dyFixed > vDistance;
     if (hDistance) {
-      particle.velocity.x = particle.velocity.y * 0.5 - particle.velocity.x;
+      particle.velocity.x = particle.velocity.y * Utils_half - particle.velocity.x;
     }
     if (vDistance) {
-      particle.velocity.y = particle.velocity.x * 0.5 - particle.velocity.y;
+      particle.velocity.y = particle.velocity.x * Utils_half - particle.velocity.y;
     }
   } else if ((!hDistance || dxFixed < hDistance) && (!vDistance || dyFixed < vDistance) && particle.misplaced) {
     particle.misplaced = false;
   } else if (particle.misplaced) {
     const pos = particle.position,
       vel = particle.velocity;
-    if (hDistance && (pos.x < initialPosition.x && vel.x < 0 || pos.x > initialPosition.x && vel.x > 0)) {
+    if (hDistance && (pos.x < initialPosition.x && vel.x < minVelocity || pos.x > initialPosition.x && vel.x > minVelocity)) {
       vel.x *= -getRandom();
     }
-    if (vDistance && (pos.y < initialPosition.y && vel.y < 0 || pos.y > initialPosition.y && vel.y > 0)) {
+    if (vDistance && (pos.y < initialPosition.y && vel.y < minVelocity || pos.y > initialPosition.y && vel.y > minVelocity)) {
       vel.y *= -getRandom();
     }
   }
@@ -5618,24 +5985,24 @@ function applyDistance(particle) {
 function move(particle, moveOptions, moveSpeed, maxSpeed, moveDrift, delta) {
   applyPath(particle, delta);
   const gravityOptions = particle.gravity,
-    gravityFactor = gravityOptions?.enable && gravityOptions.inverse ? -1 : 1;
+    gravityFactor = gravityOptions?.enable && gravityOptions.inverse ? -identity : identity;
   if (moveDrift && moveSpeed) {
-    particle.velocity.x += moveDrift * delta.factor / (60 * moveSpeed);
+    particle.velocity.x += moveDrift * delta.factor / (moveSpeedFactor * moveSpeed);
   }
   if (gravityOptions?.enable && moveSpeed) {
-    particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (60 * moveSpeed);
+    particle.velocity.y += gravityFactor * (gravityOptions.acceleration * delta.factor) / (moveSpeedFactor * moveSpeed);
   }
   const decay = particle.moveDecay;
   particle.velocity.multTo(decay);
   const velocity = particle.velocity.mult(moveSpeed);
-  if (gravityOptions?.enable && maxSpeed > 0 && (!gravityOptions.inverse && velocity.y >= 0 && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= 0 && velocity.y <= -maxSpeed)) {
+  if (gravityOptions?.enable && maxSpeed > minVelocity && (!gravityOptions.inverse && velocity.y >= minVelocity && velocity.y >= maxSpeed || gravityOptions.inverse && velocity.y <= minVelocity && velocity.y <= -maxSpeed)) {
     velocity.y = gravityFactor * maxSpeed;
     if (moveSpeed) {
       particle.velocity.y = velocity.y / moveSpeed;
     }
   }
   const zIndexOptions = particle.options.zIndex,
-    zVelocityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
+    zVelocityFactor = (identity - particle.zIndexFactor) ** zIndexOptions.velocityRate;
   velocity.multTo(zVelocityFactor);
   const {
     position
@@ -5659,15 +6026,15 @@ function spin(particle, moveSpeed) {
   particle.position.y = particle.spin.center.y + particle.spin.radius * updateFunc.y(particle.spin.angle);
   particle.spin.radius += particle.spin.acceleration;
   const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height),
-    halfMaxSize = maxCanvasSize * 0.5;
+    halfMaxSize = maxCanvasSize * Utils_half;
   if (particle.spin.radius > halfMaxSize) {
     particle.spin.radius = halfMaxSize;
-    particle.spin.acceleration *= -1;
-  } else if (particle.spin.radius < 0) {
-    particle.spin.radius = 0;
-    particle.spin.acceleration *= -1;
+    particle.spin.acceleration *= -identity;
+  } else if (particle.spin.radius < minSpinRadius) {
+    particle.spin.radius = minSpinRadius;
+    particle.spin.acceleration *= -identity;
   }
-  particle.spin.angle += moveSpeed * 0.01 * (1 - particle.spin.radius / maxCanvasSize);
+  particle.spin.angle += moveSpeed * spinFactor * (identity - particle.spin.radius / maxCanvasSize);
 }
 function applyPath(particle, delta) {
   const particlesOptions = particle.options,
@@ -5685,18 +6052,20 @@ function applyPath(particle, delta) {
     particle.velocity.addTo(path);
   }
   if (pathOptions.clamp) {
-    particle.velocity.x = clamp(particle.velocity.x, -1, 1);
-    particle.velocity.y = clamp(particle.velocity.y, -1, 1);
+    particle.velocity.x = clamp(particle.velocity.x, -identity, identity);
+    particle.velocity.y = clamp(particle.velocity.y, -identity, identity);
   }
   particle.lastPathTime -= particle.pathDelay;
 }
 function getProximitySpeedFactor(particle) {
-  return particle.slow.inRange ? particle.slow.factor : 1;
+  return particle.slow.inRange ? particle.slow.factor : identity;
 }
 ;// CONCATENATED MODULE: ../../move/base/dist/browser/BaseMover.js
 
 
-const diffFactor = 2;
+const diffFactor = 2,
+  defaultSizeFactor = 1,
+  defaultDeltaFactor = 1;
 class BaseMover {
   constructor() {
     this._initSpin = particle => {
@@ -5710,17 +6079,19 @@ class BaseMover {
           x: 50,
           y: 50
         },
+        spinFactor = 0.01,
         spinCenter = {
-          x: spinPos.x * 0.01 * container.canvas.size.width,
-          y: spinPos.y * 0.01 * container.canvas.size.height
+          x: spinPos.x * spinFactor * container.canvas.size.width,
+          y: spinPos.y * spinFactor * container.canvas.size.height
         },
         pos = particle.getPosition(),
         distance = getDistance(pos, spinCenter),
         spinAcceleration = getRangeValue(spinOptions.acceleration);
       particle.retina.spinAcceleration = spinAcceleration * container.retina.pixelRatio;
+      const minVelocity = 0;
       particle.spin = {
         center: spinCenter,
-        direction: particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise",
+        direction: particle.velocity.x >= minVelocity ? "clockwise" : "counter-clockwise",
         angle: particle.velocity.angle,
         radius: distance,
         acceleration: particle.retina.spinAcceleration
@@ -5747,13 +6118,16 @@ class BaseMover {
       return;
     }
     const container = particle.container,
-      pxRatio = container.retina.pixelRatio,
-      slowFactor = getProximitySpeedFactor(particle),
-      baseSpeed = (particle.retina.moveSpeed ??= getRangeValue(moveOptions.speed) * pxRatio) * container.retina.reduceFactor,
-      moveDrift = particle.retina.moveDrift ??= getRangeValue(particle.options.move.drift) * pxRatio,
+      pxRatio = container.retina.pixelRatio;
+    particle.retina.moveSpeed ??= getRangeValue(moveOptions.speed) * pxRatio;
+    particle.retina.moveDrift ??= getRangeValue(particle.options.move.drift) * pxRatio;
+    const slowFactor = getProximitySpeedFactor(particle),
+      baseSpeed = particle.retina.moveSpeed * container.retina.reduceFactor,
+      moveDrift = particle.retina.moveDrift,
       maxSize = getRangeMax(particleOptions.size.value) * pxRatio,
-      sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1,
-      moveSpeed = baseSpeed * sizeFactor * slowFactor * (delta.factor || 1) / diffFactor,
+      sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : defaultSizeFactor,
+      deltaFactor = delta.factor || defaultDeltaFactor,
+      moveSpeed = baseSpeed * sizeFactor * slowFactor * deltaFactor / diffFactor,
       maxSpeed = particle.retina.maxSpeed ?? container.retina.maxSpeed;
     if (moveOptions.spin.enable) {
       spin(particle, moveSpeed);
@@ -5770,6 +6144,15 @@ async function loadBaseMover(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/browser/CircleDrawer.js
 
+const CircleDrawer_double = 2,
+  CircleDrawer_doublePI = Math.PI * CircleDrawer_double,
+  sides = 12,
+  maxAngle = 360,
+  minAngle = 0,
+  CircleDrawer_origin = {
+    x: 0,
+    y: 0
+  };
 class CircleDrawer {
   draw(data) {
     const {
@@ -5779,28 +6162,28 @@ class CircleDrawer {
     } = data;
     if (!particle.circleRange) {
       particle.circleRange = {
-        min: 0,
-        max: Math.PI * 2
+        min: minAngle,
+        max: CircleDrawer_doublePI
       };
     }
     const circleRange = particle.circleRange;
-    context.arc(0, 0, radius, circleRange.min, circleRange.max, false);
+    context.arc(CircleDrawer_origin.x, CircleDrawer_origin.y, radius, circleRange.min, circleRange.max, false);
   }
   getSidesCount() {
-    return 12;
+    return sides;
   }
   particleInit(container, particle) {
     const shapeData = particle.shapeData,
       angle = shapeData?.angle ?? {
-        max: 360,
-        min: 0
+        max: maxAngle,
+        min: minAngle
       };
     particle.circleRange = !isObject(angle) ? {
-      min: 0,
-      max: angle * Math.PI / 180
+      min: minAngle,
+      max: degToRad(angle)
     } : {
-      min: angle.min * Math.PI / 180,
-      max: angle.max * Math.PI / 180
+      min: degToRad(angle.min),
+      max: degToRad(angle.max)
     };
   }
 }
@@ -5809,84 +6192,8 @@ class CircleDrawer {
 async function loadCircleShape(engine, refresh = true) {
   await engine.addShape("circle", new CircleDrawer(), refresh);
 }
-;// CONCATENATED MODULE: ../../updaters/color/dist/browser/Utils.js
-
-function updateColorValue(delta, colorValue, valueAnimation, max, decrease) {
-  if (!colorValue || !valueAnimation.enable || (colorValue.maxLoops ?? 0) > 0 && (colorValue.loops ?? 0) > (colorValue.maxLoops ?? 0)) {
-    return;
-  }
-  if (!colorValue.time) {
-    colorValue.time = 0;
-  }
-  if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
-    colorValue.time += delta.value;
-  }
-  if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
-    return;
-  }
-  const offset = randomInRange(valueAnimation.offset),
-    velocity = (colorValue.velocity ?? 0) * delta.factor + offset * 3.6,
-    decay = colorValue.decay ?? 1;
-  if (!decrease || colorValue.status === "increasing") {
-    colorValue.value += velocity;
-    if (colorValue.value > max) {
-      if (!colorValue.loops) {
-        colorValue.loops = 0;
-      }
-      colorValue.loops++;
-      if (decrease) {
-        colorValue.status = "decreasing";
-        colorValue.value -= colorValue.value % max;
-      }
-    }
-  } else {
-    colorValue.value -= velocity;
-    if (colorValue.value < 0) {
-      if (!colorValue.loops) {
-        colorValue.loops = 0;
-      }
-      colorValue.loops++;
-      colorValue.status = "increasing";
-      colorValue.value += colorValue.value;
-    }
-  }
-  if (colorValue.velocity && decay !== 1) {
-    colorValue.velocity *= decay;
-  }
-  if (colorValue.value > max) {
-    colorValue.value %= max;
-  }
-}
-function updateColor(particle, delta) {
-  const {
-      h: hAnimation,
-      s: sAnimation,
-      l: lAnimation
-    } = particle.options.color.animation,
-    {
-      color
-    } = particle;
-  if (!color) {
-    return;
-  }
-  const {
-    h,
-    s,
-    l
-  } = color;
-  if (h) {
-    updateColorValue(delta, h, hAnimation, 360, false);
-  }
-  if (s) {
-    updateColorValue(delta, s, sAnimation, 100, true);
-  }
-  if (l) {
-    updateColorValue(delta, l, lAnimation, 100, true);
-  }
-}
 ;// CONCATENATED MODULE: ../../updaters/color/dist/browser/ColorUpdater.js
 
-
 class ColorUpdater {
   constructor(container) {
     this.container = container;
@@ -5909,7 +6216,7 @@ class ColorUpdater {
     return !particle.destroyed && !particle.spawning && (color?.h.value !== undefined && hAnimation.enable || color?.s.value !== undefined && sAnimation.enable || color?.l.value !== undefined && lAnimation.enable);
   }
   update(particle, delta) {
-    updateColor(particle, delta);
+    updateColor(particle.color, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/color/dist/browser/index.js
@@ -5917,91 +6224,27 @@ class ColorUpdater {
 async function loadColorUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("color", container => new ColorUpdater(container), refresh);
 }
-;// CONCATENATED MODULE: ../../updaters/opacity/dist/browser/Utils.js
-
-function checkDestroy(particle, value, minValue, maxValue) {
-  switch (particle.options.opacity.animation.destroy) {
-    case "max":
-      if (value >= maxValue) {
-        particle.destroy();
-      }
-      break;
-    case "min":
-      if (value <= minValue) {
-        particle.destroy();
-      }
-      break;
-  }
-}
-function updateOpacity(particle, delta) {
-  const data = particle.opacity;
-  if (particle.destroyed || !data?.enable || (data.maxLoops ?? 0) > 0 && (data.loops ?? 0) > (data.maxLoops ?? 0)) {
-    return;
-  }
-  const minValue = data.min,
-    maxValue = data.max,
-    decay = data.decay ?? 1;
-  if (!data.time) {
-    data.time = 0;
-  }
-  if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
-    data.time += delta.value;
-  }
-  if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
-    return;
-  }
-  switch (data.status) {
-    case "increasing":
-      if (data.value >= maxValue) {
-        data.status = "decreasing";
-        if (!data.loops) {
-          data.loops = 0;
-        }
-        data.loops++;
-      } else {
-        data.value += (data.velocity ?? 0) * delta.factor;
-      }
-      break;
-    case "decreasing":
-      if (data.value <= minValue) {
-        data.status = "increasing";
-        if (!data.loops) {
-          data.loops = 0;
-        }
-        data.loops++;
-      } else {
-        data.value -= (data.velocity ?? 0) * delta.factor;
-      }
-      break;
-  }
-  if (data.velocity && data.decay !== 1) {
-    data.velocity *= decay;
-  }
-  checkDestroy(particle, data.value, minValue, maxValue);
-  if (!particle.destroyed) {
-    data.value = clamp(data.value, minValue, maxValue);
-  }
-}
 ;// CONCATENATED MODULE: ../../updaters/opacity/dist/browser/OpacityUpdater.js
 
-
 class OpacityUpdater {
   constructor(container) {
     this.container = container;
   }
   init(particle) {
-    const opacityOptions = particle.options.opacity;
-    particle.opacity = initParticleNumericAnimationValue(opacityOptions, 1);
+    const opacityOptions = particle.options.opacity,
+      pxRatio = 1;
+    particle.opacity = initParticleNumericAnimationValue(opacityOptions, pxRatio);
     const opacityAnimation = opacityOptions.animation;
     if (opacityAnimation.enable) {
-      particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * this.container.retina.reduceFactor;
+      particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / percentDenominator * this.container.retina.reduceFactor;
       if (!opacityAnimation.sync) {
         particle.opacity.velocity *= getRandom();
       }
     }
   }
   isEnabled(particle) {
-    return !particle.destroyed && !particle.spawning && !!particle.opacity && particle.opacity.enable && ((particle.opacity.maxLoops ?? 0) <= 0 || (particle.opacity.maxLoops ?? 0) > 0 && (particle.opacity.loops ?? 0) < (particle.opacity.maxLoops ?? 0));
+    const none = 0;
+    return !particle.destroyed && !particle.spawning && !!particle.opacity && particle.opacity.enable && ((particle.opacity.maxLoops ?? none) <= none || (particle.opacity.maxLoops ?? none) > none && (particle.opacity.loops ?? none) < (particle.opacity.maxLoops ?? none));
   }
   reset(particle) {
     if (particle.opacity) {
@@ -6010,10 +6253,10 @@ class OpacityUpdater {
     }
   }
   update(particle, delta) {
-    if (!this.isEnabled(particle)) {
+    if (!this.isEnabled(particle) || !particle.opacity) {
       return;
     }
-    updateOpacity(particle, delta);
+    updateAnimation(particle, particle.opacity, true, particle.options.opacity.animation.destroy, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/opacity/dist/browser/index.js
@@ -6023,18 +6266,20 @@ async function loadOpacityUpdater(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/Utils.js
 
+const Utils_minVelocity = 0,
+  boundsMin = 0;
 function bounceHorizontal(data) {
   if (data.outMode !== "bounce" && data.outMode !== "bounce-horizontal" && data.outMode !== "bounceHorizontal" && data.outMode !== "split" || data.direction !== "left" && data.direction !== "right") {
     return;
   }
-  if (data.bounds.right < 0 && data.direction === "left") {
+  if (data.bounds.right < boundsMin && data.direction === "left") {
     data.particle.position.x = data.size + data.offset.x;
   } else if (data.bounds.left > data.canvasSize.width && data.direction === "right") {
     data.particle.position.x = data.canvasSize.width - data.size - data.offset.x;
   }
   const velocity = data.particle.velocity.x;
   let bounced = false;
-  if (data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0 || data.direction === "left" && data.bounds.left <= 0 && velocity < 0) {
+  if (data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > Utils_minVelocity || data.direction === "left" && data.bounds.left <= boundsMin && velocity < Utils_minVelocity) {
     const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
     data.particle.velocity.x *= -newVelocity;
     bounced = true;
@@ -6045,7 +6290,7 @@ function bounceHorizontal(data) {
   const minPos = data.offset.x + data.size;
   if (data.bounds.right >= data.canvasSize.width && data.direction === "right") {
     data.particle.position.x = data.canvasSize.width - minPos;
-  } else if (data.bounds.left <= 0 && data.direction === "left") {
+  } else if (data.bounds.left <= boundsMin && data.direction === "left") {
     data.particle.position.x = minPos;
   }
   if (data.outMode === "split") {
@@ -6056,14 +6301,14 @@ function bounceVertical(data) {
   if (data.outMode !== "bounce" && data.outMode !== "bounce-vertical" && data.outMode !== "bounceVertical" && data.outMode !== "split" || data.direction !== "bottom" && data.direction !== "top") {
     return;
   }
-  if (data.bounds.bottom < 0 && data.direction === "top") {
+  if (data.bounds.bottom < boundsMin && data.direction === "top") {
     data.particle.position.y = data.size + data.offset.y;
   } else if (data.bounds.top > data.canvasSize.height && data.direction === "bottom") {
     data.particle.position.y = data.canvasSize.height - data.size - data.offset.y;
   }
   const velocity = data.particle.velocity.y;
   let bounced = false;
-  if (data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0 || data.direction === "top" && data.bounds.top <= 0 && velocity < 0) {
+  if (data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > Utils_minVelocity || data.direction === "top" && data.bounds.top <= boundsMin && velocity < Utils_minVelocity) {
     const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
     data.particle.velocity.y *= -newVelocity;
     bounced = true;
@@ -6074,7 +6319,7 @@ function bounceVertical(data) {
   const minPos = data.offset.y + data.size;
   if (data.bounds.bottom >= data.canvasSize.height && data.direction === "bottom") {
     data.particle.position.y = data.canvasSize.height - minPos;
-  } else if (data.bounds.top <= 0 && data.direction === "top") {
+  } else if (data.bounds.top <= boundsMin && data.direction === "top") {
     data.particle.position.y = minPos;
   }
   if (data.outMode === "split") {
@@ -6133,6 +6378,7 @@ class BounceOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/DestroyOutMode.js
 
+const DestroyOutMode_minVelocity = 0;
 class DestroyOutMode {
   constructor(container) {
     this.container = container;
@@ -6160,7 +6406,7 @@ class DestroyOutMode {
             x: vx,
             y: vy
           } = particle.velocity;
-          if (vx < 0 && dx > particle.moveCenter.radius || vy < 0 && dy > particle.moveCenter.radius || vx >= 0 && dx < -particle.moveCenter.radius || vy >= 0 && dy < -particle.moveCenter.radius) {
+          if (vx < DestroyOutMode_minVelocity && dx > particle.moveCenter.radius || vy < DestroyOutMode_minVelocity && dy > particle.moveCenter.radius || vx >= DestroyOutMode_minVelocity && dx < -particle.moveCenter.radius || vy >= DestroyOutMode_minVelocity && dy < -particle.moveCenter.radius) {
             return;
           }
           break;
@@ -6171,6 +6417,7 @@ class DestroyOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/NoneOutMode.js
 
+const NoneOutMode_minVelocity = 0;
 class NoneOutMode {
   constructor(container) {
     this.container = container;
@@ -6180,7 +6427,7 @@ class NoneOutMode {
     if (!this.modes.includes(outMode)) {
       return;
     }
-    if (particle.options.move.distance.horizontal && (direction === "left" || direction === "right") || particle.options.move.distance.vertical && (direction === "top" || direction === "bottom")) {
+    if ((particle.options.move.distance.horizontal && (direction === "left" || direction === "right")) ?? (particle.options.move.distance.vertical && (direction === "top" || direction === "bottom"))) {
       return;
     }
     const gravityOptions = particle.options.move.gravity,
@@ -6188,7 +6435,7 @@ class NoneOutMode {
     const canvasSize = container.canvas.size;
     const pRadius = particle.getRadius();
     if (!gravityOptions.enable) {
-      if (particle.velocity.y > 0 && particle.position.y <= canvasSize.height + pRadius || particle.velocity.y < 0 && particle.position.y >= -pRadius || particle.velocity.x > 0 && particle.position.x <= canvasSize.width + pRadius || particle.velocity.x < 0 && particle.position.x >= -pRadius) {
+      if (particle.velocity.y > NoneOutMode_minVelocity && particle.position.y <= canvasSize.height + pRadius || particle.velocity.y < NoneOutMode_minVelocity && particle.position.y >= -pRadius || particle.velocity.x > NoneOutMode_minVelocity && particle.position.x <= canvasSize.width + pRadius || particle.velocity.x < NoneOutMode_minVelocity && particle.position.x >= -pRadius) {
         return;
       }
       if (!isPointInside(particle.position, container.canvas.size, Vector.origin, pRadius, direction)) {
@@ -6204,6 +6451,8 @@ class NoneOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/OutOutMode.js
 
+const OutOutMode_minVelocity = 0,
+  minDistance = 0;
 class OutOutMode {
   constructor(container) {
     this.container = container;
@@ -6229,7 +6478,7 @@ class OutOutMode {
             dx,
             dy
           } = getDistances(particle.position, circVec);
-          if (vx <= 0 && dx >= 0 || vy <= 0 && dy >= 0 || vx >= 0 && dx <= 0 || vy >= 0 && dy <= 0) {
+          if (vx <= OutOutMode_minVelocity && dx >= minDistance || vy <= OutOutMode_minVelocity && dy >= minDistance || vx >= OutOutMode_minVelocity && dx <= minDistance || vy >= OutOutMode_minVelocity && dy <= minDistance) {
             return;
           }
           particle.position.x = Math.floor(randomInRange({
@@ -6331,12 +6580,12 @@ class OutOutMode {
 
 class OutOfCanvasUpdater {
   constructor(container) {
-    this.container = container;
     this._updateOutMode = (particle, delta, outMode, direction) => {
       for (const updater of this.updaters) {
         updater.update(particle, direction, delta, outMode);
       }
     };
+    this.container = container;
     this.updaters = [new BounceOutMode(container), new DestroyOutMode(container), new OutOutMode(container), new NoneOutMode(container)];
   }
   init() {}
@@ -6356,97 +6605,32 @@ class OutOfCanvasUpdater {
 async function loadOutModesUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("outModes", container => new OutOfCanvasUpdater(container), refresh);
 }
-;// CONCATENATED MODULE: ../../updaters/size/dist/browser/Utils.js
-
-function Utils_checkDestroy(particle, value, minValue, maxValue) {
-  switch (particle.options.size.animation.destroy) {
-    case "max":
-      if (value >= maxValue) {
-        particle.destroy();
-      }
-      break;
-    case "min":
-      if (value <= minValue) {
-        particle.destroy();
-      }
-      break;
-  }
-}
-function updateSize(particle, delta) {
-  const data = particle.size;
-  if (particle.destroyed || !data || !data.enable || (data.maxLoops ?? 0) > 0 && (data.loops ?? 0) > (data.maxLoops ?? 0)) {
-    return;
-  }
-  const sizeVelocity = (data.velocity ?? 0) * delta.factor,
-    minValue = data.min,
-    maxValue = data.max,
-    decay = data.decay ?? 1;
-  if (!data.time) {
-    data.time = 0;
-  }
-  if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
-    data.time += delta.value;
-  }
-  if ((data.delayTime ?? 0) > 0 && data.time < (data.delayTime ?? 0)) {
-    return;
-  }
-  switch (data.status) {
-    case "increasing":
-      if (data.value >= maxValue) {
-        data.status = "decreasing";
-        if (!data.loops) {
-          data.loops = 0;
-        }
-        data.loops++;
-      } else {
-        data.value += sizeVelocity;
-      }
-      break;
-    case "decreasing":
-      if (data.value <= minValue) {
-        data.status = "increasing";
-        if (!data.loops) {
-          data.loops = 0;
-        }
-        data.loops++;
-      } else {
-        data.value -= sizeVelocity;
-      }
-  }
-  if (data.velocity && decay !== 1) {
-    data.velocity *= decay;
-  }
-  Utils_checkDestroy(particle, data.value, minValue, maxValue);
-  if (!particle.destroyed) {
-    data.value = clamp(data.value, minValue, maxValue);
-  }
-}
 ;// CONCATENATED MODULE: ../../updaters/size/dist/browser/SizeUpdater.js
 
-
+const minLoops = 0;
 class SizeUpdater {
   init(particle) {
     const container = particle.container,
       sizeOptions = particle.options.size,
       sizeAnimation = sizeOptions.animation;
     if (sizeAnimation.enable) {
-      particle.size.velocity = (particle.retina.sizeAnimationSpeed ?? container.retina.sizeAnimationSpeed) / 100 * container.retina.reduceFactor;
+      particle.size.velocity = (particle.retina.sizeAnimationSpeed ?? container.retina.sizeAnimationSpeed) / percentDenominator * container.retina.reduceFactor;
       if (!sizeAnimation.sync) {
         particle.size.velocity *= getRandom();
       }
     }
   }
   isEnabled(particle) {
-    return !particle.destroyed && !particle.spawning && particle.size.enable && ((particle.size.maxLoops ?? 0) <= 0 || (particle.size.maxLoops ?? 0) > 0 && (particle.size.loops ?? 0) < (particle.size.maxLoops ?? 0));
+    return !particle.destroyed && !particle.spawning && particle.size.enable && ((particle.size.maxLoops ?? minLoops) <= minLoops || (particle.size.maxLoops ?? minLoops) > minLoops && (particle.size.loops ?? minLoops) < (particle.size.maxLoops ?? minLoops));
   }
   reset(particle) {
-    particle.size.loops = 0;
+    particle.size.loops = minLoops;
   }
   update(particle, delta) {
     if (!this.isEnabled(particle)) {
       return;
     }
-    updateSize(particle, delta);
+    updateAnimation(particle, particle.size, true, particle.options.size.animation.destroy, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/size/dist/browser/index.js
@@ -6473,7 +6657,7 @@ async function loadBasic(engine, refresh = true) {
 ;// CONCATENATED MODULE: ./dist/browser/bundle.js
 
 
-loadBasic(tsParticles);
+void loadBasic(tsParticles);
 
 
 /******/ 	return __webpack_exports__;