@tsparticles/slim 4.0.0-beta.16 → 4.0.0-beta.17

package/tsparticles.slim.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* tsParticles v4.0.0-beta.16 */
+/* tsParticles v4.0.0-beta.17 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -1081,7 +1081,7 @@
             }
         }
         else {
-            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
+            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
             if (foundCanvas) {
                 canvasEl = foundCanvas;
                 canvasEl.dataset[generatedAttribute] = generatedFalse;
@@ -1118,7 +1118,7 @@
             return this._domArray;
         }
         get version() {
-            return "4.0.0-beta.16";
+            return "4.0.0-beta.17";
         }
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
@@ -1149,7 +1149,11 @@
         }
         async load(params) {
             await this.init();
-            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+            let domSourceElement;
+            if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
+                domSourceElement = params.element;
+            }
+            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
                 dispatchCallback: (eventType, args) => {
                     this.dispatchEvent(eventType, args);
                 },
@@ -1176,8 +1180,10 @@
             else {
                 items.push(newItem);
             }
-            const domContainer = getDomContainer(id, params.element), canvasEl = getCanvasFromContainer(domContainer);
-            newItem.canvas.loadCanvas(canvasEl);
+            const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
+                ? params.element
+                : getCanvasFromContainer(getDomContainer(id, domSourceElement));
+            newItem.canvas.loadCanvas(sourceCanvas);
             await newItem.start();
             return newItem;
         }
@@ -3034,7 +3040,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -3082,7 +3088,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3135,7 +3141,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -3159,7 +3165,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3220,7 +3226,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3572,7 +3578,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3643,7 +3649,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3698,7 +3704,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3741,7 +3747,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3750,7 +3756,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadHexColorPlugin(e),
@@ -3772,7 +3778,7 @@
     easingsFunctions.set(exports.EasingType.easeInOutQuad, value => (value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2));
 
     async function loadEasingQuadPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -3865,19 +3871,7 @@
                 particle.emojiDataKey = cacheKey;
                 return;
             }
-            const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double;
-            let cacheCanvas, context;
-            if (typeof OffscreenCanvas === "undefined") {
-                const canvas = safeDocument().createElement("canvas");
-                canvas.width = canvasSize;
-                canvas.height = canvasSize;
-                context = canvas.getContext("2d", container.canvas.render.settings);
-                cacheCanvas = canvas;
-            }
-            else {
-                cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize);
-                context = cacheCanvas.getContext("2d", container.canvas.render.settings);
-            }
+            const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double, cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize), context = cacheCanvas.getContext("2d", container.canvas.render.settings);
             if (!context) {
                 return;
             }
@@ -3892,7 +3886,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -4159,7 +4153,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -4193,7 +4187,7 @@
     }
 
     const minFactor = 1, minRadius$4 = 0, updateVector = Vector.origin;
-    function processAttract(pluginManager, container, position, attractRadius, area, queryCb) {
+    function processAttract(pluginManager, container, position, attractRadius, area, queryCb, onAttractParticle) {
         const attractOptions = container.actualOptions.interactivity?.modes.attract;
         if (!attractOptions) {
             return;
@@ -4203,10 +4197,11 @@
             const { dx, dy, distance } = getDistances(particle.position, position), velocity = attractOptions.speed * attractOptions.factor, attractFactor = clamp(pluginManager.getEasing(attractOptions.easing)(identity$3 - distance / attractRadius) * velocity, minFactor, attractOptions.maxSpeed);
             updateVector.x = !distance ? velocity : (dx / distance) * attractFactor;
             updateVector.y = !distance ? velocity : (dy / distance) * attractFactor;
+            onAttractParticle?.(particle);
             particle.position.subFrom(updateVector);
         }
     }
-    function clickAttract(pluginManager, container, interactivityData, enabledCb) {
+    function clickAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
         container.attract ??= { particles: [] };
         const { attract } = container;
         if (!attract.finish) {
@@ -4221,18 +4216,18 @@
             if (!attractRadius || attractRadius < minRadius$4 || !mousePos) {
                 return;
             }
-            processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+            processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
         }
         else if (attract.clicking === false) {
             attract.particles = [];
         }
     }
-    function hoverAttract(pluginManager, container, interactivityData, enabledCb) {
+    function hoverAttract(pluginManager, container, interactivityData, enabledCb, onAttractParticle) {
         const mousePos = interactivityData.mouse.position, attractRadius = container.retina.attractModeDistance;
         if (!attractRadius || attractRadius < minRadius$4 || !mousePos) {
             return;
         }
-        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p));
+        processAttract(pluginManager, container, mousePos, attractRadius, new Circle(mousePos.x, mousePos.y, attractRadius), (p) => enabledCb(p), onAttractParticle);
     }
 
     let Attract$1 = class Attract {
@@ -4241,6 +4236,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -4249,6 +4245,12 @@
             this.factor = 1;
             this.maxSpeed = 50;
             this.speed = 1;
+            this.restore = {
+                enable: false,
+                delay: 0,
+                speed: 0.08,
+                follow: true,
+            };
         }
         load(data) {
             if (isNull(data)) {
@@ -4272,18 +4274,28 @@
             if (data.speed !== undefined) {
                 this.speed = data.speed;
             }
+            if (data.restore !== undefined) {
+                this.restore.enable = data.restore.enable ?? this.restore.enable;
+                this.restore.delay = data.restore.delay ?? this.restore.delay;
+                this.restore.speed = data.restore.speed ?? this.restore.speed;
+                this.restore.follow = data.restore.follow ?? this.restore.follow;
+            }
         }
     };
 
-    const attractMode = "attract";
+    const attractMode = "attract", minVelocityLengthSq = 0, minRestoreSpeed$1 = 0.001, maxRestoreSpeed$1 = 1, restoreEpsilon$1 = 0.5;
     let Attractor$1 = class Attractor extends ExternalInteractorBase {
         handleClickMode;
+        _interactedThisFrame;
         _maxDistance;
         _pluginManager;
+        _restoreData;
         constructor(pluginManager, container) {
             super(container);
             this._pluginManager = pluginManager;
             this._maxDistance = 0;
+            this._interactedThisFrame = new Set();
+            this._restoreData = new Map();
             container.attract ??= { particles: [] };
             this.handleClickMode = (mode, interactivityData) => {
                 const options = this.container.actualOptions, attract = options.interactivity?.modes.attract;
@@ -4324,17 +4336,23 @@
             container.retina.attractModeDistance = attract.distance * container.retina.pixelRatio;
         }
         interact(interactivityData) {
+            this._interactedThisFrame.clear();
             const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
             if (!events) {
                 return;
             }
             const { enable: hoverEnabled, mode: hoverMode } = events.onHover, { enable: clickEnabled, mode: clickMode } = events.onClick;
             if (mouseMoveStatus && hoverEnabled && isInArray(attractMode, hoverMode)) {
-                hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+                hoverAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                    this._trackInteractedParticle(p);
+                });
             }
             else if (clickEnabled && isInArray(attractMode, clickMode)) {
-                clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p));
+                clickAttract(this._pluginManager, this.container, interactivityData, p => this.isEnabled(interactivityData, p), p => {
+                    this._trackInteractedParticle(p);
+                });
             }
+            this._restoreParticles();
         }
         isEnabled(interactivityData, particle) {
             const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
@@ -4352,10 +4370,67 @@
         }
         reset() {
         }
+        _restoreParticles() {
+            const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+            if (!restore?.enable || !this._restoreData.size) {
+                return;
+            }
+            const now = Date.now(), restoreDelay = restore.delay * millisecondsToSeconds, restoreSpeed = Math.max(minRestoreSpeed$1, Math.min(maxRestoreSpeed$1, restore.speed));
+            for (const [particle, restoreData] of this._restoreData) {
+                if (this._interactedThisFrame.has(particle)) {
+                    continue;
+                }
+                if (particle.destroyed) {
+                    this._restoreData.delete(particle);
+                    continue;
+                }
+                const target = restoreData.target;
+                if (now - restoreData.lastInteractionTime < restoreDelay) {
+                    continue;
+                }
+                let dx = target.x - particle.position.x, dy = target.y - particle.position.y, dz = target.z - particle.position.z;
+                if (restore.follow && particle.options.move.enable) {
+                    const { x: vx, y: vy, z: vz } = particle.velocity, velocityLengthSq = vx * vx + vy * vy + vz * vz;
+                    if (velocityLengthSq > minVelocityLengthSq) {
+                        const parallelScale = (dx * vx + dy * vy + dz * vz) / velocityLengthSq;
+                        dx -= vx * parallelScale;
+                        dy -= vy * parallelScale;
+                        dz -= vz * parallelScale;
+                    }
+                }
+                particle.position.x += dx * restoreSpeed;
+                particle.position.y += dy * restoreSpeed;
+                particle.position.z += dz * restoreSpeed;
+                if (Math.abs(dx) <= restoreEpsilon$1 && Math.abs(dy) <= restoreEpsilon$1) {
+                    particle.position.x = target.x;
+                    particle.position.y = target.y;
+                    particle.position.z = target.z;
+                    this._restoreData.delete(particle);
+                    continue;
+                }
+            }
+        }
+        _trackInteractedParticle(particle) {
+            this._interactedThisFrame.add(particle);
+            const restore = this.container.actualOptions.interactivity?.modes.attract?.restore;
+            if (!restore?.enable) {
+                return;
+            }
+            const now = Date.now();
+            let restoreData = this._restoreData.get(particle);
+            if (!restoreData) {
+                restoreData = {
+                    target: particle.position.copy(),
+                    lastInteractionTime: now,
+                };
+                this._restoreData.set(particle, restoreData);
+            }
+            restoreData.lastInteractionTime = now;
+        }
     };
 
     async function loadExternalAttractInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -4552,7 +4627,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -4932,7 +5007,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -5077,7 +5152,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -5189,7 +5264,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -5333,7 +5408,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -5414,7 +5489,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -5457,7 +5532,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -5542,7 +5617,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -5605,7 +5680,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -5620,6 +5695,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -5628,6 +5704,12 @@
             this.speed = 1;
             this.maxSpeed = 50;
             this.easing = exports.EasingType.easeOutQuad;
+            this.restore = {
+                enable: false,
+                delay: 0,
+                speed: 0.08,
+                follow: true,
+            };
         }
         load(data) {
             if (isNull(data)) {
@@ -5651,6 +5733,12 @@
             if (data.maxSpeed !== undefined) {
                 this.maxSpeed = data.maxSpeed;
             }
+            if (data.restore !== undefined) {
+                this.restore.enable = data.restore.enable ?? this.restore.enable;
+                this.restore.delay = data.restore.delay ?? this.restore.delay;
+                this.restore.speed = data.restore.speed ?? this.restore.speed;
+                this.restore.follow = data.restore.follow ?? this.restore.follow;
+            }
         }
     }
 
@@ -5686,19 +5774,23 @@
         }
     }
 
-    const repulseMode = "repulse", minDistance$2 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$1 = 0, minSpeed = 0, easingOffset = 1;
+    const repulseMode = "repulse", minDistance$2 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$1 = 0, minSpeed = 0, easingOffset = 1, minRestoreSpeed = 0.001, maxRestoreSpeed = 1, restoreEpsilon = 0.5;
     class Repulser extends ExternalInteractorBase {
         handleClickMode;
         _clickVec;
+        _interactedThisFrame;
         _maxDistance;
         _normVec;
         _pluginManager;
+        _restoreData;
         constructor(pluginManager, container) {
             super(container);
             this._pluginManager = pluginManager;
             this._maxDistance = 0;
             this._normVec = Vector.origin;
+            this._interactedThisFrame = new Set();
             this._clickVec = Vector.origin;
+            this._restoreData = new Map();
             container.repulse ??= { particles: [] };
             this.handleClickMode = (mode, interactivityData) => {
                 const options = this.container.actualOptions, repulseOpts = options.interactivity?.modes.repulse;
@@ -5739,6 +5831,7 @@
             container.retina.repulseModeDistance = repulse.distance * container.retina.pixelRatio;
         }
         interact(interactivityData) {
+            this._interactedThisFrame.clear();
             const container = this.container, options = container.actualOptions, mouseMoveStatus = interactivityData.status === mouseMoveEvent, events = options.interactivity?.events;
             if (!events) {
                 return;
@@ -5755,6 +5848,7 @@
                     this._singleSelectorRepulse(interactivityData, selector, div);
                 });
             }
+            this._restoreParticles();
         }
         isEnabled(interactivityData, particle) {
             const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;
@@ -5802,6 +5896,7 @@
                 for (const particle of query) {
                     const { dx, dy, distance } = getDistances(mouseClickPos, particle.position), d = distance ** squarePower, velocity = repulseOptions.speed, force = (-repulseRadius * velocity) / d;
                     if (d <= repulseRadius) {
+                        this._trackInteractedParticle(particle);
                         repulse.particles.push(particle);
                         this._clickVec.x = dx;
                         this._clickVec.y = dy;
@@ -5834,9 +5929,46 @@
                 const { dx, dy, distance } = getDistances(particle.position, position), repulseFactor = clamp(easingFunc(easingOffset - distance / repulseRadius) * velocity, minSpeed, maxSpeed);
                 this._normVec.x = !distance ? velocity : (dx / distance) * repulseFactor;
                 this._normVec.y = !distance ? velocity : (dy / distance) * repulseFactor;
+                this._trackInteractedParticle(particle);
                 particle.position.addTo(this._normVec);
             }
         };
+        _restoreParticles() {
+            const restore = this.container.actualOptions.interactivity?.modes.repulse?.restore;
+            if (!restore?.enable || !this._restoreData.size) {
+                return;
+            }
+            const now = Date.now(), restoreDelay = restore.delay * millisecondsToSeconds, restoreSpeed = Math.max(minRestoreSpeed, Math.min(maxRestoreSpeed, restore.speed));
+            for (const [particle, restoreData] of this._restoreData) {
+                if (this._interactedThisFrame.has(particle)) {
+                    continue;
+                }
+                if (particle.destroyed) {
+                    this._restoreData.delete(particle);
+                    continue;
+                }
+                const target = restoreData.target;
+                if (now - restoreData.lastInteractionTime < restoreDelay) {
+                    continue;
+                }
+                if (restore.follow && particle.options.move.enable) {
+                    target.x += particle.velocity.x;
+                    target.y += particle.velocity.y;
+                    target.z += particle.velocity.z;
+                }
+                const dx = target.x - particle.position.x, dy = target.y - particle.position.y, dz = target.z - particle.position.z;
+                particle.position.x += dx * restoreSpeed;
+                particle.position.y += dy * restoreSpeed;
+                particle.position.z += dz * restoreSpeed;
+                if (Math.abs(dx) <= restoreEpsilon && Math.abs(dy) <= restoreEpsilon) {
+                    particle.position.x = target.x;
+                    particle.position.y = target.y;
+                    particle.position.z = target.z;
+                    this._restoreData.delete(particle);
+                    continue;
+                }
+            }
+        }
         _singleSelectorRepulse = (interactivityData, selector, div) => {
             const container = this.container, repulse = container.actualOptions.interactivity?.modes.repulse;
             if (!repulse) {
@@ -5856,10 +5988,32 @@
                 this._processRepulse(interactivityData, pos, repulseRadius, area, divRepulse);
             });
         };
+        _trackInteractedParticle(particle) {
+            this._interactedThisFrame.add(particle);
+            const restore = this.container.actualOptions.interactivity?.modes.repulse?.restore;
+            if (!restore?.enable) {
+                return;
+            }
+            const now = Date.now();
+            let restoreData = this._restoreData.get(particle);
+            if (!restoreData) {
+                restoreData = {
+                    target: particle.position.copy(),
+                    lastInteractionTime: now,
+                };
+                this._restoreData.set(particle, restoreData);
+            }
+            restoreData.lastInteractionTime = now;
+            if (restore.follow && particle.options.move.enable) {
+                restoreData.target.x += particle.velocity.x;
+                restoreData.target.y += particle.velocity.y;
+                restoreData.target.z += particle.velocity.z;
+            }
+        }
     }
 
     async function loadExternalRepulseInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -5941,7 +6095,7 @@
     }
 
     async function loadExternalSlowInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -6769,7 +6923,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -6936,7 +7090,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -6962,7 +7116,7 @@
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -7055,7 +7209,7 @@
     }
 
     async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesAttract", container => {
@@ -7295,7 +7449,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -7598,7 +7752,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -7688,19 +7842,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
     async function loadTriangleShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
         });
     }
     async function loadPolygonShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -7833,7 +7987,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -7857,7 +8011,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -7891,14 +8045,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["star"], () => Promise.resolve(new StarDrawer()));
         });
     }
 
     async function loadSlim(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -8242,6 +8396,25 @@
         };
     }
 
+    const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
+        const transferredCanvas = transferredCanvases.get(canvas);
+        if (transferredCanvas) {
+            return transferredCanvas;
+        }
+        if (typeof canvas.transferControlToOffscreen !== "function") {
+            throw new TypeError("OffscreenCanvas is required but not supported by this browser");
+        }
+        try {
+            const offscreenCanvas = canvas.transferControlToOffscreen();
+            transferredCanvases.set(canvas, offscreenCanvas);
+            return offscreenCanvas;
+        }
+        catch {
+            throw new TypeError("OffscreenCanvas transfer failed");
+        }
+    }, isHtmlCanvasElement = (canvas) => {
+        return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
+    };
     function setStyle(canvas, style, important = false) {
         if (!style) {
             return;
@@ -8272,8 +8445,9 @@
         }
     }
     class CanvasManager {
-        element;
+        domElement;
         render;
+        renderCanvas;
         size;
         zoom = defaultZoom;
         _container;
@@ -8308,9 +8482,10 @@
         destroy() {
             this.stop();
             if (this._generated) {
-                const element = this.element;
+                const element = this.domElement;
                 element?.remove();
-                this.element = undefined;
+                this.domElement = undefined;
+                this.renderCanvas = undefined;
             }
             else {
                 this._resetOriginalStyle();
@@ -8343,16 +8518,17 @@
             this._initStyle();
             this.initBackground();
             this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
+                const element = this.domElement;
+                if (!element || !(element instanceof Node)) {
                     return;
                 }
-                obs.observe(this.element, { attributes: true });
+                obs.observe(element, { attributes: true });
             });
             this.initPlugins();
             this.render.init();
         }
         initBackground() {
-            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
+            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.domElement;
             if (!element) {
                 return;
             }
@@ -8377,21 +8553,30 @@
             }
         }
         loadCanvas(canvas) {
-            if (this._generated && this.element) {
-                this.element.remove();
+            if (this._generated && this.domElement) {
+                this.domElement.remove();
+            }
+            const container = this._container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+            this.domElement = domCanvas;
+            this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
+            this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
+            const domElement = this.domElement;
+            if (domElement) {
+                domElement.ariaHidden = "true";
+                this._originalStyle = cloneStyle(domElement.style);
+            }
+            const standardSize = this._standardSize, renderCanvas = this.renderCanvas;
+            if (domElement) {
+                standardSize.height = domElement.offsetHeight;
+                standardSize.width = domElement.offsetWidth;
+            }
+            else {
+                standardSize.height = renderCanvas.height;
+                standardSize.width = renderCanvas.width;
             }
-            const container = this._container;
-            this._generated =
-                generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
-            this.element = canvas;
-            this.element.ariaHidden = "true";
-            this._originalStyle = cloneStyle(this.element.style);
-            const standardSize = this._standardSize;
-            standardSize.height = canvas.offsetHeight;
-            standardSize.width = canvas.offsetWidth;
             const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
-            canvas.height = retinaSize.height = standardSize.height * pxRatio;
-            canvas.width = retinaSize.width = standardSize.width * pxRatio;
+            renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
+            renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
             const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
             this.render.setContextSettings({
                 alpha: true,
@@ -8399,42 +8584,48 @@
                 desynchronized: true,
                 willReadFrequently: false,
             });
-            this.render.setContext(this.element.getContext("2d", this.render.settings));
+            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
             this._safeMutationObserver(obs => {
                 obs.disconnect();
             });
             container.retina.init();
             this.initBackground();
             this._safeMutationObserver(obs => {
-                if (!this.element || !(this.element instanceof Node)) {
+                const element = this.domElement;
+                if (!element || !(element instanceof Node)) {
                     return;
                 }
-                obs.observe(this.element, { attributes: true });
+                obs.observe(element, { attributes: true });
             });
         }
         resize() {
-            if (!this.element) {
+            const element = this.domElement;
+            if (!element) {
+                return false;
+            }
+            const container = this._container, renderCanvas = this.renderCanvas;
+            if (renderCanvas === undefined) {
                 return false;
             }
-            const container = this._container, currentSize = container.canvas._standardSize, newSize = {
-                width: this.element.offsetWidth,
-                height: this.element.offsetHeight,
+            const currentSize = container.canvas._standardSize, newSize = {
+                width: element.offsetWidth,
+                height: element.offsetHeight,
             }, pxRatio = container.retina.pixelRatio, retinaSize = {
                 width: newSize.width * pxRatio,
                 height: newSize.height * pxRatio,
             };
             if (newSize.height === currentSize.height &&
                 newSize.width === currentSize.width &&
-                retinaSize.height === this.element.height &&
-                retinaSize.width === this.element.width) {
+                retinaSize.height === renderCanvas.height &&
+                retinaSize.width === renderCanvas.width) {
                 return false;
             }
             const oldSize = { ...currentSize };
             currentSize.height = newSize.height;
             currentSize.width = newSize.width;
             const canvasSize = this.size;
-            this.element.width = canvasSize.width = retinaSize.width;
-            this.element.height = canvasSize.height = retinaSize.height;
+            renderCanvas.width = canvasSize.width = retinaSize.width;
+            renderCanvas.height = canvasSize.height = retinaSize.height;
             if (this._container.started) {
                 container.particles.setResizeFactor({
                     width: currentSize.width / oldSize.width,
@@ -8444,7 +8635,7 @@
             return true;
         }
         setPointerEvents(type) {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -8463,7 +8654,7 @@
             this.render.stop();
         }
         async windowResize() {
-            if (!this.element || !this.resize()) {
+            if (!this.domElement || !this.resize()) {
                 return;
             }
             const container = this._container, needsRefresh = container.updateActualOptions();
@@ -8479,7 +8670,7 @@
             }
         };
         _initStyle = () => {
-            const element = this.element, options = this._container.actualOptions;
+            const element = this.domElement, options = this._container.actualOptions;
             if (!element) {
                 return;
             }
@@ -8501,7 +8692,7 @@
             }
         };
         _repairStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -8521,7 +8712,7 @@
             });
         };
         _resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
+            const element = this.domElement, originalStyle = this._originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
@@ -8534,7 +8725,7 @@
             callback(this._mutationObserver);
         };
         _setFullScreenStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -8608,7 +8799,7 @@
                 manageListener(globalThis, resizeEvent, handlers.resize, add);
                 return;
             }
-            const canvasEl = container.canvas.element;
+            const canvasEl = container.canvas.domElement;
             if (this._resizeObserver && !add) {
                 if (canvasEl) {
                     this._resizeObserver.unobserve(canvasEl);
@@ -8863,8 +9054,6 @@
             this._initPosition(position);
             this.initialVelocity = this._calculateVelocity();
             this.velocity = this.initialVelocity.copy();
-            const particles = container.particles;
-            particles.setLastZIndex(this.position.z);
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
             let effectDrawer, shapeDrawer;
@@ -9014,7 +9203,7 @@
             return color;
         };
         _initPosition = position => {
-            const container = this._container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+            const container = this._container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
             if (!initialPosition) {
                 throw new Error("a valid position cannot be found for particle");
             }
@@ -9148,10 +9337,8 @@
         _container;
         _groupLimits;
         _limit;
-        _maxZIndex;
-        _minZIndex;
-        _needsSort;
         _nextId;
+        _particleBuckets;
         _particleResetPlugins;
         _particleUpdatePlugins;
         _pluginManager;
@@ -9160,19 +9347,17 @@
         _postUpdatePlugins;
         _resizeFactor;
         _updatePlugins;
-        _zArray;
+        _zBuckets;
         constructor(pluginManager, container) {
             this._pluginManager = pluginManager;
             this._container = container;
             this._nextId = 0;
             this._array = [];
-            this._zArray = [];
             this._pool = [];
             this._limit = 0;
             this._groupLimits = new Map();
-            this._needsSort = false;
-            this._minZIndex = 0;
-            this._maxZIndex = 0;
+            this._particleBuckets = new Map();
+            this._zBuckets = this._createBuckets(this._container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize);
             this.checkParticlePositionPlugins = [];
             this._particleResetPlugins = [];
@@ -9214,7 +9399,7 @@
                     return;
                 }
                 this._array.push(particle);
-                this._zArray.push(particle);
+                this._insertParticleIntoBucket(particle);
                 this._nextId++;
                 this._container.dispatchEvent(exports.EventType.particleAdded, {
                     particle,
@@ -9228,12 +9413,14 @@
         }
         clear() {
             this._array = [];
-            this._zArray = [];
+            this._particleBuckets.clear();
+            this._resetBuckets(this._container.zLayers);
         }
         destroy() {
             this._array = [];
             this._pool.length = 0;
-            this._zArray = [];
+            this._particleBuckets.clear();
+            this._zBuckets = [];
             this.checkParticlePositionPlugins = [];
             this._particleResetPlugins = [];
             this._particleUpdatePlugins = [];
@@ -9242,8 +9429,14 @@
             this._updatePlugins = [];
         }
         drawParticles(delta) {
-            for (const particle of this._zArray) {
-                particle.draw(delta);
+            for (let i = this._zBuckets.length - one; i >= minIndex; i--) {
+                const bucket = this._zBuckets[i];
+                if (!bucket) {
+                    continue;
+                }
+                for (const particle of bucket) {
+                    particle.draw(delta);
+                }
             }
         }
         filter(condition) {
@@ -9257,15 +9450,14 @@
         }
         async init() {
             const container = this._container, options = container.actualOptions;
-            this._minZIndex = 0;
-            this._maxZIndex = 0;
-            this._needsSort = false;
             this.checkParticlePositionPlugins = [];
             this._updatePlugins = [];
             this._particleUpdatePlugins = [];
             this._postUpdatePlugins = [];
             this._particleResetPlugins = [];
             this._postParticleUpdatePlugins = [];
+            this._particleBuckets.clear();
+            this._resetBuckets(container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
@@ -9366,79 +9558,25 @@
             }
             this._applyDensity(options.particles, pluginsCount);
         }
-        setLastZIndex(zIndex) {
-            this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
-        }
         setResizeFactor(factor) {
             this._resizeFactor = factor;
         }
         update(delta) {
-            const particlesToDelete = new Set();
             this.grid.clear();
             for (const plugin of this._updatePlugins) {
                 plugin.update?.(delta);
             }
-            const resizeFactor = this._resizeFactor;
-            for (const particle of this._array) {
-                if (resizeFactor && !particle.ignoresResizeRatio) {
-                    particle.position.x *= resizeFactor.width;
-                    particle.position.y *= resizeFactor.height;
-                    particle.initialPosition.x *= resizeFactor.width;
-                    particle.initialPosition.y *= resizeFactor.height;
-                }
-                particle.ignoresResizeRatio = false;
-                for (const plugin of this._particleResetPlugins) {
-                    plugin.particleReset?.(particle);
-                }
-                for (const plugin of this._particleUpdatePlugins) {
-                    if (particle.destroyed) {
-                        break;
-                    }
-                    plugin.particleUpdate?.(particle, delta);
-                }
-                if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                    continue;
-                }
-                this.grid.insert(particle);
-            }
+            const particlesToDelete = this._updateParticlesPhase1(delta);
             for (const plugin of this._postUpdatePlugins) {
                 plugin.postUpdate?.(delta);
             }
-            for (const particle of this._array) {
-                if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                    continue;
-                }
-                for (const updater of this._container.particleUpdaters) {
-                    updater.update(particle, delta);
-                }
-                if (!particle.destroyed && !particle.spawning) {
-                    for (const plugin of this._postParticleUpdatePlugins) {
-                        plugin.postParticleUpdate?.(particle, delta);
-                    }
-                }
-                else if (particle.destroyed) {
-                    particlesToDelete.add(particle);
-                }
-            }
+            this._updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
                     this.remove(particle);
                 }
             }
             delete this._resizeFactor;
-            if (this._needsSort) {
-                const zArray = this._zArray;
-                zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                const firstItem = zArray[minIndex], lastItem = zArray[zArray.length - lengthOffset];
-                if (!firstItem || !lastItem) {
-                    return;
-                }
-                this._maxZIndex = firstItem.position.z;
-                this._minZIndex = lastItem.position.z;
-                this._needsSort = false;
-            }
         }
         _addToPool = (...particles) => {
             this._pool.push(...particles);
@@ -9468,13 +9606,52 @@
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         };
+        _createBuckets = (zLayers) => {
+            const bucketCount = Math.max(Math.floor(zLayers), one);
+            return Array.from({ length: bucketCount }, () => []);
+        };
+        _getBucketIndex = (zIndex) => {
+            const maxBucketIndex = this._zBuckets.length - one;
+            if (maxBucketIndex <= minIndex) {
+                return minIndex;
+            }
+            return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
+        };
+        _getParticleInsertIndex = (bucket, particleId) => {
+            let start = minIndex, end = bucket.length;
+            while (start < end) {
+                const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
+                if (!middleParticle) {
+                    end = middle;
+                    continue;
+                }
+                if (middleParticle.id < particleId) {
+                    start = middle + one;
+                }
+                else {
+                    end = middle;
+                }
+            }
+            return start;
+        };
         _initDensityFactor = densityOptions => {
             const container = this._container;
-            if (!container.canvas.element || !densityOptions.enable) {
+            if (!densityOptions.enable) {
                 return defaultDensityFactor;
             }
-            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp$1);
+            const canvasSize = container.canvas.size, pxRatio = container.retina.pixelRatio;
+            if (!canvasSize.width || !canvasSize.height) {
+                return defaultDensityFactor;
+            }
+            return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp$1));
+        };
+        _insertParticleIntoBucket = (particle) => {
+            const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+            if (!bucket) {
+                return;
+            }
+            bucket.splice(this._getParticleInsertIndex(bucket, particle.id), empty, particle);
+            this._particleBuckets.set(particle.id, bucketIndex);
         };
         _removeParticle = (index, group, override) => {
             const particle = this._array[index];
@@ -9484,9 +9661,8 @@
             if (particle.group !== group) {
                 return false;
             }
-            const zIdx = this._zArray.indexOf(particle);
             this._array.splice(index, deleteCount);
-            this._zArray.splice(zIdx, deleteCount);
+            this._removeParticleFromBucket(particle);
             particle.destroy(override);
             this._container.dispatchEvent(exports.EventType.particleRemoved, {
                 particle,
@@ -9494,6 +9670,98 @@
             this._addToPool(particle);
             return true;
         };
+        _removeParticleFromBucket = (particle) => {
+            const bucketIndex = this._particleBuckets.get(particle.id) ?? this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+            if (!bucket) {
+                this._particleBuckets.delete(particle.id);
+                return;
+            }
+            const particleIndex = this._getParticleInsertIndex(bucket, particle.id);
+            if (bucket[particleIndex]?.id !== particle.id) {
+                this._particleBuckets.delete(particle.id);
+                return;
+            }
+            bucket.splice(particleIndex, deleteCount);
+            this._particleBuckets.delete(particle.id);
+        };
+        _resetBuckets = (zLayers) => {
+            const bucketCount = Math.max(Math.floor(zLayers), one);
+            if (this._zBuckets.length !== bucketCount) {
+                this._zBuckets = this._createBuckets(bucketCount);
+                return;
+            }
+            for (const bucket of this._zBuckets) {
+                bucket.length = minIndex;
+            }
+        };
+        _updateParticleBucket = (particle) => {
+            const newBucketIndex = this._getBucketIndex(particle.position.z), currentBucketIndex = this._particleBuckets.get(particle.id);
+            if (currentBucketIndex === undefined) {
+                this._insertParticleIntoBucket(particle);
+                return;
+            }
+            if (currentBucketIndex === newBucketIndex) {
+                return;
+            }
+            const currentBucket = this._zBuckets[currentBucketIndex];
+            if (currentBucket) {
+                const particleIndex = this._getParticleInsertIndex(currentBucket, particle.id);
+                if (currentBucket[particleIndex]?.id === particle.id) {
+                    currentBucket.splice(particleIndex, deleteCount);
+                }
+            }
+            const newBucket = this._zBuckets[newBucketIndex];
+            if (!newBucket) {
+                this._particleBuckets.set(particle.id, newBucketIndex);
+                return;
+            }
+            newBucket.splice(this._getParticleInsertIndex(newBucket, particle.id), empty, particle);
+            this._particleBuckets.set(particle.id, newBucketIndex);
+        };
+        _updateParticlesPhase1 = (delta) => {
+            const particlesToDelete = new Set(), resizeFactor = this._resizeFactor;
+            for (const particle of this._array) {
+                if (resizeFactor && !particle.ignoresResizeRatio) {
+                    particle.position.x *= resizeFactor.width;
+                    particle.position.y *= resizeFactor.height;
+                    particle.initialPosition.x *= resizeFactor.width;
+                    particle.initialPosition.y *= resizeFactor.height;
+                }
+                particle.ignoresResizeRatio = false;
+                for (const plugin of this._particleResetPlugins) {
+                    plugin.particleReset?.(particle);
+                }
+                for (const plugin of this._particleUpdatePlugins) {
+                    if (particle.destroyed) {
+                        break;
+                    }
+                    plugin.particleUpdate?.(particle, delta);
+                }
+                if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                    continue;
+                }
+                this.grid.insert(particle);
+            }
+            return particlesToDelete;
+        };
+        _updateParticlesPhase2 = (delta, particlesToDelete) => {
+            for (const particle of this._array) {
+                if (particle.destroyed) {
+                    particlesToDelete.add(particle);
+                    continue;
+                }
+                for (const updater of this._container.particleUpdaters) {
+                    updater.update(particle, delta);
+                }
+                if (!particle.spawning) {
+                    for (const plugin of this._postParticleUpdatePlugins) {
+                        plugin.postParticleUpdate?.(particle, delta);
+                    }
+                }
+                this._updateParticleBucket(particle);
+            }
+        };
     }
 
     class Retina {
@@ -9509,9 +9777,8 @@
             const container = this.container, options = container.actualOptions;
             this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio$1;
             this.reduceFactor = defaultReduceFactor;
-            const ratio = this.pixelRatio, canvas = container.canvas;
-            if (canvas.element) {
-                const element = canvas.element;
+            const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
+            if (element) {
                 canvas.size.width = element.offsetWidth * ratio;
                 canvas.size.height = element.offsetHeight * ratio;
             }
@@ -10200,7 +10467,7 @@
                 return;
             }
             const html = interactivityEl, canvas = container.canvas;
-            canvas.setPointerEvents(html === canvas.element ? "initial" : "none");
+            canvas.setPointerEvents(html === canvas.domElement ? "initial" : "none");
             if (add && !(options.interactivity?.events.onHover.enable || options.interactivity?.events.onClick.enable)) {
                 return;
             }
@@ -10227,7 +10494,7 @@
             manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
         };
         _manageListeners = add => {
-            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, detectType = options.interactivity?.detectsOn, canvasEl = container.canvas.element;
+            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, detectType = options.interactivity?.detectsOn, canvasEl = container.canvas.domElement;
             if (detectType === InteractivityDetect.window) {
                 interactionManager.interactivityData.element = safeDocument();
             }
@@ -10274,7 +10541,7 @@
             mouse.clicking = false;
         };
         _mouseTouchMove = e => {
-            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivity = interactionManager.interactivityData, canvasEl = container.canvas.element;
+            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivity = interactionManager.interactivityData, canvasEl = container.canvas.domElement;
             if (!interactivity.element) {
                 return;
             }
@@ -10435,7 +10702,7 @@
                     if (!lastTouch) {
                         return;
                     }
-                    const element = container.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
+                    const element = container.canvas.domElement, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
                         x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
                         y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
                     };