@tsparticles/engine 3.0.2 → 3.1.0

package/tsparticles.engine.js

@@ -1,5 +1,5 @@
 /*!
- * tsParticles Engine v3.0.2
+ * tsParticles Engine v3.1.0
  * Author: Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
  * Website: https://particles.js.org/
@@ -141,6 +141,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),
@@ -173,6 +174,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),
@@ -192,6 +194,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),
@@ -201,6 +204,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),
@@ -221,6 +225,9 @@ __webpack_require__.d(__webpack_exports__, {
   touchMoveEvent: () => (/* reexport */ touchMoveEvent),
   touchStartEvent: () => (/* reexport */ touchStartEvent),
   tsParticles: () => (/* binding */ tsParticles),
+  updateAnimation: () => (/* reexport */ updateAnimation),
+  updateColor: () => (/* reexport */ updateColor),
+  updateColorValue: () => (/* reexport */ updateColorValue),
   visibilityChangeEvent: () => (/* reexport */ visibilityChangeEvent)
 });
 
@@ -238,9 +245,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: ./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) => {
@@ -251,17 +268,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);
@@ -307,7 +324,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);
@@ -318,19 +335,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);
@@ -343,12 +361,17 @@ class Vector3d {
 }
 ;// CONCATENATED MODULE: ./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);
@@ -360,8 +383,11 @@ class Vector extends Vector3d {
 ;// CONCATENATED MODULE: ./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;
@@ -369,13 +395,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);
@@ -384,10 +412,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;
 }
@@ -413,43 +442,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) {
@@ -459,18 +497,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) {
@@ -500,11 +539,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: ./dist/browser/Utils/Utils.js
 
 
+
 const _logger = {
   debug: console.debug,
   error: console.error,
@@ -535,11 +579,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;
   }
@@ -576,7 +622,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 {
@@ -590,7 +637,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;
@@ -687,8 +735,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),
@@ -768,19 +817,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,
@@ -788,9 +842,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";
@@ -799,7 +854,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";
@@ -820,7 +875,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;
     }
@@ -840,13 +895,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
     };
   }
 }
@@ -874,9 +929,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: ./dist/browser/Utils/ColorUtils.js
 
 
+
 const randomColorValue = "random",
   midColorValue = "mid",
   colorManagers = new Map();
@@ -894,12 +1025,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) {
@@ -955,28 +1089,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;
 }
@@ -987,43 +1130,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),
@@ -1040,18 +1199,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,
@@ -1137,25 +1300,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 = 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 {
-    colorValue.velocity = 0;
+    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: ./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);
@@ -1164,44 +1422,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) {
@@ -1217,7 +1477,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;
@@ -1229,23 +1490,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 {
@@ -1278,14 +1530,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;
   }
@@ -1293,6 +1547,7 @@ function drawShape(data) {
   if (!drawer) {
     return;
   }
+  context.beginPath();
   drawer.draw({
     context,
     particle,
@@ -1304,6 +1559,15 @@ function drawShape(data) {
       ...transformData
     }
   });
+  if (particle.shapeClose) {
+    context.closePath();
+  }
+  if (strokeWidth > minStrokeWidth) {
+    context.stroke();
+  }
+  if (particle.shapeFill) {
+    context.fill();
+  }
 }
 function drawShapeAfterDraw(data) {
   const {
@@ -1319,7 +1583,7 @@ function drawShapeAfterDraw(data) {
     return;
   }
   const drawer = container.shapeDrawers.get(particle.shape);
-  if (!drawer || !drawer.afterDraw) {
+  if (!drawer?.afterDraw) {
     return;
   }
   drawer.afterDraw({
@@ -1347,10 +1611,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: ./dist/browser/Core/Canvas.js
@@ -1359,9 +1624,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 {
@@ -1369,7 +1635,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) => {
@@ -1392,12 +1658,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 => {
@@ -1458,17 +1724,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) => {
@@ -1479,7 +1746,7 @@ class Canvas {
           img.addEventListener("load", () => {
             this._trailFill = {
               image: img,
-              opacity: 1 / trail.length
+              opacity
             };
             resolve();
           });
@@ -1534,9 +1801,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);
@@ -1559,10 +1827,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) {
@@ -1578,7 +1847,7 @@ class Canvas {
     this.stop();
     if (this._generated) {
       const element = this.element;
-      element && element.remove();
+      element?.remove();
     } else {
       this._resetOriginalStyle();
     }
@@ -1598,8 +1867,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(),
@@ -1618,8 +1888,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,
@@ -1637,7 +1910,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
@@ -1709,7 +1982,7 @@ class Canvas {
       if (plugin.resize) {
         this._resizePlugins.push(plugin);
       }
-      if (plugin.particleFillColor || plugin.particleStrokeColor) {
+      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
         this._colorPlugins.push(plugin);
       }
     }
@@ -1721,7 +1994,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);
       }
     }
@@ -1807,6 +2080,7 @@ class Canvas {
 ;// CONCATENATED MODULE: ./dist/browser/Core/Utils/EventListeners.js
 
 
+const EventListeners_double = 2;
 function manageListener(element, event, handler, add, options) {
   if (add) {
     let addOptions = {
@@ -1843,7 +2117,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 => {
@@ -1854,7 +2129,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 = () => {
@@ -1876,15 +2151,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,
@@ -1975,12 +2251,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);
       }
@@ -2042,7 +2318,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;
@@ -2066,8 +2342,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 = {
@@ -2085,11 +2361,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)
           };
         }
       }
@@ -2466,6 +2744,7 @@ class Interactivity {
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/ManualParticle.js
 
+const defaultPosition = 50;
 class ManualParticle {
   load(data) {
     if (!data) {
@@ -2473,8 +2752,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"
       };
     }
@@ -3563,6 +3842,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;
     }
@@ -3675,12 +3957,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() {
@@ -3703,15 +3987,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);
+      }
     }
   }
 }
@@ -3725,6 +4015,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) {
@@ -3749,7 +4043,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) {
@@ -3759,7 +4053,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) {
@@ -3799,7 +4093,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;
     };
@@ -3810,11 +4105,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));
@@ -3824,7 +4119,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) {
@@ -3834,8 +4129,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());
@@ -3844,9 +4140,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;
       }
