@tsparticles/slim 3.0.2 → 3.1.0

package/tsparticles.slim.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__, {
   loadOptions: () => (/* reexport */ loadOptions),
   loadParticlesOptions: () => (/* reexport */ loadParticlesOptions),
   loadSlim: () => (/* reexport */ loadSlim),
+  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
@@ -6476,6 +6660,7 @@ async function loadEasingQuadPlugin() {
   addEasing("ease-in-quad", value => value ** 2);
   addEasing("ease-out-quad", value => 1 - (1 - value) ** 2);
   addEasing("ease-in-out-quad", value => value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2);
+  await Promise.resolve();
 }
 ;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/EmojiDrawer.js
 
@@ -6486,8 +6671,11 @@ class EmojiDrawer {
     this._emojiShapeDict = new Map();
   }
   destroy() {
-    for (const [, emojiData] of this._emojiShapeDict) {
-      emojiData instanceof ImageBitmap && emojiData?.close();
+    for (const [key, emojiData] of this._emojiShapeDict) {
+      if (emojiData instanceof ImageBitmap) {
+        emojiData?.close();
+        this._emojiShapeDict.delete(key);
+      }
     }
   }
   draw(data) {
@@ -6497,13 +6685,16 @@ class EmojiDrawer {
         radius,
         opacity
       } = data,
-      emojiData = particle.emojiData;
+      emojiData = particle.emojiData,
+      double = 2,
+      diameter = radius * double,
+      previousAlpha = context.globalAlpha;
     if (!emojiData) {
       return;
     }
     context.globalAlpha = opacity;
-    context.drawImage(emojiData, -radius, -radius, radius * 2, radius * 2);
-    context.globalAlpha = 1;
+    context.drawImage(emojiData, -radius, -radius, diameter, diameter);
+    context.globalAlpha = previousAlpha;
   }
   async init(container) {
     const options = container.actualOptions;
@@ -6512,7 +6703,9 @@ class EmojiDrawer {
         shapeOptions = validTypes.map(t => options.particles.shape.options[t]).find(t => !!t);
       if (shapeOptions) {
         executeOnSingleOrMultiple(shapeOptions, shape => {
-          shape.font && promises.push(loadFont(shape.font));
+          if (shape.font) {
+            promises.push(loadFont(shape.font));
+          }
         });
       }
       await Promise.all(promises);
@@ -6522,52 +6715,52 @@ class EmojiDrawer {
     delete particle.emojiData;
   }
   particleInit(container, particle) {
-    if (!particle.emojiData) {
-      const shapeData = particle.shapeData;
-      if (!shapeData?.value) {
-        return;
-      }
-      const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData),
-        font = shapeData.font ?? defaultFont;
-      if (!emoji) {
+    const double = 2,
+      shapeData = particle.shapeData;
+    if (!shapeData?.value) {
+      return;
+    }
+    const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData),
+      font = shapeData.font ?? defaultFont;
+    if (!emoji) {
+      return;
+    }
+    const key = `${emoji}_${font}`,
+      existingData = this._emojiShapeDict.get(key);
+    if (existingData) {
+      particle.emojiData = existingData;
+      return;
+    }
+    const canvasSize = getRangeMax(particle.size.value) * double;
+    let emojiData;
+    const maxSize = getRangeMax(particle.size.value);
+    if (typeof OffscreenCanvas !== "undefined") {
+      const canvas = new OffscreenCanvas(canvasSize, canvasSize),
+        context = canvas.getContext("2d");
+      if (!context) {
         return;
       }
-      const key = `${emoji}_${font}`,
-        existingData = this._emojiShapeDict.get(key);
-      if (existingData) {
-        particle.emojiData = existingData;
+      context.font = `400 ${maxSize * double}px ${font}`;
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.fillText(emoji, maxSize, maxSize);
+      emojiData = canvas.transferToImageBitmap();
+    } else {
+      const canvas = document.createElement("canvas");
+      canvas.width = canvasSize;
+      canvas.height = canvasSize;
+      const context = canvas.getContext("2d");
+      if (!context) {
         return;
       }
-      const canvasSize = getRangeMax(particle.size.value) * 2;
-      let emojiData;
-      if (typeof OffscreenCanvas !== "undefined") {
-        const canvas = new OffscreenCanvas(canvasSize, canvasSize),
-          context = canvas.getContext("2d");
-        if (!context) {
-          return;
-        }
-        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
-        context.textBaseline = "middle";
-        context.textAlign = "center";
-        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
-        emojiData = canvas.transferToImageBitmap();
-      } else {
-        const canvas = document.createElement("canvas");
-        canvas.width = canvasSize;
-        canvas.height = canvasSize;
-        const context = canvas.getContext("2d");
-        if (!context) {
-          return;
-        }
-        context.font = `400 ${getRangeMax(particle.size.value) * 2}px ${font}`;
-        context.textBaseline = "middle";
-        context.textAlign = "center";
-        context.fillText(emoji, getRangeMax(particle.size.value), getRangeMax(particle.size.value));
-        emojiData = canvas;
-      }
-      this._emojiShapeDict.set(key, emojiData);
-      particle.emojiData = emojiData;
+      context.font = `400 ${maxSize * double}px ${font}`;
+      context.textBaseline = "middle";
+      context.textAlign = "center";
+      context.fillText(emoji, maxSize, maxSize);
+      emojiData = canvas;
     }
+    this._emojiShapeDict.set(key, emojiData);
+    particle.emojiData = emojiData;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/emoji/dist/browser/index.js
@@ -6612,7 +6805,10 @@ class Attract {
 ;// CONCATENATED MODULE: ../../interactions/external/attract/dist/browser/Attractor.js
 
 
-const attractMode = "attract";
+const attractMode = "attract",
+  minRadius = 0,
+  minFactor = 1,
+  Attractor_identity = 1;
 class Attractor extends ExternalInteractorBase {
   constructor(engine, container) {
     super(container);
@@ -6638,20 +6834,19 @@ class Attractor extends ExternalInteractorBase {
       if (attract.clicking) {
         const mousePos = container.interactivity.mouse.clickPosition,
           attractRadius = container.retina.attractModeDistance;
-        if (!attractRadius || attractRadius < 0 || !mousePos) {
+        if (!attractRadius || attractRadius < minRadius || !mousePos) {
           return;
         }
         this._processAttract(mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius));
       } else if (attract.clicking === false) {
         attract.particles = [];
       }
-      return;
     };
     this._hoverAttract = () => {
       const container = this.container,
         mousePos = container.interactivity.mouse.position,
         attractRadius = container.retina.attractModeDistance;
-      if (!attractRadius || attractRadius < 0 || !mousePos) {
+      if (!attractRadius || attractRadius < minRadius || !mousePos) {
         return;
       }
       this._processAttract(mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius));
@@ -6665,13 +6860,13 @@ class Attractor extends ExternalInteractorBase {
       const query = container.particles.quadTree.query(area, p => this.isEnabled(p));
       for (const particle of query) {
         const {
-          dx,
-          dy,
-          distance
-        } = getDistances(particle.position, position);
-        const velocity = attractOptions.speed * attractOptions.factor;
-        const attractFactor = clamp(getEasing(attractOptions.easing)(1 - distance / attractRadius) * velocity, 0, attractOptions.maxSpeed);
-        const normVec = Vector.create(distance === 0 ? velocity : dx / distance * attractFactor, distance === 0 ? velocity : dy / distance * attractFactor);
+            dx,
+            dy,
+            distance
+          } = getDistances(particle.position, position),
+          velocity = attractOptions.speed * attractOptions.factor,
+          attractFactor = clamp(getEasing(attractOptions.easing)(Attractor_identity - distance / attractRadius) * velocity, minFactor, attractOptions.maxSpeed),
+          normVec = Vector.create(!distance ? velocity : dx / distance * attractFactor, !distance ? velocity : dy / distance * attractFactor);
         particle.position.subFrom(normVec);
       }
     };
@@ -6712,7 +6907,7 @@ class Attractor extends ExternalInteractorBase {
           };
         }
         container.attract.clicking = false;
-      }, attract.duration * 1000);
+      }, attract.duration * millisecondsToSeconds);
     };
   }
   clear() {}
@@ -6738,6 +6933,7 @@ class Attractor extends ExternalInteractorBase {
     } else if (clickEnabled && isInArray(attractMode, clickMode)) {
       this._clickAttract();
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -6785,7 +6981,13 @@ class Bounce {
 ;// CONCATENATED MODULE: ../../interactions/external/bounce/dist/browser/Bouncer.js
 
 
-const bounceMode = "bounce";
+const bounceMode = "bounce",
+  Bouncer_squareExp = 2,
+  Bouncer_double = 2,
+  Bouncer_half = 0.5,
+  halfPI = Math.PI * Bouncer_half,
+  toleranceFactor = 10,
+  Bouncer_minRadius = 0;
 class Bouncer extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -6796,7 +6998,7 @@ class Bouncer extends ExternalInteractorBase {
           circleBounce(circleBounceDataFromParticle(particle), {
             position,
             radius,
-            mass: radius ** 2 * Math.PI / 2,
+            mass: radius ** Bouncer_squareExp * halfPI,
             velocity: Vector.origin,
             factor: Vector.origin
           });
@@ -6808,10 +7010,10 @@ class Bouncer extends ExternalInteractorBase {
     this._processMouseBounce = () => {
       const container = this.container,
         pxRatio = container.retina.pixelRatio,
-        tolerance = 10 * pxRatio,
+        tolerance = toleranceFactor * pxRatio,
         mousePos = container.interactivity.mouse.position,
         radius = container.retina.bounceModeDistance;
-      if (!radius || radius < 0 || !mousePos) {
+      if (!radius || radius < Bouncer_minRadius || !mousePos) {
         return;
       }
       this._processBounce(mousePos, radius, new Circle(mousePos.x, mousePos.y, radius + tolerance));
@@ -6826,12 +7028,12 @@ class Bouncer extends ExternalInteractorBase {
         const elem = item,
           pxRatio = container.retina.pixelRatio,
           pos = {
-            x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-            y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+            x: (elem.offsetLeft + elem.offsetWidth * Bouncer_half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * Bouncer_half) * pxRatio
           },
-          radius = elem.offsetWidth / 2 * pxRatio,
-          tolerance = 10 * pxRatio,
-          area = div.type === "circle" ? new Circle(pos.x, pos.y, radius + tolerance) : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
+          radius = elem.offsetWidth * Bouncer_half * pxRatio,
+          tolerance = toleranceFactor * pxRatio,
+          area = div.type === "circle" ? new Circle(pos.x, pos.y, radius + tolerance) : new Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * Bouncer_double, elem.offsetHeight * pxRatio + tolerance * Bouncer_double);
         this._processBounce(pos, radius, area);
       });
     };
@@ -6858,6 +7060,7 @@ class Bouncer extends ExternalInteractorBase {
     } else {
       divModeExecute(bounceMode, divs, (selector, div) => this._singleSelectorBounce(selector, div));
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -6865,7 +7068,7 @@ class Bouncer extends ExternalInteractorBase {
       mouse = container.interactivity.mouse,
       events = (particle?.interactivity ?? options.interactivity).events,
       divs = events.onDiv;
-    return mouse.position && events.onHover.enable && isInArray(bounceMode, events.onHover.mode) || isDivModeEnabled(bounceMode, divs);
+    return !!mouse.position && events.onHover.enable && isInArray(bounceMode, events.onHover.mode) || isDivModeEnabled(bounceMode, divs);
   }
   loadModeOptions(options, ...sources) {
     if (!options.bounce) {
@@ -6968,7 +7171,16 @@ function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
 
 
 
-const bubbleMode = "bubble";
+const bubbleMode = "bubble",
+  Bubbler_minDistance = 0,
+  defaultClickTime = 0,
+  Bubbler_double = 2,
+  defaultOpacity = 1,
+  ratioOffset = 1,
+  defaultBubbleValue = 0,
+  minRatio = 0,
+  Bubbler_half = 0.5,
+  Bubbler_defaultRatio = 1;
 class Bubbler extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -6984,7 +7196,7 @@ class Bubbler extends ExternalInteractorBase {
         container.bubble = {};
       }
       const distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0) {
+      if (!distance || distance < Bubbler_minDistance) {
         return;
       }
       const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, p => this.isEnabled(p)),
@@ -6998,11 +7210,11 @@ class Bubbler extends ExternalInteractorBase {
         particle.bubble.inRange = !bubble.durationEnd;
         const pos = particle.getPosition(),
           distMouse = getDistance(pos, mouseClickPos),
-          timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+          timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds;
         if (timeSpent > bubbleOptions.duration) {
           bubble.durationEnd = true;
         }
-        if (timeSpent > bubbleOptions.duration * 2) {
+        if (timeSpent > bubbleOptions.duration * Bubbler_double) {
           bubble.clicking = false;
           bubble.durationEnd = false;
         }
@@ -7025,7 +7237,7 @@ class Bubbler extends ExternalInteractorBase {
           },
           particlesObj: {
             optValue: getRangeMax(particle.options.opacity.value),
-            value: particle.opacity?.value ?? 1
+            value: particle.opacity?.value ?? defaultOpacity
           },
           type: "opacity"
         };
@@ -7041,7 +7253,7 @@ class Bubbler extends ExternalInteractorBase {
       const container = this.container,
         mousePos = container.interactivity.mouse.position,
         distance = container.retina.bubbleModeDistance;
-      if (!distance || distance < 0 || mousePos === undefined) {
+      if (!distance || distance < Bubbler_minDistance || !mousePos) {
         return;
       }
       const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
@@ -7049,9 +7261,9 @@ class Bubbler extends ExternalInteractorBase {
         particle.bubble.inRange = true;
         const pos = particle.getPosition(),
           pointDistance = getDistance(pos, mousePos),
-          ratio = 1 - pointDistance / distance;
+          ratio = ratioOffset - pointDistance / distance;
         if (pointDistance <= distance) {
-          if (ratio >= 0 && container.interactivity.status === mouseMoveEvent) {
+          if (ratio >= minRatio && container.interactivity.status === mouseMoveEvent) {
             this._hoverBubbleSize(particle, ratio);
             this._hoverBubbleOpacity(particle, ratio);
             this._hoverBubbleColor(particle, ratio);
@@ -7084,7 +7296,7 @@ class Bubbler extends ExternalInteractorBase {
       if (bubbleOptions.mix) {
         particle.bubble.color = undefined;
         const pColor = particle.getFillColor();
-        particle.bubble.color = pColor ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, 1 - ratio, ratio)) : particle.bubble.finalColor;
+        particle.bubble.color = pColor ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;
       } else {
         particle.bubble.color = particle.bubble.finalColor;
       }
@@ -7097,7 +7309,7 @@ class Bubbler extends ExternalInteractorBase {
         return;
       }
       const optOpacity = particle.options.opacity.value,
-        pOpacity = particle.opacity?.value ?? 1,
+        pOpacity = particle.opacity?.value ?? defaultOpacity,
         opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
       if (opacity !== undefined) {
         particle.bubble.opacity = opacity;
@@ -7128,9 +7340,9 @@ class Bubbler extends ExternalInteractorBase {
         bubbleDistance = container.retina.bubbleModeDistance,
         particlesParam = data.particlesObj.optValue,
         pObjBubble = data.bubbleObj.value,
-        pObj = data.particlesObj.value || 0,
+        pObj = data.particlesObj.value ?? defaultBubbleValue,
         type = data.type;
-      if (!bubbleDistance || bubbleDistance < 0 || bubbleParam === particlesParam) {
+      if (!bubbleDistance || bubbleDistance < Bubbler_minDistance || bubbleParam === particlesParam) {
         return;
       }
       if (!container.bubble) {
@@ -7178,10 +7390,10 @@ class Bubbler extends ExternalInteractorBase {
         const elem = item,
           pxRatio = container.retina.pixelRatio,
           pos = {
-            x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-            y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+            x: (elem.offsetLeft + elem.offsetWidth * Bubbler_half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * Bubbler_half) * pxRatio
           },
-          repulseRadius = elem.offsetWidth / 2 * pxRatio,
+          repulseRadius = elem.offsetWidth * Bubbler_half * pxRatio,
           area = div.type === "circle" ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
           query = container.particles.quadTree.query(area, p => this.isEnabled(p));
         for (const particle of query) {
@@ -7195,9 +7407,9 @@ class Bubbler extends ExternalInteractorBase {
             this.clear(particle, delta, true);
             particle.bubble.div = elem;
           }
-          this._hoverBubbleSize(particle, 1, divBubble);
-          this._hoverBubbleOpacity(particle, 1, divBubble);
-          this._hoverBubbleColor(particle, 1, divBubble);
+          this._hoverBubbleSize(particle, Bubbler_defaultRatio, divBubble);
+          this._hoverBubbleOpacity(particle, Bubbler_defaultRatio, divBubble);
+          this._hoverBubbleColor(particle, Bubbler_defaultRatio, divBubble);
         }
       });
     };
@@ -7251,6 +7463,7 @@ class Bubbler extends ExternalInteractorBase {
     } else {
       divModeExecute(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -7263,7 +7476,7 @@ class Bubbler extends ExternalInteractorBase {
         onHover
       } = events,
       divBubble = isDivModeEnabled(bubbleMode, onDiv);
-    if (!(divBubble || onHover.enable && mouse.position || onClick.enable && mouse.clickPosition)) {
+    if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {
       return false;
     }
     return isInArray(bubbleMode, onHover.mode) || isInArray(bubbleMode, onClick.mode) || divBubble;
@@ -7328,6 +7541,9 @@ class Connect {
 }
 ;// CONCATENATED MODULE: ../../interactions/external/connect/dist/browser/Utils.js
 
+const gradientMin = 0,
+  gradientMax = 1,
+  defaultLinksWidth = 0;
 function gradient(context, p1, p2, opacity) {
   const gradStop = Math.floor(p2.getRadius() / p1.getRadius()),
     color1 = p1.getFillColor(),
@@ -7339,9 +7555,9 @@ function gradient(context, p1, p2, opacity) {
     destPos = p2.getPosition(),
     midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()),
     grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
-  grad.addColorStop(0, getStyleFromHsl(color1, opacity));
-  grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
-  grad.addColorStop(1, getStyleFromHsl(color2, opacity));
+  grad.addColorStop(gradientMin, getStyleFromHsl(color1, opacity));
+  grad.addColorStop(clamp(gradStop, gradientMin, gradientMax), getStyleFromRgb(midRgb, opacity));
+  grad.addColorStop(gradientMax, getStyleFromHsl(color2, opacity));
   return grad;
 }
 function drawConnectLine(context, width, lineStyle, begin, end) {
@@ -7366,14 +7582,15 @@ function drawConnection(container, p1, p2) {
     }
     const pos1 = p1.getPosition(),
       pos2 = p2.getPosition();
-    drawConnectLine(ctx, p1.retina.linksWidth ?? 0, ls, pos1, pos2);
+    drawConnectLine(ctx, p1.retina.linksWidth ?? defaultLinksWidth, ls, pos1, pos2);
   });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/connect/dist/browser/Connector.js
 
 
 
-const connectMode = "connect";
+const connectMode = "connect",
+  Connector_minDistance = 0;
 class Connector extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -7392,27 +7609,31 @@ class Connector extends ExternalInteractorBase {
     const container = this.container,
       options = container.actualOptions;
     if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-      const mousePos = container.interactivity.mouse.position;
-      if (!container.retina.connectModeDistance || container.retina.connectModeDistance < 0 || !container.retina.connectModeRadius || container.retina.connectModeRadius < 0 || !mousePos) {
+      const mousePos = container.interactivity.mouse.position,
+        {
+          connectModeDistance,
+          connectModeRadius
+        } = container.retina;
+      if (!connectModeDistance || connectModeDistance < Connector_minDistance || !connectModeRadius || connectModeRadius < Connector_minDistance || !mousePos) {
         return;
       }
-      const distance = Math.abs(container.retina.connectModeRadius),
+      const distance = Math.abs(connectModeRadius),
         query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
-      let i = 0;
-      for (const p1 of query) {
-        const pos1 = p1.getPosition();
-        for (const p2 of query.slice(i + 1)) {
+      query.forEach((p1, i) => {
+        const pos1 = p1.getPosition(),
+          indexOffset = 1;
+        for (const p2 of query.slice(i + indexOffset)) {
           const pos2 = p2.getPosition(),
-            distMax = Math.abs(container.retina.connectModeDistance),
+            distMax = Math.abs(connectModeDistance),
             xDiff = Math.abs(pos1.x - pos2.x),
             yDiff = Math.abs(pos1.y - pos2.y);
           if (xDiff < distMax && yDiff < distMax) {
             drawConnection(container, p1, p2);
           }
         }
-        ++i;
-      }
+      });
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -7487,6 +7708,7 @@ class Grab {
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/browser/Utils.js
 
+const defaultWidth = 0;
 function drawGrabLine(context, width, begin, end, colorLine, opacity) {
   drawLine(context, begin, end);
   context.strokeStyle = getStyleFromRgb(colorLine, opacity);
@@ -7496,14 +7718,16 @@ function drawGrabLine(context, width, begin, end, colorLine, opacity) {
 function drawGrab(container, particle, lineColor, opacity, mousePos) {
   container.canvas.draw(ctx => {
     const beginPos = particle.getPosition();
-    drawGrabLine(ctx, particle.retina.linksWidth ?? 0, beginPos, mousePos, lineColor, opacity);
+    drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity);
   });
 }
 ;// CONCATENATED MODULE: ../../interactions/external/grab/dist/browser/Grabber.js
 
 
 
-const grabMode = "grab";
+const grabMode = "grab",
+  Grabber_minDistance = 0,
+  minOpacity = 0;
 class Grabber extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -7529,7 +7753,7 @@ class Grabber extends ExternalInteractorBase {
       return;
     }
     const distance = container.retina.grabModeDistance;
-    if (!distance || distance < 0) {
+    if (!distance || distance < Grabber_minDistance) {
       return;
     }
     const query = container.particles.quadTree.queryCircle(mousePos, distance, p => this.isEnabled(p));
@@ -7542,7 +7766,7 @@ class Grabber extends ExternalInteractorBase {
       const grabLineOptions = interactivity.modes.grab.links,
         lineOpacity = grabLineOptions.opacity,
         opacityLine = lineOpacity - pointDistance * lineOpacity / distance;
-      if (opacityLine <= 0) {
+      if (opacityLine <= minOpacity) {
         continue;
       }
       const optColor = grabLineOptions.color ?? particle.options.links?.color;
@@ -7556,6 +7780,7 @@ class Grabber extends ExternalInteractorBase {
       }
       drawGrab(container, particle, colorLine, opacityLine, mousePos);
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -7643,7 +7868,8 @@ class Push {
 ;// CONCATENATED MODULE: ../../interactions/external/push/dist/browser/Pusher.js
 
 
-const pushMode = "push";
+const pushMode = "push",
+  minQuantity = 0;
 class Pusher extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -7658,7 +7884,7 @@ class Pusher extends ExternalInteractorBase {
         return;
       }
       const quantity = getRangeValue(pushOptions.quantity);
-      if (quantity <= 0) {
+      if (quantity <= minQuantity) {
         return;
       }
       const group = itemFromArray([undefined, ...pushOptions.groups]),
@@ -7816,7 +8042,15 @@ class Repulse extends RepulseBase {
 ;// CONCATENATED MODULE: ../../interactions/external/repulse/dist/browser/Repulser.js
 
 
-const repulseMode = "repulse";
+const repulseMode = "repulse",
+  Repulser_minDistance = 0,
+  repulseRadiusFactor = 6,
+  repulseRadiusPower = 3,
+  squarePower = 2,
+  Repulser_minRadius = 0,
+  minSpeed = 0,
+  easingOffset = 1,
+  Repulser_half = 0.5;
 class Repulser extends ExternalInteractorBase {
   constructor(engine, container) {
     super(container);
@@ -7826,7 +8060,7 @@ class Repulser extends ExternalInteractorBase {
       if (!repulseOptions) {
         return;
       }
-      const repulse = container.repulse || {
+      const repulse = container.repulse ?? {
         particles: []
       };
       if (!repulse.finish) {
@@ -7840,10 +8074,10 @@ class Repulser extends ExternalInteractorBase {
       }
       if (repulse.clicking) {
         const repulseDistance = container.retina.repulseModeDistance;
-        if (!repulseDistance || repulseDistance < 0) {
+        if (!repulseDistance || repulseDistance < Repulser_minDistance) {
           return;
         }
-        const repulseRadius = Math.pow(repulseDistance / 6, 3),
+        const repulseRadius = Math.pow(repulseDistance / repulseRadiusFactor, repulseRadiusPower),
           mouseClickPos = container.interactivity.mouse.clickPosition;
         if (mouseClickPos === undefined) {
           return;
@@ -7856,7 +8090,7 @@ class Repulser extends ExternalInteractorBase {
               dy,
               distance
             } = getDistances(mouseClickPos, particle.position),
-            d = distance ** 2,
+            d = distance ** squarePower,
             velocity = repulseOptions.speed,
             force = -repulseRadius * velocity / d;
           if (d <= repulseRadius) {
@@ -7877,7 +8111,7 @@ class Repulser extends ExternalInteractorBase {
       const container = this.container,
         mousePos = container.interactivity.mouse.position,
         repulseRadius = container.retina.repulseModeDistance;
-      if (!repulseRadius || repulseRadius < 0 || !mousePos) {
+      if (!repulseRadius || repulseRadius < Repulser_minRadius || !mousePos) {
         return;
       }
       this._processRepulse(mousePos, repulseRadius, new Circle(mousePos.x, mousePos.y, repulseRadius));
@@ -7903,8 +8137,8 @@ class Repulser extends ExternalInteractorBase {
             dy,
             distance
           } = getDistances(particle.position, position),
-          repulseFactor = clamp(easingFunc(1 - distance / repulseRadius) * velocity, 0, maxSpeed),
-          normVec = Vector.create(distance === 0 ? velocity : dx / distance * repulseFactor, distance === 0 ? velocity : dy / distance * repulseFactor);
+          repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed),
+          normVec = Vector.create(!distance ? velocity : dx / distance * repulseFactor, !distance ? velocity : dy / distance * repulseFactor);
         particle.position.addTo(normVec);
       }
     };
@@ -7922,10 +8156,10 @@ class Repulser extends ExternalInteractorBase {
         const elem = item,
           pxRatio = container.retina.pixelRatio,
           pos = {
-            x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
-            y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio
+            x: (elem.offsetLeft + elem.offsetWidth * Repulser_half) * pxRatio,
+            y: (elem.offsetTop + elem.offsetHeight * Repulser_half) * pxRatio
           },
-          repulseRadius = elem.offsetWidth / 2 * pxRatio,
+          repulseRadius = elem.offsetWidth * Repulser_half * pxRatio,
           area = div.type === "circle" ? new Circle(pos.x, pos.y, repulseRadius) : new Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio),
           divs = repulse.divs,
           divRepulse = divMode(divs, elem);
@@ -7965,7 +8199,7 @@ class Repulser extends ExternalInteractorBase {
           return;
         }
         repulse.clicking = false;
-      }, repulseOpts.duration * 1000);
+      }, repulseOpts.duration * millisecondsToSeconds);
     };
   }
   clear() {}
@@ -7996,6 +8230,7 @@ class Repulser extends ExternalInteractorBase {
     } else {
       divModeExecute(repulseMode, divs, (selector, div) => this._singleSelectorRepulse(selector, div));
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     const container = this.container,
@@ -8006,7 +8241,7 @@ class Repulser extends ExternalInteractorBase {
       hover = events.onHover,
       click = events.onClick,
       divRepulse = isDivModeEnabled(repulseMode, divs);
-    if (!(divRepulse || hover.enable && mouse.position || click.enable && mouse.clickPosition)) {
+    if (!(divRepulse || hover.enable && !!mouse.position || click.enable && mouse.clickPosition)) {
       return false;
     }
     const hoverMode = hover.mode,
@@ -8055,7 +8290,8 @@ class Slow {
 ;// CONCATENATED MODULE: ../../interactions/external/slow/dist/browser/Slower.js
 
 
-const slowMode = "slow";
+const slowMode = "slow",
+  Slower_minRadius = 0;
 class Slower extends ExternalInteractorBase {
   constructor(container) {
     super(container);
@@ -8096,7 +8332,7 @@ class Slower extends ExternalInteractorBase {
       mousePos = container.interactivity.mouse.position,
       radius = container.retina.slowModeRadius,
       slowOptions = options.interactivity.modes.slow;
-    if (!slowOptions || !radius || radius < 0 || !mousePos) {
+    if (!slowOptions || !radius || radius < Slower_minRadius || !mousePos) {
       return;
     }
     const particlePos = particle.getPosition(),
@@ -8138,32 +8374,39 @@ class ByteStream {
     return this.data[this.pos++];
   }
   nextTwoBytes() {
-    this.pos += 2;
-    return this.data[this.pos - 2] + (this.data[this.pos - 1] << 8);
+    const increment = 2,
+      previous = 1,
+      shift = 8;
+    this.pos += increment;
+    return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
   }
   readSubBlocks() {
     let blockString = "",
       size = 0;
+    const minCount = 0,
+      emptySize = 0;
     do {
       size = this.data[this.pos++];
-      for (let count = size; --count >= 0; blockString += String.fromCharCode(this.data[this.pos++])) {}
-    } while (size !== 0);
+      for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {}
+    } while (size !== emptySize);
     return blockString;
   }
   readSubBlocksBin() {
     let size = 0,
       len = 0;
-    for (let offset = 0; (size = this.data[this.pos + offset]) !== 0; offset += size + 1) {
+    const emptySize = 0,
+      increment = 1;
+    for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
       len += size;
     }
     const blockData = new Uint8Array(len);
-    for (let i = 0; (size = this.data[this.pos++]) !== 0;) {
-      for (let count = size; --count >= 0; blockData[i++] = this.data[this.pos++]) {}
+    for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+      for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {}
     }
     return blockData;
   }
   skipSubBlocks() {
-    for (; this.data[this.pos] !== 0; this.pos += this.data[this.pos] + 1) {}
+    for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {}
     this.pos++;
   }
 }
@@ -8182,7 +8425,7 @@ function parseColorTable(byteStream, count) {
   }
   return colors;
 }
-async function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
   switch (byteStream.nextByte()) {
     case 249:
       {
@@ -8264,11 +8507,19 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
       g,
       b
     } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
+    if (index !== getTransparencyIndex(null)) {
+      return {
+        r,
+        g,
+        b,
+        a: 255
+      };
+    }
     return {
       r,
       g,
       b,
-      a: index === getTransparencyIndex(null) ? avgAlpha ? ~~((r + g + b) / 3) : 0 : 255
+      a: avgAlpha ? ~~((r + g + b) / 3) : 0
     };
   };
   const image = (() => {
@@ -8297,7 +8548,10 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
   if (interlacedFlag) {
     for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
       if (InterlaceOffsets[pass] < frame.height) {
-        for (let pixelPos = 0, lineIndex = 0;;) {
+        let pixelPos = 0,
+          lineIndex = 0,
+          exit = false;
+        while (!exit) {
           const last = code;
           code = readBits(pos, size);
           pos += size + 1;
@@ -8313,13 +8567,13 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
             } else if (last !== clearCode) {
               dic.push(dic[last].concat(dic[code][0]));
             }
-            for (let i = 0; i < dic[code].length; i++) {
+            for (const item of dic[code]) {
               const {
                 r,
                 g,
                 b,
                 a
-              } = getColor(dic[code][i]);
+              } = getColor(item);
               image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width + InterlaceSteps[pass] * lineIndex + pixelPos % (frame.width * 4));
               pixelPos += 4;
             }
@@ -8330,7 +8584,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
           if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
             lineIndex++;
             if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
-              break;
+              exit = true;
             }
           }
         }
@@ -8346,7 +8600,13 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
     frame.image = image;
     frame.bitmap = await createImageBitmap(image);
   } else {
-    for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pixelPos = -4;;) {
+    let code = 0,
+      size = minCodeSize + 1,
+      pos = 0,
+      pixelPos = -4,
+      exit = false;
+    const dic = [[0]];
+    while (!exit) {
       const last = code;
       code = readBits(pos, size);
       pos += size;
@@ -8358,6 +8618,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         }
       } else {
         if (code === clearCode + 1) {
+          exit = true;
           break;
         }
         if (code >= dic.length) {
@@ -8365,13 +8626,13 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         } else if (last !== clearCode) {
           dic.push(dic[last].concat(dic[code][0]));
         }
-        for (let i = 0; i < dic[code].length; i++) {
+        for (const item of dic[code]) {
           const {
             r,
             g,
             b,
             a
-          } = getColor(dic[code][i]);
+          } = getColor(item);
           image.data.set([r, g, b, a], pixelPos += 4);
         }
         if (dic.length >= 1 << size && size < 0xc) {
@@ -8398,7 +8659,7 @@ async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTranspare
       await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
       break;
     case 33:
-      await parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+      parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
       break;
     default:
       throw new EvalError("undefined block found");
@@ -8539,6 +8800,9 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
 ;// CONCATENATED MODULE: ../../shapes/image/dist/browser/Utils.js
 
 
+const stringStart = 0,
+  defaultLoopCount = 0,
+  Utils_defaultOpacity = 1;
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
 function replaceColorSvg(imageShape, color, opacity) {
   const {
@@ -8552,7 +8816,7 @@ function replaceColorSvg(imageShape, color, opacity) {
     return svgData.replace(currentColorRegex, () => colorStyle);
   }
   const preFillIndex = svgData.indexOf(">");
-  return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+  return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
 async function loadImage(image) {
   return new Promise(resolve => {
@@ -8581,8 +8845,8 @@ async function loadGifImage(image) {
   image.loading = true;
   try {
     image.gifData = await decodeGIF(image.source);
-    image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? 0;
-    if (image.gifLoopCount === 0) {
+    image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? defaultLoopCount;
+    if (!image.gifLoopCount) {
       image.gifLoopCount = Infinity;
     }
   } catch {
@@ -8606,7 +8870,7 @@ async function downloadSvgImage(image) {
   image.loading = false;
 }
 function replaceImageColor(image, imageData, color, particle) {
-  const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1),
+  const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? Utils_defaultOpacity),
     imageRes = {
       color,
       gif: imageData.gif,
@@ -8632,7 +8896,7 @@ function replaceImageColor(image, imageData, color, particle) {
       resolve(imageRes);
       domUrl.revokeObjectURL(url);
     });
-    img.addEventListener("error", async () => {
+    const errorHandler = async () => {
       domUrl.revokeObjectURL(url);
       const img2 = {
         ...image,
@@ -8643,13 +8907,27 @@ function replaceImageColor(image, imageData, color, particle) {
       imageRes.loaded = true;
       imageRes.element = img2.element;
       resolve(imageRes);
-    });
+    };
+    img.addEventListener("error", () => void errorHandler());
     img.src = url;
   });
 }
 ;// CONCATENATED MODULE: ../../shapes/image/dist/browser/ImageDrawer.js
 
 
+const ImageDrawer_origin = {
+    x: 0,
+    y: 0
+  },
+  ImageDrawer_defaultLoopCount = 0,
+  defaultFrame = 0,
+  ImageDrawer_half = 0.5,
+  initialTime = 0,
+  firstIndex = 0,
+  ImageDrawer_double = 2,
+  defaultAlpha = 1,
+  ImageDrawer_sides = 12,
+  ImageDrawer_defaultRatio = 1;
 class ImageDrawer {
   constructor(engine) {
     this.loadImageShape = async imageShape => {
@@ -8693,18 +8971,18 @@ class ImageDrawer {
       }
       offscreenContext.imageSmoothingQuality = "low";
       offscreenContext.imageSmoothingEnabled = false;
-      offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+      offscreenContext.clearRect(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
       if (particle.gifLoopCount === undefined) {
-        particle.gifLoopCount = image.gifLoopCount ?? 0;
+        particle.gifLoopCount = image.gifLoopCount ?? ImageDrawer_defaultLoopCount;
       }
-      let frameIndex = particle.gifFrame ?? 0;
+      let frameIndex = particle.gifFrame ?? defaultFrame;
       const pos = {
-          x: -image.gifData.width * 0.5,
-          y: -image.gifData.height * 0.5
+          x: -image.gifData.width * ImageDrawer_half,
+          y: -image.gifData.height * ImageDrawer_half
         },
         frame = image.gifData.frames[frameIndex];
       if (particle.gifTime === undefined) {
-        particle.gifTime = 0;
+        particle.gifTime = initialTime;
       }
       if (!frame.bitmap) {
         return;
@@ -8718,7 +8996,7 @@ class ImageDrawer {
         case 0:
           offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
           context.drawImage(offscreenCanvas, pos.x, pos.y);
-          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+          offscreenContext.clearRect(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
           break;
         case 1:
           offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
@@ -8727,20 +9005,20 @@ class ImageDrawer {
         case 2:
           offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
           context.drawImage(offscreenCanvas, pos.x, pos.y);
-          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-          if (image.gifData.globalColorTable.length === 0) {
-            offscreenContext.putImageData(image.gifData.frames[0].image, pos.x + frame.left, pos.y + frame.top);
+          offscreenContext.clearRect(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
+          if (!image.gifData.globalColorTable.length) {
+            offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
           } else {
             offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
           }
           break;
         case 3:
           {
-            const previousImageData = offscreenContext.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+            const previousImageData = offscreenContext.getImageData(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
             offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
             context.drawImage(offscreenCanvas, pos.x, pos.y);
-            offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-            offscreenContext.putImageData(previousImageData, 0, 0);
+            offscreenContext.clearRect(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            offscreenContext.putImageData(previousImageData, ImageDrawer_origin.x, ImageDrawer_origin.y);
           }
           break;
       }
@@ -8748,11 +9026,11 @@ class ImageDrawer {
       if (particle.gifTime > frame.delayTime) {
         particle.gifTime -= frame.delayTime;
         if (++frameIndex >= image.gifData.frames.length) {
-          if (--particle.gifLoopCount <= 0) {
+          if (--particle.gifLoopCount <= ImageDrawer_defaultLoopCount) {
             return;
           }
-          frameIndex = 0;
-          offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+          frameIndex = firstIndex;
+          offscreenContext.clearRect(ImageDrawer_origin.x, ImageDrawer_origin.y, offscreenCanvas.width, offscreenCanvas.height);
         }
         particle.gifFrame = frameIndex;
       }
@@ -8763,13 +9041,13 @@ class ImageDrawer {
           x: -radius,
           y: -radius
         },
-        diameter = radius * 2;
+        diameter = radius * ImageDrawer_double;
       context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
     }
-    context.globalAlpha = 1;
+    context.globalAlpha = defaultAlpha;
   }
   getSidesCount() {
-    return 12;
+    return ImageDrawer_sides;
   }
   async init(container) {
     const options = container.actualOptions;
@@ -8793,7 +9071,7 @@ class ImageDrawer {
     }
     const image = this._engine.images.find(t => t.name === imageData.name || t.source === imageData.src);
     if (!image) {
-      this.loadImageShape(imageData).then(() => {
+      void this.loadImageShape(imageData).then(() => {
         this.loadShape(particle);
       });
     }
@@ -8822,7 +9100,7 @@ class ImageDrawer {
       });
       return;
     }
-    (async () => {
+    void (async () => {
       let imageRes;
       if (image.svgData && color) {
         imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -8835,7 +9113,7 @@ class ImageDrawer {
           gifData: image.gifData,
           gifLoopCount: image.gifLoopCount,
           loaded: true,
-          ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
+          ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? ImageDrawer_defaultRatio,
           replaceColor: replaceColor,
           source: imageData.src
         };
@@ -8897,7 +9175,7 @@ class ImagePreloaderPlugin {
     return {};
   }
   loadOptions(options, source) {
-    if (!source || !source.preload) {
+    if (!source?.preload) {
       return;
     }
     if (!options.preload) {
@@ -8924,6 +9202,7 @@ class ImagePreloaderPlugin {
 
 
 
+const extLength = 3;
 function addLoadImageToEngine(engine) {
   if (engine.loadImage) {
     return;
@@ -8943,14 +9222,19 @@ function addLoadImageToEngine(engine) {
         gif: data.gif ?? false,
         name: data.name ?? data.src,
         source: data.src,
-        type: data.src.substring(data.src.length - 3),
+        type: data.src.substring(data.src.length - extLength),
         error: false,
         loading: true,
         replaceColor: data.replaceColor,
         ratio: data.width && data.height ? data.width / data.height : undefined
       };
       engine.images.push(image);
-      const imageFunc = data.gif ? loadGifImage : data.replaceColor ? downloadSvgImage : loadImage;
+      let imageFunc;
+      if (data.gif) {
+        imageFunc = loadGifImage;
+      } else {
+        imageFunc = data.replaceColor ? downloadSvgImage : loadImage;
+      }
       await imageFunc(image);
     } catch {
       throw new Error(`${errorPrefix} ${data.name ?? data.src} not found`);
@@ -9020,6 +9304,11 @@ class Life {
 ;// CONCATENATED MODULE: ../../updaters/life/dist/browser/LifeUpdater.js
 
 
+const noTime = 0,
+  LifeUpdater_identity = 1,
+  infiniteValue = -1,
+  noLife = 0,
+  minCanvasSize = 0;
 class LifeUpdater {
   constructor(container) {
     this.container = container;
@@ -9032,20 +9321,20 @@ class LifeUpdater {
       return;
     }
     particle.life = {
-      delay: container.retina.reduceFactor ? getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : getRandom()) / container.retina.reduceFactor * 1000 : 0,
-      delayTime: 0,
-      duration: container.retina.reduceFactor ? getRangeValue(lifeOptions.duration.value) * (lifeOptions.duration.sync ? 1 : getRandom()) / container.retina.reduceFactor * 1000 : 0,
-      time: 0,
+      delay: container.retina.reduceFactor ? getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? LifeUpdater_identity : getRandom()) / container.retina.reduceFactor * millisecondsToSeconds : noTime,
+      delayTime: noTime,
+      duration: container.retina.reduceFactor ? getRangeValue(lifeOptions.duration.value) * (lifeOptions.duration.sync ? LifeUpdater_identity : getRandom()) / container.retina.reduceFactor * millisecondsToSeconds : noTime,
+      time: noTime,
       count: lifeOptions.count
     };
-    if (particle.life.duration <= 0) {
-      particle.life.duration = -1;
+    if (particle.life.duration <= noTime) {
+      particle.life.duration = infiniteValue;
     }
-    if (particle.life.count <= 0) {
-      particle.life.count = -1;
+    if (particle.life.count <= noTime) {
+      particle.life.count = infiniteValue;
     }
     if (particle.life) {
-      particle.spawning = particle.life.delay > 0;
+      particle.spawning = particle.life.delay > noTime;
     }
   }
   isEnabled(particle) {
@@ -9070,47 +9359,47 @@ class LifeUpdater {
       if (life.delayTime >= particle.life.delay) {
         justSpawned = true;
         particle.spawning = false;
-        life.delayTime = 0;
-        life.time = 0;
+        life.delayTime = noTime;
+        life.time = noTime;
       } else {
         return;
       }
     }
-    if (life.duration === -1) {
+    if (life.duration === infiniteValue) {
       return;
     }
     if (particle.spawning) {
       return;
     }
     if (justSpawned) {
-      life.time = 0;
+      life.time = noTime;
     } else {
       life.time += delta.value;
     }
     if (life.time < life.duration) {
       return;
     }
-    life.time = 0;
-    if (particle.life.count > 0) {
+    life.time = noTime;
+    if (particle.life.count > noLife) {
       particle.life.count--;
     }
-    if (particle.life.count === 0) {
+    if (particle.life.count === noLife) {
       particle.destroy();
       return;
     }
     const canvasSize = this.container.canvas.size,
-      widthRange = setRangeValue(0, canvasSize.width),
-      heightRange = setRangeValue(0, canvasSize.width);
+      widthRange = setRangeValue(minCanvasSize, canvasSize.width),
+      heightRange = setRangeValue(minCanvasSize, canvasSize.width);
     particle.position.x = randomInRange(widthRange);
     particle.position.y = randomInRange(heightRange);
     particle.spawning = true;
-    life.delayTime = 0;
-    life.time = 0;
+    life.delayTime = noTime;
+    life.time = noTime;
     particle.reset();
     const lifeOptions = particle.options.life;
     if (lifeOptions) {
-      life.delay = getRangeValue(lifeOptions.delay.value) * 1000;
-      life.duration = getRangeValue(lifeOptions.duration.value) * 1000;
+      life.delay = getRangeValue(lifeOptions.delay.value) * millisecondsToSeconds;
+      life.duration = getRangeValue(lifeOptions.duration.value) * millisecondsToSeconds;
     }
   }
 }
@@ -9120,6 +9409,7 @@ async function loadLifeUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("life", container => new LifeUpdater(container), refresh);
 }
 ;// CONCATENATED MODULE: ../../shapes/line/dist/browser/LineDrawer.js
+const LineDrawer_sides = 1;
 class LineDrawer {
   draw(data) {
     const {
@@ -9127,13 +9417,14 @@ class LineDrawer {
         particle,
         radius
       } = data,
-      shapeData = particle.shapeData;
-    context.moveTo(-radius / 2, 0);
-    context.lineTo(radius / 2, 0);
+      shapeData = particle.shapeData,
+      centerY = 0;
+    context.moveTo(-radius, centerY);
+    context.lineTo(radius, centerY);
     context.lineCap = shapeData?.cap ?? "butt";
   }
   getSidesCount() {
-    return 1;
+    return LineDrawer_sides;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/line/dist/browser/index.js
@@ -9143,6 +9434,7 @@ async function loadLineShape(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../move/parallax/dist/browser/ParallaxMover.js
 
+const ParallaxMover_half = 0.5;
 class ParallaxMover {
   init() {}
   isEnabled(particle) {
@@ -9162,8 +9454,8 @@ class ParallaxMover {
     }
     const canvasSize = container.canvas.size,
       canvasCenter = {
-        x: canvasSize.width * 0.5,
-        y: canvasSize.height * 0.5
+        x: canvasSize.width * ParallaxMover_half,
+        y: canvasSize.height * ParallaxMover_half
       },
       parallaxSmooth = parallaxOptions.smooth,
       factor = particle.getRadius() / parallaxForce,
@@ -9185,6 +9477,8 @@ async function loadParallaxMover(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/attract/dist/browser/Attractor.js
 
+const attractFactor = 1000,
+  browser_Attractor_identity = 1;
 class Attractor_Attractor extends ParticlesInteractorBase {
   constructor(container) {
     super(container);
@@ -9209,15 +9503,16 @@ class Attractor_Attractor extends ParticlesInteractorBase {
           dy
         } = getDistances(pos1, pos2),
         rotate = p1.options.move.attract.rotate,
-        ax = dx / (rotate.x * 1000),
-        ay = dy / (rotate.y * 1000),
+        ax = dx / (rotate.x * attractFactor),
+        ay = dy / (rotate.y * attractFactor),
         p1Factor = p2.size.value / p1.size.value,
-        p2Factor = 1 / p1Factor;
+        p2Factor = browser_Attractor_identity / p1Factor;
       p1.velocity.x -= ax * p1Factor;
       p1.velocity.y -= ay * p1Factor;
       p2.velocity.x += ax * p2Factor;
       p2.velocity.y += ay * p2Factor;
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     return particle.options.move.attract.enable;
@@ -9231,9 +9526,12 @@ async function loadParticlesAttractInteraction(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/browser/Absorb.js
 
+const Absorb_half = 0.5,
+  absorbFactor = 10,
+  minAbsorbFactor = 0;
 function updateAbsorb(p1, r1, p2, r2, delta, pixelRatio) {
-  const factor = clamp(p1.options.collisions.absorb.speed * delta.factor / 10, 0, r2);
-  p1.size.value += factor / 2;
+  const factor = clamp(p1.options.collisions.absorb.speed * delta.factor / absorbFactor, minAbsorbFactor, r2);
+  p1.size.value += factor * Absorb_half;
   p2.size.value -= factor;
   if (r2 <= pixelRatio) {
     p2.size.value = 0;
@@ -9311,6 +9609,7 @@ function resolveCollision(p1, p2, delta, pixelRatio) {
 ;// CONCATENATED MODULE: ../../interactions/particles/collisions/dist/browser/Collider.js
 
 
+const Collider_double = 2;
 class Collider extends ParticlesInteractorBase {
   constructor(container) {
     super(container);
@@ -9324,7 +9623,7 @@ class Collider extends ParticlesInteractorBase {
     const container = this.container,
       pos1 = p1.getPosition(),
       radius1 = p1.getRadius(),
-      query = container.particles.quadTree.queryCircle(pos1, radius1 * 2);
+      query = container.particles.quadTree.queryCircle(pos1, radius1 * Collider_double);
     for (const p2 of query) {
       if (p1 === p2 || !p2.options.collisions.enable || p1.options.collisions.mode !== p2.options.collisions.mode || p2.destroyed || p2.spawning) {
         continue;
@@ -9341,6 +9640,7 @@ class Collider extends ParticlesInteractorBase {
       }
       resolveCollision(p1, p2, delta, container.retina.pixelRatio);
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     return particle.options.collisions.enable;
@@ -9354,6 +9654,7 @@ async function loadParticlesCollisionsInteraction(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/browser/CircleWarp.js
 
+const CircleWarp_double = 2;
 class CircleWarp extends Circle {
   constructor(x, y, radius, canvasSize) {
     super(x, y, radius);
@@ -9393,10 +9694,10 @@ class CircleWarp extends Circle {
         y: range.position.y - this.canvasSize.height
       };
     if (circle.radius !== undefined) {
-      const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * 2);
+      const biggerCircle = new Circle(newPos.x, newPos.y, circle.radius * CircleWarp_double);
       return super.intersects(biggerCircle);
     } else if (rect.size !== undefined) {
-      const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * 2, rect.size.height * 2);
+      const rectSW = new Rectangle(newPos.x, newPos.y, rect.size.width * CircleWarp_double, rect.size.height * CircleWarp_double);
       return super.intersects(rectSW);
     }
     return false;
@@ -9508,6 +9809,13 @@ class Links {
 
 
 
+const Linker_squarePower = 2,
+  opacityOffset = 1,
+  Linker_origin = {
+    x: 0,
+    y: 0
+  },
+  Linker_minDistance = 0;
 function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
   const {
     dx,
@@ -9525,7 +9833,7 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
       x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
       y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)
     };
-  return Math.sqrt(warpDistances.x ** 2 + warpDistances.y ** 2);
+  return Math.sqrt(warpDistances.x ** Linker_squarePower + warpDistances.y ** Linker_squarePower);
 }
 class Linker extends ParticlesInteractorBase {
   constructor(container) {
@@ -9563,12 +9871,12 @@ class Linker extends ParticlesInteractorBase {
     const pos1 = p1.getPosition(),
       container = this.container,
       canvasSize = container.canvas.size;
-    if (pos1.x < 0 || pos1.y < 0 || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+    if (pos1.x < Linker_origin.x || pos1.y < Linker_origin.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
       return;
     }
     const linkOpt1 = p1.options.links,
       optOpacity = linkOpt1.opacity,
-      optDistance = p1.retina.linksDistance ?? 0,
+      optDistance = p1.retina.linksDistance ?? Linker_minDistance,
       warp = linkOpt1.warp,
       range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance),
       query = container.particles.quadTree.query(range);
@@ -9578,20 +9886,21 @@ class Linker extends ParticlesInteractorBase {
         continue;
       }
       const pos2 = p2.getPosition();
-      if (pos2.x < 0 || pos2.y < 0 || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+      if (pos2.x < Linker_origin.x || pos2.y < Linker_origin.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
         continue;
       }
       const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
       if (distance > optDistance) {
         continue;
       }
-      const opacityLine = (1 - distance / optDistance) * optOpacity;
+      const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
       this._setColor(p1);
       p1.links.push({
         destination: p2,
         opacity: opacityLine
       });
     }
+    await Promise.resolve();
   }
   isEnabled(particle) {
     return !!particle.options.links?.enable;
@@ -9751,6 +10060,10 @@ function setLinkFrequency(particles, dictionary) {
 ;// CONCATENATED MODULE: ../../interactions/particles/links/dist/browser/LinkInstance.js
 
 
+const LinkInstance_minOpacity = 0,
+  minWidth = 0,
+  LinkInstance_minDistance = 0,
+  LinkInstance_half = 0.5;
 class LinkInstance {
   constructor(container) {
     this.container = container;
@@ -9784,8 +10097,8 @@ class LinkInstance {
         if (!colorLine) {
           return;
         }
-        const width = p1.retina.linksWidth ?? 0,
-          maxDistance = p1.retina.linksDistance ?? 0,
+        const width = p1.retina.linksWidth ?? minWidth,
+          maxDistance = p1.retina.linksDistance ?? LinkInstance_minDistance,
           {
             backgroundMask
           } = options;
@@ -9816,15 +10129,15 @@ class LinkInstance {
         options = container.actualOptions,
         p2 = link1.destination,
         p3 = link2.destination,
-        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) / 2;
-      if (opacityTriangle <= 0) {
+        opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * LinkInstance_half;
+      if (opacityTriangle <= LinkInstance_minOpacity) {
         return;
       }
       container.canvas.draw(ctx => {
         const pos1 = p1.getPosition(),
           pos2 = p2.getPosition(),
           pos3 = p3.getPosition(),
-          linksDistance = p1.retina.linksDistance ?? 0;
+          linksDistance = p1.retina.linksDistance ?? LinkInstance_minDistance;
         if (getDistance(pos1, pos2) > linksDistance || getDistance(pos3, pos2) > linksDistance || getDistance(pos3, pos1) > linksDistance) {
           return;
         }
@@ -9853,8 +10166,9 @@ class LinkInstance {
         return;
       }
       const vertices = p2.links?.filter(t => {
-        const linkFreq = this._getLinkFrequency(p2, t.destination);
-        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= 0;
+        const linkFreq = this._getLinkFrequency(p2, t.destination),
+          minCount = 0;
+        return p2.options.links && linkFreq <= p2.options.links.frequency && p1Links.findIndex(l => l.destination === t.destination) >= minCount;
       });
       if (!vertices?.length) {
         return;
@@ -9884,13 +10198,13 @@ class LinkInstance {
       links,
       options
     } = particle;
-    if (!links || links.length <= 0) {
+    if (!links?.length) {
       return;
     }
     const p1Links = links.filter(l => options.links && this._getLinkFrequency(particle, l.destination) <= options.links.frequency);
     for (const link of p1Links) {
       this._drawTriangles(options, particle, link, p1Links);
-      if (link.opacity > 0 && (particle.retina.linksWidth ?? 0) > 0) {
+      if (link.opacity > LinkInstance_minOpacity && (particle.retina.linksWidth ?? minWidth) > minWidth) {
         this._drawLinkLine(particle, link);
       }
     }
@@ -9898,6 +10212,7 @@ class LinkInstance {
   async init() {
     this._freqs.links = new Map();
     this._freqs.triangles = new Map();
+    await Promise.resolve();
   }
   particleCreated(particle) {
     particle.links = [];
@@ -9952,6 +10267,13 @@ async function loadParticlesLinksInteraction(engine, refresh = true) {
 
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/browser/PolygonDrawerBase.js
 
+const piDeg = 180,
+  PolygonDrawerBase_origin = {
+    x: 0,
+    y: 0
+  },
+  defaultSides = 5,
+  sidesOffset = 2;
 class PolygonDrawerBase {
   draw(data) {
     const {
@@ -9963,32 +10285,35 @@ class PolygonDrawerBase {
       side = this.getSidesData(particle, radius),
       sideCount = side.count.numerator * side.count.denominator,
       decimalSides = side.count.numerator / side.count.denominator,
-      interiorAngleDegrees = 180 * (decimalSides - 2) / decimalSides,
-      interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180;
+      interiorAngleDegrees = piDeg * (decimalSides - sidesOffset) / decimalSides,
+      interiorAngle = Math.PI - degToRad(interiorAngleDegrees);
     if (!context) {
       return;
     }
     context.beginPath();
     context.translate(start.x, start.y);
-    context.moveTo(0, 0);
+    context.moveTo(PolygonDrawerBase_origin.x, PolygonDrawerBase_origin.y);
     for (let i = 0; i < sideCount; i++) {
-      context.lineTo(side.length, 0);
-      context.translate(side.length, 0);
+      context.lineTo(side.length, PolygonDrawerBase_origin.y);
+      context.translate(side.length, PolygonDrawerBase_origin.y);
       context.rotate(interiorAngle);
     }
   }
   getSidesCount(particle) {
     const polygon = particle.shapeData;
-    return Math.round(getRangeValue(polygon?.sides ?? 5));
+    return Math.round(getRangeValue(polygon?.sides ?? defaultSides));
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/browser/PolygonDrawer.js
 
+const sidesCenterFactor = 3.5,
+  yFactor = 2.66,
+  sidesFactor = 3;
 class PolygonDrawer extends PolygonDrawerBase {
   getCenter(particle, radius) {
     return {
-      x: -radius / (particle.sides / 3.5),
-      y: -radius / (2.66 / 3.5)
+      x: -radius / (particle.sides / sidesCenterFactor),
+      y: -radius / (yFactor / sidesCenterFactor)
     };
   }
   getSidesData(particle, radius) {
@@ -9998,29 +10323,33 @@ class PolygonDrawer extends PolygonDrawerBase {
         denominator: 1,
         numerator: sides
       },
-      length: radius * 2.66 / (sides / 3)
+      length: radius * yFactor / (sides / sidesFactor)
     };
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/polygon/dist/browser/TriangleDrawer.js
 
+const TriangleDrawer_yFactor = 1.66,
+  TriangleDrawer_sides = 3,
+  TriangleDrawer_double = 2;
 class TriangleDrawer extends PolygonDrawerBase {
   getCenter(particle, radius) {
     return {
       x: -radius,
-      y: radius / 1.66
+      y: radius / TriangleDrawer_yFactor
     };
   }
   getSidesCount() {
-    return 3;
+    return TriangleDrawer_sides;
   }
   getSidesData(particle, radius) {
+    const diameter = radius * TriangleDrawer_double;
     return {
       count: {
         denominator: 2,
         numerator: 3
       },
-      length: radius * 2
+      length: diameter
     };
   }
 }
@@ -10092,38 +10421,10 @@ class Rotate extends ValueWithRandom {
 ;// CONCATENATED MODULE: ../../updaters/rotate/dist/browser/RotateUpdater.js
 
 
-function updateRotate(particle, delta) {
-  const rotate = particle.rotate,
-    rotateOptions = particle.options.rotate;
-  if (!rotate || !rotateOptions) {
-    return;
-  }
-  const rotateAnimation = rotateOptions.animation,
-    speed = (rotate.velocity ?? 0) * delta.factor,
-    max = 2 * Math.PI,
-    decay = rotate.decay ?? 1;
-  if (!rotateAnimation.enable) {
-    return;
-  }
-  switch (rotate.status) {
-    case "increasing":
-      rotate.value += speed;
-      if (rotate.value > max) {
-        rotate.value -= max;
-      }
-      break;
-    case "decreasing":
-    default:
-      rotate.value -= speed;
-      if (rotate.value < 0) {
-        rotate.value += max;
-      }
-      break;
-  }
-  if (rotate.velocity && decay !== 1) {
-    rotate.velocity *= decay;
-  }
-}
+const RotateUpdater_double = 2,
+  RotateUpdater_doublePI = Math.PI * RotateUpdater_double,
+  RotateUpdater_identity = 1,
+  doublePIDeg = 360;
 class RotateUpdater {
   constructor(container) {
     this.container = container;
@@ -10135,13 +10436,16 @@ class RotateUpdater {
     }
     particle.rotate = {
       enable: rotateOptions.animation.enable,
-      value: getRangeValue(rotateOptions.value) * Math.PI / 180
+      value: degToRad(getRangeValue(rotateOptions.value)),
+      min: 0,
+      max: RotateUpdater_doublePI
     };
     particle.pathRotation = rotateOptions.path;
     let rotateDirection = rotateOptions.direction;
     if (rotateDirection === "random") {
-      const index = Math.floor(getRandom() * 2);
-      rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+      const index = Math.floor(getRandom() * RotateUpdater_double),
+        minIndex = 0;
+      rotateDirection = index > minIndex ? "counter-clockwise" : "clockwise";
     }
     switch (rotateDirection) {
       case "counter-clockwise":
@@ -10154,8 +10458,8 @@ class RotateUpdater {
     }
     const rotateAnimation = rotateOptions.animation;
     if (rotateAnimation.enable) {
-      particle.rotate.decay = 1 - getRangeValue(rotateAnimation.decay);
-      particle.rotate.velocity = getRangeValue(rotateAnimation.speed) / 360 * this.container.retina.reduceFactor;
+      particle.rotate.decay = RotateUpdater_identity - getRangeValue(rotateAnimation.decay);
+      particle.rotate.velocity = getRangeValue(rotateAnimation.speed) / doublePIDeg * this.container.retina.reduceFactor;
       if (!rotateAnimation.sync) {
         particle.rotate.velocity *= getRandom();
       }
@@ -10181,8 +10485,11 @@ class RotateUpdater {
     if (!this.isEnabled(particle)) {
       return;
     }
-    updateRotate(particle, delta);
-    particle.rotation = particle.rotate?.value ?? 0;
+    if (!particle.rotate) {
+      return;
+    }
+    updateAnimation(particle, particle.rotate, false, "none", delta);
+    particle.rotation = particle.rotate.value;
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/rotate/dist/browser/index.js
@@ -10191,7 +10498,10 @@ async function loadRotateUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("rotate", container => new RotateUpdater(container), refresh);
 }
 ;// CONCATENATED MODULE: ../../shapes/square/dist/browser/SquareDrawer.js
-const fixFactor = Math.sqrt(2);
+const fixFactorSquared = 2,
+  fixFactor = Math.sqrt(fixFactorSquared),
+  SquareDrawer_sides = 4,
+  SquareDrawer_double = 2;
 class SquareDrawer {
   draw(data) {
     const {
@@ -10199,11 +10509,11 @@ class SquareDrawer {
         radius
       } = data,
       fixedRadius = radius / fixFactor,
-      fixedDiameter = fixedRadius * 2;
+      fixedDiameter = fixedRadius * SquareDrawer_double;
     context.rect(-fixedRadius, -fixedRadius, fixedDiameter, fixedDiameter);
   }
   getSidesCount() {
-    return 4;
+    return SquareDrawer_sides;
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/square/dist/browser/index.js
@@ -10213,6 +10523,12 @@ async function loadSquareShape(engine, refresh = true) {
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/browser/StarDrawer.js
 
+const defaultInset = 2,
+  StarDrawer_origin = {
+    x: 0,
+    y: 0
+  },
+  StarDrawer_defaultSides = 5;
 class StarDrawer {
   draw(data) {
     const {
@@ -10221,22 +10537,22 @@ class StarDrawer {
         radius
       } = data,
       sides = particle.sides,
-      inset = particle.starInset ?? 2;
-    context.moveTo(0, 0 - radius);
+      inset = particle.starInset ?? defaultInset;
+    context.moveTo(StarDrawer_origin.x, StarDrawer_origin.y - radius);
     for (let i = 0; i < sides; i++) {
       context.rotate(Math.PI / sides);
-      context.lineTo(0, 0 - radius * inset);
+      context.lineTo(StarDrawer_origin.x, StarDrawer_origin.y - radius * inset);
       context.rotate(Math.PI / sides);
-      context.lineTo(0, 0 - radius);
+      context.lineTo(StarDrawer_origin.x, StarDrawer_origin.y - radius);
     }
   }
   getSidesCount(particle) {
     const star = particle.shapeData;
-    return Math.round(getRangeValue(star?.sides ?? 5));
+    return Math.round(getRangeValue(star?.sides ?? StarDrawer_defaultSides));
   }
   particleInit(container, particle) {
     const star = particle.shapeData;
-    particle.starInset = getRangeValue(star?.inset ?? 2);
+    particle.starInset = getRangeValue(star?.inset ?? defaultInset);
   }
 }
 ;// CONCATENATED MODULE: ../../shapes/star/dist/browser/index.js
@@ -10244,81 +10560,9 @@ class StarDrawer {
 async function loadStarShape(engine, refresh = true) {
   await engine.addShape("star", new StarDrawer(), refresh);
 }
-;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/browser/Utils.js
-
-function Utils_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 updateStrokeColor(particle, delta) {
-  if (!particle.strokeColor || !particle.strokeAnimation) {
-    return;
-  }
-  const {
-      h,
-      s,
-      l
-    } = particle.strokeColor,
-    {
-      h: hAnimation,
-      s: sAnimation,
-      l: lAnimation
-    } = particle.strokeAnimation;
-  if (h) {
-    Utils_updateColorValue(delta, h, hAnimation, 360, false);
-  }
-  if (s) {
-    Utils_updateColorValue(delta, s, sAnimation, 100, true);
-  }
-  if (l) {
-    Utils_updateColorValue(delta, l, lAnimation, 100, true);
-  }
-}
 ;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/browser/StrokeColorUpdater.js
 
-
+const StrokeColorUpdater_defaultOpacity = 1;
 class StrokeColorUpdater {
   constructor(container) {
     this.container = container;
@@ -10328,7 +10572,7 @@ class StrokeColorUpdater {
       options = particle.options;
     const stroke = itemFromSingleOrMultiple(options.stroke, particle.id, options.reduceDuplicates);
     particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
-    particle.strokeOpacity = getRangeValue(stroke.opacity ?? 1);
+    particle.strokeOpacity = getRangeValue(stroke.opacity ?? StrokeColorUpdater_defaultOpacity);
     particle.strokeAnimation = stroke.color?.animation;
     const strokeHslColor = rangeColorToHsl(stroke.color) ?? particle.getFillColor();
     if (strokeHslColor) {
@@ -10346,7 +10590,7 @@ class StrokeColorUpdater {
     if (!this.isEnabled(particle)) {
       return;
     }
-    updateStrokeColor(particle, delta);
+    updateColor(particle.strokeColor, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/browser/index.js
@@ -10410,7 +10654,7 @@ async function loadSlim(engine, refresh = true) {
 ;// CONCATENATED MODULE: ./dist/browser/bundle.js
 
 
-loadSlim(tsParticles);
+void loadSlim(tsParticles);
 
 
 /******/ 	return __webpack_exports__;