@tsparticles/all 4.0.0-beta.15 → 4.0.0-beta.17

package/tsparticles.all.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.15 */
+/* 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.15";
+            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;
         }
@@ -3031,7 +3037,7 @@
     }
 
     async function loadArrowShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["arrow"], () => Promise.resolve(new ArrowDrawer()));
         });
@@ -3112,7 +3118,7 @@
     }
 
     async function loadBackgroundMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BackgroundMaskPlugin(e.pluginManager));
         });
@@ -3164,7 +3170,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -3188,7 +3194,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3289,7 +3295,7 @@
 
     const branchingPathName = "branchesPathGenerator";
     async function loadBranchesPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(branchingPathName, container => {
@@ -3338,7 +3344,7 @@
 
     const brownianPathName = "brownianPathGenerator";
     async function loadBrownianPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(brownianPathName, container => {
@@ -3360,7 +3366,7 @@
     }
 
     async function loadBubbleEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("bubble", () => {
                 return Promise.resolve(new BubbleDrawer());
@@ -3597,7 +3603,7 @@
     }
 
     async function loadCanvasMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new CanvasMaskPlugin());
         });
@@ -3886,7 +3892,7 @@
     }
 
     async function loadClubsSuitShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
         });
@@ -3900,7 +3906,7 @@
     }
 
     async function loadDiamondsSuitShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
         });
@@ -3914,7 +3920,7 @@
     };
 
     async function loadHeartsSuitShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer$1()));
         });
@@ -3928,14 +3934,14 @@
     }
 
     async function loadSpadesSuitShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
         });
     }
 
     async function loadCardSuitsShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await Promise.all([
             loadClubsSuitShape(engine),
             loadDiamondsSuitShape(engine),
@@ -3953,17 +3959,7 @@
             const cacheKey = getCacheKey(radius, hdr, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half$2, halfHeight = cardHeight * half$2;
             let cachedData = cardsCache.get(cacheKey);
             if (!cachedData) {
-                let cacheCanvas, cacheCtx;
-                if (typeof OffscreenCanvas === "undefined") {
-                    cacheCanvas = safeDocument().createElement("canvas");
-                    cacheCanvas.width = cardWidth;
-                    cacheCanvas.height = cardHeight;
-                    cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
-                }
-                else {
-                    cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight);
-                    cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
-                }
+                const cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight), cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
                 if (cacheCtx) {
                     cacheCtx.translate(halfWidth, halfHeight);
                     drawRoundedCardFront(cacheCtx, radius, cardData, hdr);
@@ -4066,14 +4062,14 @@
     }
 
     async function loadFullCardsShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["card"], container => Promise.resolve(new CardDrawer(container)));
         });
     }
 
     async function loadCardsShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await Promise.all([
             loadFullCardsShape(engine),
             loadCardSuitsShape(engine),
@@ -4143,7 +4139,7 @@
     }
 
     async function loadCogShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["cog"], () => Promise.resolve(new CogDrawer()));
         });
@@ -7783,7 +7779,7 @@
 
     const curlNoisePathName = "curlNoise";
     async function loadCurlNoisePath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curlNoisePathName, container => {
@@ -7886,7 +7882,7 @@
 
     const curvesPathName = "curvesPathGenerator";
     async function loadCurvesPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curvesPathName, container => {
@@ -7912,7 +7908,7 @@
     });
 
     async function loadEasingBackPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$d) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7943,7 +7939,7 @@
     easingsFunctions$c.set(exports.EasingType.easeInOutBounce, value => value < 0.5 ? (1 - bounceOut(1 - value * 2)) / 2 : (1 + bounceOut(value * 2 - 1)) / 2);
 
     async function loadEasingBouncePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$c) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7957,7 +7953,7 @@
     easingsFunctions$b.set(exports.EasingType.easeInOutCirc, value => value < 0.5 ? (1 - Math.sqrt(1 - (2 * value) ** 2)) / 2 : (Math.sqrt(1 - (-2 * value + 2) ** 2) + 1) / 2);
 
     async function loadEasingCircPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$b) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7971,7 +7967,7 @@
     easingsFunctions$a.set(exports.EasingType.easeInOutCubic, value => value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2);
 
     async function loadEasingCubicPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$a) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8004,7 +8000,7 @@
     });
 
     async function loadEasingElasticPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$9) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8028,7 +8024,7 @@
     });
 
     async function loadEasingExpoPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$8) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8042,7 +8038,7 @@
     easingsFunctions$7.set(exports.EasingType.easeInOutGaussian, value => gaussian(value));
 
     async function loadEasingGaussianPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$7) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8056,7 +8052,7 @@
     easingsFunctions$6.set(exports.EasingType.easeInOutLinear, value => value);
 
     async function loadEasingLinearPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$6) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8070,7 +8066,7 @@
     easingsFunctions$5.set(exports.EasingType.easeInOutQuart, value => value < 0.5 ? 8 * value ** 4 : 1 - (-2 * value + 2) ** 4 / 2);
 
     async function loadEasingQuartPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$5) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8084,7 +8080,7 @@
     easingsFunctions$4.set(exports.EasingType.easeInOutQuint, value => value < 0.5 ? 16 * value ** 5 : 1 - (-2 * value + 2) ** 5 / 2);
 
     async function loadEasingQuintPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$4) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8098,7 +8094,7 @@
     easingsFunctions$3.set(exports.EasingType.easeInOutSigmoid, value => sigmoid(value));
 
     async function loadEasingSigmoidPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$3) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8112,7 +8108,7 @@
     easingsFunctions$2.set(exports.EasingType.easeInOutSine, value => -(Math.cos(Math.PI * value) - 1) / 2);
 
     async function loadEasingSinePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$2) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8126,7 +8122,7 @@
     easingsFunctions$1.set(exports.EasingType.easeInOutSmoothstep, value => smoothstep$1(value));
 
     async function loadEasingSmoothstepPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$1) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -8395,7 +8391,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -8800,7 +8796,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -8843,7 +8839,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -9210,7 +9206,7 @@
     }
 
     async function loadEmittersShapeCanvas(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
@@ -9350,7 +9346,7 @@
     }
 
     async function loadEmittersShapePath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("path", new EmittersPathShapeGenerator());
@@ -9481,7 +9477,7 @@
     }
 
     async function loadEmittersShapePolygon(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("polygon", new EmittersPolygonShapeGenerator());
@@ -9502,7 +9498,7 @@
     }
 
     async function loadExportImagePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportImagePlugin());
         });
@@ -9522,7 +9518,7 @@
     }
 
     async function loadExportJSONPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportJSONPlugin());
         });
@@ -9542,7 +9538,7 @@
     }
 
     async function loadExportVideoPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportVideoPlugin());
         });
@@ -9720,7 +9716,7 @@
     }
 
     async function loadExternalCannonInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalCannon", container => {
@@ -9863,7 +9859,7 @@
     }
 
     async function loadExternalParticleInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParticle", container => {
@@ -9911,7 +9907,7 @@
     }
 
     async function loadExternalPopInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPop", container => {
@@ -9952,7 +9948,7 @@
     }
 
     async function loadFilterEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("filter", () => {
                 return Promise.resolve(new FilterDrawer());
@@ -10234,7 +10230,7 @@
 
     const fractalNoisePathName = "fractalNoise";
     async function loadFractalNoisePath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(fractalNoisePathName, container => {
@@ -10484,7 +10480,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -10532,7 +10528,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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));
@@ -10897,7 +10893,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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));
@@ -10944,7 +10940,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -11025,7 +11021,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -11218,7 +11214,7 @@
     }
 
     async function loadExternalDragInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDrag", container => {
@@ -11422,7 +11418,7 @@
     }
 
     async function loadExternalTrailInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalTrail", container => {
@@ -11582,7 +11578,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -11621,7 +11617,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -11669,7 +11665,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -11722,7 +11718,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -11771,7 +11767,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -12123,7 +12119,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -12194,7 +12190,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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));
@@ -12249,7 +12245,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -12292,7 +12288,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -12301,7 +12297,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadHexColorPlugin(e),
@@ -12323,7 +12319,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.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -12402,19 +12398,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;
             }
@@ -12429,14 +12413,14 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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$6 = 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;
@@ -12446,10 +12430,11 @@
             const { dx, dy, distance } = getDistances(particle.position, position), velocity = attractOptions.speed * attractOptions.factor, attractFactor = clamp(pluginManager.getEasing(attractOptions.easing)(identity$5 - 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) {
@@ -12464,18 +12449,18 @@
             if (!attractRadius || attractRadius < minRadius$6 || !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$6 || !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 {
@@ -12484,6 +12469,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -12492,6 +12478,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)) {
@@ -12515,18 +12507,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;
@@ -12567,17 +12569,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;
@@ -12595,10 +12603,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.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -12795,7 +12860,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -13175,7 +13240,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -13320,7 +13385,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -13432,7 +13497,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -13576,7 +13641,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -13657,7 +13722,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -13700,7 +13765,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -13785,7 +13850,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -13848,7 +13913,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -13863,6 +13928,7 @@
         easing;
         factor;
         maxSpeed;
+        restore;
         speed;
         constructor() {
             this.distance = 200;
@@ -13871,6 +13937,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)) {
@@ -13894,6 +13966,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;
+            }
         }
     }
 
@@ -13929,19 +14007,23 @@
         }
     }
 
-    const repulseMode = "repulse", minDistance$3 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$3 = 0, minSpeed = 0, easingOffset = 1;
+    const repulseMode = "repulse", minDistance$3 = 0, repulseRadiusFactor = 6, repulseRadiusPower = 3, squarePower = 2, minRadius$3 = 0, minSpeed = 0, easingOffset = 1, minRestoreSpeed = 0.001, maxRestoreSpeed = 1, restoreEpsilon = 0.5;
     let Repulser$1 = 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;
@@ -13982,6 +14064,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;
@@ -13998,6 +14081,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;
@@ -14045,6 +14129,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;
@@ -14077,9 +14162,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) {
@@ -14099,10 +14221,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.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -14184,7 +14328,7 @@
     }
 
     async function loadExternalSlowInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -15012,7 +15156,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -15179,7 +15323,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -15205,7 +15349,7 @@
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -15298,7 +15442,7 @@
     }
 
     async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesAttract", container => {
@@ -15538,7 +15682,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -15841,7 +15985,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -15931,19 +16075,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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.15");
+        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.15");
+        engine.checkVersion("4.0.0-beta.17");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -16076,7 +16220,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -16100,7 +16244,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -16134,14 +16278,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -16258,7 +16402,7 @@
     }
 
     async function loadTextShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new TextDrawer()));
         });
@@ -16395,7 +16539,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -16528,7 +16672,7 @@
     }
 
     async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        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));
@@ -16650,7 +16794,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -16659,7 +16803,7 @@
     }
 
     async function loadFull(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersPluginBundle = async (e) => {
                 await loadEmittersPlugin(e);
@@ -17013,7 +17157,7 @@
     }
 
     async function loadGradientUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("gradient", container => {
                 return Promise.resolve(new GradientUpdater(e.pluginManager, container));
@@ -17133,7 +17277,7 @@
 
     const gridPathName = "gridPathGenerator";
     async function loadGridPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(gridPathName, container => {
@@ -17162,7 +17306,7 @@
     }
 
     async function loadHeartShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart"], () => Promise.resolve(new HeartDrawer()));
         });
@@ -17278,7 +17422,7 @@
     }
 
     async function loadHsvColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsv", new HsvColorManager());
         });
@@ -17363,7 +17507,7 @@
     }
 
     async function loadHwbColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hwb", new HwbColorManager());
         });
@@ -17526,7 +17670,7 @@
     }
 
     async function loadInfectionPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new InfectionPlugin());
@@ -17552,7 +17696,7 @@
     }
 
     async function loadInfinityShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["infinity"], () => Promise.resolve(new InfinityDrawer()));
         });
@@ -17653,7 +17797,7 @@
     }
 
     async function loadLabColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lab", new LabColorManager());
         });
@@ -17754,7 +17898,7 @@
     }
 
     async function loadLchColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lch", new LchColorManager());
         });
@@ -17808,7 +17952,7 @@
 
     const levyPathName = "levyPathGenerator";
     async function loadLevyPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(levyPathName, container => {
@@ -18043,7 +18187,7 @@
     }
 
     async function loadLightInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalLight", container => {
@@ -18101,7 +18245,7 @@
     }
 
     async function loadManualParticlesPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ManualParticlesPlugin());
         });
@@ -18322,7 +18466,7 @@
     }
 
     async function loadMatrixShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["matrix"], () => Promise.resolve(new MatrixDrawer()));
         });
@@ -18388,7 +18532,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -18571,7 +18715,7 @@
     }
 
     async function loadNamedColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("named", new NamedColorManager());
         });
@@ -18654,7 +18798,7 @@
     }
 
     async function loadOklabColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklab", new OklabColorManager());
         });
@@ -18737,7 +18881,7 @@
     }
 
     async function loadOklchColorPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklch", new OklchColorManager());
         });
@@ -18893,7 +19037,7 @@
     }
 
     async function loadOrbitUpdater(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("orbit", container => {
                 return Promise.resolve(new OrbitUpdater(e.pluginManager, container));
@@ -18933,7 +19077,7 @@
     }
 
     async function loadParticlesEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("particles", container => {
                 return Promise.resolve(new ParticlesDrawer(container));
@@ -19047,7 +19191,7 @@
     }
 
     async function loadParticlesRepulseInteraction(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesRepulse", container => {
@@ -19074,7 +19218,7 @@
     }
 
     async function loadPathShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["path"], () => Promise.resolve(new PathDrawer()));
         });
@@ -19478,7 +19622,7 @@
 
     const perlinNoisePathName = "perlinNoise";
     async function loadPerlinNoisePath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(perlinNoisePathName, container => {
@@ -19541,7 +19685,7 @@
     }
 
     async function loadPoissonDiscPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PoissonDiscPlugin());
         });
@@ -19762,7 +19906,7 @@
     }
 
     async function loadPolygonMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PolygonMaskPlugin(e.pluginManager));
         });
@@ -19828,7 +19972,7 @@
 
     const polygonPathName = "polygonPathGenerator";
     async function loadPolygonPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(polygonPathName, container => {
@@ -19858,7 +20002,7 @@
 
     const randomPathName = "randomPathGenerator";
     async function loadRandomPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(randomPathName, () => {
@@ -19943,7 +20087,7 @@
     }
 
     async function loadResponsivePlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ResponsivePlugin());
         });
@@ -19992,7 +20136,7 @@
     }
 
     async function loadRoundedPolygonShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-polygon"], () => Promise.resolve(new RoundedPolygonDrawer()));
         });
@@ -20039,7 +20183,7 @@
     }
 
     async function loadRoundedRectShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-rect"], () => Promise.resolve(new RoundedRectDrawer()));
         });
@@ -20197,7 +20341,7 @@
 
     const svgPathName = "svgPathGenerator";
     async function loadSVGPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(svgPathName, container => {
@@ -20238,7 +20382,7 @@
     }
 
     async function loadShadowEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("shadow", container => {
                 return Promise.resolve(new ShadowDrawer(e.pluginManager, container));
@@ -20260,7 +20404,7 @@
 
     const simplexNoisePathName = "simplexNoise";
     async function loadSimplexNoisePath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(simplexNoisePathName, container => {
@@ -20642,7 +20786,7 @@
     }
 
     async function loadSoundsPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new SoundsPlugin(e));
         });
@@ -20711,7 +20855,7 @@
 
     const spiralPathName = "spiralPathGenerator";
     async function loadSpiralPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(spiralPathName, container => {
@@ -20751,7 +20895,7 @@
     }
 
     async function loadSpiralShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spiral"], () => Promise.resolve(new SpiralDrawer()));
         });
@@ -20795,7 +20939,7 @@
     }
 
     async function loadSquircleShape(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["squircle"], () => Promise.resolve(new SquircleDrawer()));
         });
@@ -20916,7 +21060,7 @@
     }
 
     async function loadThemesPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ThemesPlugin());
         });
@@ -20999,7 +21143,7 @@
     }
 
     async function loadTrailEffect(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("trail", container => {
                 return Promise.resolve(new TrailDrawer(container));
@@ -21074,7 +21218,7 @@
     }
 
     async function loadTrailPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
         });
@@ -21123,7 +21267,7 @@
 
     const zigZagPathName = "zigZagPathGenerator";
     async function loadZigZagPath(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(zigZagPathName, container => {
@@ -21191,14 +21335,14 @@
     }
 
     async function loadZoomPlugin(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ZoomPlugin());
         });
     }
 
     async function loadAll(engine) {
-        engine.checkVersion("4.0.0-beta.15");
+        engine.checkVersion("4.0.0-beta.17");
         await engine.pluginManager.register(async (e) => {
             const loadInteractionsForAll = async (e) => {
                 await loadFull(e);
@@ -21592,6 +21736,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;
@@ -21622,8 +21785,9 @@
         }
     }
     class CanvasManager {
-        element;
+        domElement;
         render;
+        renderCanvas;
         size;
         zoom = defaultZoom;
         _container;
@@ -21658,9 +21822,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();
@@ -21693,16 +21858,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;
             }
@@ -21727,21 +21893,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,
@@ -21749,42 +21924,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,
@@ -21794,7 +21975,7 @@
             return true;
         }
         setPointerEvents(type) {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -21813,7 +21994,7 @@
             this.render.stop();
         }
         async windowResize() {
-            if (!this.element || !this.resize()) {
+            if (!this.domElement || !this.resize()) {
                 return;
             }
             const container = this._container, needsRefresh = container.updateActualOptions();
@@ -21829,7 +22010,7 @@
             }
         };
         _initStyle = () => {
-            const element = this.element, options = this._container.actualOptions;
+            const element = this.domElement, options = this._container.actualOptions;
             if (!element) {
                 return;
             }
@@ -21851,7 +22032,7 @@
             }
         };
         _repairStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -21871,7 +22052,7 @@
             });
         };
         _resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
+            const element = this.domElement, originalStyle = this._originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
@@ -21884,7 +22065,7 @@
             callback(this._mutationObserver);
         };
         _setFullScreenStyle = () => {
-            const element = this.element;
+            const element = this.domElement;
             if (!element) {
                 return;
             }
@@ -21958,7 +22139,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);
@@ -22213,8 +22394,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;
@@ -22364,7 +22543,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");
             }
@@ -22498,10 +22677,8 @@
         _container;
         _groupLimits;
         _limit;
-        _maxZIndex;
-        _minZIndex;
-        _needsSort;
         _nextId;
+        _particleBuckets;
         _particleResetPlugins;
         _particleUpdatePlugins;
         _pluginManager;
@@ -22510,19 +22687,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 = [];
@@ -22564,7 +22739,7 @@
                     return;
                 }
                 this._array.push(particle);
-                this._zArray.push(particle);
+                this._insertParticleIntoBucket(particle);
                 this._nextId++;
                 this._container.dispatchEvent(exports.EventType.particleAdded, {
                     particle,
@@ -22578,12 +22753,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 = [];
@@ -22592,8 +22769,14 @@
             this._updatePlugins = [];
         }
         drawParticles(delta) {
-            for (const particle of this._zArray) {
-                particle.draw(delta);
+            for (let i = this._zBuckets.length - one; i >= minIndex$1; i--) {
+                const bucket = this._zBuckets[i];
+                if (!bucket) {
+                    continue;
+                }
+                for (const particle of bucket) {
+                    particle.draw(delta);
+                }
             }
         }
         filter(condition) {
@@ -22607,15 +22790,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) {
@@ -22716,79 +22898,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$1], 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);
@@ -22818,13 +22946,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$1) {
+                return minIndex$1;
+            }
+            return Math.min(Math.max(Math.floor(zIndex), minIndex$1), maxBucketIndex);
+        };
+        _getParticleInsertIndex = (bucket, particleId) => {
+            let start = minIndex$1, 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 canvasSize = container.canvas.size, pxRatio = container.retina.pixelRatio;
+            if (!canvasSize.width || !canvasSize.height) {
                 return defaultDensityFactor;
             }
-            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp$5);
+            return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp$5));
+        };
+        _insertParticleIntoBucket = (particle) => {
+            const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+            if (!bucket) {
+                return;
+            }
+            bucket.splice(this._getParticleInsertIndex(bucket, particle.id), empty$1, particle);
+            this._particleBuckets.set(particle.id, bucketIndex);
         };
         _removeParticle = (index, group, override) => {
             const particle = this._array[index];
@@ -22834,9 +23001,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,
@@ -22844,6 +23010,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$1;
+            }
+        };
+        _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$1, 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 {
@@ -22859,9 +23117,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;
             }
@@ -23785,7 +24042,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;
             }
@@ -23812,7 +24069,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();
             }
@@ -23859,7 +24116,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;
             }
@@ -24020,7 +24277,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),
                     };
@@ -24390,7 +24647,7 @@
             return res;
         }
         _exportImage = async (data) => {
-            const element = this._container.canvas.element;
+            const element = this._container.canvas.domElement;
             if (!element) {
                 return;
             }
@@ -24502,7 +24759,7 @@
             return res;
         }
         _exportVideo = async (data) => {
-            const element = this._container.canvas.element;
+            const element = this._container.canvas.domElement;
             if (!element) {
                 return;
             }
@@ -27197,7 +27454,7 @@
         setIconStyle(img, pos.top + margin, pos.right -
             (margin * (rightOffsets.length + rightOffset) + width + rightOffsets.reduce((a, b) => a + b, defaultAccumulator)), display, options.fullScreen.zIndex + zIndexOffset, width, margin, style);
         img.src = path ?? (svg ? `data:image/svg+xml;base64,${btoa(svg)}` : "");
-        const parent = container.canvas.element?.parentNode ?? safeDocument().body;
+        const parent = container.canvas.domElement?.parentNode ?? safeDocument().body;
         parent.append(img);
         img.addEventListener("click", () => {
             void clickCb();
@@ -27285,11 +27542,11 @@
         }
         async start() {
             const container = this._container, options = container.actualOptions, soundsOptions = options.sounds;
-            if (!soundsOptions?.enable || !container.canvas.element) {
+            if (!soundsOptions?.enable || !container.canvas.domElement) {
                 return;
             }
             container.muted = true;
-            const canvas = container.canvas.element, pos = {
+            const canvas = container.canvas.domElement, pos = {
                 top: canvas.offsetTop,
                 right: canvas.offsetLeft + canvas.offsetWidth,
             }, { mute, unmute, volumeDown, volumeUp } = soundsOptions.icons, margin = 10, toggleMute = async () => {
@@ -27400,7 +27657,7 @@
         }
         _initEvents = () => {
             const container = this._container, soundsOptions = container.actualOptions.sounds;
-            if (!soundsOptions?.enable || !container.canvas.element) {
+            if (!soundsOptions?.enable || !container.canvas.domElement) {
                 return;
             }
             for (const event of soundsOptions.events) {
@@ -27812,7 +28069,7 @@
             this._manageListeners(false);
         }
         _handleGestureChange = (event) => {
-            const container = this.container, canvas = container.canvas, canvasEl = canvas.element;
+            const container = this.container, canvas = container.canvas, canvasEl = canvas.domElement;
             if (!canvasEl) {
                 return;
             }
@@ -27833,7 +28090,7 @@
             this._gestureScale = scale;
         };
         _handleGestureEnd = (event) => {
-            const container = this.container, canvas = container.canvas, canvasEl = canvas.element;
+            const container = this.container, canvas = container.canvas, canvasEl = canvas.domElement;
             if (!canvasEl) {
                 return;
             }
@@ -27848,7 +28105,7 @@
             this._gestureScale = defaultZoom;
         };
         _handleGestureStart = (event) => {
-            const container = this.container, canvas = container.canvas, canvasEl = canvas.element;
+            const container = this.container, canvas = container.canvas, canvasEl = canvas.domElement;
             if (!canvasEl) {
                 return;
             }
@@ -27866,7 +28123,7 @@
             if (!event.ctrlKey && !event.metaKey) {
                 return;
             }
-            const container = this.container, zoomOptions = container.actualOptions.zoom, canvas = container.canvas, canvasEl = canvas.element;
+            const container = this.container, zoomOptions = container.actualOptions.zoom, canvas = container.canvas, canvasEl = canvas.domElement;
             if (!canvasEl) {
                 return;
             }
@@ -27897,7 +28154,7 @@
                 this._touchDistance = distance;
                 return;
             }
-            const container = this.container, zoomOptions = container.actualOptions.zoom, canvas = container.canvas, canvasEl = canvas.element;
+            const container = this.container, zoomOptions = container.actualOptions.zoom, canvas = container.canvas, canvasEl = canvas.domElement;
             if (!canvasEl) {
                 return;
             }
@@ -27927,7 +28184,7 @@
             return false;
         };
         _manageListeners = add => {
-            const handlers = this._handlers, canvas = this.container.canvas.element, options = this.container.actualOptions, doc = safeDocument();
+            const handlers = this._handlers, canvas = this.container.canvas.domElement, options = this.container.actualOptions, doc = safeDocument();
             if (!canvas) {
                 return;
             }