@@ -3860,13 +4158,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);
@@ -3893,14 +4193,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: {
@@ -3920,7 +4220,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 {
@@ -3968,7 +4268,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) {
@@ -3976,7 +4276,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) {
@@ -4006,7 +4306,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)) {
@@ -4025,7 +4325,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;
@@ -4037,7 +4338,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);
@@ -4047,7 +4348,7 @@ class Particle {
         container.shapeDrawers.set(this.shape, shapeDrawer);
       }
     }
-    if (shapeDrawer && shapeDrawer.loadShape) {
+    if (shapeDrawer?.loadShape) {
       shapeDrawer.loadShape(this);
     }
     const sideCountFunc = shapeDrawer?.getSidesCount;
@@ -4060,16 +4361,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() {
@@ -4083,7 +4380,7 @@ class Particle {
   }
   reset() {
     for (const updater of this.container.particles.updaters) {
-      updater.reset && updater.reset(this);
+      updater.reset?.(this);
     }
   }
 }
@@ -4141,6 +4438,7 @@ class Rectangle extends Range {
 
 
 
+const Circle_squareExp = 2;
 class Circle extends Range {
   constructor(x, y, radius) {
     super(x, y);
@@ -4159,15 +4457,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;
   }
@@ -4176,6 +4474,9 @@ class Circle extends Range {
 
 
 
+const QuadTree_half = 0.5,
+  QuadTree_double = 2,
+  subdivideCount = 4;
 class QuadTree {
   constructor(rectangle, capacity) {
     this.rectangle = rectangle;
@@ -4192,8 +4493,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;
     };
@@ -4215,7 +4517,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 [];
     }
@@ -4247,7 +4549,9 @@ class QuadTree {
 
 
 
-const qTreeCapacity = 4;
+const qTreeCapacity = 4,
+  Particles_squareExp = 2,
+  defaultRemoveQuantity = 1;
 const qTreeRectangle = canvasSize => {
   const {
       height,
@@ -4276,7 +4580,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) {
@@ -4291,13 +4596,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 {
@@ -4326,7 +4632,6 @@ class Particles {
         return particle;
       } catch (e) {
         getLogger().warning(`${errorPrefix} adding particle: ${e}`);
-        return;
       }
     };
     this._removeParticle = (index, group, override) => {
@@ -4334,9 +4639,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,
@@ -4376,11 +4682,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") {
@@ -4476,23 +4785,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);
   }
@@ -4511,7 +4825,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) {
@@ -4522,15 +4836,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);
@@ -4565,7 +4881,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;
     }
   }
@@ -4573,17 +4890,19 @@ class Particles {
 ;// CONCATENATED MODULE: ./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) {
@@ -4624,10 +4943,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) {
@@ -4645,12 +4965,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;
         }
@@ -4658,7 +4982,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;
         }
@@ -4745,8 +5069,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)) {
@@ -4767,18 +5092,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));
       }
@@ -4821,10 +5148,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);
@@ -4835,9 +5162,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
@@ -4848,13 +5177,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) {
@@ -4878,7 +5208,7 @@ class Container {
     }
     this.particles.handleClickMode(mode);
     for (const [, plugin] of this.plugins) {
-      plugin.handleClickMode && plugin.handleClickMode(mode);
+      plugin.handleClickMode?.(mode);
     }
   }
   async init() {
@@ -4911,19 +5241,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
@@ -4931,7 +5263,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
@@ -4956,7 +5288,7 @@ class Container {
       return;
     }
     for (const [, plugin] of this.plugins) {
-      plugin.pause && plugin.pause();
+      plugin.pause?.();
     }
     if (!this.pageHidden) {
       this._paused = true;
@@ -4987,7 +5319,7 @@ class Container {
     this._engine.dispatchEvent("containerPlay", {
       container: this
     });
-    this.draw(needsUpdate || false);
+    this.draw(needsUpdate ?? false);
   }
   async refresh() {
     if (!guardCheck(this)) {
@@ -5012,20 +5344,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() {
@@ -5046,7 +5379,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);
@@ -5083,7 +5416,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);
@@ -5101,14 +5434,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);
     }
   }
 }
@@ -5166,21 +5501,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);
   }
@@ -5200,20 +5537,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);
   }
@@ -5232,7 +5577,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;
@@ -5240,7 +5586,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;
   }
@@ -5281,7 +5629,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
@@ -5299,12 +5648,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;
@@ -5314,7 +5665,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");
@@ -5329,8 +5681,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);
     }
@@ -5349,14 +5702,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);
@@ -5402,12 +5755,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;
   }
 }
@@ -5441,12 +5797,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;
   }
 }
@@ -5467,15 +5826,15 @@ function init() {
 ;// CONCATENATED MODULE: ./dist/browser/Core/Utils/ExternalInteractorBase.js
 class ExternalInteractorBase {
   constructor(container) {
-    this.container = container;
     this.type = "external";
+    this.container = container;
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Core/Utils/ParticlesInteractorBase.js
 class ParticlesInteractorBase {
   constructor(container) {
-    this.container = container;
     this.type = "particles";
+    this.container = container;
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/exports.js