@tsparticles/fireworks 3.0.2 → 3.1.0

package/tsparticles.fireworks.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),
@@ -172,6 +173,7 @@ __webpack_require__.d(__webpack_exports__, {
   getSize: () => (/* reexport */ getSize),
   getStyleFromHsl: () => (/* reexport */ getStyleFromHsl),
   getStyleFromRgb: () => (/* reexport */ getStyleFromRgb),
+  halfRandom: () => (/* reexport */ halfRandom),
   hasMatchMedia: () => (/* reexport */ hasMatchMedia),
   hslToRgb: () => (/* reexport */ hslToRgb),
   hslaToRgba: () => (/* reexport */ hslaToRgba),
@@ -191,6 +193,7 @@ __webpack_require__.d(__webpack_exports__, {
   loadFont: () => (/* reexport */ loadFont),
   loadOptions: () => (/* reexport */ loadOptions),
   loadParticlesOptions: () => (/* reexport */ loadParticlesOptions),
+  millisecondsToSeconds: () => (/* reexport */ millisecondsToSeconds),
   mix: () => (/* reexport */ mix),
   mouseDownEvent: () => (/* reexport */ mouseDownEvent),
   mouseLeaveEvent: () => (/* reexport */ mouseLeaveEvent),
@@ -200,6 +203,7 @@ __webpack_require__.d(__webpack_exports__, {
   paintBase: () => (/* reexport */ paintBase),
   paintImage: () => (/* reexport */ paintImage),
   parseAlpha: () => (/* reexport */ parseAlpha),
+  percentDenominator: () => (/* reexport */ percentDenominator),
   randomInRange: () => (/* reexport */ randomInRange),
   rangeColorToHsl: () => (/* reexport */ rangeColorToHsl),
   rangeColorToRgb: () => (/* reexport */ rangeColorToRgb),
@@ -220,6 +224,9 @@ __webpack_require__.d(__webpack_exports__, {
   touchMoveEvent: () => (/* reexport */ touchMoveEvent),
   touchStartEvent: () => (/* reexport */ touchStartEvent),
   tsParticles: () => (/* reexport */ tsParticles),
+  updateAnimation: () => (/* reexport */ updateAnimation),
+  updateColor: () => (/* reexport */ updateColor),
+  updateColorValue: () => (/* reexport */ updateColorValue),
   visibilityChangeEvent: () => (/* reexport */ visibilityChangeEvent)
 });
 
@@ -237,9 +244,19 @@ const touchCancelEvent = "touchcancel";
 const resizeEvent = "resize";
 const visibilityChangeEvent = "visibilitychange";
 const errorPrefix = "tsParticles - Error";
+const percentDenominator = 100;
+const halfRandom = 0.5;
+const millisecondsToSeconds = 1000;
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/Vector3d.js
 
 
+const origin = {
+    x: 0,
+    y: 0,
+    z: 0
+  },
+  squareExp = 2,
+  inverseFactorNumerator = 1.0;
 class Vector3d {
   constructor(xOrCoords, y, z) {
     this._updateFromAngle = (angle, length) => {
@@ -250,17 +267,17 @@ class Vector3d {
       this.x = xOrCoords.x;
       this.y = xOrCoords.y;
       const coords3d = xOrCoords;
-      this.z = coords3d.z ? coords3d.z : 0;
+      this.z = coords3d.z ? coords3d.z : origin.z;
     } else if (xOrCoords !== undefined && y !== undefined) {
       this.x = xOrCoords;
       this.y = y;
-      this.z = z ?? 0;
+      this.z = z ?? origin.z;
     } else {
       throw new Error(`${errorPrefix} Vector3d not initialized correctly`);
     }
   }
   static get origin() {
-    return Vector3d.create(0, 0, 0);
+    return Vector3d.create(origin.x, origin.y, origin.z);
   }
   get angle() {
     return Math.atan2(this.y, this.x);
@@ -306,7 +323,7 @@ class Vector3d {
     this.z /= n;
   }
   getLengthSq() {
-    return this.x ** 2 + this.y ** 2;
+    return this.x ** squareExp + this.y ** squareExp;
   }
   mult(n) {
     return Vector3d.create(this.x * n, this.y * n, this.z * n);
@@ -317,19 +334,20 @@ class Vector3d {
     this.z *= n;
   }
   normalize() {
-    const length = this.length;
-    if (length != 0) {
-      this.multTo(1.0 / length);
+    const length = this.length,
+      noLength = 0;
+    if (length != noLength) {
+      this.multTo(inverseFactorNumerator / length);
     }
   }
   rotate(angle) {
-    return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0);
+    return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), origin.z);
   }
   setTo(c) {
     this.x = c.x;
     this.y = c.y;
     const v3d = c;
-    this.z = v3d.z ? v3d.z : 0;
+    this.z = v3d.z ? v3d.z : origin.z;
   }
   sub(v) {
     return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
@@ -342,12 +360,17 @@ class Vector3d {
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Core/Utils/Vector.js
 
+const Vector_origin = {
+  x: 0,
+  y: 0,
+  z: 0
+};
 class Vector extends Vector3d {
   constructor(xOrCoords, y) {
-    super(xOrCoords, y, 0);
+    super(xOrCoords, y, Vector_origin.z);
   }
   static get origin() {
-    return Vector.create(0, 0);
+    return Vector.create(Vector_origin.x, Vector_origin.y);
   }
   static clone(source) {
     return Vector.create(source.x, source.y);
@@ -359,8 +382,11 @@ class Vector extends Vector3d {
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/NumberUtils.js
 
 
+
 let _random = Math.random;
-const easings = new Map();
+const easings = new Map(),
+  NumberUtils_double = 2,
+  doublePI = Math.PI * NumberUtils_double;
 function addEasing(name, easing) {
   if (easings.get(name)) {
     return;
@@ -368,13 +394,15 @@ function addEasing(name, easing) {
   easings.set(name, easing);
 }
 function getEasing(name) {
-  return easings.get(name) || (value => value);
+  return easings.get(name) ?? (value => value);
 }
 function setRandom(rnd = Math.random) {
   _random = rnd;
 }
 function getRandom() {
-  return clamp(_random(), 0, 1 - 1e-16);
+  const min = 0,
+    max = 1;
+  return clamp(_random(), min, max - Number.EPSILON);
 }
 function clamp(num, min, max) {
   return Math.min(Math.max(num, min), max);
@@ -383,10 +411,11 @@ function mix(comp1, comp2, weight1, weight2) {
   return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
 }
 function randomInRange(r) {
-  const max = getRangeMax(r);
+  const max = getRangeMax(r),
+    minOffset = 0;
   let min = getRangeMin(r);
   if (max === min) {
-    min = 0;
+    min = minOffset;
   }
   return getRandom() * (max - min) + min;
 }
@@ -412,43 +441,52 @@ function setRangeValue(source, value) {
 }
 function getDistances(pointA, pointB) {
   const dx = pointA.x - pointB.x,
-    dy = pointA.y - pointB.y;
+    dy = pointA.y - pointB.y,
+    squareExp = 2;
   return {
     dx: dx,
     dy: dy,
-    distance: Math.sqrt(dx ** 2 + dy ** 2)
+    distance: Math.sqrt(dx ** squareExp + dy ** squareExp)
   };
 }
 function getDistance(pointA, pointB) {
   return getDistances(pointA, pointB).distance;
 }
+function degToRad(degrees) {
+  const PIDeg = 180;
+  return degrees * Math.PI / PIDeg;
+}
 function getParticleDirectionAngle(direction, position, center) {
   if (isNumber(direction)) {
-    return direction * Math.PI / 180;
+    return degToRad(direction);
   }
+  const empty = 0,
+    half = 0.5,
+    quarter = 0.25,
+    threeQuarter = half + quarter;
   switch (direction) {
     case "top":
-      return -Math.PI * 0.5;
+      return -Math.PI * half;
     case "top-right":
-      return -Math.PI * 0.25;
+      return -Math.PI * quarter;
     case "right":
-      return 0;
+      return empty;
     case "bottom-right":
-      return Math.PI * 0.25;
+      return Math.PI * quarter;
     case "bottom":
-      return Math.PI * 0.5;
+      return Math.PI * half;
     case "bottom-left":
-      return Math.PI * 0.75;
+      return Math.PI * threeQuarter;
     case "left":
       return Math.PI;
     case "top-left":
-      return -Math.PI * 0.75;
+      return -Math.PI * threeQuarter;
     case "inside":
       return Math.atan2(center.y - position.y, center.x - position.x);
     case "outside":
       return Math.atan2(position.y - center.y, position.x - center.x);
     default:
-      return getRandom() * Math.PI * 2;
+      return getRandom() * doublePI;
   }
 }
 function getParticleBaseVelocity(direction) {
@@ -458,18 +496,19 @@ function getParticleBaseVelocity(direction) {
   return baseVelocity;
 }
 function collisionVelocity(v1, v2, m1, m2) {
-  return Vector.create(v1.x * (m1 - m2) / (m1 + m2) + v2.x * 2 * m2 / (m1 + m2), v1.y);
+  const double = 2;
+  return Vector.create(v1.x * (m1 - m2) / (m1 + m2) + v2.x * double * m2 / (m1 + m2), v1.y);
 }
 function calcPositionFromSize(data) {
-  return data.position && data.position.x !== undefined && data.position.y !== undefined ? {
-    x: data.position.x * data.size.width / 100,
-    y: data.position.y * data.size.height / 100
+  return data.position?.x !== undefined && data.position.y !== undefined ? {
+    x: data.position.x * data.size.width / percentDenominator,
+    y: data.position.y * data.size.height / percentDenominator
   } : undefined;
 }
 function calcPositionOrRandomFromSize(data) {
   return {
-    x: (data.position?.x ?? getRandom() * 100) * data.size.width / 100,
-    y: (data.position?.y ?? getRandom() * 100) * data.size.height / 100
+    x: (data.position?.x ?? getRandom() * percentDenominator) * data.size.width / percentDenominator,
+    y: (data.position?.y ?? getRandom() * percentDenominator) * data.size.height / percentDenominator
   };
 }
 function calcPositionOrRandomFromSizeRanged(data) {
@@ -499,11 +538,16 @@ function calcExactPositionOrRandomFromSizeRanged(data) {
   });
 }
 function parseAlpha(input) {
-  return input ? input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input) : 1;
+  const defaultAlpha = 1;
+  if (!input) {
+    return defaultAlpha;
+  }
+  return input.endsWith("%") ? parseFloat(input) / percentDenominator : parseFloat(input);
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/Utils.js
 
 
+
 const _logger = {
   debug: console.debug,
   error: console.error,
@@ -534,11 +578,13 @@ function rectSideBounce(data) {
       rectOtherSide,
       velocity,
       factor
-    } = data;
+    } = data,
+    half = 0.5,
+    minVelocity = 0;
   if (pOtherSide.min < rectOtherSide.min || pOtherSide.min > rectOtherSide.max || pOtherSide.max < rectOtherSide.min || pOtherSide.max > rectOtherSide.max) {
     return res;
   }
-  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0 || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0) {
+  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * half && velocity > minVelocity || pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * half && velocity < minVelocity) {
     res.velocity = velocity * -factor;
     res.bounced = true;
   }
@@ -575,7 +621,8 @@ function safeMutationObserver(callback) {
   return new MutationObserver(callback);
 }
 function isInArray(value, array) {
-  return value === array || isArray(array) && array.indexOf(value) > -1;
+  const invalidIndex = -1;
+  return value === array || isArray(array) && array.indexOf(value) > invalidIndex;
 }
 async function loadFont(font, weight) {
   try {
@@ -589,7 +636,8 @@ function itemFromArray(array, index, useIndex = true) {
   return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
 }
 function isPointInside(point, size, offset, radius, direction) {
-  return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
+  const minRadius = 0;
+  return areBoundsInside(calculateBounds(point, radius ?? minRadius), size, offset, direction);
 }
 function areBoundsInside(bounds, size, offset, direction) {
   let inside = true;
@@ -686,8 +734,9 @@ function circleBounce(p1, p2) {
     {
       dx: xDist,
       dy: yDist
-    } = getDistances(pos2, pos1);
-  if (xVelocityDiff * xDist + yVelocityDiff * yDist < 0) {
+    } = getDistances(pos2, pos1),
+    minimumDistance = 0;
+  if (xVelocityDiff * xDist + yVelocityDiff * yDist < minimumDistance) {
     return;
   }
   const angle = -Math.atan2(yDist, xDist),
@@ -767,19 +816,24 @@ function rectBounce(particle, divBounds) {
   }
 }
 function executeOnSingleOrMultiple(obj, callback) {
-  return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, 0);
+  const defaultIndex = 0;
+  return isArray(obj) ? obj.map((item, index) => callback(item, index)) : callback(obj, defaultIndex);
 }
 function itemFromSingleOrMultiple(obj, index, useIndex) {
   return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
 }
 function findItemFromSingleOrMultiple(obj, callback) {
-  return isArray(obj) ? obj.find((t, index) => callback(t, index)) : callback(obj, 0) ? obj : undefined;
+  if (isArray(obj)) {
+    return obj.find((t, index) => callback(t, index));
+  }
+  const defaultIndex = 0;
+  return callback(obj, defaultIndex) ? obj : undefined;
 }
 function initParticleNumericAnimationValue(options, pxRatio) {
   const valueRange = options.value,
     animationOptions = options.animation,
     res = {
-      delayTime: getRangeValue(animationOptions.delay) * 1000,
+      delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds,
       enable: animationOptions.enable,
       value: getRangeValue(options.value) * pxRatio,
       max: getRangeMax(valueRange) * pxRatio,
@@ -787,9 +841,10 @@ function initParticleNumericAnimationValue(options, pxRatio) {
       loops: 0,
       maxLoops: getRangeValue(animationOptions.count),
       time: 0
-    };
+    },
+    decayOffset = 1;
   if (animationOptions.enable) {
-    res.decay = 1 - getRangeValue(animationOptions.decay);
+    res.decay = decayOffset - getRangeValue(animationOptions.decay);
     switch (animationOptions.mode) {
       case "increase":
         res.status = "increasing";
@@ -798,7 +853,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
         res.status = "decreasing";
         break;
       case "random":
-        res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+        res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
         break;
     }
     const autoStatus = animationOptions.mode === "auto";
@@ -819,7 +874,7 @@ function initParticleNumericAnimationValue(options, pxRatio) {
       default:
         res.value = randomInRange(res);
         if (autoStatus) {
-          res.status = getRandom() >= 0.5 ? "increasing" : "decreasing";
+          res.status = getRandom() >= halfRandom ? "increasing" : "decreasing";
         }
         break;
     }
@@ -839,13 +894,13 @@ function getPositionOrSize(positionOrSize, canvasSize) {
   const isPosition = ("x" in positionOrSize);
   if (isPosition) {
     return {
-      x: positionOrSize.x / 100 * canvasSize.width,
-      y: positionOrSize.y / 100 * canvasSize.height
+      x: positionOrSize.x / percentDenominator * canvasSize.width,
+      y: positionOrSize.y / percentDenominator * canvasSize.height
     };
   } else {
     return {
-      width: positionOrSize.width / 100 * canvasSize.width,
-      height: positionOrSize.height / 100 * canvasSize.height
+      width: positionOrSize.width / percentDenominator * canvasSize.width,
+      height: positionOrSize.height / percentDenominator * canvasSize.height
     };
   }
 }
@@ -873,9 +928,85 @@ function isObject(arg) {
 function isArray(arg) {
   return Array.isArray(arg);
 }
+function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+  switch (destroyType) {
+    case "max":
+      if (value >= maxValue) {
+        particle.destroy();
+      }
+      break;
+    case "min":
+      if (value <= minValue) {
+        particle.destroy();
+      }
+      break;
+  }
+}
+function updateAnimation(particle, data, changeDirection, destroyType, delta) {
+  const minLoops = 0,
+    minDelay = 0,
+    identity = 1,
+    minVelocity = 0,
+    minDecay = 1;
+  if (particle.destroyed || !data || !data.enable || (data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops)) {
+    return;
+  }
+  const velocity = (data.velocity ?? minVelocity) * delta.factor,
+    minValue = data.min,
+    maxValue = data.max,
+    decay = data.decay ?? minDecay;
+  if (!data.time) {
+    data.time = 0;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    data.time += delta.value;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    return;
+  }
+  switch (data.status) {
+    case "increasing":
+      if (data.value >= maxValue) {
+        if (changeDirection) {
+          data.status = "decreasing";
+        } else {
+          data.value -= maxValue;
+        }
+        if (!data.loops) {
+          data.loops = minLoops;
+        }
+        data.loops++;
+      } else {
+        data.value += velocity;
+      }
+      break;
+    case "decreasing":
+      if (data.value <= minValue) {
+        if (changeDirection) {
+          data.status = "increasing";
+        } else {
+          data.value += maxValue;
+        }
+        if (!data.loops) {
+          data.loops = minLoops;
+        }
+        data.loops++;
+      } else {
+        data.value -= velocity;
+      }
+  }
+  if (data.velocity && decay !== identity) {
+    data.velocity *= decay;
+  }
+  checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+  if (!particle.destroyed) {
+    data.value = clamp(data.value, minValue, maxValue);
+  }
+}
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Utils/ColorUtils.js
 
 
+
 const randomColorValue = "random",
   midColorValue = "mid",
   colorManagers = new Map();
@@ -893,12 +1024,15 @@ function stringToRgba(input) {
       return r + r + g + g + b + b + (a !== undefined ? a + a : "");
     }),
     regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i,
-    result = regex.exec(hexFixed);
+    result = regex.exec(hexFixed),
+    radix = 16,
+    defaultAlpha = 1,
+    alphaFactor = 0xff;
   return result ? {
-    a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1,
-    b: parseInt(result[3], 16),
-    g: parseInt(result[2], 16),
-    r: parseInt(result[1], 16)
+    a: result[4] !== undefined ? parseInt(result[4], radix) / alphaFactor : defaultAlpha,
+    b: parseInt(result[3], radix),
+    g: parseInt(result[2], radix),
+    r: parseInt(result[1], radix)
   } : undefined;
 }
 function rangeColorToRgb(input, index, useIndex = true) {
@@ -954,28 +1088,37 @@ function rangeColorToHsl(color, index, useIndex = true) {
   return rgb ? rgbToHsl(rgb) : undefined;
 }
 function rgbToHsl(color) {
-  const r1 = color.r / 255,
-    g1 = color.g / 255,
-    b1 = color.b / 255,
+  const rgbMax = 255,
+    hMax = 360,
+    sMax = 100,
+    lMax = 100,
+    hMin = 0,
+    sMin = 0,
+    hPhase = 60,
+    half = 0.5,
+    double = 2,
+    r1 = color.r / rgbMax,
+    g1 = color.g / rgbMax,
+    b1 = color.b / rgbMax,
     max = Math.max(r1, g1, b1),
     min = Math.min(r1, g1, b1),
     res = {
-      h: 0,
-      l: (max + min) * 0.5,
-      s: 0
+      h: hMin,
+      l: (max + min) * half,
+      s: sMin
     };
   if (max !== min) {
-    res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
-    res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min);
+    res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
+    res.h = r1 === max ? (g1 - b1) / (max - min) : res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min);
   }
-  res.l *= 100;
-  res.s *= 100;
-  res.h *= 60;
-  if (res.h < 0) {
-    res.h += 360;
+  res.l *= lMax;
+  res.s *= sMax;
+  res.h *= hPhase;
+  if (res.h < hMin) {
+    res.h += hMax;
   }
-  if (res.h >= 360) {
-    res.h -= 360;
+  if (res.h >= hMax) {
+    res.h -= hMax;
   }
   return res;
 }
@@ -986,43 +1129,59 @@ function stringToRgb(input) {
   return stringToRgba(input);
 }
 function hslToRgb(hsl) {
-  const h = (hsl.h % 360 + 360) % 360,
-    s = Math.max(0, Math.min(100, hsl.s)),
-    l = Math.max(0, Math.min(100, hsl.l)),
-    hNormalized = h / 360,
-    sNormalized = s / 100,
-    lNormalized = l / 100;
-  if (s === 0) {
-    const grayscaleValue = Math.round(lNormalized * 255);
+  const hMax = 360,
+    sMax = 100,
+    lMax = 100,
+    sMin = 0,
+    lMin = 0,
+    h = (hsl.h % hMax + hMax) % hMax,
+    s = Math.max(sMin, Math.min(sMax, hsl.s)),
+    l = Math.max(lMin, Math.min(lMax, hsl.l)),
+    hNormalized = h / hMax,
+    sNormalized = s / sMax,
+    lNormalized = l / lMax,
+    rgbFactor = 255,
+    triple = 3;
+  if (s === sMin) {
+    const grayscaleValue = Math.round(lNormalized * rgbFactor);
     return {
       r: grayscaleValue,
       g: grayscaleValue,
       b: grayscaleValue
     };
   }
-  const channel = (temp1, temp2, temp3) => {
-      if (temp3 < 0) {
-        temp3 += 1;
+  const half = 0.5,
+    double = 2,
+    channel = (temp1, temp2, temp3) => {
+      const temp3Min = 0,
+        temp3Max = 1,
+        sextuple = 6;
+      if (temp3 < temp3Min) {
+        temp3++;
       }
-      if (temp3 > 1) {
-        temp3 -= 1;
+      if (temp3 > temp3Max) {
+        temp3--;
       }
-      if (temp3 * 6 < 1) {
-        return temp1 + (temp2 - temp1) * 6 * temp3;
+      if (temp3 * sextuple < temp3Max) {
+        return temp1 + (temp2 - temp1) * sextuple * temp3;
       }
-      if (temp3 * 2 < 1) {
+      if (temp3 * double < temp3Max) {
         return temp2;
       }
-      if (temp3 * 3 < 2) {
-        return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+      if (temp3 * triple < temp3Max * double) {
+        const temp3Offset = double / triple;
+        return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
       }
       return temp1;
     },
-    temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized,
-    temp2 = 2 * lNormalized - temp1,
-    red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)),
-    green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)),
-    blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+    sNormalizedOffset = 1,
+    temp1 = lNormalized < half ? lNormalized * (sNormalizedOffset + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized,
+    temp2 = double * lNormalized - temp1,
+    phaseNumerator = 1,
+    phaseThird = phaseNumerator / triple,
+    red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)),
+    green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)),
+    blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
   return {
     r: Math.round(red),
     g: Math.round(green),
@@ -1039,18 +1198,22 @@ function hslaToRgba(hsla) {
   };
 }
 function getRandomRgbColor(min) {
-  const fixedMin = min ?? 0;
+  const defaultMin = 0,
+    fixedMin = min ?? defaultMin,
+    rgbMax = 256;
   return {
-    b: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-    g: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
-    r: Math.floor(randomInRange(setRangeValue(fixedMin, 256)))
+    b: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+    g: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax))),
+    r: Math.floor(randomInRange(setRangeValue(fixedMin, rgbMax)))
   };
 }
 function getStyleFromRgb(color, opacity) {
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
+  const defaultOpacity = 1;
+  return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
 }
 function getStyleFromHsl(color, opacity) {
-  return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
+  const defaultOpacity = 1;
+  return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
 }
 function colorMix(color1, color2, size1, size2) {
   let rgb1 = color1,
@@ -1136,25 +1299,120 @@ function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
   colorValue.enable = colorAnimation.enable;
+  const defaultVelocity = 0,
+    decayOffset = 1,
+    defaultLoops = 0,
+    defaultTime = 0;
   if (colorValue.enable) {
-    colorValue.velocity = getRangeValue(colorAnimation.speed) / 100 * reduceFactor;
-    colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
+    colorValue.velocity = getRangeValue(colorAnimation.speed) / percentDenominator * reduceFactor;
+    colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
     colorValue.status = "increasing";
-    colorValue.loops = 0;
+    colorValue.loops = defaultLoops;
     colorValue.maxLoops = getRangeValue(colorAnimation.count);
-    colorValue.time = 0;
-    colorValue.delayTime = getRangeValue(colorAnimation.delay) * 1000;
+    colorValue.time = defaultTime;
+    colorValue.delayTime = getRangeValue(colorAnimation.delay) * millisecondsToSeconds;
     if (!colorAnimation.sync) {
       colorValue.velocity *= getRandom();
       colorValue.value *= getRandom();
     }
     colorValue.initialValue = colorValue.value;
+    colorValue.offset = setRangeValue(colorAnimation.offset);
+  } else {
+    colorValue.velocity = defaultVelocity;
+  }
+}
+function updateColorValue(data, range, decrease, delta) {
+  const minLoops = 0,
+    minDelay = 0,
+    identity = 1,
+    minVelocity = 0,
+    minOffset = 0,
+    velocityFactor = 3.6;
+  if (!data || !data.enable || (data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops)) {
+    return;
+  }
+  if (!data.time) {
+    data.time = 0;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    data.time += delta.value;
+  }
+  if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+    return;
+  }
+  const offset = data.offset ? randomInRange(data.offset) : minOffset,
+    velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor,
+    decay = data.decay ?? identity,
+    max = getRangeMax(range),
+    min = getRangeMin(range);
+  if (!decrease || data.status === "increasing") {
+    data.value += velocity;
+    if (data.value > max) {
+      if (!data.loops) {
+        data.loops = 0;
+      }
+      data.loops++;
+      if (decrease) {
+        data.status = "decreasing";
+      } else {
+        data.value -= max;
+      }
+    }
   } else {
-    colorValue.velocity = 0;
+    data.value -= velocity;
+    const minValue = 0;
+    if (data.value < minValue) {
+      if (!data.loops) {
+        data.loops = 0;
+      }
+      data.loops++;
+      data.status = "increasing";
+    }
+  }
+  if (data.velocity && decay !== identity) {
+    data.velocity *= decay;
+  }
+  data.value = clamp(data.value, min, max);
+}
+function updateColor(color, delta) {
+  if (!color) {
+    return;
+  }
+  const {
+    h,
+    s,
+    l
+  } = color;
+  const ranges = {
+    h: {
+      min: 0,
+      max: 360
+    },
+    s: {
+      min: 0,
+      max: 100
+    },
+    l: {
+      min: 0,
+      max: 100
+    }
+  };
+  if (h) {
+    updateColorValue(h, ranges.h, false, delta);
+  }
+  if (s) {
+    updateColorValue(s, ranges.s, true, delta);
+  }
+  if (l) {
+    updateColorValue(l, ranges.l, true, delta);
   }
 }
 ;// CONCATENATED MODULE: ../../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
@@ -5648,6 +6007,12 @@ class FireworkOptions {
 }
 ;// 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,
     {
@@ -5664,23 +6029,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();
     }
   }
@@ -5688,24 +6055,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
@@ -5729,15 +6096,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,
@@ -5755,18 +6122,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 => {
@@ -5780,17 +6149,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
@@ -5817,13 +6188,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);
@@ -5840,6 +6214,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 {
@@ -5849,28 +6232,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)
     };
   }
 }
@@ -5879,84 +6262,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;
@@ -5979,7 +6286,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
@@ -5987,103 +6294,39 @@ 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
+;// CONCATENATED MODULE: ../../updaters/opacity/dist/browser/OpacityUpdater.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();
+class OpacityUpdater {
+  constructor(container) {
+    this.container = container;
+  }
+  init(particle) {
+    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) / percentDenominator * this.container.retina.reduceFactor;
+      if (!opacityAnimation.sync) {
+        particle.opacity.velocity *= getRandom();
       }
-      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;
+  isEnabled(particle) {
+    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));
   }
-  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 opacityAnimation = opacityOptions.animation;
-    if (opacityAnimation.enable) {
-      particle.opacity.velocity = getRangeValue(opacityAnimation.speed) / 100 * 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));
-  }
-  reset(particle) {
-    if (particle.opacity) {
-      particle.opacity.time = 0;
-      particle.opacity.loops = 0;
-    }
+  reset(particle) {
+    if (particle.opacity) {
+      particle.opacity.time = 0;
+      particle.opacity.loops = 0;
+    }
   }
   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
@@ -6093,18 +6336,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;
@@ -6115,7 +6360,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") {
@@ -6126,14 +6371,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;
@@ -6144,7 +6389,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") {
@@ -6203,6 +6448,7 @@ class BounceOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/DestroyOutMode.js
 
+const DestroyOutMode_minVelocity = 0;
 class DestroyOutMode {
   constructor(container) {
     this.container = container;
@@ -6230,7 +6476,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;
@@ -6241,6 +6487,7 @@ class DestroyOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/NoneOutMode.js
 
+const NoneOutMode_minVelocity = 0;
 class NoneOutMode {
   constructor(container) {
     this.container = container;
@@ -6250,7 +6497,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,
@@ -6258,7 +6505,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)) {
@@ -6274,6 +6521,8 @@ class NoneOutMode {
 }
 ;// CONCATENATED MODULE: ../../updaters/outModes/dist/browser/OutOutMode.js
 
+const OutOutMode_minVelocity = 0,
+  minDistance = 0;
 class OutOutMode {
   constructor(container) {
     this.container = container;
@@ -6299,7 +6548,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({
@@ -6401,12 +6650,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() {}
@@ -6426,97 +6675,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
@@ -6647,6 +6831,12 @@ class Destroy {
 }
 ;// CONCATENATED MODULE: ../../updaters/destroy/dist/browser/Utils.js
 
+const defaultOffset = 0,
+  minDestroySize = 0.5,
+  defaultSplitCount = 0,
+  increment = 1,
+  unbreakableTime = 500,
+  minSplitCount = 0;
 function addSplitParticle(engine, container, parent, splitParticlesOptions) {
   const destroyOptions = parent.options.destroy;
   if (!destroyOptions) {
@@ -6662,9 +6852,9 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
     options.color.load({
       value: {
         hsl: {
-          h: parentColor.h + getRangeValue(splitOptions.colorOffset.h ?? 0),
-          s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? 0),
-          l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? 0)
+          h: parentColor.h + getRangeValue(splitOptions.colorOffset.h ?? defaultOffset),
+          s: parentColor.s + getRangeValue(splitOptions.colorOffset.s ?? defaultOffset),
+          l: parentColor.l + getRangeValue(splitOptions.colorOffset.l ?? defaultOffset)
         }
       }
     });
@@ -6689,21 +6879,21 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
     options.size.value.max /= factor;
   }
   options.load(splitParticlesOptions);
-  const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : 0,
+  const offset = splitOptions.sizeOffset ? setRangeValue(-parent.size.value, parent.size.value) : defaultOffset,
     position = {
       x: parent.position.x + randomInRange(offset),
       y: parent.position.y + randomInRange(offset)
     };
   return container.particles.addParticle(position, options, parent.group, particle => {
-    if (particle.size.value < 0.5) {
+    if (particle.size.value < minDestroySize) {
       return false;
     }
     particle.velocity.length = randomInRange(setRangeValue(parent.velocity.length, particle.velocity.length));
-    particle.splitCount = (parent.splitCount ?? 0) + 1;
+    particle.splitCount = (parent.splitCount ?? defaultSplitCount) + increment;
     particle.unbreakable = true;
     setTimeout(() => {
       particle.unbreakable = false;
-    }, 500);
+    }, unbreakableTime);
     return true;
   });
 }
@@ -6713,7 +6903,7 @@ function split(engine, container, particle) {
     return;
   }
   const splitOptions = destroyOptions.split;
-  if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
+  if (splitOptions.count >= minSplitCount && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
     return;
   }
   const rate = getRangeValue(splitOptions.rate.value),
@@ -6728,8 +6918,8 @@ function split(engine, container, particle) {
 
 class DestroyUpdater {
   constructor(engine, container) {
-    this.engine = engine;
     this.container = container;
+    this.engine = engine;
   }
   init(particle) {
     const container = this.container,
@@ -6754,16 +6944,16 @@ class DestroyUpdater {
       } = particle,
       canvasSize = container.canvas.size;
     if (bottom) {
-      destroyBounds.bottom = getRangeValue(bottom) * canvasSize.height / 100;
+      destroyBounds.bottom = getRangeValue(bottom) * canvasSize.height / percentDenominator;
     }
     if (left) {
-      destroyBounds.left = getRangeValue(left) * canvasSize.width / 100;
+      destroyBounds.left = getRangeValue(left) * canvasSize.width / percentDenominator;
     }
     if (right) {
-      destroyBounds.right = getRangeValue(right) * canvasSize.width / 100;
+      destroyBounds.right = getRangeValue(right) * canvasSize.width / percentDenominator;
     }
     if (top) {
-      destroyBounds.top = getRangeValue(top) * canvasSize.height / 100;
+      destroyBounds.top = getRangeValue(top) * canvasSize.height / percentDenominator;
     }
   }
   isEnabled(particle) {
@@ -6976,6 +7166,12 @@ class Emitter {
 
 
 
+const EmitterInstance_half = 0.5,
+  defaultLifeDelay = 0,
+  minLifeCount = 0,
+  defaultSpawnDelay = 0,
+  defaultEmitDelay = 0,
+  defaultLifeCount = -1;
 function setParticlesOptionsColor(particlesOptions, color) {
   if (particlesOptions.color) {
     particlesOptions.color.value = color;
@@ -7006,9 +7202,11 @@ class EmitterInstance {
       if (this._paused) {
         return;
       }
-      const duration = this.options.life?.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined;
-      if (this.container.retina.reduceFactor && (this._lifeCount > 0 || this._immortal) && duration !== undefined && duration > 0) {
-        this._duration = duration * 1000;
+      const duration = this.options.life?.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined,
+        minDuration = 0,
+        minLifeCount = 0;
+      if (this.container.retina.reduceFactor && (this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
+        this._duration = duration * millisecondsToSeconds;
       }
     };
     this._setColorAnimation = (animation, initValue, maxValue) => {
@@ -7018,9 +7216,11 @@ class EmitterInstance {
       }
       const colorOffset = randomInRange(animation.offset),
         delay = getRangeValue(this.options.rate.delay),
-        emitFactor = 1000 * delay / container.retina.reduceFactor,
-        colorSpeed = getRangeValue(animation.speed ?? 0);
-      return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * 3.6) % maxValue;
+        emitFactor = delay * millisecondsToSeconds / container.retina.reduceFactor,
+        defaultColorSpeed = 0,
+        colorFactor = 3.6,
+        colorSpeed = getRangeValue(animation.speed ?? defaultColorSpeed);
+      return (initValue + colorSpeed * container.fpsLimit / emitFactor + colorOffset * colorFactor) % maxValue;
     };
     this._engine = engine;
     this._currentDuration = 0;
@@ -7033,7 +7233,7 @@ class EmitterInstance {
       this.options = new Emitter();
       this.options.load(options);
     }
-    this._spawnDelay = getRangeValue(this.options.life.delay ?? 0) * 1000 / this.container.retina.reduceFactor;
+    this._spawnDelay = getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds / this.container.retina.reduceFactor;
     this.position = this._initialPosition ?? this._calcPosition();
     this.name = this.options.name;
     this.fill = this.options.fill;
@@ -7050,8 +7250,8 @@ class EmitterInstance {
     this._particlesOptions = particlesOptions;
     this._size = this._calcSize();
     this.size = getSize(this._size, this.container.canvas.size);
-    this._lifeCount = this.options.life.count ?? -1;
-    this._immortal = this._lifeCount <= 0;
+    this._lifeCount = this.options.life.count ?? defaultLifeCount;
+    this._immortal = this._lifeCount <= minLifeCount;
     if (this.options.domId) {
       const element = document.getElementById(this.options.domId);
       if (element) {
@@ -7102,14 +7302,14 @@ class EmitterInstance {
     if (this._paused) {
       return;
     }
-    if (!(this.container.retina.reduceFactor && (this._lifeCount > 0 || this._immortal || !this.options.life.count) && (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? 0)))) {
+    if (!(this.container.retina.reduceFactor && (this._lifeCount > minLifeCount || this._immortal || !this.options.life.count) && (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? defaultSpawnDelay)))) {
       return;
     }
     if (this._emitDelay === undefined) {
       const delay = getRangeValue(this.options.rate.delay);
-      this._emitDelay = 1000 * delay / this.container.retina.reduceFactor;
+      this._emitDelay = delay * millisecondsToSeconds / this.container.retina.reduceFactor;
     }
-    if (this._lifeCount > 0 || this._immortal) {
+    if (this._lifeCount > minLifeCount || this._immortal) {
       this._prepareToDie();
     }
   }
@@ -7126,8 +7326,8 @@ class EmitterInstance {
     }
     if (this._firstSpawn) {
       this._firstSpawn = false;
-      this._currentSpawnDelay = this._spawnDelay ?? 0;
-      this._currentEmitDelay = this._emitDelay ?? 0;
+      this._currentSpawnDelay = this._spawnDelay ?? defaultSpawnDelay;
+      this._currentEmitDelay = this._emitDelay ?? defaultEmitDelay;
     }
     if (!this._startParticlesAdded) {
       this._startParticlesAdded = true;
@@ -7143,10 +7343,10 @@ class EmitterInstance {
         if (!this._immortal) {
           this._lifeCount--;
         }
-        if (this._lifeCount > 0 || this._immortal) {
+        if (this._lifeCount > minLifeCount || this._immortal) {
           this.position = this._calcPosition();
           this._shape?.resize(this.position, this.size);
-          this._spawnDelay = getRangeValue(this.options.life.delay ?? 0) * 1000 / this.container.retina.reduceFactor;
+          this._spawnDelay = getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds / this.container.retina.reduceFactor;
         } else {
           this._destroy();
         }
@@ -7168,7 +7368,7 @@ class EmitterInstance {
     if (this._emitDelay !== undefined) {
       this._currentEmitDelay += delta.value;
       if (this._currentEmitDelay >= this._emitDelay) {
-        this._emit();
+        await this._emit();
         this._currentEmitDelay -= this._emitDelay;
       }
     }
@@ -7178,10 +7378,11 @@ class EmitterInstance {
       const container = this.container,
         element = document.getElementById(this.options.domId);
       if (element) {
-        const elRect = element.getBoundingClientRect();
+        const elRect = element.getBoundingClientRect(),
+          pxRatio = container.retina.pixelRatio;
         return {
-          x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
-          y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio
+          x: (elRect.x + elRect.width * EmitterInstance_half) * pxRatio,
+          y: (elRect.y + elRect.height * EmitterInstance_half) * pxRatio
         };
       }
     }
@@ -7227,9 +7428,14 @@ class EmitterInstance {
       if (this.spawnColor) {
         const hslAnimation = this.options.spawnColor?.animation;
         if (hslAnimation) {
-          this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
-          this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
-          this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
+          const maxValues = {
+            h: 360,
+            s: 100,
+            l: 100
+          };
+          this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, maxValues.h);
+          this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, maxValues.s);
+          this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, maxValues.l);
         }
         setParticlesOptionsColor(particlesOptions, this.spawnColor);
       }
@@ -7279,7 +7485,8 @@ class Emitters {
       },
       value: []
     };
-    container.getEmitter = idxOrName => idxOrName === undefined || isNumber(idxOrName) ? this.array[idxOrName || 0] : this.array.find(t => t.name === idxOrName);
+    const defaultIndex = 0;
+    container.getEmitter = idxOrName => idxOrName === undefined || isNumber(idxOrName) ? this.array[idxOrName ?? defaultIndex] : this.array.find(t => t.name === idxOrName);
     container.addEmitter = async (options, position) => this.addEmitter(options, position);
     container.removeEmitter = idxOrName => {
       const emitter = container.getEmitter(idxOrName);
@@ -7316,7 +7523,8 @@ class Emitters {
     }
     let emittersModeOptions;
     if (modeEmitters && isArray(modeEmitters.value)) {
-      if (modeEmitters.value.length > 0 && modeEmitters.random.enable) {
+      const minLength = 0;
+      if (modeEmitters.value.length > minLength && modeEmitters.random.enable) {
         emittersModeOptions = [];
         const usedIndexes = [];
         for (let i = 0; i < modeEmitters.random.count; i++) {
@@ -7336,8 +7544,8 @@ class Emitters {
     }
     const emittersOptions = emittersModeOptions ?? emitterOptions,
       ePosition = this.container.interactivity.mouse.clickPosition;
-    executeOnSingleOrMultiple(emittersOptions, emitter => {
-      this.addEmitter(emitter, ePosition);
+    void executeOnSingleOrMultiple(emittersOptions, async emitter => {
+      await this.addEmitter(emitter, ePosition);
     });
   }
   async init() {
@@ -7365,9 +7573,11 @@ class Emitters {
     }
   }
   removeEmitter(emitter) {
-    const index = this.array.indexOf(emitter);
-    if (index >= 0) {
-      this.array.splice(index, 1);
+    const index = this.array.indexOf(emitter),
+      minIndex = 0,
+      deleteCount = 1;
+    if (index >= minIndex) {
+      this.array.splice(index, deleteCount);
     }
   }
   resize() {
@@ -7456,10 +7666,11 @@ class EmittersPlugin {
       } else {
         const emitterMode = interactivityEmitters;
         if (emitterMode.value !== undefined) {
+          const defaultCount = 1;
           if (isArray(emitterMode.value)) {
             options.interactivity.modes.emitters = {
               random: {
-                count: emitterMode.random.count ?? 1,
+                count: emitterMode.random.count ?? defaultCount,
                 enable: emitterMode.random.enable ?? false
               },
               value: emitterMode.value.map(s => {
@@ -7473,7 +7684,7 @@ class EmittersPlugin {
             tmp.load(emitterMode.value);
             options.interactivity.modes.emitters = {
               random: {
-                count: emitterMode.random.count ?? 1,
+                count: emitterMode.random.count ?? defaultCount,
                 enable: emitterMode.random.enable ?? false
               },
               value: tmp
@@ -7522,8 +7733,11 @@ async function loadEmittersPlugin(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../plugins/emittersShapes/square/dist/browser/EmittersSquareShape.js
 
 
+const EmittersSquareShape_half = 0.5,
+  EmittersSquareShape_sides = 4,
+  EmittersSquareShape_double = 2;
 function randomSquareCoordinate(position, offset) {
-  return position + offset * (getRandom() - 0.5);
+  return position + offset * (getRandom() - halfRandom);
 }
 class EmittersSquareShape extends EmitterShapeBase {
   constructor(position, size, fill, options) {
@@ -7531,53 +7745,55 @@ class EmittersSquareShape extends EmitterShapeBase {
   }
   async init() {}
   async randomPosition() {
-    const fill = this.fill,
-      position = this.position,
-      size = this.size;
-    if (fill) {
-      return {
-        position: {
-          x: randomSquareCoordinate(position.x, size.width),
-          y: randomSquareCoordinate(position.y, size.height)
+    return await new Promise(success => {
+      const fill = this.fill,
+        position = this.position,
+        size = this.size;
+      if (fill) {
+        return success({
+          position: {
+            x: randomSquareCoordinate(position.x, size.width),
+            y: randomSquareCoordinate(position.y, size.height)
+          }
+        });
+      } else {
+        const halfW = size.width * EmittersSquareShape_half,
+          halfH = size.height * EmittersSquareShape_half,
+          side = Math.floor(getRandom() * EmittersSquareShape_sides),
+          v = (getRandom() - halfRandom) * EmittersSquareShape_double;
+        switch (side) {
+          case 0:
+            return success({
+              position: {
+                x: position.x + v * halfW,
+                y: position.y - halfH
+              }
+            });
+          case 1:
+            return success({
+              position: {
+                x: position.x - halfW,
+                y: position.y + v * halfH
+              }
+            });
+          case 2:
+            return success({
+              position: {
+                x: position.x + v * halfW,
+                y: position.y + halfH
+              }
+            });
+          case 3:
+          default:
+            return success({
+              position: {
+                x: position.x + halfW,
+                y: position.y + v * halfH
+              }
+            });
         }
-      };
-    } else {
-      const halfW = size.width / 2,
-        halfH = size.height / 2,
-        side = Math.floor(getRandom() * 4),
-        v = (getRandom() - 0.5) * 2;
-      switch (side) {
-        case 0:
-          return {
-            position: {
-              x: position.x + v * halfW,
-              y: position.y - halfH
-            }
-          };
-        case 1:
-          return {
-            position: {
-              x: position.x - halfW,
-              y: position.y + v * halfH
-            }
-          };
-        case 2:
-          return {
-            position: {
-              x: position.x + v * halfW,
-              y: position.y + halfH
-            }
-          };
-        case 3:
-        default:
-          return {
-            position: {
-              x: position.x + halfW,
-              y: position.y + v * halfH
-            }
-          };
       }
-    }
+    });
   }
 }
 ;// CONCATENATED MODULE: ../../plugins/emittersShapes/square/dist/browser/EmittersSquareShapeGenerator.js
@@ -7591,7 +7807,7 @@ class EmittersSquareShapeGenerator {
 
 async function loadEmittersShapeSquare(engine, refresh = true) {
   const emittersEngine = engine;
-  emittersEngine.addEmitterShapeGenerator && emittersEngine.addEmitterShapeGenerator("square", new EmittersSquareShapeGenerator());
+  emittersEngine.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
   await emittersEngine.refresh(refresh);
 }
 ;// CONCATENATED MODULE: ../../updaters/life/dist/browser/Options/Classes/LifeDelay.js
@@ -7651,6 +7867,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;
@@ -7663,20 +7884,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) {
@@ -7701,47 +7922,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;
     }
   }
 }
@@ -7750,28 +7971,6 @@ class LifeUpdater {
 async function loadLifeUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("life", container => new LifeUpdater(container), refresh);
 }
-;// CONCATENATED MODULE: ../../shapes/line/dist/browser/LineDrawer.js
-class LineDrawer {
-  draw(data) {
-    const {
-        context,
-        particle,
-        radius
-      } = data,
-      shapeData = particle.shapeData;
-    context.moveTo(-radius / 2, 0);
-    context.lineTo(radius / 2, 0);
-    context.lineCap = shapeData?.cap ?? "butt";
-  }
-  getSidesCount() {
-    return 1;
-  }
-}
-;// CONCATENATED MODULE: ../../shapes/line/dist/browser/index.js
-
-async function loadLineShape(engine, refresh = true) {
-  await engine.addShape("line", new LineDrawer(), refresh);
-}
 ;// CONCATENATED MODULE: ../../updaters/rotate/dist/browser/Options/Classes/RotateAnimation.js
 
 class RotateAnimation {
@@ -7827,38 +8026,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;
@@ -7870,13 +8041,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":
@@ -7889,8 +8063,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();
       }
@@ -7916,8 +8090,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
@@ -8040,10 +8217,11 @@ class SoundsEvent {
         return tmp;
       });
     }
-    if (data.filter !== undefined) {
+    if (data.filter) {
       if (isString(data.filter)) {
-        if (isFunction(window[data.filter])) {
-          this.filter = window[data.filter];
+        const filterFunc = window[data.filter];
+        if (isFunction(filterFunc)) {
+          this.filter = filterFunc;
         }
       } else {
         this.filter = data.filter;
@@ -8056,6 +8234,7 @@ class SoundsIcon {
   constructor() {
     this.width = 24;
     this.height = 24;
+    this.style = "";
   }
   load(data) {
     if (!data) {
@@ -8083,6 +8262,7 @@ class SoundsIcons {
     this.unmute = new SoundsIcon();
     this.volumeDown = new SoundsIcon();
     this.volumeUp = new SoundsIcon();
+    this.enable = false;
     this.mute.svg = `<?xml version="1.0"?>
 <svg baseProfile="tiny" height="24px" version="1.2" viewBox="0 0 24 24" width="24px"
     xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
@@ -8124,6 +8304,9 @@ class SoundsIcons {
     if (!data) {
       return;
     }
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
     this.mute.load(data.mute);
     this.unmute.load(data.unmute);
     this.volumeDown.load(data.volumeDown);
@@ -8167,6 +8350,7 @@ class SoundsVolume {
 
 class Sounds {
   constructor() {
+    this.autoPlay = true;
     this.enable = false;
     this.events = [];
     this.icons = new SoundsIcons();
@@ -8176,6 +8360,9 @@ class Sounds {
     if (!data) {
       return;
     }
+    if (data.autoPlay !== undefined) {
+      this.autoPlay = data.autoPlay;
+    }
     if (data.enable !== undefined) {
       this.enable = data.enable;
     }
@@ -8209,20 +8396,33 @@ notes.set("B", [30.87, 61.74, 123.47, 246.94, 493.88, 987.77, 1975.53, 3951.07,
 notes.set("pause", [0]);
 function getNoteFrequency(note) {
   const regex = /(([A-G]b?)(\d))|pause/i,
-    result = regex.exec(note);
-  if (!result || !result.length) {
+    result = regex.exec(note),
+    groupKey = 2,
+    defaultMatchKey = 0,
+    innerGroupKey = 3;
+  if (!result?.length) {
     return;
   }
-  const noteKey = result[2] || result[0],
+  const noteKey = result[groupKey] || result[defaultMatchKey],
     noteItem = notes.get(noteKey);
   if (!noteItem) {
     return;
   }
-  return noteItem[parseInt(result[3] || "0")];
+  return noteItem[parseInt(result[innerGroupKey] || "0")];
 }
+let muted = true;
+const isWindowMuted = () => {
+  return muted;
+};
+const unmuteWindow = () => {
+  muted = false;
+};
 ;// CONCATENATED MODULE: ../../plugins/sounds/dist/browser/SoundsInstance.js
 
 
+const zIndexOffset = 1,
+  rightOffset = 1,
+  minVolume = 0;
 function initImage(data) {
   const img = document.createElement("img"),
     {
@@ -8238,13 +8438,17 @@ function initImage(data) {
     {
       width,
       path,
+      style,
       svg
-    } = iconOptions;
-  setIconStyle(img, pos.top + margin, pos.right - (margin * (rightOffsets.length + 1) + width + rightOffsets.reduce((a, b) => a + b, 0)), display, options.fullScreen.zIndex + 1, width, margin);
+    } = iconOptions,
+    defaultAccumulator = 0;
+  setIconStyle(img, pos.top + margin, pos.right - (margin * (rightOffsets.length + rightOffset) + width + rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style);
   img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : "");
-  const parent = container.canvas.element?.parentNode || document.body;
+  const parent = container.canvas.element?.parentNode ?? document.body;
   parent.append(img);
-  img.addEventListener("click", clickCb);
+  img.addEventListener("click", () => {
+    void clickCb();
+  });
   return img;
 }
 function removeImage(image) {
@@ -8253,14 +8457,15 @@ function removeImage(image) {
   }
   image.remove();
 }
-function setIconStyle(icon, top, left, display, zIndex, width, margin) {
+function setIconStyle(icon, top, left, display, zIndex, width, margin, style) {
   icon.style.userSelect = "none";
   icon.style.webkitUserSelect = "none";
   icon.style.position = "absolute";
   icon.style.top = `${top + margin}px`;
   icon.style.left = `${left - margin - width}px`;
   icon.style.display = display;
-  icon.style.zIndex = `${zIndex + 1}`;
+  icon.style.zIndex = `${zIndex + zIndexOffset}`;
+  icon.style.cssText += style;
 }
 class SoundsInstance {
   constructor(container, engine) {
@@ -8282,12 +8487,12 @@ class SoundsInstance {
       }
       for (const event of soundsOptions.events) {
         const cb = args => {
-          (async () => {
+          void (async () => {
             const filterNotValid = event.filter && !event.filter(args);
             if (this._container !== args.container) {
               return;
             }
-            if (!this._container || this._container.muted || this._container.destroyed) {
+            if (!this._container || !!this._container.muted || this._container.destroyed) {
               executeOnSingleOrMultiple(event.event, item => {
                 this._engine.removeEventListener(item, cb);
               });
@@ -8296,18 +8501,19 @@ class SoundsInstance {
             if (filterNotValid) {
               return;
             }
+            const defaultNoteIndex = 0;
             if (event.audio) {
               this._playBuffer(itemFromSingleOrMultiple(event.audio));
             } else if (event.melodies) {
               const melody = itemFromArray(event.melodies);
               if (melody.melodies.length) {
-                await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, 0, melody.loop)));
+                await Promise.allSettled(melody.melodies.map(m => this._playNote(m.notes, defaultNoteIndex, melody.loop)));
               } else {
-                await this._playNote(melody.notes, 0, melody.loop);
+                await this._playNote(melody.notes, defaultNoteIndex, melody.loop);
               }
             } else if (event.notes) {
               const note = itemFromArray(event.notes);
-              await this._playNote([note], 0, false);
+              await this._playNote([note], defaultNoteIndex, false);
             }
           })();
         };
@@ -8316,18 +8522,16 @@ class SoundsInstance {
         });
       }
     };
-    this._mute = () => {
-      const container = this._container;
-      if (!container.audioContext) {
-        return;
-      }
+    this._mute = async () => {
+      const container = this._container,
+        audioContext = this._getAudioContext();
       for (const source of this._audioSources) {
         this._removeAudioSource(source);
       }
       if (this._gain) {
         this._gain.disconnect();
       }
-      container.audioContext.close();
+      await audioContext.close();
       container.audioContext = undefined;
       this._engine.dispatchEvent("soundsMuted", {
         container: this._container
@@ -8349,10 +8553,11 @@ class SoundsInstance {
       source.start();
     };
     this._playFrequency = async (frequency, duration) => {
-      if (!this._container.audioContext || !this._gain) {
+      if (!this._gain || this._container.muted) {
         return;
       }
-      const oscillator = this._addOscillator(this._container.audioContext);
+      const audioContext = this._getAudioContext(),
+        oscillator = this._addOscillator(audioContext);
       oscillator.connect(this._gain);
       oscillator.type = "sine";
       oscillator.frequency.value = frequency;
@@ -8365,14 +8570,14 @@ class SoundsInstance {
       });
     };
     this._playMuteSound = () => {
-      const container = this._container;
-      if (!container.audioContext) {
+      if (this._container.muted) {
         return;
       }
-      const gain = container.audioContext.createGain();
-      gain.connect(container.audioContext.destination);
+      const audioContext = this._getAudioContext(),
+        gain = audioContext.createGain();
+      gain.connect(audioContext.destination);
       gain.gain.value = 0;
-      const oscillator = container.audioContext.createOscillator();
+      const oscillator = audioContext.createOscillator();
       oscillator.connect(gain);
       oscillator.type = "sine";
       oscillator.frequency.value = 1;
@@ -8396,7 +8601,8 @@ class SoundsInstance {
         return this._playNoteValue(notes, noteIdx, idx);
       });
       await (isArray(promises) ? Promise.allSettled(promises) : promises);
-      let nextNoteIdx = noteIdx + 1;
+      const indexOffset = 1;
+      let nextNoteIdx = noteIdx + indexOffset;
       if (loop && nextNoteIdx >= notes.length) {
         nextNoteIdx = nextNoteIdx % notes.length;
       }
@@ -8424,7 +8630,8 @@ class SoundsInstance {
     this._removeAudioSource = source => {
       source.stop();
       source.disconnect();
-      this._audioSources.splice(this._audioSources.indexOf(source), 1);
+      const deleteCount = 1;
+      this._audioSources.splice(this._audioSources.indexOf(source), deleteCount);
     };
     this._unmute = () => {
       const container = this._container,
@@ -8433,18 +8640,13 @@ class SoundsInstance {
       if (!soundsOptions) {
         return;
       }
-      if (!container.audioContext) {
-        container.audioContext = new AudioContext();
-      }
-      const {
-        audioContext
-      } = container;
+      const audioContext = this._getAudioContext();
       if (!this._audioSources) {
         this._audioSources = [];
       }
       const gain = audioContext.createGain();
       gain.connect(audioContext.destination);
-      gain.gain.value = soundsOptions.volume.value / 100;
+      gain.gain.value = soundsOptions.volume.value / percentDenominator;
       this._gain = gain;
       this._initEvents();
       this._engine.dispatchEvent("soundsUnmuted", {
@@ -8453,7 +8655,11 @@ class SoundsInstance {
     };
     this._updateMuteIcons = () => {
       const container = this._container,
-        muteImg = this._muteImg,
+        soundsOptions = container.actualOptions.sounds;
+      if (!soundsOptions?.enable || !soundsOptions.icons.enable) {
+        return;
+      }
+      const muteImg = this._muteImg,
         unmuteImg = this._unmuteImg;
       if (muteImg) {
         muteImg.style.display = container.muted ? "block" : "none";
@@ -8463,12 +8669,13 @@ class SoundsInstance {
       }
     };
     this._updateMuteStatus = async () => {
-      const container = this._container;
+      const container = this._container,
+        audioContext = this._getAudioContext();
       if (container.muted) {
-        await container.audioContext?.suspend();
-        this._mute();
+        await audioContext?.suspend();
+        await this._mute();
       } else {
-        await container.audioContext?.resume();
+        await audioContext?.resume();
         this._unmute();
         this._playMuteSound();
       }
@@ -8481,11 +8688,11 @@ class SoundsInstance {
       }
       clamp(this._volume, soundsOptions.volume.min, soundsOptions.volume.max);
       let stateChanged = false;
-      if (this._volume <= 0 && !container.muted) {
+      if (this._volume <= minVolume && !container.muted) {
         this._volume = 0;
         container.muted = true;
         stateChanged = true;
-      } else if (this._volume > 0 && container.muted) {
+      } else if (this._volume > minVolume && container.muted) {
         container.muted = false;
         stateChanged = true;
       }
@@ -8494,7 +8701,7 @@ class SoundsInstance {
         await this._updateMuteStatus();
       }
       if (this._gain?.gain) {
-        this._gain.gain.value = this._volume / 100;
+        this._gain.gain.value = this._volume / percentDenominator;
       }
     };
     this._container = container;
@@ -8510,6 +8717,20 @@ class SoundsInstance {
     if (!soundsOptions?.enable) {
       return;
     }
+    if (soundsOptions.autoPlay && isWindowMuted()) {
+      const firstClickHandler = () => {
+        removeEventListener(mouseDownEvent, firstClickHandler);
+        removeEventListener(touchStartEvent, firstClickHandler);
+        unmuteWindow();
+        void this.unmute();
+      };
+      const listenerOptions = {
+        capture: true,
+        once: true
+      };
+      addEventListener(mouseDownEvent, firstClickHandler, listenerOptions);
+      addEventListener(touchStartEvent, firstClickHandler, listenerOptions);
+    }
     this._volume = soundsOptions.volume.value;
     const events = soundsOptions.events;
     this._audioMap = new Map();
@@ -8517,16 +8738,26 @@ class SoundsInstance {
       if (!event.audio) {
         continue;
       }
-      executeOnSingleOrMultiple(event.audio, async audio => {
+      const promises = executeOnSingleOrMultiple(event.audio, async audio => {
         const response = await fetch(audio.source);
         if (!response.ok) {
           return;
         }
-        const arrayBuffer = await response.arrayBuffer();
-        container.audioContext = new AudioContext();
-        const audioBuffer = await container.audioContext.decodeAudioData(arrayBuffer);
+        const arrayBuffer = await response.arrayBuffer(),
+          audioContext = this._getAudioContext(),
+          audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
         this._audioMap.set(audio.source, audioBuffer);
       });
+      if (promises instanceof Promise) {
+        await promises;
+      } else {
+        await Promise.allSettled(promises);
+      }
+    }
+  }
+  async mute() {
+    if (!this._container.muted) {
+      await this.toggleMute();
     }
   }
   async start() {
@@ -8548,17 +8779,17 @@ class SoundsInstance {
         volumeDown,
         volumeUp
       } = soundsOptions.icons,
-      margin = 10;
-    const toggleMute = async () => {
-      container.muted = !container.muted;
-      this._updateMuteIcons();
-      await this._updateMuteStatus();
-    };
+      margin = 10,
+      toggleMute = async () => {
+        await this.toggleMute();
+      },
+      enableIcons = soundsOptions.icons.enable,
+      display = enableIcons ? "block" : "none";
     this._muteImg = initImage({
       container,
       options,
       pos,
-      display: "block",
+      display,
       iconOptions: mute,
       margin,
       rightOffsets: [volumeDown.width, volumeUp.width],
@@ -8578,51 +8809,100 @@ class SoundsInstance {
       container,
       options,
       pos,
-      display: "block",
+      display,
       iconOptions: volumeDown,
       margin,
       rightOffsets: [volumeUp.width],
       clickCb: async () => {
-        if (container.muted) {
-          this._volume = 0;
-        }
-        this._volume -= soundsOptions.volume.step;
-        await this._updateVolume();
+        await this.volumeDown();
       }
     });
     this._volumeUpImg = initImage({
       container,
       options,
       pos,
-      display: "block",
+      display,
       iconOptions: volumeUp,
       margin,
       rightOffsets: [],
       clickCb: async () => {
-        if (container.muted) {
-          this._volume = 0;
-        }
-        this._volume += soundsOptions.volume.step;
-        await this._updateVolume();
+        await this.volumeUp();
       }
     });
+    if (!isWindowMuted() && soundsOptions.autoPlay) {
+      await this.unmute();
+    }
   }
   stop() {
     this._container.muted = true;
-    this._mute();
-    removeImage(this._muteImg);
-    removeImage(this._unmuteImg);
-    removeImage(this._volumeDownImg);
-    removeImage(this._volumeUpImg);
+    void (async () => {
+      await this._mute();
+      removeImage(this._muteImg);
+      removeImage(this._unmuteImg);
+      removeImage(this._volumeDownImg);
+      removeImage(this._volumeUpImg);
+    })();
+  }
+  async toggleMute() {
+    const container = this._container;
+    container.muted = !container.muted;
+    this._updateMuteIcons();
+    await this._updateMuteStatus();
+  }
+  async unmute() {
+    if (this._container.muted) {
+      await this.toggleMute();
+    }
+  }
+  async volumeDown() {
+    const container = this._container,
+      soundsOptions = container.actualOptions.sounds;
+    if (!soundsOptions?.enable) {
+      return;
+    }
+    if (container.muted) {
+      this._volume = 0;
+    }
+    this._volume -= soundsOptions.volume.step;
+    await this._updateVolume();
+  }
+  async volumeUp() {
+    const container = this._container,
+      soundsOptions = container.actualOptions.sounds;
+    if (!soundsOptions?.enable) {
+      return;
+    }
+    this._volume += soundsOptions.volume.step;
+    await this._updateVolume();
+  }
+  _getAudioContext() {
+    const container = this._container;
+    if (!container.audioContext) {
+      container.audioContext = new AudioContext();
+    }
+    return container.audioContext;
   }
 }
 ;// CONCATENATED MODULE: ../../plugins/sounds/dist/browser/index.js
 
 
+
+
+const generalFirstClickHandler = () => {
+  removeEventListener(mouseDownEvent, generalFirstClickHandler);
+  removeEventListener(touchStartEvent, generalFirstClickHandler);
+  unmuteWindow();
+};
 class SoundsPlugin {
   constructor(engine) {
     this.id = "sounds";
     this._engine = engine;
+    const listenerOptions = {
+      capture: true,
+      once: true
+    };
+    addEventListener(mouseDownEvent, generalFirstClickHandler, listenerOptions);
+    addEventListener(touchStartEvent, generalFirstClickHandler, listenerOptions);
   }
   getPlugin(container) {
     return new SoundsInstance(container, this._engine);
@@ -8644,118 +8924,16 @@ class SoundsPlugin {
 async function loadSoundsPlugin(engine, refresh = true) {
   await engine.addPlugin(new SoundsPlugin(engine), 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
-
-
-class StrokeColorUpdater {
-  constructor(container) {
-    this.container = container;
-  }
-  init(particle) {
-    const container = this.container,
-      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.strokeAnimation = stroke.color?.animation;
-    const strokeHslColor = rangeColorToHsl(stroke.color) ?? particle.getFillColor();
-    if (strokeHslColor) {
-      particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
-    }
-  }
-  isEnabled(particle) {
-    const color = particle.strokeAnimation,
-      {
-        strokeColor
-      } = particle;
-    return !particle.destroyed && !particle.spawning && !!color && (strokeColor?.h.value !== undefined && strokeColor.h.enable || strokeColor?.s.value !== undefined && strokeColor.s.enable || strokeColor?.l.value !== undefined && strokeColor.l.enable);
-  }
-  update(particle, delta) {
-    if (!this.isEnabled(particle)) {
-      return;
-    }
-    updateStrokeColor(particle, delta);
-  }
-}
-;// CONCATENATED MODULE: ../../updaters/strokeColor/dist/browser/index.js
-
-async function loadStrokeColorUpdater(engine, refresh = true) {
-  await engine.addParticleUpdater("strokeColor", container => new StrokeColorUpdater(container), refresh);
-}
 ;// CONCATENATED MODULE: ../../effects/trail/dist/browser/TrailDrawer.js
 
+const TrailDrawer_double = 2,
+  minTrailLength = 2,
+  trailLengthOffset = 1,
+  noItems = 0,
+  TrailDrawer_half = 0.5,
+  minWidth = -1,
+  defaultLength = 10,
+  defaultAlpha = 1;
 class TrailDrawer {
   draw(data) {
     const {
@@ -8763,7 +8941,7 @@ class TrailDrawer {
         radius,
         particle
       } = data,
-      diameter = radius * 2,
+      diameter = radius * TrailDrawer_double,
       pxRatio = particle.container.retina.pixelRatio,
       currentPos = particle.getPosition();
     if (!particle.trail || !particle.trailLength) {
@@ -8777,7 +8955,7 @@ class TrailDrawer {
         y: currentPos.y
       }
     });
-    if (particle.trail.length < 2) {
+    if (particle.trail.length < minTrailLength) {
       return;
     }
     while (particle.trail.length > pathLength) {
@@ -8792,10 +8970,16 @@ class TrailDrawer {
         width: particle.container.canvas.size.width + diameter,
         height: particle.container.canvas.size.height + diameter
       };
-    let lastPos = particle.trail[trailLength - 1].position;
-    context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
-    for (let i = trailLength; i > 0; i--) {
-      const step = particle.trail[i - 1],
+    let lastPos = particle.trail[trailLength - trailLengthOffset].position;
+    const defaultTransform = {
+      a: 1,
+      b: 0,
+      c: 0,
+      d: 1
+    };
+    context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
+    for (let i = trailLength; i > noItems; i--) {
+      const step = particle.trail[i - trailLengthOffset],
         position = step.position;
       context.beginPath();
       context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
@@ -8803,14 +8987,14 @@ class TrailDrawer {
         x: (lastPos.x + canvasSize.width) % canvasSize.width,
         y: (lastPos.y + canvasSize.height) % canvasSize.height
       };
-      if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
+      if (Math.abs(lastPos.x - position.x) > canvasSize.width * TrailDrawer_half || Math.abs(lastPos.y - position.y) > canvasSize.height * TrailDrawer_half) {
         lastPos = position;
         continue;
       }
-      context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
-      const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
-      const oldAlpha = context.globalAlpha;
-      context.globalAlpha = particle.trailFade ? i / trailLength : 1;
+      context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * TrailDrawer_half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * TrailDrawer_half ? warp.y : position.y) - offsetPos.y);
+      const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? minWidth),
+        oldAlpha = context.globalAlpha;
+      context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
       context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
       context.strokeStyle = step.color;
       context.stroke();
@@ -8826,7 +9010,7 @@ class TrailDrawer {
     particle.trail = [];
     const effectData = particle.effectData;
     particle.trailFade = effectData?.fade ?? true;
-    particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
+    particle.trailLength = getRangeValue(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
     particle.trailMaxWidth = effectData?.maxWidth ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio : undefined;
     particle.trailMinWidth = effectData?.minWidth ? getRangeValue(effectData.minWidth) * container.retina.pixelRatio : undefined;
   }
@@ -8847,13 +9031,12 @@ async function loadTrailEffect(engine, refresh = true) {
 
 
 
-
-
+const fireworks_minSplitCount = 2;
 let initialized = false;
 let initializing = false;
 const explodeSoundCheck = args => {
   const data = args.data;
-  return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < 2;
+  return data.particle.shape === "circle" && !!data.particle.splitCount && data.particle.splitCount < fireworks_minSplitCount;
 };
 class FireworksInstance {
   constructor(container) {
@@ -8875,24 +9058,23 @@ async function initPlugins() {
   }
   if (initializing) {
     return new Promise(resolve => {
-      const interval = setInterval(() => {
-        if (!initialized) {
-          return;
-        }
-        clearInterval(interval);
-        resolve();
-      }, 100);
+      const timeout = 100,
+        interval = setInterval(() => {
+          if (!initialized) {
+            return;
+          }
+          clearInterval(interval);
+          resolve();
+        }, timeout);
     });
   }
   initializing = true;
   await loadEmittersPlugin(tsParticles, false);
   await loadEmittersShapeSquare(tsParticles, false);
   await loadSoundsPlugin(tsParticles, false);
-  await loadLineShape(tsParticles, false);
   await loadRotateUpdater(tsParticles, false);
   await loadDestroyUpdater(tsParticles, false);
   await loadLifeUpdater(tsParticles, false);
-  await loadStrokeColorUpdater(tsParticles, false);
   await loadTrailEffect(tsParticles, false);
   await loadBasic(tsParticles, false);
   initializing = false;
@@ -8909,191 +9091,192 @@ async function fireworks(idOrOptions, sourceOptions) {
     id = "fireworks";
     options.load(idOrOptions);
   }
-  const particlesOptions = {
-    detectRetina: true,
-    background: {
-      color: options.background
-    },
-    fpsLimit: 60,
-    emitters: {
-      direction: "top",
-      life: {
-        count: 0,
-        duration: 0.1,
-        delay: 0.1
+  const identity = 1,
+    particlesOptions = {
+      detectRetina: true,
+      background: {
+        color: options.background
       },
-      rate: {
-        delay: isNumber(options.rate) ? 1 / options.rate : {
-          min: 1 / getRangeMin(options.rate),
-          max: 1 / getRangeMax(options.rate)
+      fpsLimit: 60,
+      emitters: {
+        direction: "top",
+        life: {
+          count: 0,
+          duration: 0.1,
+          delay: 0.1
         },
-        quantity: 1
-      },
-      size: {
-        width: 100,
-        height: 0
-      },
-      position: {
-        y: 100,
-        x: 50
-      }
-    },
-    particles: {
-      number: {
-        value: 0
-      },
-      color: {
-        value: "#fff"
+        rate: {
+          delay: isNumber(options.rate) ? identity / options.rate : {
+            min: identity / getRangeMin(options.rate),
+            max: identity / getRangeMax(options.rate)
+          },
+          quantity: 1
+        },
+        size: {
+          width: 100,
+          height: 0
+        },
+        position: {
+          y: 100,
+          x: 50
+        }
       },
-      destroy: {
-        mode: "split",
-        bounds: {
-          top: setRangeValue(options.minHeight)
+      particles: {
+        number: {
+          value: 0
         },
-        split: {
-          sizeOffset: false,
-          count: 1,
-          factor: {
-            value: 0.333333
-          },
-          rate: {
-            value: options.splitCount
-          },
-          colorOffset: {
-            s: options.saturation,
-            l: options.brightness
+        color: {
+          value: "#fff"
+        },
+        destroy: {
+          mode: "split",
+          bounds: {
+            top: setRangeValue(options.minHeight)
           },
-          particles: {
-            color: {
-              value: options.colors
+          split: {
+            sizeOffset: false,
+            count: 1,
+            factor: {
+              value: 0.333333
             },
-            number: {
-              value: 0
+            rate: {
+              value: options.splitCount
             },
-            opacity: {
-              value: {
-                min: 0.1,
-                max: 1
-              },
-              animation: {
-                enable: true,
-                speed: 1,
-                sync: false,
-                startValue: "max",
-                destroy: "min"
-              }
+            colorOffset: {
+              s: options.saturation,
+              l: options.brightness
             },
-            effect: {
-              type: "trail",
-              options: {
-                trail: {
-                  length: {
-                    min: 5,
-                    max: 10
+            particles: {
+              color: {
+                value: options.colors
+              },
+              number: {
+                value: 0
+              },
+              opacity: {
+                value: {
+                  min: 0.1,
+                  max: 1
+                },
+                animation: {
+                  enable: true,
+                  speed: 1,
+                  sync: false,
+                  startValue: "max",
+                  destroy: "min"
+                }
+              },
+              effect: {
+                type: "trail",
+                options: {
+                  trail: {
+                    length: {
+                      min: 5,
+                      max: 10
+                    }
                   }
                 }
-              }
-            },
-            shape: {
-              type: "circle"
-            },
-            size: {
-              value: {
-                min: 1,
-                max: 2
               },
-              animation: {
-                enable: true,
-                speed: 5,
-                count: 1,
-                sync: false,
-                startValue: "min",
-                destroy: "none"
-              }
-            },
-            life: {
-              count: 1,
-              duration: {
+              shape: {
+                type: "circle"
+              },
+              size: {
                 value: {
-                  min: 0.25,
-                  max: 0.5
+                  min: 1,
+                  max: 2
+                },
+                animation: {
+                  enable: true,
+                  speed: 5,
+                  count: 1,
+                  sync: false,
+                  startValue: "min",
+                  destroy: "none"
                 }
-              }
-            },
-            move: {
-              decay: {
-                min: 0.05,
-                max: 0.1
               },
-              enable: true,
-              gravity: {
-                enable: true,
-                inverse: false,
-                acceleration: setRangeValue(options.gravity)
+              life: {
+                count: 1,
+                duration: {
+                  value: {
+                    min: 0.25,
+                    max: 0.5
+                  }
+                }
               },
-              speed: setRangeValue(options.speed),
-              direction: "none",
-              outModes: "destroy"
+              move: {
+                decay: {
+                  min: 0.05,
+                  max: 0.1
+                },
+                enable: true,
+                gravity: {
+                  enable: true,
+                  inverse: false,
+                  acceleration: setRangeValue(options.gravity)
+                },
+                speed: setRangeValue(options.speed),
+                direction: "none",
+                outModes: "destroy"
+              }
             }
           }
-        }
-      },
-      life: {
-        count: 1
-      },
-      effect: {
-        type: "trail",
-        options: {
-          trail: {
-            length: {
-              min: 10,
-              max: 30
-            },
-            minWidth: 1,
-            maxWidth: 1
+        },
+        life: {
+          count: 1
+        },
+        effect: {
+          type: "trail",
+          options: {
+            trail: {
+              length: {
+                min: 10,
+                max: 30
+              },
+              minWidth: 1,
+              maxWidth: 1
+            }
           }
-        }
-      },
-      shape: {
-        type: "circle"
-      },
-      size: {
-        value: 1
-      },
-      opacity: {
-        value: 0.5
-      },
-      rotate: {
-        path: true
-      },
-      move: {
-        enable: true,
-        gravity: {
-          acceleration: 15,
-          enable: true,
-          inverse: true,
-          maxSpeed: 100
         },
-        speed: {
-          min: 10,
-          max: 20
+        shape: {
+          type: "circle"
+        },
+        size: {
+          value: 1
+        },
+        opacity: {
+          value: 0.5
         },
-        outModes: {
-          default: "destroy",
-          top: "none"
+        rotate: {
+          path: true
+        },
+        move: {
+          enable: true,
+          gravity: {
+            acceleration: 15,
+            enable: true,
+            inverse: true,
+            maxSpeed: 100
+          },
+          speed: {
+            min: 10,
+            max: 20
+          },
+          outModes: {
+            default: "destroy",
+            top: "none"
+          }
         }
+      },
+      sounds: {
+        enable: options.sounds,
+        events: [{
+          event: "particleRemoved",
+          filter: explodeSoundCheck,
+          audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]
+        }],
+        volume: 50
       }
-    },
-    sounds: {
-      enable: options.sounds,
-      events: [{
-        event: "particleDestroyed",
-        filter: explodeSoundCheck,
-        audio: ["https://particles.js.org/audio/explosion0.mp3", "https://particles.js.org/audio/explosion1.mp3", "https://particles.js.org/audio/explosion2.mp3"]
-      }],
-      volume: 50
-    }
-  };
+    };
   const container = await tsParticles.load({
     id,
     options: particlesOptions