@tsparticles/basic 3.0.0-beta.2 → 3.0.0-beta.4

package/tsparticles.basic.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.2
+ * v3.0.0-beta.4
  */
 (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),
@@ -170,7 +171,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),
@@ -206,6 +206,7 @@ __webpack_require__.d(__webpack_exports__, {
   rectBounce: () => (/* reexport */ rectBounce),
   resizeEvent: () => (/* reexport */ resizeEvent),
   rgbToHsl: () => (/* reexport */ rgbToHsl),
+  safeIntersectionObserver: () => (/* reexport */ safeIntersectionObserver),
   safeMatchMedia: () => (/* reexport */ safeMatchMedia),
   safeMutationObserver: () => (/* reexport */ safeMutationObserver),
   setLogger: () => (/* reexport */ setLogger),
@@ -409,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;
@@ -438,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":
@@ -548,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;
   }
@@ -572,6 +562,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;
@@ -678,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) {
@@ -712,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,
@@ -730,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) {
@@ -758,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) {
@@ -885,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)) {
@@ -982,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) {
@@ -1007,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);
@@ -1163,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);
@@ -1212,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;
   }
@@ -1231,39 +1221,104 @@ 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) {
@@ -1710,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;
   }
@@ -2183,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
       });
@@ -2488,17 +2543,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) {
@@ -2510,9 +2564,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);
     }
@@ -2527,6 +2578,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 {
@@ -2614,99 +2703,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);
     }
   }
 }
@@ -2740,7 +2749,6 @@ class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
 class ParticlesBounceFactor extends ValueWithRandom {
   constructor() {
     super();
-    this.random.minimumValue = 0.1;
     this.value = 1;
   }
 }
@@ -2791,6 +2799,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 {
@@ -3119,11 +3160,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) {
@@ -3161,12 +3201,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) {
@@ -3174,10 +3233,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;
     }
@@ -3272,11 +3328,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) {
@@ -3350,6 +3405,7 @@ class ZIndex extends ValueWithRandom {
 
 
 
+
 class ParticlesOptions {
   constructor(engine, container) {
     this._engine = engine;
@@ -3358,6 +3414,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();
@@ -3375,6 +3432,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];
@@ -3647,7 +3705,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;
   }
@@ -3657,7 +3735,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;
@@ -3715,8 +3793,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));
@@ -3747,7 +3825,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;
@@ -3782,16 +3860,6 @@ class Particle {
       }
       this.offset = 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);
   }
@@ -3805,18 +3873,12 @@ class Particle {
     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,
@@ -3830,7 +3892,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 {
@@ -3850,9 +3912,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;
@@ -3866,22 +3930,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.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);
@@ -3890,11 +3972,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)) {
@@ -3915,34 +3999,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 (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);
@@ -4069,7 +4165,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;
     };
@@ -4125,21 +4221,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) {
@@ -4157,7 +4268,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 {
@@ -4194,7 +4305,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: {
@@ -4208,10 +4319,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);
@@ -4229,19 +4341,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 = [];
@@ -4280,8 +4395,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();
@@ -4348,6 +4463,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();
@@ -4356,10 +4478,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;
@@ -4387,7 +4509,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) {
@@ -4398,12 +4520,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;
     }
   }
 }
@@ -4430,7 +4552,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;
   }
@@ -4440,7 +4561,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;
@@ -4476,7 +4596,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;
@@ -4490,14 +4609,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;
@@ -4515,8 +4634,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;
@@ -4524,7 +4644,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;
@@ -4540,13 +4660,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
     });
@@ -4660,11 +4779,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;
@@ -4684,7 +4809,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);
@@ -4719,11 +4844,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);
@@ -4742,8 +4874,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) {
@@ -4884,10 +5019,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;
   }
 }
@@ -4978,7 +5113,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() {
@@ -4989,17 +5125,23 @@ class Engine {
     return res;
   }
   get version() {
-    return "3.0.0-beta.2";
+    return "3.0.0-beta.4";
   }
-  addConfig(nameOrConfig, config) {
-    if (isString(nameOrConfig)) {
-      if (config) {
-        config.name = nameOrConfig;
-        this._configs.set(nameOrConfig, config);
+  addConfig(config) {
+    const name = config.name ?? "default";
+    this._configs.set(name, config);
+    this._eventDispatcher.dispatchEvent("configAdded", {
+      data: {
+        name,
+        config
       }
-    } else {
-      this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-    }
+    });
+  }
+  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);
@@ -5028,44 +5170,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);
@@ -5094,6 +5203,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);
   }
@@ -5110,10 +5222,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);
@@ -5143,7 +5258,7 @@ class Engine {
     }
     const currentOptions = itemFromSingleOrMultiple(options, index),
       dom = this.dom(),
-      oldIndex = dom.findIndex(v => v.id === id);
+      oldIndex = dom.findIndex(v => v.id.description === id);
     if (oldIndex >= 0) {
       const old = this.domItem(oldIndex);
       if (old && !old.destroyed) {
@@ -5409,7 +5524,6 @@ class ParticlesInteractorBase {
 
 
 
-
 
 
 ;// CONCATENATED MODULE: ../../engine/dist/browser/index.js
@@ -5443,10 +5557,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;
@@ -5504,15 +5618,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,
@@ -5556,8 +5671,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),
@@ -5616,7 +5731,12 @@ async function loadBaseMover(engine, refresh = true) {
 ;// CONCATENATED MODULE: ../../shapes/circle/dist/browser/CircleDrawer.js
 
 class CircleDrawer {
-  draw(context, particle, radius) {
+  draw(data) {
+    const {
+      context,
+      particle,
+      radius
+    } = data;
     if (!particle.circleRange) {
       particle.circleRange = {
         min: 0,
@@ -5875,7 +5995,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;
   }
@@ -5904,7 +6024,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;
   }