@tsparticles/fireworks 3.0.0-beta.3 → 3.0.0-beta.5

package/tsparticles.fireworks.bundle.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-beta.3
+ * v3.0.0-beta.5
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -97,6 +97,7 @@ __webpack_require__.d(__webpack_exports__, {
   ParticlesDensity: () => (/* reexport */ ParticlesDensity),
   ParticlesInteractorBase: () => (/* reexport */ ParticlesInteractorBase),
   ParticlesNumber: () => (/* reexport */ ParticlesNumber),
+  ParticlesNumberLimit: () => (/* reexport */ ParticlesNumberLimit),
   ParticlesOptions: () => (/* reexport */ ParticlesOptions),
   Point: () => (/* reexport */ Point),
   Range: () => (/* reexport */ Range),
@@ -140,13 +141,13 @@ __webpack_require__.d(__webpack_exports__, {
   deepExtend: () => (/* reexport */ deepExtend),
   divMode: () => (/* reexport */ divMode),
   divModeExecute: () => (/* reexport */ divModeExecute),
+  drawEffect: () => (/* reexport */ drawEffect),
   drawLine: () => (/* reexport */ drawLine),
   drawParticle: () => (/* reexport */ drawParticle),
   drawParticlePlugin: () => (/* reexport */ drawParticlePlugin),
   drawPlugin: () => (/* reexport */ drawPlugin),
   drawShape: () => (/* reexport */ drawShape),
-  drawShapeAfterEffect: () => (/* reexport */ drawShapeAfterEffect),
-  drawTriangle: () => (/* reexport */ drawTriangle),
+  drawShapeAfterDraw: () => (/* reexport */ drawShapeAfterDraw),
   errorPrefix: () => (/* reexport */ errorPrefix),
   executeOnSingleOrMultiple: () => (/* reexport */ executeOnSingleOrMultiple),
   findItemFromSingleOrMultiple: () => (/* reexport */ findItemFromSingleOrMultiple),
@@ -171,7 +172,6 @@ __webpack_require__.d(__webpack_exports__, {
   getSize: () => (/* reexport */ getSize),
   getStyleFromHsl: () => (/* reexport */ getStyleFromHsl),
   getStyleFromRgb: () => (/* reexport */ getStyleFromRgb),
-  getValue: () => (/* reexport */ getValue),
   hasMatchMedia: () => (/* reexport */ hasMatchMedia),
   hslToRgb: () => (/* reexport */ hslToRgb),
   hslaToRgba: () => (/* reexport */ hslaToRgba),
@@ -410,17 +410,6 @@ function setRangeValue(source, value) {
     max: Math.max(max, value)
   } : setRangeValue(min, max);
 }
-function 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 getDistances(pointA, pointB) {
   const dx = pointA.x - pointB.x,
     dy = pointA.y - pointB.y;
@@ -439,21 +428,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":
@@ -549,7 +538,7 @@ function rectSideBounce(data) {
   if (pOtherSide.min < rectOtherSide.min || pOtherSide.min > rectOtherSide.max || pOtherSide.max < rectOtherSide.min || pOtherSide.max > rectOtherSide.max) {
     return res;
   }
-  if (pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 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;
   }
@@ -685,7 +674,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) {
@@ -719,6 +708,7 @@ function rectBounce(particle, divBounds) {
   const pPos = particle.getPosition(),
     size = particle.getRadius(),
     bounds = calculateBounds(pPos, size),
+    bounceOptions = particle.options.bounce,
     resH = rectSideBounce({
       pSide: {
         min: bounds.left,
@@ -737,7 +727,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) {
@@ -765,7 +755,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) {
@@ -892,24 +882,6 @@ const randomColorValue = "random",
 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)) {
@@ -989,7 +961,7 @@ function rgbToHsl(color) {
     min = Math.min(r1, g1, b1),
     res = {
       h: 0,
-      l: (max + min) / 2,
+      l: (max + min) * 0.5,
       s: 0
     };
   if (max !== min) {
@@ -1014,29 +986,48 @@ 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
+  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
     };
-  if (!hslPercent.s) {
-    result.r = result.g = result.b = hslPercent.l;
-  } 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);
@@ -1170,13 +1161,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);
@@ -1219,7 +1203,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;
   }
@@ -1246,20 +1229,47 @@ function drawParticle(data) {
     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(drawData);
+  drawShapeAfterDraw(drawData);
+  drawEffect(drawData);
   context.globalCompositeOperation = "source-over";
   context.setTransform(1, 0, 0, 1, 0, 0);
 }
+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,
@@ -1272,7 +1282,7 @@ function drawShape(data) {
   if (!particle.shape) {
     return;
   }
-  const drawer = container.drawers.get(particle.shape);
+  const drawer = container.shapeDrawers.get(particle.shape);
   if (!drawer) {
     return;
   }
@@ -1285,7 +1295,7 @@ function drawShape(data) {
     pixelRatio: container.retina.pixelRatio
   });
 }
-function drawShapeAfterEffect(data) {
+function drawShapeAfterDraw(data) {
   const {
     container,
     context,
@@ -1297,11 +1307,11 @@ function drawShapeAfterEffect(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({
+  drawer.afterDraw({
     context,
     particle,
     radius,
@@ -1755,10 +1765,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;
   }
@@ -2228,10 +2238,10 @@ class BackgroundMask {
       this.composite = data.composite;
     }
     if (data.cover !== undefined) {
-      const cover = data.cover;
-      const color = isString(data.cover) ? {
-        color: data.cover
-      } : data.cover;
+      const cover = data.cover,
+        color = isString(data.cover) ? {
+          color: data.cover
+        } : data.cover;
       this.cover.load(cover.color !== undefined ? cover : {
         color: color
       });
@@ -2391,11 +2401,7 @@ class Events {
       });
     }
     this.onHover.load(data.onHover);
-    if (isBoolean(data.resize)) {
-      this.resize.enable = data.resize;
-    } else {
-      this.resize.load(data.resize);
-    }
+    this.resize.load(data.resize);
   }
 }
 ;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/Interactivity/Modes/Modes.js
@@ -2533,17 +2539,16 @@ class Theme {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/ColorAnimation.js
+;// CONCATENATED MODULE: ../../engine/dist/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) {
@@ -2555,9 +2560,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);
     }
@@ -2572,6 +2574,44 @@ 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: ../../engine/dist/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: ../../engine/dist/browser/Options/Classes/HslAnimation.js
 
 class HslAnimation {
@@ -2659,99 +2699,19 @@ class CollisionsOverlap {
     }
   }
 }
-;// CONCATENATED MODULE: ../../engine/dist/browser/Options/Classes/AnimationOptions.js
-
-class 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 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: ../../engine/dist/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: ../../engine/dist/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);
     }
   }
 }
@@ -2785,7 +2745,6 @@ class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
 class ParticlesBounceFactor extends ValueWithRandom {
   constructor() {
     super();
-    this.random.minimumValue = 0.1;
     this.value = 1;
   }
 }
@@ -2836,6 +2795,39 @@ class Collisions {
     this.overlap.load(data.overlap);
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/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: ../../engine/dist/browser/Options/Classes/Particles/Move/MoveAngle.js
 
 class MoveAngle {
@@ -3164,11 +3156,10 @@ class OpacityAnimation extends RangedAnimationOptions {
 ;// CONCATENATED MODULE: ../../engine/dist/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) {
@@ -3206,12 +3197,31 @@ class ParticlesDensity {
     }
   }
 }
+;// CONCATENATED MODULE: ../../engine/dist/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: ../../engine/dist/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) {
@@ -3219,10 +3229,7 @@ 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;
     }
@@ -3317,11 +3324,10 @@ class SizeAnimation extends RangedAnimationOptions {
 ;// CONCATENATED MODULE: ../../engine/dist/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) {
@@ -3395,6 +3401,7 @@ class ZIndex extends ValueWithRandom {
 
 
 
+
 class ParticlesOptions {
   constructor(engine, container) {
     this._engine = engine;
@@ -3403,6 +3410,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();
@@ -3418,22 +3426,26 @@ class ParticlesOptions {
     if (!data) {
       return;
     }
-    this.bounce.load(data.bounce);
-    this.color.load(AnimatableColor.create(this.color, data.color));
     if (data.groups !== undefined) {
-      for (const group in data.groups) {
+      for (const group of Object.keys(data.groups)) {
+        if (!Object.hasOwn(data.groups, group)) {
+          continue;
+        }
         const item = data.groups[group];
         if (item !== undefined) {
           this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
         }
       }
     }
-    this.move.load(data.move);
-    this.number.load(data.number);
-    this.opacity.load(data.opacity);
     if (data.reduceDuplicates !== undefined) {
       this.reduceDuplicates = data.reduceDuplicates;
     }
+    this.bounce.load(data.bounce);
+    this.color.load(AnimatableColor.create(this.color, data.color));
+    this.effect.load(data.effect);
+    this.move.load(data.move);
+    this.number.load(data.number);
+    this.opacity.load(data.opacity);
     this.shape.load(data.shape);
     this.size.load(data.size);
     this.shadow.load(data.shadow);
@@ -3692,6 +3704,16 @@ class InteractionManager {
 
 
 
+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) {
@@ -3770,8 +3792,8 @@ class Particle {
       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
+          left: radOffset - rad * 0.5,
+          right: radOffset + rad * 0.5
         };
       if (!moveOptions.straight) {
         res.angle += randomInRange(setRangeValue(range.left, range.right));
@@ -3802,7 +3824,7 @@ class Particle {
         return color;
       }
       const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1,
-        backSum = this.roll.horizontal ? Math.PI / 2 : 0,
+        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;
@@ -3848,20 +3870,16 @@ class Particle {
     this.bubble.inRange = false;
     this.slow.inRange = false;
     const container = this.container,
-      pathGenerator = this.pathGenerator;
+      pathGenerator = this.pathGenerator,
+      shapeDrawer = container.shapeDrawers.get(this.shape);
+    shapeDrawer && shapeDrawer.particleDestroy && shapeDrawer.particleDestroy(this);
     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,
@@ -3875,7 +3893,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 {
@@ -3895,9 +3913,11 @@ class Particle {
       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;
@@ -3911,22 +3931,40 @@ class Particle {
     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.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);
@@ -3935,11 +3973,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 = getValue(pathOptions.delay) * 1000;
+    this.pathDelay = getRangeValue(pathOptions.delay.value) * 1000;
     if (pathOptions.generator) {
       this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
       if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -3960,34 +4000,46 @@ class Particle {
     this.velocity = this.initialVelocity.copy();
     this.moveDecay = 1 - 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 (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);
       }
     }
-    if (drawer && drawer.loadShape) {
-      drawer.loadShape(this);
+    if (shapeDrawer && shapeDrawer.loadShape) {
+      shapeDrawer.loadShape(this);
     }
-    const sideCountFunc = drawer?.getSidesCount;
+    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);
@@ -4114,7 +4166,7 @@ class QuadTree {
           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;
     };
@@ -4170,21 +4222,36 @@ 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),
+      const densityFactor = this._initDensityFactor(numberOptions.density),
         optParticlesNumber = numberOptions.value,
-        optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber,
+        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);
-      this.limit = numberOptions.limit * densityFactor;
+      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);
       } else if (particlesCount > particlesNumber) {
@@ -4202,7 +4269,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);
         } else {
@@ -4239,7 +4306,7 @@ class Particles {
       const zIdx = this._zArray.indexOf(particle);
       this._array.splice(index, 1);
       this._zArray.splice(zIdx, 1);
-      this.pool.push(particle);
+      this._pool.push(particle);
       this._engine.dispatchEvent("particleRemoved", {
         container: this._container,
         data: {
@@ -4253,10 +4320,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);
@@ -4274,19 +4342,22 @@ 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 = [];
@@ -4325,8 +4396,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();
@@ -4393,6 +4464,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();
@@ -4401,10 +4479,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;
@@ -4432,7 +4510,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) {
@@ -4443,12 +4521,12 @@ 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;
     }
   }
 }
@@ -4475,7 +4553,6 @@ class Retina {
     }
     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;
   }
@@ -4485,7 +4562,6 @@ class Retina {
       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;
@@ -4534,14 +4610,14 @@ 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;
@@ -4561,7 +4637,7 @@ 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;
@@ -4569,7 +4645,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;
@@ -4585,7 +4661,8 @@ 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);
@@ -4703,11 +4780,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.drawers.keys()) {
-      this.drawers.delete(key);
+    for (const key of this.effectDrawers.keys()) {
+      this.effectDrawers.delete(key);
+    }
+    for (const key of this.shapeDrawers.keys()) {
+      this.shapeDrawers.delete(key);
     }
     this._engine.clearPlugins(this);
     this.destroyed = true;
@@ -4727,7 +4810,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);
@@ -4762,11 +4845,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);
@@ -4785,8 +4875,11 @@ class Container {
     this._delay = 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) {
@@ -4927,10 +5020,10 @@ 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;
   }
 }
@@ -5021,7 +5114,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() {
@@ -5032,7 +5126,7 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.3";
+    return "3.0.0-beta.5";
   }
   addConfig(config) {
     const name = config.name ?? "default";
@@ -5044,6 +5138,12 @@ class Engine {
       }
     });
   }
+  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);
   }
@@ -5073,7 +5173,7 @@ class Engine {
   }
   async addShape(shape, drawer, refresh = true) {
     executeOnSingleOrMultiple(shape, type => {
-      !this.getShapeDrawer(type) && this.drawers.set(type, drawer);
+      !this.getShapeDrawer(type) && this.shapeDrawers.set(type, drawer);
     });
     await this.refresh(refresh);
   }
@@ -5104,6 +5204,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);
   }
@@ -5120,10 +5223,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);
@@ -5419,7 +5525,6 @@ class ParticlesInteractorBase {
 
 
 
-
 
 
 ;// CONCATENATED MODULE: ../../engine/dist/browser/index.js
@@ -5519,10 +5624,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) {
     particle.misplaced = false;
@@ -5580,15 +5685,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,
@@ -5632,8 +5738,8 @@ class BaseMover {
           y: 50
         },
         spinCenter = {
-          x: spinPos.x / 100 * container.canvas.size.width,
-          y: spinPos.y / 100 * container.canvas.size.height
+          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),
@@ -5956,7 +6062,7 @@ function bounceHorizontal(data) {
   const velocity = data.particle.velocity.x;
   let bounced = false;
   if (data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0 || data.direction === "left" && data.bounds.left <= 0 && velocity < 0) {
-    const newVelocity = getValue(data.particle.options.bounce.horizontal);
+    const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
     data.particle.velocity.x *= -newVelocity;
     bounced = true;
   }
@@ -5985,7 +6091,7 @@ function bounceVertical(data) {
   const velocity = data.particle.velocity.y;
   let bounced = false;
   if (data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0 || data.direction === "top" && data.bounds.top <= 0 && velocity < 0) {
-    const newVelocity = getValue(data.particle.options.bounce.vertical);
+    const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
     data.particle.velocity.y *= -newVelocity;
     bounced = true;
   }
@@ -6505,7 +6611,7 @@ function addSplitParticle(engine, container, parent, splitParticlesOptions) {
   }
   const splitOptions = destroyOptions.split,
     options = loadParticlesOptions(engine, container, parent.options),
-    factor = getValue(splitOptions.factor),
+    factor = getRangeValue(splitOptions.factor.value),
     parentColor = parent.getFillColor();
   if (splitOptions.color) {
     options.color.load(splitOptions.color);
@@ -6567,7 +6673,7 @@ function split(engine, container, particle) {
   if (splitOptions.count >= 0 && (particle.splitCount === undefined || particle.splitCount++ > splitOptions.count)) {
     return;
   }
-  const rate = getValue(splitOptions.rate),
+  const rate = getRangeValue(splitOptions.rate.value),
     particlesSplitOptions = itemFromSingleOrMultiple(splitOptions.particles);
   for (let i = 0; i < rate; i++) {
     addSplitParticle(engine, container, particle, particlesSplitOptions);
@@ -6656,35 +6762,6 @@ class DestroyUpdater {
 async function loadDestroyUpdater(engine, refresh = true) {
   await engine.addParticleUpdater("destroy", container => new DestroyUpdater(engine, container), refresh);
 }
-;// CONCATENATED MODULE: ../../plugins/emitters/dist/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: ../../plugins/emitters/dist/browser/Options/Classes/EmitterLife.js
 
 class EmitterLife {
@@ -6728,6 +6805,46 @@ class EmitterRate {
     }
   }
 }
+;// CONCATENATED MODULE: ../../plugins/emitters/dist/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: ../../plugins/emitters/dist/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: ../../plugins/emitters/dist/browser/Options/Classes/EmitterSize.js
 class EmitterSize {
   constructor() {
@@ -6755,13 +6872,14 @@ class EmitterSize {
 
 
 
+
 class Emitter {
   constructor() {
     this.autoPlay = true;
     this.fill = true;
     this.life = new EmitterLife();
     this.rate = new EmitterRate();
-    this.shape = "square";
+    this.shape = new EmitterShape();
     this.startCount = 0;
   }
   load(data) {
@@ -6790,9 +6908,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) {
@@ -6817,17 +6933,24 @@ class Emitter {
 
 
 
+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,
@@ -6836,41 +6959,6 @@ 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;
@@ -6905,7 +6993,6 @@ class EmitterInstance {
     this._spawnDelay = 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;
@@ -6918,17 +7005,31 @@ 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: {
@@ -6945,33 +7046,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) {
@@ -6997,8 +7073,11 @@ class EmitterInstance {
   resize() {
     const initialPosition = this._initialPosition;
     this.position = initialPosition && isPointInside(initialPosition, this.container.canvas.size, 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;
     }
@@ -7009,7 +7088,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;
@@ -7050,6 +7129,94 @@ 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 = 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: ../../plugins/emitters/dist/browser/Emitters.js
 
@@ -7069,7 +7236,7 @@ class Emitters {
       value: []
     };
     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) {
@@ -7089,10 +7256,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;
   }
@@ -7136,10 +7304,10 @@ 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() {
@@ -7166,71 +7334,28 @@ 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: ../../plugins/emitters/dist/browser/ShapeManager.js
-const shapes = new Map();
+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();
-  }
-}
-;// CONCATENATED MODULE: ../../plugins/emitters/dist/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
-          };
-      }
-    }
+  getSupportedShapeGenerators() {
+    return shapeGeneratorss.keys();
   }
 }
 ;// CONCATENATED MODULE: ../../plugins/emitters/dist/browser/index.js
@@ -7238,8 +7363,6 @@ class SquareShape {
 
 
 
-
-
 class EmittersPlugin {
   constructor(engine) {
     this._engine = engine;
@@ -7324,20 +7447,21 @@ 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: ../../updaters/life/dist/browser/Options/Classes/LifeDelay.js
 
 class LifeDelay extends ValueWithRandom {
@@ -7360,7 +7484,6 @@ class LifeDelay extends ValueWithRandom {
 class LifeDuration extends ValueWithRandom {
   constructor() {
     super();
-    this.random.minimumValue = 0.0001;
     this.sync = false;
   }
   load(data) {