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

package/browser/Utils/Utils.js

@@ -1,4 +1,4 @@
-import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, } from "./NumberUtils.js";
+import { collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRange, } from "./NumberUtils.js";
 import { Vector } from "../Core/Utils/Vector.js";
 const _logger = {
     debug: console.debug,
@@ -27,8 +27,8 @@ function rectSideBounce(data) {
         pOtherSide.max > rectOtherSide.max) {
         return res;
     }
-    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) / 2 && velocity > 0) ||
-        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) / 2 && velocity < 0)) {
+    if ((pSide.max >= rectSide.min && pSide.max <= (rectSide.max + rectSide.min) * 0.5 && velocity > 0) ||
+        (pSide.min <= rectSide.max && pSide.min > (rectSide.max + rectSide.min) * 0.5 && velocity < 0)) {
         res.velocity = velocity * -factor;
         res.bounced = true;
     }
@@ -52,6 +52,12 @@ export function safeMatchMedia(query) {
     }
     return matchMedia(query);
 }
+export function safeIntersectionObserver(callback) {
+    if (isSsr() || typeof IntersectionObserver === "undefined") {
+        return;
+    }
+    return new IntersectionObserver(callback);
+}
 export function safeMutationObserver(callback) {
     if (isSsr() || typeof MutationObserver === "undefined") {
         return;
@@ -161,7 +167,7 @@ export 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)),
     };
 }
 export function circleBounce(p1, p2) {
@@ -176,7 +182,7 @@ export function circleBounce(p1, p2) {
     p2.velocity.y = vFinal2.y * p2.factor.y;
 }
 export function rectBounce(particle, divBounds) {
-    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), resH = rectSideBounce({
+    const pPos = particle.getPosition(), size = particle.getRadius(), bounds = calculateBounds(pPos, size), bounceOptions = particle.options.bounce, resH = rectSideBounce({
         pSide: {
             min: bounds.left,
             max: bounds.right,
@@ -194,7 +200,7 @@ export 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) {
@@ -222,7 +228,7 @@ export 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) {

package/browser/export-types.js

@@ -10,12 +10,12 @@ export * from "./Core/Interfaces/IDelta.js";
 export * from "./Core/Interfaces/IDimension.js";
 export * from "./Core/Interfaces/IDistance.js";
 export * from "./Core/Interfaces/IDrawParticleParams.js";
+export * from "./Core/Interfaces/IEffectDrawer.js";
 export * from "./Core/Interfaces/IExternalInteractor.js";
 export * from "./Core/Interfaces/IInteractor.js";
 export * from "./Core/Interfaces/ILoadParams.js";
 export * from "./Core/Interfaces/IMouseData.js";
 export * from "./Core/Interfaces/IMovePathGenerator.js";
-export * from "./Core/Interfaces/IParticle.js";
 export * from "./Core/Interfaces/IParticleColorStyle.js";
 export * from "./Core/Interfaces/IParticleHslAnimation.js";
 export * from "./Core/Interfaces/IParticleLife.js";
@@ -30,6 +30,7 @@ export * from "./Core/Interfaces/IPlugin.js";
 export * from "./Core/Interfaces/IPositionFromSizeParams.js";
 export * from "./Core/Interfaces/IRangeValue.js";
 export * from "./Core/Interfaces/IRectSideResult.js";
+export * from "./Core/Interfaces/IShapeDrawData.js";
 export * from "./Core/Interfaces/IShapeDrawer.js";
 export * from "./Core/Interfaces/IShapeValues.js";
 export * from "./Core/Interfaces/ISlowParticleData.js";
@@ -62,6 +63,7 @@ export * from "./Options/Interfaces/Particles/Bounce/IParticlesBounce.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisions.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsAbsorb.js";
 export * from "./Options/Interfaces/Particles/Collisions/ICollisionsOverlap.js";
+export * from "./Options/Interfaces/Particles/Effect/IEffect.js";
 export * from "./Options/Interfaces/Particles/IParticlesOptions.js";
 export * from "./Options/Interfaces/Particles/IShadow.js";
 export * from "./Options/Interfaces/Particles/IStroke.js";
@@ -76,6 +78,7 @@ export * from "./Options/Interfaces/Particles/Move/ISpin.js";
 export * from "./Options/Interfaces/Particles/Move/IMoveTrail.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesDensity.js";
 export * from "./Options/Interfaces/Particles/Number/IParticlesNumber.js";
+export * from "./Options/Interfaces/Particles/Number/IParticlesNumberLimit.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacity.js";
 export * from "./Options/Interfaces/Particles/Opacity/IOpacityAnimation.js";
 export * from "./Options/Interfaces/Particles/Shape/IShape.js";
@@ -93,5 +96,4 @@ export * from "./Types/PathOptions.js";
 export * from "./Types/RangeValue.js";
 export * from "./Types/RecursivePartial.js";
 export * from "./Types/ShapeData.js";
-export * from "./Types/ShapeDrawerFunctions.js";
 export * from "./Types/SingleOrMultiple.js";

package/browser/exports.js

@@ -11,10 +11,8 @@ export * from "./Enums/Directions/MoveDirection.js";
 export * from "./Enums/Directions/RotateDirection.js";
 export * from "./Enums/Directions/OutModeDirection.js";
 export * from "./Enums/Modes/AnimationMode.js";
-export * from "./Enums/Modes/ClickMode.js";
-export * from "./Enums/Modes/DivMode.js";
-export * from "./Enums/Modes/HoverMode.js";
 export * from "./Enums/Modes/CollisionMode.js";
+export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
 export * from "./Enums/Modes/ThemeMode.js";
@@ -69,6 +67,7 @@ export * from "./Options/Classes/Particles/Move/Path/MovePath.js";
 export * from "./Options/Classes/Particles/Move/Spin.js";
 export * from "./Options/Classes/Particles/Move/MoveTrail.js";
 export * from "./Options/Classes/Particles/Number/ParticlesNumber.js";
+export * from "./Options/Classes/Particles/Number/ParticlesNumberLimit.js";
 export * from "./Options/Classes/Particles/Number/ParticlesDensity.js";
 export * from "./Options/Classes/Particles/Opacity/Opacity.js";
 export * from "./Options/Classes/Particles/Opacity/OpacityAnimation.js";

package/cjs/Core/Canvas.js

@@ -405,10 +405,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;
     }

package/cjs/Core/Container.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = void 0;
+const Utils_js_1 = require("../Utils/Utils.js");
 const Canvas_js_1 = require("./Canvas.js");
 const EventListeners_js_1 = require("./Utils/EventListeners.js");
 const Options_js_1 = require("../Options/Classes/Options.js");
 const Particles_js_1 = require("./Particles.js");
 const Retina_js_1 = require("./Retina.js");
 const Constants_js_1 = require("./Utils/Constants.js");
-const Utils_js_1 = require("../Utils/Utils.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
 function guardCheck(container) {
@@ -26,7 +26,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;
@@ -40,16 +39,16 @@ class Container {
         };
         this._nextFrame = async (timestamp) => {
             try {
-                if (!this.smooth &&
-                    this.lastFrameTime !== undefined &&
-                    timestamp < this.lastFrameTime + 1000 / this.fpsLimit) {
+                if (!this._smooth &&
+                    this._lastFrameTime !== undefined &&
+                    timestamp < this._lastFrameTime + 1000 / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
-                this.lastFrameTime ??= timestamp;
-                const delta = initDelta(timestamp - this.lastFrameTime, this.fpsLimit, this.smooth);
+                this._lastFrameTime ??= timestamp;
+                const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
                 this.addLifeTime(delta.value);
-                this.lastFrameTime = timestamp;
+                this._lastFrameTime = timestamp;
                 if (delta.value > 1000) {
                     this.draw(false);
                     return;
@@ -68,8 +67,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;
@@ -77,7 +77,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;
@@ -93,13 +93,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_js_1.EventListeners(this);
-        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
-            this._intersectionObserver = new IntersectionObserver((entries) => this._intersectionManager(entries));
-        }
+        this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
     get options() {
@@ -205,11 +204,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;
@@ -226,7 +231,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);
@@ -261,11 +266,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);
@@ -284,8 +296,11 @@ class Container {
         this._delay = (0, NumberUtils_js_1.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) {
@@ -414,10 +429,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;
     }
 }

package/cjs/Core/Engine.js

@@ -42,7 +42,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() {
@@ -53,18 +54,18 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.0.0-beta.2";
+        return "3.0.0-beta.4";
     }
-    addConfig(nameOrConfig, config) {
-        if ((0, Utils_js_1.isString)(nameOrConfig)) {
-            if (config) {
-                config.name = nameOrConfig;
-                this._configs.set(nameOrConfig, config);
-            }
-        }
-        else {
-            this._configs.set(nameOrConfig.name ?? "default", nameOrConfig);
-        }
+    addConfig(config) {
+        const name = config.name ?? "default";
+        this._configs.set(name, config);
+        this._eventDispatcher.dispatchEvent("configAdded", { data: { name, config } });
+    }
+    async addEffect(effect, drawer, refresh = true) {
+        (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
+            !this.getEffectDrawer(type) && this.effectDrawers.set(type, drawer);
+        });
+        await this.refresh(refresh);
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -93,45 +94,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 ((0, Utils_js_1.isBoolean)(initOrRefresh)) {
-            realRefresh = initOrRefresh;
-            realInit = undefined;
-        }
-        else {
-            realInit = initOrRefresh;
-        }
-        if ((0, Utils_js_1.isBoolean)(afterEffectOrRefresh)) {
-            realRefresh = afterEffectOrRefresh;
-            realAfterEffect = undefined;
-        }
-        else {
-            realAfterEffect = afterEffectOrRefresh;
-        }
-        if ((0, Utils_js_1.isBoolean)(destroyOrRefresh)) {
-            realRefresh = destroyOrRefresh;
-            realDestroy = undefined;
-        }
-        else {
-            realDestroy = destroyOrRefresh;
-        }
-        if ((0, Utils_js_1.isFunction)(drawer)) {
-            customDrawer = {
-                afterEffect: realAfterEffect,
-                destroy: realDestroy,
-                draw: drawer,
-                init: realInit,
-            };
-        }
-        else {
-            customDrawer = drawer;
-        }
+    async addShape(shape, drawer, refresh = true) {
         (0, Utils_js_1.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);
@@ -159,6 +126,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);
     }
@@ -175,10 +145,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);
@@ -197,7 +170,7 @@ class Engine {
             domContainer.id = id;
             document.body.append(domContainer);
         }
-        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === id);
+        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id);
         if (oldIndex >= 0) {
             const old = this.domItem(oldIndex);
             if (old && !old.destroyed) {

package/cjs/Core/Particle.js

@@ -10,7 +10,27 @@ const Vector3d_js_1 = require("./Utils/Vector3d.js");
 const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-const fixOutMode = (data) => {
+function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
+    const effectData = effectOptions.options[effect];
+    if (!effectData) {
+        return;
+    }
+    return (0, Utils_js_1.deepExtend)({
+        close: effectOptions.close,
+        fill: effectOptions.fill,
+    }, (0, Utils_js_1.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));
+}
+function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
+    const shapeData = shapeOptions.options[shape];
+    if (!shapeData) {
+        return;
+    }
+    return (0, Utils_js_1.deepExtend)({
+        close: shapeOptions.close,
+        fill: shapeOptions.fill,
+    }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));
+}
+function fixOutMode(data) {
     if (!(0, Utils_js_1.isInArray)(data.outMode, data.checkModes)) {
         return;
     }
@@ -21,7 +41,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;
@@ -69,8 +89,8 @@ class Particle {
                 return res;
             }
             const rad = (Math.PI / 180) * (0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value), radOffset = (Math.PI / 180) * (0, NumberUtils_js_1.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 += (0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(range.left, range.right));
@@ -99,7 +119,7 @@ class Particle {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
+            const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI * 0.5 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
             if (!rolled) {
                 return color;
             }
@@ -132,16 +152,6 @@ class Particle {
             }
             this.offset = Vector_js_1.Vector.origin;
         };
-        this._loadShapeData = (shapeOptions, reduceDuplicates) => {
-            const shapeData = shapeOptions.options[this.shape];
-            if (!shapeData) {
-                return;
-            }
-            return (0, Utils_js_1.deepExtend)({
-                close: shapeOptions.close,
-                fill: shapeOptions.fill,
-            }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, this.id, reduceDuplicates));
-        };
         this._engine = engine;
         this.init(id, position, overrideOptions, group);
     }
@@ -154,18 +164,12 @@ class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator;
         for (const [, plugin] of container.plugins) {
-            if (plugin.particleDestroyed) {
-                plugin.particleDestroyed(this, override);
-            }
+            plugin.particleDestroyed && plugin.particleDestroyed(this, override);
         }
         for (const updater of container.particles.updaters) {
-            if (updater.particleDestroyed) {
-                updater.particleDestroyed(this, override);
-            }
-        }
-        if (pathGenerator) {
-            pathGenerator.reset(this);
+            updater.particleDestroyed && updater.particleDestroyed(this, override);
         }
+        pathGenerator && pathGenerator.reset(this);
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
@@ -178,7 +182,7 @@ class Particle {
         return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
     }
     getMass() {
-        return (this.getRadius() ** 2 * Math.PI) / 2;
+        return this.getRadius() ** 2 * Math.PI * 0.5;
     }
     getPosition() {
         return {
@@ -197,9 +201,11 @@ class Particle {
         const container = this.container, engine = this._engine;
         this.id = id;
         this.group = group;
-        this.fill = true;
+        this.effectClose = true;
+        this.effectFill = true;
+        this.shapeClose = true;
+        this.shapeFill = true;
         this.pathRotation = false;
-        this.close = true;
         this.lastPathTime = 0;
         this.destroyed = false;
         this.unbreakable = false;
@@ -210,18 +216,33 @@ class Particle {
         };
         this.outType = "normal";
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+        this.effect = (0, Utils_js_1.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);
         this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
-        const shapeOptions = particlesOptions.shape;
-        if (overrideOptions && overrideOptions.shape && overrideOptions.shape.type) {
-            const overrideShapeType = overrideOptions.shape.type, shape = (0, Utils_js_1.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 = (0, Utils_js_1.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 = (0, Utils_js_1.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);
@@ -230,11 +251,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 = (0, NumberUtils_js_1.getValue)(pathOptions.delay) * 1000;
+        this.pathDelay = (0, NumberUtils_js_1.getRangeValue)(pathOptions.delay.value) * 1000;
         if (pathOptions.generator) {
             this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
@@ -255,34 +278,46 @@ class Particle {
         this.velocity = this.initialVelocity.copy();
         this.moveDecay = 1 - (0, NumberUtils_js_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);
         }
-        const sideCountFunc = drawer?.getSidesCount;
+        let shapeDrawer = container.shapeDrawers.get(this.shape);
+        if (!shapeDrawer) {
+            shapeDrawer = this._engine.getShapeDrawer(this.shape);
+            if (shapeDrawer) {
+                container.shapeDrawers.set(this.shape, shapeDrawer);
+            }
+        }
+        if (shapeDrawer && shapeDrawer.loadShape) {
+            shapeDrawer.loadShape(this);
+        }
+        const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
         this.shadowColor = (0, ColorUtils_js_1.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);