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

package/tsparticles.pjs.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;
         }
@@ -3618,7 +3624,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));
@@ -3892,7 +3898,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -3940,7 +3946,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             pluginManager.addPlugin(new AbsorbersPlugin(instancesManager));
@@ -4305,7 +4311,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -4685,7 +4691,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -4728,7 +4734,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -4786,7 +4792,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -4867,7 +4873,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -5060,7 +5066,7 @@
     }
 
     async function loadExternalDragInteraction(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?.("externalDrag", container => {
@@ -5264,7 +5270,7 @@
     }
 
     async function loadExternalTrailInteraction(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?.("externalTrail", container => {
@@ -5424,7 +5430,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -5463,7 +5469,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());
@@ -5511,7 +5517,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());
         });
@@ -5564,7 +5570,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());
         });
@@ -5588,7 +5594,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();
@@ -5649,7 +5655,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));
@@ -6001,7 +6007,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));
@@ -6072,7 +6078,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));
@@ -6127,7 +6133,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());
         });
@@ -6170,7 +6176,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));
@@ -6179,7 +6185,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),
@@ -6201,7 +6207,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);
@@ -6294,19 +6300,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;
             }
@@ -6321,14 +6315,14 @@
     }
 
     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$1, () => Promise.resolve(new EmojiDrawer()));
         });
     }
 
     const minFactor = 1, minRadius$5 = 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;
@@ -6338,10 +6332,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) {
@@ -6356,18 +6351,18 @@
             if (!attractRadius || attractRadius < minRadius$5 || !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$5 || !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 {
@@ -6376,6 +6371,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -6384,6 +6380,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)) {
@@ -6407,18 +6409,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;
@@ -6459,17 +6471,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;
@@ -6487,10 +6505,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 => {
@@ -6687,7 +6762,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 => {
@@ -7067,7 +7142,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 => {
@@ -7212,7 +7287,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 => {
@@ -7324,7 +7399,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) => {
@@ -7468,7 +7543,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 => {
@@ -7549,7 +7624,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 => {
@@ -7592,7 +7667,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 => {
@@ -7677,7 +7752,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 => {
@@ -7740,7 +7815,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 => {
@@ -7755,6 +7830,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -7763,6 +7839,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)) {
@@ -7786,6 +7868,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;
+            }
         }
     }
 
@@ -7821,19 +7909,23 @@
         }
     }
 
-    const repulseMode = "repulse", minDistance$2 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$2 = 0, minSpeed = 0, easingOffset = 1;
+    const repulseMode = "repulse", minDistance$2 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$2 = 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;
@@ -7874,6 +7966,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;
@@ -7890,6 +7983,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;
@@ -7937,6 +8031,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;
@@ -7969,9 +8064,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) {
@@ -7991,10 +8123,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;
@@ -8076,7 +8230,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 => {
@@ -8904,7 +9058,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));
@@ -9071,7 +9225,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));
@@ -9097,7 +9251,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()));
         });
@@ -9190,7 +9344,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 => {
@@ -9430,7 +9584,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());
@@ -9733,7 +9887,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);
@@ -9823,19 +9977,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),
@@ -9968,7 +10122,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));
@@ -9992,7 +10146,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()));
         });
@@ -10026,14 +10180,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);
@@ -10150,7 +10304,7 @@
     }
 
     async function loadTextShape(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 TextDrawer()));
         });
@@ -10287,7 +10441,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -10420,7 +10574,7 @@
     }
 
     async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("twinkle", container => {
                 return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
@@ -10542,7 +10696,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -10551,7 +10705,7 @@
     }
 
     async function loadFull(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersPluginBundle = async (e) => {
                 await loadEmittersPlugin(e);
@@ -10656,14 +10810,14 @@
     }
 
     async function loadResponsivePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ResponsivePlugin());
         });
     }
 
     const initPjs = async (engine) => {
-        engine.checkVersion("4.0.0-beta.16");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([loadFull(e), loadResponsivePlugin(e)]);
         });
@@ -10978,6 +11132,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;
@@ -11008,8 +11181,9 @@
         }
     }
     class CanvasManager {
-        element;
+        domElement;
         render;
+        renderCanvas;
         size;
         zoom = defaultZoom;
         _container;
@@ -11044,9 +11218,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();
@@ -11079,16 +11254,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;
             }
@@ -11113,21 +11289,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,
@@ -11135,42 +11320,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,
@@ -11180,7 +11371,7 @@
             return true;
         }
         setPointerEvents(type) {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -11199,7 +11390,7 @@
             this.render.stop();
         }
         async windowResize() {
-            if (!this.element || !this.resize()) {
+            if (!this.domElement || !this.resize()) {
                 return;
             }
             const container = this._container, needsRefresh = container.updateActualOptions();
@@ -11215,7 +11406,7 @@
             }
         };
         _initStyle = () => {
-            const element = this.element, options = this._container.actualOptions;
+            const element = this.domElement, options = this._container.actualOptions;
             if (!element) {
                 return;
             }
@@ -11237,7 +11428,7 @@
             }
         };
         _repairStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -11257,7 +11448,7 @@
             });
         };
         _resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
+            const element = this.domElement, originalStyle = this._originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
@@ -11270,7 +11461,7 @@
             callback(this._mutationObserver);
         };
         _setFullScreenStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -11344,7 +11535,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);
@@ -11599,8 +11790,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;
@@ -11750,7 +11939,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");
             }
@@ -11884,10 +12073,8 @@
         _container;
         _groupLimits;
         _limit;
-        _maxZIndex;
-        _minZIndex;
-        _needsSort;
         _nextId;
+        _particleBuckets;
         _particleResetPlugins;
         _particleUpdatePlugins;
         _pluginManager;
@@ -11896,19 +12083,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 = [];
@@ -11950,7 +12135,7 @@
                     return;
                 }
                 this._array.push(particle);
-                this._zArray.push(particle);
+                this._insertParticleIntoBucket(particle);
                 this._nextId++;
                 this._container.dispatchEvent(exports.EventType.particleAdded, {
                     particle,
@@ -11964,12 +12149,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 = [];
@@ -11978,8 +12165,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) {
@@ -11993,15 +12186,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) {
@@ -12102,79 +12294,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);
@@ -12204,13 +12342,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$3);
+            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$3));
+        };
+        _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];
@@ -12220,9 +12397,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,
@@ -12230,6 +12406,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 {
@@ -12245,9 +12513,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;
             }
@@ -12719,7 +12986,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;
             }
@@ -12746,7 +13013,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();
             }
@@ -12793,7 +13060,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;
             }
@@ -12954,7 +13221,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),
                     };