@tsparticles/preset-bubbles 3.0.0-beta.1 → 3.0.0-beta.4

package/tsparticles.preset.bubbles.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.0-beta.1
+ * v3.0.0-beta.4
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -61,7 +61,7 @@ __webpack_require__.d(__webpack_exports__, {
   tsParticles: () => (/* reexport */ tsParticles)
 });
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Constants.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Constants.js
 const generatedAttribute = "generated";
 const mouseDownEvent = "pointerdown";
 const mouseUpEvent = "pointerup";
@@ -76,7 +76,7 @@ const resizeEvent = "resize";
 const visibilityChangeEvent = "visibilitychange";
 const errorPrefix = "tsParticles - Error";
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Vector3d.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Vector3d.js
 
 
 class Vector3d {
@@ -182,7 +182,7 @@ class Vector3d {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Vector.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Vector.js
 
 class Vector_Vector extends Vector3d {
     constructor(xOrCoords, y) {
@@ -199,7 +199,7 @@ class Vector_Vector extends Vector3d {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/NumberUtils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/NumberUtils.js
 
 
 let _random = Math.random;
@@ -233,7 +233,7 @@ function randomInRange(r) {
     }
     return getRandom() * (max - min) + min;
 }
-function getRangeValue(value) {
+function NumberUtils_getRangeValue(value) {
     return isNumber(value) ? value : randomInRange(value);
 }
 function getRangeMin(value) {
@@ -254,15 +254,6 @@ function setRangeValue(source, value) {
         }
         : setRangeValue(min, max);
 }
-function NumberUtils_getValue(options) {
-    const random = options.random, { enable, minimumValue } = isBoolean(random)
-        ? {
-            enable: random,
-            minimumValue: 0,
-        }
-        : random;
-    return enable ? getRangeValue(setRangeValue(options.value, minimumValue)) : getRangeValue(options.value);
-}
 function NumberUtils_getDistances(pointA, pointB) {
     const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
     return { dx: dx, dy: dy, distance: Math.sqrt(dx ** 2 + dy ** 2) };
@@ -276,21 +267,21 @@ function getParticleDirectionAngle(direction, position, center) {
     }
     switch (direction) {
         case "top":
-            return -Math.PI / 2;
+            return -Math.PI * 0.5;
         case "top-right":
-            return -Math.PI / 4;
+            return -Math.PI * 0.25;
         case "right":
             return 0;
         case "bottom-right":
-            return Math.PI / 4;
+            return Math.PI * 0.25;
         case "bottom":
-            return Math.PI / 2;
+            return Math.PI * 0.5;
         case "bottom-left":
-            return (3 * Math.PI) / 4;
+            return Math.PI * 0.75;
         case "left":
             return Math.PI;
         case "top-left":
-            return (-3 * Math.PI) / 4;
+            return -Math.PI * 0.75;
         case "inside":
             return Math.atan2(center.y - position.y, center.x - position.x);
         case "outside":
@@ -324,8 +315,8 @@ function calcPositionOrRandomFromSize(data) {
 }
 function calcPositionOrRandomFromSizeRanged(data) {
     const position = {
-        x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
-        y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
+        x: data.position?.x !== undefined ? NumberUtils_getRangeValue(data.position.x) : undefined,
+        y: data.position?.y !== undefined ? NumberUtils_getRangeValue(data.position.y) : undefined,
     };
     return calcPositionOrRandomFromSize({ size: data.size, position });
 }
@@ -337,8 +328,8 @@ function calcExactPositionOrRandomFromSize(data) {
 }
 function calcExactPositionOrRandomFromSizeRanged(data) {
     const position = {
-        x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
-        y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
+        x: data.position?.x !== undefined ? NumberUtils_getRangeValue(data.position.x) : undefined,
+        y: data.position?.y !== undefined ? NumberUtils_getRangeValue(data.position.y) : undefined,
     };
     return calcExactPositionOrRandomFromSize({ size: data.size, position });
 }
@@ -346,7 +337,7 @@ function parseAlpha(input) {
     return input ? (input.endsWith("%") ? parseFloat(input) / 100 : parseFloat(input)) : 1;
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/Utils.js
 
 
 const _logger = {
@@ -376,8 +367,8 @@ function rectSideBounce(data) {
         pOtherSide.max > rectOtherSide.max) {
         return res;
     }
-    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0)) {
+    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)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -401,6 +392,12 @@ function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
+function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
 function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
@@ -510,7 +507,7 @@ function circleBounceDataFromParticle(p) {
         radius: p.getRadius(),
         mass: p.getMass(),
         velocity: p.velocity,
-        factor: Vector.create(getValue(p.options.bounce.horizontal), getValue(p.options.bounce.vertical)),
+        factor: Vector.create(getRangeValue(p.options.bounce.horizontal.value), getRangeValue(p.options.bounce.vertical.value)),
     };
 }
 function circleBounce(p1, p2) {
@@ -525,7 +522,7 @@ function circleBounce(p1, p2) {
     p2.velocity.y = vFinal2.y * p2.factor.y;
 }
 function rectBounce(particle, divBounds) {
-    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), resH = rectSideBounce({
+    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
             min: bounds.left,
             max: bounds.right,
@@ -543,7 +540,7 @@ function rectBounce(particle, divBounds) {
             max: divBounds.bottom,
         },
         velocity: particle.velocity.x,
-        factor: getValue(particle.options.bounce.horizontal),
+        factor: getRangeValue(bounceOptions.horizontal.value),
     });
     if (resH.bounced) {
         if (resH.velocity !== undefined) {
@@ -571,7 +568,7 @@ function rectBounce(particle, divBounds) {
             max: divBounds.right,
         },
         velocity: particle.velocity.y,
-        factor: getValue(particle.options.bounce.vertical),
+        factor: getRangeValue(bounceOptions.vertical.value),
     });
     if (resV.bounced) {
         if (resV.velocity !== undefined) {
@@ -593,17 +590,17 @@ function findItemFromSingleOrMultiple(obj, callback) {
 }
 function initParticleNumericAnimationValue(options, pxRatio) {
     const valueRange = options.value, animationOptions = options.animation, res = {
-        delayTime: getRangeValue(animationOptions.delay) * 1000,
+        delayTime: NumberUtils_getRangeValue(animationOptions.delay) * 1000,
         enable: animationOptions.enable,
-        value: getRangeValue(options.value) * pxRatio,
+        value: NumberUtils_getRangeValue(options.value) * pxRatio,
         max: getRangeMax(valueRange) * pxRatio,
         min: getRangeMin(valueRange) * pxRatio,
         loops: 0,
-        maxLoops: getRangeValue(animationOptions.count),
+        maxLoops: NumberUtils_getRangeValue(animationOptions.count),
         time: 0,
     };
     if (animationOptions.enable) {
-        res.decay = 1 - getRangeValue(animationOptions.decay);
+        res.decay = 1 - NumberUtils_getRangeValue(animationOptions.decay);
         switch (animationOptions.mode) {
             case "increase":
                 res.status = "increasing";
@@ -686,31 +683,13 @@ function isArray(arg) {
     return Array.isArray(arg);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/ColorUtils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/ColorUtils.js
 
 
 const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
 function addColorManager(manager) {
     colorManagers.set(manager.key, manager);
 }
-function hue2rgb(p, q, t) {
-    if (t < 0) {
-        t += 1;
-    }
-    if (t > 1) {
-        t -= 1;
-    }
-    if (t < 1 / 6) {
-        return p + (q - p) * 6 * t;
-    }
-    if (t < 1 / 2) {
-        return q;
-    }
-    if (t < 2 / 3) {
-        return p + (q - p) * (2 / 3 - t) * 6;
-    }
-    return p;
-}
 function stringToRgba(input) {
     for (const [, manager] of colorManagers) {
         if (input.startsWith(manager.stringPrefix)) {
@@ -780,7 +759,7 @@ function rangeColorToHsl(color, index, useIndex = true) {
 function rgbToHsl(color) {
     const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
         h: 0,
-        l: (max + min) / 2,
+        l: (max + min) * 0.5,
         s: 0,
     };
     if (max !== min) {
@@ -808,26 +787,30 @@ function stringToRgb(input) {
     return stringToRgba(input);
 }
 function hslToRgb(hsl) {
-    const result = { b: 0, g: 0, r: 0 }, hslPercent = {
-        h: hsl.h / 360,
-        l: hsl.l / 100,
-        s: hsl.s / 100,
-    };
-    if (!hslPercent.s) {
-        result.r = result.g = result.b = hslPercent.l;
+    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);
+        return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
-    else {
-        const q = hslPercent.l < 0.5
-            ? hslPercent.l * (1 + hslPercent.s)
-            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
-        result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
-        result.g = hue2rgb(p, q, hslPercent.h);
-        result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
-    }
-    result.r = Math.floor(result.r * 255);
-    result.g = Math.floor(result.g * 255);
-    result.b = Math.floor(result.b * 255);
-    return result;
+    const channel = (temp1, temp2, temp3) => {
+        if (temp3 < 0) {
+            temp3 += 1;
+        }
+        if (temp3 > 1) {
+            temp3 -= 1;
+        }
+        if (temp3 * 6 < 1) {
+            return temp1 + (temp2 - temp1) * 6 * temp3;
+        }
+        if (temp3 * 2 < 1) {
+            return temp2;
+        }
+        if (temp3 * 3 < 2) {
+            return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+        }
+        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));
+    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 function hslaToRgba(hsla) {
     const rgbResult = hslToRgb(hsla);
@@ -942,13 +925,13 @@ function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
     if (colorValue.enable) {
-        colorValue.velocity = (getRangeValue(colorAnimation.speed) / 100) * reduceFactor;
-        colorValue.decay = 1 - getRangeValue(colorAnimation.decay);
+        colorValue.velocity = (NumberUtils_getRangeValue(colorAnimation.speed) / 100) * reduceFactor;
+        colorValue.decay = 1 - NumberUtils_getRangeValue(colorAnimation.decay);
         colorValue.status = "increasing";
         colorValue.loops = 0;
-        colorValue.maxLoops = getRangeValue(colorAnimation.count);
+        colorValue.maxLoops = NumberUtils_getRangeValue(colorAnimation.count);
         colorValue.time = 0;
-        colorValue.delayTime = getRangeValue(colorAnimation.delay) * 1000;
+        colorValue.delayTime = NumberUtils_getRangeValue(colorAnimation.delay) * 1000;
         if (!colorAnimation.sync) {
             colorValue.velocity *= getRandom();
             colorValue.value *= getRandom();
@@ -960,7 +943,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/CanvasUtils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/CanvasUtils.js
 
 function drawLine(context, begin, end) {
     context.beginPath();
@@ -968,13 +951,6 @@ function drawLine(context, begin, end) {
     context.lineTo(end.x, end.y);
     context.closePath();
 }
-function drawTriangle(context, p1, p2, p3) {
-    context.beginPath();
-    context.moveTo(p1.x, p1.y);
-    context.lineTo(p2.x, p2.y);
-    context.lineTo(p3.x, p3.y);
-    context.closePath();
-}
 function paintBase(context, dimension, baseColor) {
     context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
     context.fillRect(0, 0, dimension.width, dimension.height);
@@ -1002,7 +978,6 @@ function drawParticle(data) {
         d: rotateData.cos * (transform.d ?? 1),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    context.beginPath();
     if (backgroundMask) {
         context.globalCompositeOperation = composite;
     }
@@ -1021,39 +996,55 @@ function drawParticle(data) {
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
     }
-    drawShape(container, context, particle, radius, opacity, delta);
+    const drawData = { container, context, particle, radius, opacity, delta };
+    context.beginPath();
+    drawShape(drawData);
+    if (particle.shapeClose) {
+        context.closePath();
+    }
     if (strokeWidth > 0) {
         context.stroke();
     }
-    if (particle.close) {
-        context.closePath();
-    }
-    if (particle.fill) {
+    if (particle.shapeFill) {
         context.fill();
     }
-    drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
+    drawShapeAfterDraw(drawData);
+    drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.setTransform(1, 0, 0, 1, 0, 0);
 }
-function drawShape(container, context, particle, radius, opacity, delta) {
+function drawEffect(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect);
+    if (!drawer) {
+        return;
+    }
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
+}
+function drawShape(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
+    const drawer = container.shapeDrawers.get(particle.shape);
     if (!drawer) {
         return;
     }
-    drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.draw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
-function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
+function drawShapeAfterDraw(data) {
+    const { container, context, particle, radius, opacity, delta } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.drawers.get(particle.shape);
-    if (!drawer || !drawer.afterEffect) {
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer || !drawer.afterDraw) {
         return;
     }
-    drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
+    drawer.afterDraw({ context, particle, radius, opacity, delta, pixelRatio: container.retina.pixelRatio });
 }
 function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
@@ -1075,7 +1066,7 @@ function alterHsl(color, type, value) {
     };
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Canvas.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Canvas.js
 
 
 
@@ -1480,10 +1471,10 @@ class Canvas {
         this.element.width = size.width = this.element.offsetWidth * pxRatio;
         this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
-            this.resizeFactor = {
+            container.particles.setResizeFactor({
                 width: size.width / oldSize.width,
                 height: size.height / oldSize.height,
-            };
+            });
         }
         return true;
     }
@@ -1505,7 +1496,7 @@ class Canvas {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/EventListeners.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/EventListeners.js
 
 
 function manageListener(element, event, handler, add, options) {
@@ -1826,7 +1817,7 @@ class EventListeners {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/OptionsColor.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/OptionsColor.js
 
 class OptionsColor {
     constructor() {
@@ -1853,7 +1844,7 @@ class OptionsColor {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Background/Background.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Background/Background.js
 
 class Background {
     constructor() {
@@ -1890,7 +1881,7 @@ class Background {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js
 
 class BackgroundMaskCover {
     constructor() {
@@ -1911,7 +1902,7 @@ class BackgroundMaskCover {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/BackgroundMask/BackgroundMask.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/BackgroundMask/BackgroundMask.js
 
 
 class BackgroundMask {
@@ -1928,8 +1919,7 @@ class BackgroundMask {
             this.composite = data.composite;
         }
         if (data.cover !== undefined) {
-            const cover = data.cover;
-            const color = (Utils_isString(data.cover) ? { color: data.cover } : data.cover);
+            const cover = data.cover, color = (Utils_isString(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {
@@ -1938,7 +1928,7 @@ class BackgroundMask {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/FullScreen/FullScreen.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/FullScreen/FullScreen.js
 class FullScreen {
     constructor() {
         this.enable = true;
@@ -1957,7 +1947,7 @@ class FullScreen {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/ClickEvent.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/ClickEvent.js
 class ClickEvent {
     constructor() {
         this.enable = false;
@@ -1976,7 +1966,7 @@ class ClickEvent {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/DivEvent.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/DivEvent.js
 class DivEvent {
     constructor() {
         this.selectors = [];
@@ -2003,7 +1993,7 @@ class DivEvent {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/Parallax.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/Parallax.js
 class Parallax {
     constructor() {
         this.enable = false;
@@ -2026,7 +2016,7 @@ class Parallax {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/HoverEvent.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/HoverEvent.js
 
 class HoverEvent {
     constructor() {
@@ -2048,7 +2038,7 @@ class HoverEvent {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/ResizeEvent.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/ResizeEvent.js
 class ResizeEvent {
     constructor() {
         this.delay = 0.5;
@@ -2067,7 +2057,7 @@ class ResizeEvent {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/Events.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Events/Events.js
 
 
 
@@ -2103,7 +2093,7 @@ class Events {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Modes/Modes.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Modes/Modes.js
 class Modes {
     constructor(engine, container) {
         this._engine = engine;
@@ -2129,7 +2119,7 @@ class Modes {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Interactivity.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Interactivity/Interactivity.js
 
 
 class Interactivity {
@@ -2151,7 +2141,7 @@ class Interactivity {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/ManualParticle.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/ManualParticle.js
 
 class ManualParticle {
     load(data) {
@@ -2171,7 +2161,7 @@ class ManualParticle {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Responsive.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Responsive.js
 
 class Responsive {
     constructor() {
@@ -2200,7 +2190,7 @@ class Responsive {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Theme/ThemeDefault.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Theme/ThemeDefault.js
 class ThemeDefault {
     constructor() {
         this.auto = false;
@@ -2223,7 +2213,7 @@ class ThemeDefault {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Theme/Theme.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Theme/Theme.js
 
 
 class Theme {
@@ -2245,17 +2235,16 @@ class Theme {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/ColorAnimation.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/AnimationOptions.js
 
-class ColorAnimation {
+class AnimationOptions {
     constructor() {
         this.count = 0;
         this.enable = false;
-        this.offset = 0;
         this.speed = 1;
-        this.delay = 0;
         this.decay = 0;
-        this.sync = true;
+        this.delay = 0;
+        this.sync = false;
     }
     load(data) {
         if (!data) {
@@ -2267,9 +2256,6 @@ class ColorAnimation {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        if (data.offset !== undefined) {
-            this.offset = setRangeValue(data.offset);
-        }
         if (data.speed !== undefined) {
             this.speed = setRangeValue(data.speed);
         }
@@ -2284,8 +2270,47 @@ class ColorAnimation {
         }
     }
 }
+class RangedAnimationOptions extends AnimationOptions {
+    constructor() {
+        super();
+        this.mode = "auto";
+        this.startValue = "random";
+    }
+    load(data) {
+        super.load(data);
+        if (!data) {
+            return;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.startValue !== undefined) {
+            this.startValue = data.startValue;
+        }
+    }
+}
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/HslAnimation.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/ColorAnimation.js
+
+
+class ColorAnimation extends AnimationOptions {
+    constructor() {
+        super();
+        this.offset = 0;
+        this.sync = true;
+    }
+    load(data) {
+        super.load(data);
+        if (!data) {
+            return;
+        }
+        if (data.offset !== undefined) {
+            this.offset = setRangeValue(data.offset);
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/HslAnimation.js
 
 class HslAnimation {
     constructor() {
@@ -2303,7 +2328,7 @@ class HslAnimation {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/AnimatableColor.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/AnimatableColor.js
 
 
 
@@ -2342,7 +2367,7 @@ class AnimatableColor extends OptionsColor {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/CollisionsAbsorb.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/CollisionsAbsorb.js
 class CollisionsAbsorb {
     constructor() {
         this.speed = 2;
@@ -2357,7 +2382,7 @@ class CollisionsAbsorb {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/CollisionsOverlap.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/CollisionsOverlap.js
 class CollisionsOverlap {
     constructor() {
         this.enable = true;
@@ -2376,106 +2401,23 @@ class CollisionsOverlap {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/AnimationOptions.js
-
-class AnimationOptions_AnimationOptions {
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 1;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-    }
-    load(data) {
-        if (!data) {
-            return;
-        }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
-    }
-}
-class AnimationOptions_RangedAnimationOptions extends AnimationOptions_AnimationOptions {
-    constructor() {
-        super();
-        this.mode = "auto";
-        this.startValue = "random";
-    }
-    load(data) {
-        super.load(data);
-        if (!data) {
-            return;
-        }
-        if (data.mode !== undefined) {
-            this.mode = data.mode;
-        }
-        if (data.startValue !== undefined) {
-            this.startValue = data.startValue;
-        }
-    }
-}
-
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Random.js
-class Random {
-    constructor() {
-        this.enable = false;
-        this.minimumValue = 0;
-    }
-    load(data) {
-        if (!data) {
-            return;
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.minimumValue !== undefined) {
-            this.minimumValue = data.minimumValue;
-        }
-    }
-}
-
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/ValueWithRandom.js
-
-
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/ValueWithRandom.js
 
 
 class ValueWithRandom {
     constructor() {
-        this.random = new Random();
         this.value = 0;
     }
     load(data) {
         if (!data) {
             return;
         }
-        if (isBoolean(data.random)) {
-            this.random.enable = data.random;
-        }
-        else {
-            this.random.load(data.random);
-        }
         if (data.value !== undefined) {
-            this.value = setRangeValue(data.value, this.random.enable ? this.random.minimumValue : undefined);
+            this.value = setRangeValue(data.value);
         }
     }
 }
-class AnimationValueWithRandom extends (/* unused pure expression or super */ null && (ValueWithRandom)) {
+class AnimationValueWithRandom extends ValueWithRandom {
     constructor() {
         super();
         this.animation = new AnimationOptions();
@@ -2491,7 +2433,7 @@ class AnimationValueWithRandom extends (/* unused pure expression or super */ nu
         }
     }
 }
-class RangedAnimationValueWithRandom extends (/* unused pure expression or super */ null && (AnimationValueWithRandom)) {
+class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
     constructor() {
         super();
         this.animation = new RangedAnimationOptions();
@@ -2501,17 +2443,16 @@ class RangedAnimationValueWithRandom extends (/* unused pure expression or super
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Bounce/ParticlesBounceFactor.js
 
 class ParticlesBounceFactor extends ValueWithRandom {
     constructor() {
         super();
-        this.random.minimumValue = 0.1;
         this.value = 1;
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Bounce/ParticlesBounce.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Bounce/ParticlesBounce.js
 
 class ParticlesBounce {
     constructor() {
@@ -2527,7 +2468,7 @@ class ParticlesBounce {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/Collisions.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Collisions/Collisions.js
 
 
 
@@ -2560,7 +2501,41 @@ class Collisions {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveAngle.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Effect/Effect.js
+
+class Effect {
+    constructor() {
+        this.close = true;
+        this.fill = true;
+        this.options = {};
+        this.type = [];
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        const options = data.options;
+        if (options !== undefined) {
+            for (const effect in options) {
+                const item = options[effect];
+                if (item) {
+                    this.options[effect] = deepExtend(this.options[effect] ?? {}, item);
+                }
+            }
+        }
+        if (data.close !== undefined) {
+            this.close = data.close;
+        }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveAngle.js
 
 class MoveAngle {
     constructor() {
@@ -2580,7 +2555,7 @@ class MoveAngle {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveAttract.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveAttract.js
 
 class MoveAttract {
     constructor() {
@@ -2614,7 +2589,7 @@ class MoveAttract {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveCenter.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveCenter.js
 class MoveCenter {
     constructor() {
         this.x = 50;
@@ -2641,7 +2616,7 @@ class MoveCenter {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveGravity.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveGravity.js
 
 class MoveGravity {
     constructor() {
@@ -2669,7 +2644,7 @@ class MoveGravity {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Path/MovePath.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Path/MovePath.js
 
 
 class MovePath {
@@ -2697,7 +2672,7 @@ class MovePath {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveTrailFill.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveTrailFill.js
 
 class MoveTrailFill {
     load(data) {
@@ -2713,7 +2688,7 @@ class MoveTrailFill {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveTrail.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/MoveTrail.js
 
 class MoveTrail {
     constructor() {
@@ -2737,7 +2712,7 @@ class MoveTrail {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/OutModes.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/OutModes.js
 class OutModes {
     constructor() {
         this.default = "out";
@@ -2756,7 +2731,7 @@ class OutModes {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Spin.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Spin.js
 
 
 class Spin {
@@ -2780,7 +2755,7 @@ class Spin {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Move.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Move/Move.js
 
 
 
@@ -2876,9 +2851,9 @@ class Move {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Opacity/OpacityAnimation.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Opacity/OpacityAnimation.js
 
-class OpacityAnimation extends AnimationOptions_RangedAnimationOptions {
+class OpacityAnimation extends RangedAnimationOptions {
     constructor() {
         super();
         this.destroy = "none";
@@ -2895,14 +2870,13 @@ class OpacityAnimation extends AnimationOptions_RangedAnimationOptions {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Opacity/Opacity.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Opacity/Opacity.js
 
 
-class Opacity extends ValueWithRandom {
+class Opacity extends RangedAnimationValueWithRandom {
     constructor() {
         super();
         this.animation = new OpacityAnimation();
-        this.random.minimumValue = 0.1;
         this.value = 1;
     }
     load(data) {
@@ -2917,7 +2891,7 @@ class Opacity extends ValueWithRandom {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Number/ParticlesDensity.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Number/ParticlesDensity.js
 class ParticlesDensity {
     constructor() {
         this.enable = false;
@@ -2942,12 +2916,32 @@ class ParticlesDensity {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Number/ParticlesNumber.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Number/ParticlesNumberLimit.js
+class ParticlesNumberLimit {
+    constructor() {
+        this.mode = "delete";
+        this.value = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.value !== undefined) {
+            this.value = data.value;
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Number/ParticlesNumber.js
+
 
 class ParticlesNumber {
     constructor() {
         this.density = new ParticlesDensity();
-        this.limit = 0;
+        this.limit = new ParticlesNumberLimit();
         this.value = 0;
     }
     load(data) {
@@ -2955,17 +2949,14 @@ class ParticlesNumber {
             return;
         }
         this.density.load(data.density);
-        const limit = data.limit;
-        if (limit !== undefined) {
-            this.limit = limit;
-        }
+        this.limit.load(data.limit);
         if (data.value !== undefined) {
             this.value = data.value;
         }
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Shadow.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Shadow.js
 
 class Shadow {
     constructor() {
@@ -3001,7 +2992,7 @@ class Shadow {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Shape/Shape.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Shape/Shape.js
 
 class Shape {
     constructor() {
@@ -3035,9 +3026,9 @@ class Shape {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Size/SizeAnimation.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Size/SizeAnimation.js
 
-class SizeAnimation extends AnimationOptions_RangedAnimationOptions {
+class SizeAnimation extends RangedAnimationOptions {
     constructor() {
         super();
         this.destroy = "none";
@@ -3054,14 +3045,13 @@ class SizeAnimation extends AnimationOptions_RangedAnimationOptions {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Size/Size.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Size/Size.js
 
 
-class Size extends ValueWithRandom {
+class Size extends RangedAnimationValueWithRandom {
     constructor() {
         super();
         this.animation = new SizeAnimation();
-        this.random.minimumValue = 1;
         this.value = 3;
     }
     load(data) {
@@ -3076,7 +3066,7 @@ class Size extends ValueWithRandom {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Stroke.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/Stroke.js
 
 
 class Stroke {
@@ -3099,7 +3089,7 @@ class Stroke {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/ZIndex/ZIndex.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/ZIndex/ZIndex.js
 
 class ZIndex extends ValueWithRandom {
     constructor() {
@@ -3125,7 +3115,8 @@ class ZIndex extends ValueWithRandom {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/ParticlesOptions.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Particles/ParticlesOptions.js
+
 
 
 
@@ -3146,6 +3137,7 @@ class ParticlesOptions {
         this.collisions = new Collisions();
         this.color = new AnimatableColor();
         this.color.value = "#fff";
+        this.effect = new Effect();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -3163,6 +3155,7 @@ class ParticlesOptions {
         }
         this.bounce.load(data.bounce);
         this.color.load(AnimatableColor.create(this.color, data.color));
+        this.effect.load(data.effect);
         if (data.groups !== undefined) {
             for (const group in data.groups) {
                 const item = data.groups[group];
@@ -3214,7 +3207,7 @@ class ParticlesOptions {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/OptionsUtils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/OptionsUtils.js
 
 function loadOptions(options, ...sourceOptionsArr) {
     for (const sourceOptions of sourceOptionsArr) {
@@ -3227,7 +3220,7 @@ function loadParticlesOptions(engine, container, ...sourceOptionsArr) {
     return options;
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Options/Classes/Options.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Options/Classes/Options.js
 
 
 
@@ -3379,7 +3372,7 @@ class Options {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/InteractionManager.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/InteractionManager.js
 class InteractionManager {
     constructor(engine, container) {
         this.container = container;
@@ -3431,7 +3424,7 @@ class InteractionManager {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Particle.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Particle.js
 
 
 
@@ -3441,7 +3434,27 @@ class InteractionManager {
 
 
 
-const fixOutMode = (data) => {
+function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
+    const effectData = effectOptions.options[effect];
+    if (!effectData) {
+        return;
+    }
+    return deepExtend({
+        close: effectOptions.close,
+        fill: effectOptions.fill,
+    }, itemFromSingleOrMultiple(effectData, id, reduceDuplicates));
+}
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+    const shapeData = shapeOptions.options[shape];
+    if (!shapeData) {
+        return;
+    }
+    return deepExtend({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill,
+    }, itemFromSingleOrMultiple(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
     if (!isInArray(data.outMode, data.checkModes)) {
         return;
     }
@@ -3452,7 +3465,7 @@ const fixOutMode = (data) => {
     else if (data.coord < diameter) {
         data.setCb(data.radius);
     }
-};
+}
 class Particle {
     constructor(engine, id, container, position, overrideOptions, group) {
         this.container = container;
@@ -3499,9 +3512,9 @@ 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), range = {
-                left: radOffset - rad / 2,
-                right: radOffset + rad / 2,
+            const rad = (Math.PI / 180) * NumberUtils_getRangeValue(moveOptions.angle.value), radOffset = (Math.PI / 180) * NumberUtils_getRangeValue(moveOptions.angle.offset), range = {
+                left: radOffset - rad * 0.5,
+                right: radOffset + rad * 0.5,
             };
             if (!moveOptions.straight) {
                 res.angle += randomInRange(setRangeValue(range.left, range.right));
@@ -3530,7 +3543,7 @@ 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 / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+            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;
             if (!rolled) {
                 return color;
             }
@@ -3543,7 +3556,7 @@ class Particle {
             return color;
         };
         this._initPosition = (position) => {
-            const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value);
+            const container = this.container, zIndexValue = NumberUtils_getRangeValue(this.options.zIndex.value);
             this.position = this._calcPosition(container, position, clamp(zIndexValue, 0, container.zLayers));
             this.initialPosition = this.position.copy();
             const canvasSize = container.canvas.size;
@@ -3563,16 +3576,6 @@ class Particle {
             }
             this.offset = Vector_Vector.origin;
         };
-        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-            const shapeData = shapeOptions.options[this.shape];
-            if (!shapeData) {
-                return;
-            }
-            return deepExtend({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
-        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
@@ -3585,18 +3588,12 @@ class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator;
         for (const [, plugin] of container.plugins) {
-            if (plugin.particleDestroyed) {
-                plugin.particleDestroyed(this, override);
-            }
+            plugin.particleDestroyed && plugin.particleDestroyed(this, override);
         }
         for (const updater of container.particles.updaters) {
-            if (updater.particleDestroyed) {
-                updater.particleDestroyed(this, override);
-            }
-        }
-        if (pathGenerator) {
-            pathGenerator.reset(this);
+            updater.particleDestroyed && updater.particleDestroyed(this, override);
         }
+        pathGenerator && pathGenerator.reset(this);
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
@@ -3609,7 +3606,7 @@ class Particle {
         return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.color));
     }
     getMass() {
-        return (this.getRadius() ** 2 * Math.PI) / 2;
+        return this.getRadius() ** 2 * Math.PI * 0.5;
     }
     getPosition() {
         return {
@@ -3628,9 +3625,11 @@ class Particle {
         const container = this.container, engine = this._engine;
         this.id = id;
         this.group = group;
-        this.fill = true;
+        this.effectClose = true;
+        this.effectFill = true;
+        this.shapeClose = true;
+        this.shapeFill = true;
         this.pathRotation = false;
-        this.close = true;
         this.lastPathTime = 0;
         this.destroyed = false;
         this.unbreakable = false;
@@ -3641,18 +3640,33 @@ class Particle {
         };
         this.outType = "normal";
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles), effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+        this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
         this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
-        const shapeOptions = particlesOptions.shape;
-        if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-            const overrideShapeType = overrideOptions.shape.type, shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
-            if (shape) {
-                this.shape = shape;
-                shapeOptions.load(overrideOptions.shape);
+        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
+        if (overrideOptions) {
+            if (overrideOptions.effect && overrideOptions.effect.type) {
+                const overrideEffectType = overrideOptions.effect.type, effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
+                if (effect) {
+                    this.effect = effect;
+                    effectOptions.load(overrideOptions.effect);
+                }
+            }
+            if (overrideOptions.shape && overrideOptions.shape.type) {
+                const overrideShapeType = overrideOptions.shape.type, shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
+                if (shape) {
+                    this.shape = shape;
+                    shapeOptions.load(overrideOptions.shape);
+                }
             }
         }
-        this.shapeData = this._loadShapeData(shapeOptions, reduceDuplicates);
+        this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
+        this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
         particlesOptions.load(overrideOptions);
+        const effectData = this.effectData;
+        if (effectData) {
+            particlesOptions.load(effectData.particles);
+        }
         const shapeData = this.shapeData;
         if (shapeData) {
             particlesOptions.load(shapeData.particles);
@@ -3661,11 +3675,13 @@ class Particle {
         interactivity.load(container.actualOptions.interactivity);
         interactivity.load(particlesOptions.interactivity);
         this.interactivity = interactivity;
-        this.fill = shapeData?.fill ?? particlesOptions.shape.fill;
-        this.close = shapeData?.close ?? particlesOptions.shape.close;
+        this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
+        this.effectClose = effectData?.close ?? particlesOptions.effect.close;
+        this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
+        this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
         this.options = particlesOptions;
         const pathOptions = this.options.move.path;
-        this.pathDelay = NumberUtils_getValue(pathOptions.delay) * 1000;
+        this.pathDelay = NumberUtils_getRangeValue(pathOptions.delay.value) * 1000;
         if (pathOptions.generator) {
             this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -3684,36 +3700,48 @@ class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        this.moveDecay = 1 - getRangeValue(this.options.move.decay);
+        this.moveDecay = 1 - NumberUtils_getRangeValue(this.options.move.decay);
         const particles = container.particles;
-        particles.needsSort = particles.needsSort || particles.lastZIndex < this.position.z;
-        particles.lastZIndex = this.position.z;
+        particles.setLastZIndex(this.position.z);
         this.zIndexFactor = this.position.z / container.zLayers;
         this.sides = 24;
-        let drawer = container.drawers.get(this.shape);
-        if (!drawer) {
-            drawer = this._engine.getShapeDrawer(this.shape);
-            if (drawer) {
-                container.drawers.set(this.shape, drawer);
+        let effectDrawer = container.effectDrawers.get(this.effect);
+        if (!effectDrawer) {
+            effectDrawer = this._engine.getEffectDrawer(this.effect);
+            if (effectDrawer) {
+                container.effectDrawers.set(this.effect, effectDrawer);
             }
         }
-        if (drawer && drawer.loadShape) {
-            drawer.loadShape(this);
+        if (effectDrawer && effectDrawer.loadEffect) {
+            effectDrawer.loadEffect(this);
+        }
+        let shapeDrawer = container.shapeDrawers.get(this.shape);
+        if (!shapeDrawer) {
+            shapeDrawer = this._engine.getShapeDrawer(this.shape);
+            if (shapeDrawer) {
+                container.shapeDrawers.set(this.shape, shapeDrawer);
+            }
         }
-        const sideCountFunc = drawer?.getSidesCount;
+        if (shapeDrawer && shapeDrawer.loadShape) {
+            shapeDrawer.loadShape(this);
+        }
+        const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
         this.shadowColor = rangeColorToRgb(this.options.shadow.color);
-        for (const updater of container.particles.updaters) {
+        for (const updater of particles.updaters) {
             updater.init(this);
         }
-        for (const mover of container.particles.movers) {
+        for (const mover of particles.movers) {
             mover.init && mover.init(this);
         }
-        if (drawer && drawer.particleInit) {
-            drawer.particleInit(container, this);
+        if (effectDrawer && effectDrawer.particleInit) {
+            effectDrawer.particleInit(container, this);
+        }
+        if (shapeDrawer && shapeDrawer.particleInit) {
+            shapeDrawer.particleInit(container, this);
         }
         for (const [, plugin] of container.plugins) {
             plugin.particleCreated && plugin.particleCreated(this);
@@ -3736,7 +3764,7 @@ class Particle {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Point.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Point.js
 class Point {
     constructor(position, particle) {
         this.position = position;
@@ -3744,7 +3772,7 @@ class Point {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Range.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Range.js
 class Range {
     constructor(x, y) {
         this.position = {
@@ -3754,7 +3782,7 @@ class Range {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Rectangle.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Rectangle.js
 
 
 class Rectangle extends Range {
@@ -3778,7 +3806,7 @@ class Rectangle extends Range {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/Circle.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/Circle.js
 
 
 
@@ -3807,7 +3835,7 @@ class Circle extends Range {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Utils/QuadTree.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Utils/QuadTree.js
 
 
 
@@ -3818,7 +3846,7 @@ class QuadTree {
         this._subdivide = () => {
             const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
             for (let i = 0; i < 4; i++) {
-                this._subs.push(new QuadTree(new Rectangle(x + (width / 2) * (i % 2), y + (height / 2) * (Math.round(i / 2) - (i % 2)), width / 2, height / 2), capacity));
+                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));
             }
             this._divided = true;
         };
@@ -3867,7 +3895,7 @@ class QuadTree {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Particles.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Particles.js
 
 
 
@@ -3877,16 +3905,29 @@ class QuadTree {
 
 const qTreeCapacity = 4;
 const qTreeRectangle = (canvasSize) => {
-    return new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2);
+    const { height, width } = canvasSize, posOffset = -0.25, sizeFactor = 1.5;
+    return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
 };
 class Particles {
     constructor(engine, container) {
         this._applyDensity = (options, manualCount, group) => {
+            const numberOptions = options.number;
             if (!options.number.density?.enable) {
+                if (group === undefined) {
+                    this._limit = numberOptions.limit.value;
+                }
+                else {
+                    this._groupLimits.set(group, numberOptions.limit.value);
+                }
                 return;
             }
-            const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
-            this.limit = numberOptions.limit * densityFactor;
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > 0 ? 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) {
+                this._limit = numberOptions.limit.value * densityFactor;
+            }
+            else {
+                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+            }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
@@ -3904,7 +3945,7 @@ class Particles {
         };
         this._pushParticle = (position, overrideOptions, group, initializer) => {
             try {
-                let particle = this.pool.pop();
+                let particle = this._pool.pop();
                 if (particle) {
                     particle.init(this._nextId, position, overrideOptions, group);
                 }
@@ -3940,9 +3981,10 @@ class Particles {
                 return false;
             }
             particle.destroy(override);
+            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, 1);
-            this._zArray = this._zArray.splice(this._zArray.indexOf(particle), 1);
-            this.pool.push(particle);
+            this._zArray.splice(zIdx, 1);
+            this._pool.push(particle);
             this._engine.dispatchEvent("particleRemoved", {
                 container: this._container,
                 data: {
@@ -3956,10 +3998,11 @@ class Particles {
         this._nextId = 0;
         this._array = [];
         this._zArray = [];
-        this.pool = [];
-        this.limit = 0;
-        this.needsSort = false;
-        this.lastZIndex = 0;
+        this._pool = [];
+        this._limit = 0;
+        this._groupLimits = new Map();
+        this._needsSort = false;
+        this._lastZIndex = 0;
         this._interactionManager = new InteractionManager(engine, container);
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -3976,17 +4019,21 @@ class Particles {
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
-        this.pushing = true;
-        const container = this._container, options = container.actualOptions, limit = options.particles.number.limit;
+        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) {
-            const countToRemove = this.count + 1 - limit;
-            if (countToRemove > 0) {
-                this.removeQuantity(countToRemove);
+            if (limitOptions.mode === "delete") {
+                const countToRemove = currentCount + 1 - limit;
+                if (countToRemove > 0) {
+                    this.removeQuantity(countToRemove);
+                }
+            }
+            else if (limitOptions.mode === "wait") {
+                if (currentCount >= limit) {
+                    return;
+                }
             }
         }
-        const res = this._pushParticle(position, overrideOptions, group, initializer);
-        this.pushing = false;
-        return res;
+        return this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
@@ -4023,8 +4070,8 @@ class Particles {
     }
     init() {
         const container = this._container, options = container.actualOptions;
-        this.lastZIndex = 0;
-        this.needsSort = false;
+        this._lastZIndex = 0;
+        this._needsSort = false;
         let handled = false;
         this.updaters = this._engine.getUpdaters(container, true);
         this._interactionManager.init();
@@ -4042,7 +4089,7 @@ class Particles {
         }
         this.addManualParticles();
         if (!handled) {
-            const particlesOptions = options.particles, groups = options.particles.groups;
+            const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
@@ -4086,6 +4133,13 @@ class Particles {
         }
         this._applyDensity(options.particles, options.manualParticles.length);
     }
+    setLastZIndex(zIndex) {
+        this._lastZIndex = zIndex;
+        this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+    }
+    setResizeFactor(factor) {
+        this._resizeFactor = factor;
+    }
     async update(delta) {
         const container = this._container, particlesToDelete = new Set();
         this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
@@ -4093,10 +4147,10 @@ class Particles {
             pathGenerator.update();
         }
         for (const [, plugin] of container.plugins) {
-            plugin.update && plugin.update(delta);
+            plugin.update && (await plugin.update(delta));
         }
+        const resizeFactor = this._resizeFactor;
         for (const particle of this._array) {
-            const resizeFactor = container.canvas.resizeFactor;
             if (resizeFactor && !particle.ignoresResizeRatio) {
                 particle.position.x *= resizeFactor.width;
                 particle.position.y *= resizeFactor.height;
@@ -4124,7 +4178,7 @@ class Particles {
             const checkDelete = (p) => !particlesToDelete.has(p);
             this._array = this.filter(checkDelete);
             this._zArray = this._zArray.filter(checkDelete);
-            this.pool.push(...particlesToDelete);
+            this._pool.push(...particlesToDelete);
         }
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
@@ -4135,17 +4189,17 @@ class Particles {
                 await this._interactionManager.particlesInteract(particle, delta);
             }
         }
-        delete container.canvas.resizeFactor;
-        if (this.needsSort) {
+        delete this._resizeFactor;
+        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;
-            this.needsSort = false;
+            this._lastZIndex = zArray[zArray.length - 1].position.z;
+            this._needsSort = false;
         }
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Retina.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Retina.js
 
 
 class Retina {
@@ -4165,24 +4219,22 @@ class Retina {
             canvas.size.height = element.offsetHeight * ratio;
         }
         const particles = options.particles, moveOptions = particles.move;
-        this.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
-        this.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
-        this.sizeAnimationSpeed = getRangeValue(particles.size.animation.speed) * ratio;
+        this.maxSpeed = NumberUtils_getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
+        this.sizeAnimationSpeed = NumberUtils_getRangeValue(particles.size.animation.speed) * ratio;
     }
     initParticle(particle) {
         const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-        props.attractDistance = getRangeValue(moveOptions.attract.distance) * ratio;
-        props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
-        props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
-        props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
+        props.moveDrift = NumberUtils_getRangeValue(moveOptions.drift) * ratio;
+        props.moveSpeed = NumberUtils_getRangeValue(moveOptions.speed) * ratio;
+        props.sizeAnimationSpeed = NumberUtils_getRangeValue(options.size.animation.speed) * ratio;
         const maxDistance = props.maxDistance;
         maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
         maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
-        props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
+        props.maxSpeed = NumberUtils_getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Container.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Container.js
 
 
 
@@ -4208,7 +4260,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 }
 class Container {
     constructor(engine, id, sourceOptions) {
-        this.id = id;
         this._intersectionManager = (entries) => {
             if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
                 return;
@@ -4222,16 +4273,16 @@ class Container {
         };
         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 + 1000 / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
-                this.lastFrameTime ??= timestamp;
-                const delta = initDelta(timestamp - this.lastFrameTime, this.fpsLimit, this.smooth);
+                this._lastFrameTime ??= timestamp;
+                const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                 this.addLifeTime(delta.value);
-                this.lastFrameTime = timestamp;
+                this._lastFrameTime = timestamp;
                 if (delta.value > 1000) {
                     this.draw(false);
                     return;
@@ -4250,8 +4301,9 @@ class Container {
             }
         };
         this._engine = engine;
+        this.id = Symbol(id);
         this.fpsLimit = 120;
-        this.smooth = false;
+        this._smooth = false;
         this._delay = 0;
         this._duration = 0;
         this._lifeTime = 0;
@@ -4259,7 +4311,7 @@ class Container {
         this.started = false;
         this.destroyed = false;
         this._paused = true;
-        this.lastFrameTime = 0;
+        this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
         this._sourceOptions = sourceOptions;
@@ -4275,13 +4327,12 @@ class Container {
             },
         };
         this.plugins = new Map();
-        this.drawers = new Map();
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = safeIntersectionObserver((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {
@@ -4387,11 +4438,17 @@ class Container {
         this.stop();
         this.particles.destroy();
         this.canvas.destroy();
-        for (const [, drawer] of this.drawers) {
-            drawer.destroy && drawer.destroy(this);
+        for (const [, effectDrawer] of this.effectDrawers) {
+            effectDrawer.destroy && effectDrawer.destroy(this);
+        }
+        for (const [, shapeDrawer] of this.shapeDrawers) {
+            shapeDrawer.destroy && shapeDrawer.destroy(this);
+        }
+        for (const key of this.effectDrawers.keys()) {
+            this.effectDrawers.delete(key);
         }
-        for (const key of this.drawers.keys()) {
-            this.drawers.delete(key);
+        for (const key of this.shapeDrawers.keys()) {
+            this.shapeDrawers.delete(key);
         }
         this._engine.clearPlugins(this);
         this.destroyed = true;
@@ -4408,7 +4465,7 @@ class Container {
         let refreshTime = force;
         this._drawAnimationFrame = requestAnimationFrame(async (timestamp) => {
             if (refreshTime) {
-                this.lastFrameTime = undefined;
+                this._lastFrameTime = undefined;
                 refreshTime = false;
             }
             await this._nextFrame(timestamp);
@@ -4443,11 +4500,18 @@ class Container {
         if (!guardCheck(this)) {
             return;
         }
+        const effects = this._engine.getSupportedEffects();
+        for (const type of effects) {
+            const drawer = this._engine.getEffectDrawer(type);
+            if (drawer) {
+                this.effectDrawers.set(type, drawer);
+            }
+        }
         const shapes = this._engine.getSupportedShapes();
         for (const type of shapes) {
             const drawer = this._engine.getShapeDrawer(type);
             if (drawer) {
-                this.drawers.set(type, drawer);
+                this.shapeDrawers.set(type, drawer);
             }
         }
         this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
@@ -4462,12 +4526,15 @@ 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 = NumberUtils_getRangeValue(this.actualOptions.duration) * 1000;
+        this._delay = NumberUtils_getRangeValue(this.actualOptions.delay) * 1000;
         this._lifeTime = 0;
         this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
-        this.smooth = this.actualOptions.smooth;
-        for (const [, drawer] of this.drawers) {
+        this._smooth = this.actualOptions.smooth;
+        for (const [, drawer] of this.effectDrawers) {
+            drawer.init && (await drawer.init(this));
+        }
+        for (const [, drawer] of this.shapeDrawers) {
             drawer.init && (await drawer.init(this));
         }
         for (const [, plugin] of this.plugins) {
@@ -4596,15 +4663,15 @@ class Container {
         this.actualOptions.responsive = [];
         const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
         this.actualOptions.setTheme(this._currentTheme);
-        if (this.responsiveMaxWidth === newMaxWidth) {
+        if (this._responsiveMaxWidth === newMaxWidth) {
             return false;
         }
-        this.responsiveMaxWidth = newMaxWidth;
+        this._responsiveMaxWidth = newMaxWidth;
         return true;
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/EventDispatcher.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/EventDispatcher.js
 class EventDispatcher {
     constructor() {
         this._listeners = new Map();
@@ -4651,7 +4718,7 @@ class EventDispatcher {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Core/Engine.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Core/Engine.js
 
 
 
@@ -4693,7 +4760,8 @@ class Engine {
         this.movers = new Map();
         this.updaters = new Map();
         this.presets = new Map();
-        this.drawers = new Map();
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
         this.pathGenerators = new Map();
     }
     get configs() {
@@ -4704,18 +4772,18 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.1";
+        return "3.0.0-beta.4";
     }
-    addConfig(nameOrConfig, config) {
-        if (Utils_isString(nameOrConfig)) {
-            if (config) {
-                config.name = nameOrConfig;
-                this._configs.set(nameOrConfig, config);
-            }
-        }
-        else {
-            this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-        }
+    addConfig(config) {
+        const name = config.name ?? "default";
+        this._configs.set(name, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+    }
+    async addEffect(effect, drawer, refresh = true) {
+        executeOnSingleOrMultiple(effect, (type) => {
+            !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+        });
+        await this.refresh(refresh);
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -4744,45 +4812,11 @@ class Engine {
         (override || !this.getPreset(preset)) && this.presets.set(preset, options);
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, initOrRefresh, afterEffectOrRefresh, destroyOrRefresh, refresh = true) {
-        let customDrawer;
-        let realRefresh = refresh, realInit, realAfterEffect, realDestroy;
-        if (isBoolean(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if (isBoolean(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if (isBoolean(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if (isFunction(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         executeOnSingleOrMultiple(shape, (type) => {
-            !this.getShapeDrawer(type) && this.drawers.set(type, customDrawer);
+            !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
         });
-        await this.refresh(realRefresh);
+        await this.refresh(refresh);
     }
     clearPlugins(container) {
         this.updaters.delete(container);
@@ -4810,6 +4844,9 @@ class Engine {
         }
         return res;
     }
+    getEffectDrawer(type) {
+        return this.effectDrawers.get(type);
+    }
     getInteractors(container, force = false) {
         return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
@@ -4826,10 +4863,13 @@ class Engine {
         return this.presets.get(preset);
     }
     getShapeDrawer(type) {
-        return this.drawers.get(type);
+        return this.shapeDrawers.get(type);
+    }
+    getSupportedEffects() {
+        return this.effectDrawers.keys();
     }
     getSupportedShapes() {
-        return this.drawers.keys();
+        return this.shapeDrawers.keys();
     }
     getUpdaters(container, force = false) {
         return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
@@ -4848,7 +4888,7 @@ class Engine {
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+        const currentOptions = itemFromSingleOrMultiple(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {
@@ -4924,7 +4964,7 @@ class Engine {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/HslColorManager.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/HslColorManager.js
 
 
 class HslColorManager {
@@ -4942,9 +4982,9 @@ class HslColorManager {
         const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
         if (hslColor.h !== undefined && hslColor.l !== undefined) {
             return hslToRgb({
-                h: getRangeValue(hslColor.h),
-                l: getRangeValue(hslColor.l),
-                s: getRangeValue(hslColor.s),
+                h: NumberUtils_getRangeValue(hslColor.h),
+                l: NumberUtils_getRangeValue(hslColor.l),
+                s: NumberUtils_getRangeValue(hslColor.s),
             });
         }
     }
@@ -4964,7 +5004,7 @@ class HslColorManager {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/Utils/RgbColorManager.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/Utils/RgbColorManager.js
 
 class RgbColorManager {
     constructor() {
@@ -4981,9 +5021,9 @@ class RgbColorManager {
         const colorValue = color.value, rgbColor = colorValue.rgb ?? color.value;
         if (rgbColor.r !== undefined) {
             return {
-                r: getRangeValue(rgbColor.r),
-                g: getRangeValue(rgbColor.g),
-                b: getRangeValue(rgbColor.b),
+                r: NumberUtils_getRangeValue(rgbColor.r),
+                g: NumberUtils_getRangeValue(rgbColor.g),
+                b: NumberUtils_getRangeValue(rgbColor.b),
             };
         }
     }
@@ -5003,7 +5043,7 @@ class RgbColorManager {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/init.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/init.js
 
 
 
@@ -5017,7 +5057,7 @@ function init() {
     return engine;
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/exports.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/exports.js
 
 
 
@@ -5107,8 +5147,7 @@ function init() {
 
 
 
-
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.1/node_modules/@tsparticles/engine/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+engine@3.0.0-beta.4/node_modules/@tsparticles/engine/browser/index.js
 
 
 const tsParticles = init();
@@ -5119,7 +5158,7 @@ if (!isSsr()) {
 
 
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.1/node_modules/@tsparticles/move-base/browser/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.4/node_modules/@tsparticles/move-base/browser/Utils.js
 
 function applyDistance(particle) {
     const initialPosition = particle.initialPosition, { dx, dy } = NumberUtils_getDistances(initialPosition, particle.position), dxFixed = Math.abs(dx), dyFixed = Math.abs(dy), { maxDistance } = particle.retina, hDistance = maxDistance.horizontal, vDistance = maxDistance.vertical;
@@ -5129,10 +5168,10 @@ function applyDistance(particle) {
     if (((hDistance && dxFixed >= hDistance) || (vDistance && dyFixed >= vDistance)) && !particle.misplaced) {
         particle.misplaced = (!!hDistance && dxFixed > hDistance) || (!!vDistance && dyFixed > vDistance);
         if (hDistance) {
-            particle.velocity.x = particle.velocity.y / 2 - particle.velocity.x;
+            particle.velocity.x = particle.velocity.y * 0.5 - particle.velocity.x;
         }
         if (vDistance) {
-            particle.velocity.y = particle.velocity.x / 2 - particle.velocity.y;
+            particle.velocity.y = particle.velocity.x * 0.5 - particle.velocity.y;
         }
     }
     else if ((!hDistance || dxFixed < hDistance) && (!vDistance || dyFixed < vDistance) && particle.misplaced) {
@@ -5190,16 +5229,16 @@ function spin(particle, moveSpeed) {
     particle.position.x = particle.spin.center.x + particle.spin.radius * updateFunc.x(particle.spin.angle);
     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);
-    if (particle.spin.radius > maxCanvasSize / 2) {
-        particle.spin.radius = maxCanvasSize / 2;
+    const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height), halfMaxSize = maxCanvasSize * 0.5;
+    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.angle += (moveSpeed / 100) * (1 - particle.spin.radius / maxCanvasSize);
+    particle.spin.angle += moveSpeed * 0.01 * (1 - particle.spin.radius / maxCanvasSize);
 }
 function applyPath(particle, delta) {
     const particlesOptions = particle.options, pathOptions = particlesOptions.move.path, pathEnabled = pathOptions.enable;
@@ -5224,7 +5263,7 @@ function getProximitySpeedFactor(particle) {
     return particle.slow.inRange ? particle.slow.factor : 1;
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.1/node_modules/@tsparticles/move-base/browser/BaseMover.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.4/node_modules/@tsparticles/move-base/browser/BaseMover.js
 
 
 const diffFactor = 2;
@@ -5236,9 +5275,9 @@ class BaseMover {
                 return;
             }
             const spinPos = spinOptions.position ?? { x: 50, y: 50 }, spinCenter = {
-                x: (spinPos.x / 100) * container.canvas.size.width,
-                y: (spinPos.y / 100) * container.canvas.size.height,
-            }, pos = particle.getPosition(), distance = getDistance(pos, spinCenter), spinAcceleration = getRangeValue(spinOptions.acceleration);
+                x: spinPos.x * 0.01 * container.canvas.size.width,
+                y: spinPos.y * 0.01 * container.canvas.size.height,
+            }, pos = particle.getPosition(), distance = getDistance(pos, spinCenter), spinAcceleration = NumberUtils_getRangeValue(spinOptions.acceleration);
             particle.retina.spinAcceleration = spinAcceleration * container.retina.pixelRatio;
             particle.spin = {
                 center: spinCenter,
@@ -5253,7 +5292,7 @@ class BaseMover {
         const options = particle.options, gravityOptions = options.move.gravity;
         particle.gravity = {
             enable: gravityOptions.enable,
-            acceleration: getRangeValue(gravityOptions.acceleration),
+            acceleration: NumberUtils_getRangeValue(gravityOptions.acceleration),
             inverse: gravityOptions.inverse,
         };
         this._initSpin(particle);
@@ -5266,8 +5305,8 @@ class BaseMover {
         if (!moveOptions.enable) {
             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), maxSize = getRangeMax(particleOptions.size.value) * pxRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, moveSpeed = (baseSpeed * sizeFactor * slowFactor * (delta.factor || 1)) / diffFactor, maxSpeed = particle.retina.maxSpeed ?? container.retina.maxSpeed;
+        const container = particle.container, pxRatio = container.retina.pixelRatio, slowFactor = getProximitySpeedFactor(particle), baseSpeed = (particle.retina.moveSpeed ??= NumberUtils_getRangeValue(moveOptions.speed) * pxRatio) *
+            container.retina.reduceFactor, moveDrift = (particle.retina.moveDrift ??= NumberUtils_getRangeValue(particle.options.move.drift) * pxRatio), maxSize = getRangeMax(particleOptions.size.value) * pxRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : 1, moveSpeed = (baseSpeed * sizeFactor * slowFactor * (delta.factor || 1)) / diffFactor, maxSpeed = particle.retina.maxSpeed ?? container.retina.maxSpeed;
         if (moveOptions.spin.enable) {
             spin(particle, moveSpeed);
         }
@@ -5278,16 +5317,17 @@ class BaseMover {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.1/node_modules/@tsparticles/move-base/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+move-base@3.0.0-beta.4/node_modules/@tsparticles/move-base/browser/index.js
 
 async function loadBaseMover(engine, refresh = true) {
     await engine.addMover("base", () => new BaseMover(), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+shape-circle@3.0.0-beta.1/node_modules/@tsparticles/shape-circle/browser/CircleDrawer.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+shape-circle@3.0.0-beta.4/node_modules/@tsparticles/shape-circle/browser/CircleDrawer.js
 
 class CircleDrawer {
-    draw(context, particle, radius) {
+    draw(data) {
+        const { context, particle, radius } = data;
         if (!particle.circleRange) {
             particle.circleRange = { min: 0, max: Math.PI * 2 };
         }
@@ -5311,13 +5351,13 @@ class CircleDrawer {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+shape-circle@3.0.0-beta.1/node_modules/@tsparticles/shape-circle/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+shape-circle@3.0.0-beta.4/node_modules/@tsparticles/shape-circle/browser/index.js
 
 async function loadCircleShape(engine, refresh = true) {
     await engine.addShape("circle", new CircleDrawer(), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.1/node_modules/@tsparticles/updater-color/browser/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.4/node_modules/@tsparticles/updater-color/browser/Utils.js
 
 function updateColorValue(delta, colorValue, valueAnimation, max, decrease) {
     if (!colorValue ||
@@ -5383,7 +5423,7 @@ function updateColor(particle, delta) {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.1/node_modules/@tsparticles/updater-color/browser/ColorUpdater.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.4/node_modules/@tsparticles/updater-color/browser/ColorUpdater.js
 
 
 class ColorUpdater {
@@ -5409,13 +5449,13 @@ class ColorUpdater {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.1/node_modules/@tsparticles/updater-color/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-color@3.0.0-beta.4/node_modules/@tsparticles/updater-color/browser/index.js
 
 async function loadColorUpdater(engine, refresh = true) {
     await engine.addParticleUpdater("color", (container) => new ColorUpdater(container), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.1/node_modules/@tsparticles/updater-opacity/browser/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.4/node_modules/@tsparticles/updater-opacity/browser/Utils.js
 
 function checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.opacity.animation.destroy) {
@@ -5481,7 +5521,7 @@ function updateOpacity(particle, delta) {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.1/node_modules/@tsparticles/updater-opacity/browser/OpacityUpdater.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.4/node_modules/@tsparticles/updater-opacity/browser/OpacityUpdater.js
 
 
 class OpacityUpdater {
@@ -5494,7 +5534,7 @@ class OpacityUpdater {
         const opacityAnimation = opacityOptions.animation;
         if (opacityAnimation.enable) {
             particle.opacity.velocity =
-                (getRangeValue(opacityAnimation.speed) / 100) * this.container.retina.reduceFactor;
+                (NumberUtils_getRangeValue(opacityAnimation.speed) / 100) * this.container.retina.reduceFactor;
             if (!opacityAnimation.sync) {
                 particle.opacity.velocity *= getRandom();
             }
@@ -5523,13 +5563,13 @@ class OpacityUpdater {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.1/node_modules/@tsparticles/updater-opacity/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-opacity@3.0.0-beta.4/node_modules/@tsparticles/updater-opacity/browser/index.js
 
 async function loadOpacityUpdater(engine, refresh = true) {
     await engine.addParticleUpdater("opacity", (container) => new OpacityUpdater(container), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/Utils.js
 
 function bounceHorizontal(data) {
     if ((data.outMode !== "bounce" &&
@@ -5549,7 +5589,7 @@ function bounceHorizontal(data) {
     let bounced = false;
     if ((data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0) ||
         (data.direction === "left" && data.bounds.left <= 0 && velocity < 0)) {
-        const newVelocity = NumberUtils_getValue(data.particle.options.bounce.horizontal);
+        const newVelocity = NumberUtils_getRangeValue(data.particle.options.bounce.horizontal.value);
         data.particle.velocity.x *= -newVelocity;
         bounced = true;
     }
@@ -5585,7 +5625,7 @@ function bounceVertical(data) {
     let bounced = false;
     if ((data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0) ||
         (data.direction === "top" && data.bounds.top <= 0 && velocity < 0)) {
-        const newVelocity = NumberUtils_getValue(data.particle.options.bounce.vertical);
+        const newVelocity = NumberUtils_getRangeValue(data.particle.options.bounce.vertical.value);
         data.particle.velocity.y *= -newVelocity;
         bounced = true;
     }
@@ -5604,7 +5644,7 @@ function bounceVertical(data) {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/BounceOutMode.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/BounceOutMode.js
 
 
 class BounceOutMode {
@@ -5642,7 +5682,7 @@ class BounceOutMode {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/DestroyOutMode.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/DestroyOutMode.js
 
 class DestroyOutMode {
     constructor(container) {
@@ -5677,7 +5717,7 @@ class DestroyOutMode {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/NoneOutMode.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/NoneOutMode.js
 
 class NoneOutMode {
     constructor(container) {
@@ -5720,7 +5760,7 @@ class NoneOutMode {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/OutOutMode.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/OutOutMode.js
 
 class OutOutMode {
     constructor(container) {
@@ -5829,7 +5869,7 @@ class OutOutMode {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/OutOfCanvasUpdater.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/OutOfCanvasUpdater.js
 
 
 
@@ -5863,13 +5903,13 @@ class OutOfCanvasUpdater {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.1/node_modules/@tsparticles/updater-out-modes/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-out-modes@3.0.0-beta.4/node_modules/@tsparticles/updater-out-modes/browser/index.js
 
 async function loadOutModesUpdater(engine, refresh = true) {
     await engine.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater(container), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.1/node_modules/@tsparticles/updater-size/browser/Utils.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.4/node_modules/@tsparticles/updater-size/browser/Utils.js
 
 function Utils_checkDestroy(particle, value, minValue, maxValue) {
     switch (particle.options.size.animation.destroy) {
@@ -5937,7 +5977,7 @@ function updateSize(particle, delta) {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.1/node_modules/@tsparticles/updater-size/browser/SizeUpdater.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.4/node_modules/@tsparticles/updater-size/browser/SizeUpdater.js
 
 
 class SizeUpdater {
@@ -5970,13 +6010,13 @@ class SizeUpdater {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.1/node_modules/@tsparticles/updater-size/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+updater-size@3.0.0-beta.4/node_modules/@tsparticles/updater-size/browser/index.js
 
 async function loadSizeUpdater(engine, refresh = true) {
     await engine.addParticleUpdater("size", () => new SizeUpdater(), refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+basic@3.0.0-beta.1/node_modules/@tsparticles/basic/browser/index.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+basic@3.0.0-beta.4/node_modules/@tsparticles/basic/browser/index.js
 
 
 
@@ -5993,33 +6033,7 @@ async function loadBasic(engine, refresh = true) {
     await engine.refresh(refresh);
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Shapes/Circle/CircleShape.js
-
-class CircleShape {
-    randomPosition(position, size, fill) {
-        const generateTheta = (x, y) => {
-            const u = getRandom() / 4.0, theta = Math.atan((y / x) * Math.tan(2 * Math.PI * u)), v = getRandom();
-            if (v < 0.25) {
-                return theta;
-            }
-            else if (v < 0.5) {
-                return Math.PI - theta;
-            }
-            else if (v < 0.75) {
-                return Math.PI + theta;
-            }
-            else {
-                return -theta;
-            }
-        }, radius = (x, y, theta) => (x * y) / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2), [a, b] = [size.width / 2, size.height / 2], randomTheta = generateTheta(a, b), maxRadius = radius(a, b, randomTheta), randomRadius = fill ? maxRadius * Math.sqrt(getRandom()) : maxRadius;
-        return {
-            x: position.x + randomRadius * Math.cos(randomTheta),
-            y: position.y + randomRadius * Math.sin(randomTheta),
-        };
-    }
-}
-
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterLife.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterLife.js
 
 class EmitterLife {
     constructor() {
@@ -6044,7 +6058,7 @@ class EmitterLife {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterRate.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterRate.js
 
 class EmitterRate {
     constructor() {
@@ -6064,7 +6078,49 @@ class EmitterRate {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterSize.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterShapeReplace.js
+class EmitterShapeReplace {
+    constructor() {
+        this.color = false;
+        this.opacity = false;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterShape.js
+
+
+class EmitterShape {
+    constructor() {
+        this.options = {};
+        this.replace = new EmitterShapeReplace();
+        this.type = "square";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = deepExtend({}, data.options ?? {});
+        }
+        this.replace.load(data.replace);
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/EmitterSize.js
 class EmitterSize {
     constructor() {
         this.mode = "percent";
@@ -6087,7 +6143,8 @@ class EmitterSize {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/Emitter.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Options/Classes/Emitter.js
+
 
 
 
@@ -6098,7 +6155,7 @@ class Emitter {
         this.fill = true;
         this.life = new EmitterLife();
         this.rate = new EmitterRate();
-        this.shape = "square";
+        this.shape = new EmitterShape();
         this.startCount = 0;
     }
     load(data) {
@@ -6127,9 +6184,7 @@ class Emitter {
             return deepExtend({}, particles);
         });
         this.rate.load(data.rate);
-        if (data.shape !== undefined) {
-            this.shape = data.shape;
-        }
+        this.shape.load(data.shape);
         if (data.position !== undefined) {
             this.position = {};
             if (data.position.x !== undefined) {
@@ -6151,21 +6206,29 @@ class Emitter {
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/EmitterInstance.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/EmitterInstance.js
 
 
 
+function setParticlesOptionsColor(particlesOptions, color) {
+    if (particlesOptions.color) {
+        particlesOptions.color.value = color;
+    }
+    else {
+        particlesOptions.color = {
+            value: color,
+        };
+    }
+}
 class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
         this.emitters = emitters;
         this.container = container;
-        this._calcPosition = () => {
-            return calcPositionOrRandomFromSizeRanged({
-                size: this.container.canvas.size,
-                position: this.options.position,
-            });
-        };
         this._destroy = () => {
+            this._mutationObserver?.disconnect();
+            this._mutationObserver = undefined;
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = undefined;
             this.emitters.removeEmitter(this);
             this._engine.dispatchEvent("emitterDestroyed", {
                 container: this.container,
@@ -6174,45 +6237,11 @@ class EmitterInstance {
                 },
             });
         };
-        this._emit = () => {
-            if (this._paused) {
-                return;
-            }
-            const quantity = getRangeValue(this.options.rate.quantity);
-            this._emitParticles(quantity);
-        };
-        this._emitParticles = (quantity) => {
-            const position = this.getPosition(), size = this.getSize(), singleParticlesOptions = itemFromSingleOrMultiple(this._particlesOptions);
-            for (let i = 0; i < quantity; i++) {
-                const particlesOptions = deepExtend({}, singleParticlesOptions);
-                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);
-                    }
-                    if (!particlesOptions.color) {
-                        particlesOptions.color = {
-                            value: this.spawnColor,
-                        };
-                    }
-                    else {
-                        particlesOptions.color.value = this.spawnColor;
-                    }
-                }
-                if (!position) {
-                    return;
-                }
-                const pPosition = this._shape?.randomPosition(position, size, this.fill) ?? position;
-                this.container.particles.addParticle(pPosition, particlesOptions);
-            }
-        };
         this._prepareToDie = () => {
             if (this._paused) {
                 return;
             }
-            const duration = this.options.life?.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined;
+            const duration = this.options.life?.duration !== undefined ? NumberUtils_getRangeValue(this.options.life.duration) : undefined;
             if (this.container.retina.reduceFactor &&
                 (this._lifeCount > 0 || this._immortal) &&
                 duration !== undefined &&
@@ -6225,7 +6254,7 @@ class EmitterInstance {
             if (!animation.enable) {
                 return initValue;
             }
-            const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = getRangeValue(animation.speed ?? 0);
+            const colorOffset = randomInRange(animation.offset), delay = NumberUtils_getRangeValue(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = NumberUtils_getRangeValue(animation.speed ?? 0);
             return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
         };
         this._engine = engine;
@@ -6240,10 +6269,9 @@ 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 = (NumberUtils_getRangeValue(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
         this.position = this._initialPosition ?? this._calcPosition();
         this.name = this.options.name;
-        this._shape = this._engine.emitterShapeManager?.getShape(this.options.shape);
         this.fill = this.options.fill;
         this._firstSpawn = !this.options.life.wait;
         this._startParticlesAdded = false;
@@ -6256,19 +6284,30 @@ class EmitterInstance {
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
-        this.size =
-            this.options.size ??
-                (() => {
-                    const size = new EmitterSize();
-                    size.load({
-                        height: 0,
-                        mode: "percent",
-                        width: 0,
-                    });
-                    return size;
-                })();
+        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;
+        if (this.options.domId) {
+            const element = document.getElementById(this.options.domId);
+            if (element) {
+                this._mutationObserver = new MutationObserver(() => {
+                    this.resize();
+                });
+                this._resizeObserver = new ResizeObserver(() => {
+                    this.resize();
+                });
+                this._mutationObserver.observe(element, {
+                    attributes: true,
+                    attributeFilter: ["style", "width", "height"],
+                });
+                this._resizeObserver.observe(element);
+            }
+        }
+        const shapeOptions = this.options.shape, shapeGenerator = this._engine.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
+        if (shapeGenerator) {
+            this._shape = shapeGenerator.generate(this.position, this.size, this.fill, shapeOptions.options);
+        }
         this._engine.dispatchEvent("emitterCreated", {
             container,
             data: {
@@ -6285,32 +6324,8 @@ class EmitterInstance {
         this._paused = false;
         this.play();
     }
-    getPosition() {
-        if (this.options.domId) {
-            const container = this.container, element = document.getElementById(this.options.domId);
-            if (element) {
-                const elRect = element.getBoundingClientRect();
-                return {
-                    x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
-                    y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
-                };
-            }
-        }
-        return this.position;
-    }
-    getSize() {
-        const container = this.container;
-        if (this.options.domId) {
-            const element = document.getElementById(this.options.domId);
-            if (element) {
-                const elRect = element.getBoundingClientRect();
-                return {
-                    width: elRect.width * container.retina.pixelRatio,
-                    height: elRect.height * container.retina.pixelRatio,
-                };
-            }
-        }
-        return getSize(this.size, container.canvas.size);
+    async init() {
+        await this._shape?.init();
     }
     pause() {
         if (this._paused) {
@@ -6328,7 +6343,7 @@ class EmitterInstance {
             return;
         }
         if (this._emitDelay === undefined) {
-            const delay = getRangeValue(this.options.rate.delay);
+            const delay = NumberUtils_getRangeValue(this.options.rate.delay);
             this._emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
         }
         if (this._lifeCount > 0 || this._immortal) {
@@ -6341,8 +6356,11 @@ class EmitterInstance {
             initialPosition && isPointInside(initialPosition, this.container.canvas.size, Vector_Vector.origin)
                 ? initialPosition
                 : this._calcPosition();
+        this._size = this._calcSize();
+        this.size = getSize(this._size, this.container.canvas.size);
+        this._shape?.resize(this.position, this.size);
     }
-    update(delta) {
+    async update(delta) {
         if (this._paused) {
             return;
         }
@@ -6353,7 +6371,7 @@ class EmitterInstance {
         }
         if (!this._startParticlesAdded) {
             this._startParticlesAdded = true;
-            this._emitParticles(this.options.startCount);
+            await this._emitParticles(this.options.startCount);
         }
         if (this._duration !== undefined) {
             this._currentDuration += delta.value;
@@ -6368,7 +6386,7 @@ class EmitterInstance {
                 if (this._lifeCount > 0 || this._immortal) {
                     this.position = this._calcPosition();
                     this._spawnDelay =
-                        (getRangeValue(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
+                        (NumberUtils_getRangeValue(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
                 }
                 else {
                     this._destroy();
@@ -6396,9 +6414,99 @@ class EmitterInstance {
             }
         }
     }
+    _calcPosition() {
+        if (this.options.domId) {
+            const container = this.container, element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
+                    y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
+                };
+            }
+        }
+        return calcPositionOrRandomFromSizeRanged({
+            size: this.container.canvas.size,
+            position: this.options.position,
+        });
+    }
+    _calcSize() {
+        const container = this.container;
+        if (this.options.domId) {
+            const element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    width: elRect.width * container.retina.pixelRatio,
+                    height: elRect.height * container.retina.pixelRatio,
+                    mode: "precise",
+                };
+            }
+        }
+        return (this.options.size ??
+            (() => {
+                const size = new EmitterSize();
+                size.load({
+                    height: 0,
+                    mode: "percent",
+                    width: 0,
+                });
+                return size;
+            })());
+    }
+    async _emit() {
+        if (this._paused) {
+            return;
+        }
+        const quantity = NumberUtils_getRangeValue(this.options.rate.quantity);
+        await this._emitParticles(quantity);
+    }
+    async _emitParticles(quantity) {
+        const singleParticlesOptions = itemFromSingleOrMultiple(this._particlesOptions);
+        for (let i = 0; i < quantity; i++) {
+            const particlesOptions = deepExtend({}, singleParticlesOptions);
+            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);
+                }
+                setParticlesOptionsColor(particlesOptions, this.spawnColor);
+            }
+            const shapeOptions = this.options.shape;
+            let position = this.position;
+            if (this._shape) {
+                const shapePosData = await this._shape.randomPosition();
+                if (shapePosData) {
+                    position = shapePosData.position;
+                    const replaceData = shapeOptions.replace;
+                    if (replaceData.color && shapePosData.color) {
+                        setParticlesOptionsColor(particlesOptions, shapePosData.color);
+                    }
+                    if (replaceData.opacity) {
+                        if (particlesOptions.opacity) {
+                            particlesOptions.opacity.value = shapePosData.opacity;
+                        }
+                        else {
+                            particlesOptions.opacity = {
+                                value: shapePosData.opacity,
+                            };
+                        }
+                    }
+                }
+                else {
+                    position = null;
+                }
+            }
+            if (position) {
+                this.container.particles.addParticle(position, particlesOptions);
+            }
+        }
+    }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Emitters.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/Emitters.js
 
 
 
@@ -6418,7 +6526,7 @@ class Emitters {
         container.getEmitter = (idxOrName) => idxOrName === undefined || isNumber(idxOrName)
             ? this.array[idxOrName || 0]
             : this.array.find((t) => t.name === idxOrName);
-        container.addEmitter = (options, position) => this.addEmitter(options, position);
+        container.addEmitter = async (options, position) => this.addEmitter(options, position);
         container.removeEmitter = (idxOrName) => {
             const emitter = container.getEmitter(idxOrName);
             if (emitter) {
@@ -6438,10 +6546,11 @@ class Emitters {
             }
         };
     }
-    addEmitter(options, position) {
+    async addEmitter(options, position) {
         const emitterOptions = new Emitter();
         emitterOptions.load(options);
         const emitter = new EmitterInstance(this._engine, this, this.container, emitterOptions, position);
+        await emitter.init();
         this.array.push(emitter);
         return emitter;
     }
@@ -6485,11 +6594,11 @@ class Emitters {
         }
         if (isArray(this.emitters)) {
             for (const emitterOptions of this.emitters) {
-                this.addEmitter(emitterOptions);
+                await this.addEmitter(emitterOptions);
             }
         }
         else {
-            this.addEmitter(this.emitters);
+            await this.addEmitter(this.emitters);
         }
     }
     pause() {
@@ -6516,77 +6625,33 @@ class Emitters {
     stop() {
         this.array = [];
     }
-    update(delta) {
+    async update(delta) {
         for (const emitter of this.array) {
-            emitter.update(delta);
+            await emitter.update(delta);
         }
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/ShapeManager.js
-const shapes = new Map();
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/ShapeManager.js
+const shapeGeneratorss = new Map();
 class ShapeManager {
     constructor(engine) {
         this._engine = engine;
     }
-    addShape(name, drawer) {
-        if (!this.getShape(name)) {
-            shapes.set(name, drawer);
+    addShapeGenerator(name, generator) {
+        if (!this.getShapeGenerator(name)) {
+            shapeGeneratorss.set(name, generator);
         }
     }
-    getShape(name) {
-        return shapes.get(name);
+    getShapeGenerator(name) {
+        return shapeGeneratorss.get(name);
     }
-    getSupportedShapes() {
-        return shapes.keys();
+    getSupportedShapeGenerators() {
+        return shapeGeneratorss.keys();
     }
 }
 
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/Shapes/Square/SquareShape.js
-
-function randomSquareCoordinate(position, offset) {
-    return position + offset * (getRandom() - 0.5);
-}
-class SquareShape {
-    randomPosition(position, size, fill) {
-        if (fill) {
-            return {
-                x: randomSquareCoordinate(position.x, size.width),
-                y: randomSquareCoordinate(position.y, size.height),
-            };
-        }
-        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 {
-                        x: position.x + v * halfW,
-                        y: position.y - halfH,
-                    };
-                case 1:
-                    return {
-                        x: position.x - halfW,
-                        y: position.y + v * halfH,
-                    };
-                case 2:
-                    return {
-                        x: position.x + v * halfW,
-                        y: position.y + halfH,
-                    };
-                case 3:
-                default:
-                    return {
-                        x: position.x + halfW,
-                        y: position.y + v * halfH,
-                    };
-            }
-        }
-    }
-}
-
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.1/node_modules/@tsparticles/plugin-emitters/browser/index.js
-
-
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@tsparticles+plugin-emitters@3.0.0-beta.4/node_modules/@tsparticles/plugin-emitters/browser/index.js
 
 
 
@@ -6681,21 +6746,22 @@ async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
         engine.emitterShapeManager = new ShapeManager(engine);
     }
-    if (!engine.addEmitterShape) {
-        engine.addEmitterShape = (name, shape) => {
-            engine.emitterShapeManager?.addShape(name, shape);
+    if (!engine.addEmitterShapeGenerator) {
+        engine.addEmitterShapeGenerator = (name, generator) => {
+            engine.emitterShapeManager?.addShapeGenerator(name, generator);
         };
     }
     const plugin = new EmittersPlugin(engine);
     await engine.addPlugin(plugin, refresh);
-    engine.addEmitterShape("circle", new CircleShape());
-    engine.addEmitterShape("square", new SquareShape());
 }
 
 
 
 
 
+
+
+
 ;// CONCATENATED MODULE: ./dist/browser/options.js
 const options = {
   fpsLimit: 120,