@tsparticles/all 4.2.0 → 4.3.0

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.2.0 */
+/* tsParticles v4.3.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -398,29 +398,27 @@
                 }
             }
             else if (!isObject(destination) || Array.isArray(destination)) {
-                destination = {};
+                destination = Object.create(null);
             }
-            const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+            const sourceKeys = Object.keys(source), hasNested = sourceKeys.some(k => {
                 const v = source[k];
                 return isObject(v) || Array.isArray(v);
             });
             if (!hasNested) {
                 const sourceDict = source, destDict = destination;
                 for (const key of sourceKeys) {
-                    if (dangerousKeys.has(key)) {
+                    if (key === "__proto__" || key === "constructor" || key === "prototype") {
                         continue;
                     }
-                    if (key in sourceDict) {
-                        const v = sourceDict[key];
-                        if (v !== undefined) {
-                            destDict[key] = v;
-                        }
+                    const v = sourceDict[key];
+                    if (v !== undefined) {
+                        destDict[key] = v;
                     }
                 }
                 continue;
             }
             for (const key of sourceKeys) {
-                if (dangerousKeys.has(key)) {
+                if (key === "__proto__" || key === "constructor" || key === "prototype") {
                     continue;
                 }
                 const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -879,7 +877,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.2.0";
+            return "4.2.1";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -1112,6 +1110,18 @@
         AnimationStatus["decreasing"] = "decreasing";
     })(exports.AnimationStatus || (exports.AnimationStatus = {}));
 
+    exports.DrawLayer = void 0;
+    (function (DrawLayer) {
+        DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
+        DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
+        DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
+        DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
+        DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
+        DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
+        DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
+        DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
+    })(exports.DrawLayer || (exports.DrawLayer = {}));
+
     class OptionLoader {
         load(data) {
             if (isNull(data)) {
@@ -1270,6 +1280,8 @@
 
     class Background extends OptionLoader {
         color;
+        draw;
+        element;
         image = "";
         opacity = 1;
         position = "";
@@ -1284,6 +1296,8 @@
             if (data.color !== undefined) {
                 this.color = OptionsColor.create(this.color, data.color);
             }
+            loadProperty(this, "element", data.element);
+            loadProperty(this, "draw", data.draw);
             loadProperty(this, "image", data.image);
             loadProperty(this, "position", data.position);
             loadProperty(this, "repeat", data.repeat);
@@ -1829,7 +1843,7 @@
         }
     }
 
-    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, sdrReferenceWhiteNits = 203;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, hdrAnimationScale = sdrReferenceWhiteNits / maxNits;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1972,6 +1986,17 @@
             : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
         return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
     }
+    function hslToRgbFloat(hsl) {
+        const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
+        if (s === sMin) {
+            const grayscaleValue = lNormalized * rgbMax;
+            return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
+        }
+        const temp1 = lNormalized < half$2
+            ? lNormalized * (sNormalizedOffset + sNormalized)
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
+        return { r: red, g: green, b: blue };
+    }
     function hslaToRgba(hsla) {
         const rgbResult = hslToRgb(hsla);
         return {
@@ -1981,8 +2006,16 @@
             r: rgbResult.r,
         };
     }
-    function getRandomRgbColor(min) {
-        const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity$3, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
+    function getRandomRgbColor(min, hdr) {
+        const fixedMin = min ?? defaultRgbMin;
+        if (hdr) {
+            return {
+                r: getRandomInRange(fixedMin, rgbMax),
+                g: getRandomInRange(fixedMin, rgbMax),
+                b: getRandomInRange(fixedMin, rgbMax),
+            };
+        }
+        const fixedMax = rgbMax + identity$3, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
         return {
             b: getRgbInRangeValue(),
             g: getRgbInRangeValue(),
@@ -1990,7 +2023,7 @@
         };
     }
     function getStyleFromRgb(color, hdr, opacity) {
-        const op = opacity ?? defaultOpacity$3, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$3, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
         return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
     }
     function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
@@ -2001,9 +2034,9 @@
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$3).toString()})`;
     }
     function getStyleFromHsl(color, hdr, opacity) {
-        const op = opacity ?? defaultOpacity$3, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$3, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
         return getCachedStyle(key, () => hdr
-            ? getStyleFromRgb(hslToRgb(color), true, opacity)
+            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
             : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
     function colorMix(color1, color2, size1, size2) {
@@ -2123,7 +2156,7 @@
             colorValue.velocity = defaultVelocity;
         }
     }
-    function updateColorValue(data, decrease, delta) {
+    function updateColorValue(data, decrease, delta, hdr) {
         const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
         if (!data.enable ||
             ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -2136,7 +2169,7 @@
         if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
             return;
         }
-        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
+        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = ((data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor) * (hdr ? hdrAnimationScale : identity), decay = data.decay ?? identity, max = data.max, min = data.min;
         if (!decrease || data.status === exports.AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -2163,14 +2196,14 @@
         }
         data.value = clamp(data.value, min, max);
     }
-    function updateColor(color, delta) {
+    function updateColor(color, delta, hdr) {
         if (!color) {
             return;
         }
         const { h, s, l } = color;
-        updateColorValue(h, false, delta);
-        updateColorValue(s, true, delta);
-        updateColorValue(l, true, delta);
+        updateColorValue(h, false, delta, hdr);
+        updateColorValue(s, true, delta, hdr);
+        updateColorValue(l, true, delta, hdr);
     }
     function alterHsl(color, type, value) {
         return {
@@ -2210,7 +2243,7 @@
     }
 
     async function loadArrowShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["arrow"], () => Promise.resolve(new ArrowDrawer()));
         });
@@ -2218,6 +2251,8 @@
 
     class BackgroundMaskCover {
         color;
+        draw;
+        element;
         image;
         opacity = 1;
         load(data) {
@@ -2227,6 +2262,8 @@
             if (data.color !== undefined) {
                 this.color = OptionsColor.create(this.color, data.color);
             }
+            loadProperty(this, "draw", data.draw);
+            loadProperty(this, "element", data.element);
             loadProperty(this, "image", data.image);
             loadProperty(this, "opacity", data.opacity);
         }
@@ -2243,7 +2280,12 @@
             loadProperty(this, "composite", data.composite);
             if (data.cover !== undefined) {
                 const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
-                this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
+                this.cover.load(cover.color !== undefined ||
+                    cover.draw !== undefined ||
+                    cover.element !== undefined ||
+                    cover.image !== undefined
+                    ? cover
+                    : { color: color });
             }
             loadProperty(this, "enable", data.enable);
         }
@@ -2275,7 +2317,7 @@
     }
 
     async function loadBackgroundMaskPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BackgroundMaskPlugin(e.pluginManager));
         });
@@ -2299,7 +2341,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -2400,7 +2442,7 @@
 
     const branchingPathName = "branchesPathGenerator";
     async function loadBranchesPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(branchingPathName, container => {
@@ -2449,7 +2491,7 @@
 
     const brownianPathName = "brownianPathGenerator";
     async function loadBrownianPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(brownianPathName, container => {
@@ -2471,7 +2513,7 @@
     }
 
     async function loadBubbleEffect(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("bubble", () => {
                 return Promise.resolve(new BubbleDrawer());
@@ -2641,7 +2683,7 @@
     }
 
     async function loadCanvasMaskPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new CanvasMaskPlugin());
         });
@@ -2930,7 +2972,7 @@
     }
 
     async function loadClubsSuitShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
         });
@@ -2944,7 +2986,7 @@
     }
 
     async function loadDiamondsSuitShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
         });
@@ -2958,7 +3000,7 @@
     };
 
     async function loadHeartsSuitShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer$1()));
         });
@@ -2972,14 +3014,14 @@
     }
 
     async function loadSpadesSuitShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
         });
     }
 
     async function loadCardSuitsShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await Promise.all([
             loadClubsSuitShape(engine),
             loadDiamondsSuitShape(engine),
@@ -3100,14 +3142,14 @@
     }
 
     async function loadFullCardsShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["card"], container => Promise.resolve(new CardDrawer(container)));
         });
     }
 
     async function loadCardsShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await Promise.all([
             loadFullCardsShape(engine),
             loadCardSuitsShape(engine),
@@ -3177,7 +3219,7 @@
     }
 
     async function loadCogShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["cog"], () => Promise.resolve(new CogDrawer()));
         });
@@ -6817,7 +6859,7 @@
 
     const curlNoisePathName = "curlNoise";
     async function loadCurlNoisePath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curlNoisePathName, container => {
@@ -6920,7 +6962,7 @@
 
     const curvesPathName = "curvesPathGenerator";
     async function loadCurvesPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(curvesPathName, container => {
@@ -6946,7 +6988,7 @@
     });
 
     async function loadEasingBackPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$d) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -6977,7 +7019,7 @@
     easingsFunctions$c.set("ease-in-out-bounce", value => value < 0.5 ? (1 - bounceOut(1 - value * 2)) / 2 : (1 + bounceOut(value * 2 - 1)) / 2);
 
     async function loadEasingBouncePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$c) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -6991,7 +7033,7 @@
     easingsFunctions$b.set("ease-in-out-circ", 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.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$b) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7005,7 +7047,7 @@
     easingsFunctions$a.set("ease-in-out-cubic", value => (value < 0.5 ? 4 * value ** 3 : 1 - (-2 * value + 2) ** 3 / 2));
 
     async function loadEasingCubicPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$a) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7038,7 +7080,7 @@
     });
 
     async function loadEasingElasticPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$9) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7062,7 +7104,7 @@
     });
 
     async function loadEasingExpoPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$8) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7076,7 +7118,7 @@
     easingsFunctions$7.set("ease-in-out-gaussian", value => gaussian(value));
 
     async function loadEasingGaussianPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$7) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7090,7 +7132,7 @@
     easingsFunctions$6.set("ease-in-out-linear", value => value);
 
     async function loadEasingLinearPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$6) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7104,7 +7146,7 @@
     easingsFunctions$5.set("ease-in-out-quart", value => (value < 0.5 ? 8 * value ** 4 : 1 - (-2 * value + 2) ** 4 / 2));
 
     async function loadEasingQuartPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$5) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7118,7 +7160,7 @@
     easingsFunctions$4.set("ease-in-out-quint", value => (value < 0.5 ? 16 * value ** 5 : 1 - (-2 * value + 2) ** 5 / 2));
 
     async function loadEasingQuintPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$4) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7132,7 +7174,7 @@
     easingsFunctions$3.set("ease-in-out-sigmoid", value => sigmoid(value));
 
     async function loadEasingSigmoidPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$3) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7146,7 +7188,7 @@
     easingsFunctions$2.set("ease-in-out-sine", value => -(Math.cos(Math.PI * value) - 1) / 2);
 
     async function loadEasingSinePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$2) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7160,7 +7202,7 @@
     easingsFunctions$1.set("ease-in-out-smoothstep", value => smoothstep$1(value));
 
     async function loadEasingSmoothstepPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions$1) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -7399,7 +7441,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -7742,7 +7784,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -7785,7 +7827,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -8125,7 +8167,7 @@
     }
 
     async function loadEmittersShapeCanvas(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
@@ -8262,7 +8304,7 @@
     }
 
     async function loadEmittersShapePath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("path", new EmittersPathShapeGenerator());
@@ -8389,7 +8431,7 @@
     }
 
     async function loadEmittersShapePolygon(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("polygon", new EmittersPolygonShapeGenerator());
@@ -8410,7 +8452,7 @@
     }
 
     async function loadExportImagePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportImagePlugin());
         });
@@ -8430,7 +8472,7 @@
     }
 
     async function loadExportJSONPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportJSONPlugin());
         });
@@ -8450,7 +8492,7 @@
     }
 
     async function loadExportVideoPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ExportVideoPlugin());
         });
@@ -8602,7 +8644,7 @@
     }
 
     async function loadExternalCannonInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalCannon", container => {
@@ -8731,7 +8773,7 @@
     }
 
     async function loadExternalParticleInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParticle", container => {
@@ -8779,7 +8821,7 @@
     }
 
     async function loadExternalPopInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPop", container => {
@@ -8820,7 +8862,7 @@
     }
 
     async function loadFilterEffect(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("filter", () => {
                 return Promise.resolve(new FilterDrawer());
@@ -9102,7 +9144,7 @@
 
     const fractalNoisePathName = "fractalNoise";
     async function loadFractalNoisePath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(fractalNoisePathName, container => {
@@ -9318,7 +9360,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -9366,7 +9408,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             pluginManager.addPlugin(new AbsorbersPlugin(instancesManager));
@@ -9692,7 +9734,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -9738,7 +9780,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -9819,7 +9861,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -10001,7 +10043,7 @@
     }
 
     async function loadExternalDragInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDrag", container => {
@@ -10174,7 +10216,7 @@
     }
 
     async function loadExternalTrailInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalTrail", container => {
@@ -10310,7 +10352,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -10356,7 +10398,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -10393,7 +10435,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -10441,7 +10483,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -10494,7 +10536,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -10698,7 +10740,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -11043,7 +11085,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -11108,13 +11150,13 @@
             if (!this.isEnabled(particle)) {
                 return;
             }
-            updateColor(particle.fillColor, delta);
-            updateColor(particle.strokeColor, delta);
+            updateColor(particle.fillColor, delta, this.#container.hdr);
+            updateColor(particle.strokeColor, delta, this.#container.hdr);
         }
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -11169,7 +11211,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -11254,7 +11296,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -11263,7 +11305,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -11286,7 +11328,7 @@
     easingsFunctions.set("ease-in-out-quad", value => (value < 0.5 ? 2 * value ** 2 : 1 - (-2 * value + 2) ** 2 / 2));
 
     async function loadEasingQuadPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -11380,7 +11422,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes$1, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -11613,7 +11655,7 @@
     };
 
     async function loadExternalAttractInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -11802,7 +11844,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -11862,6 +11904,19 @@
         }
     }
 
+    class BubbleModifier {
+        div;
+        enabled = false;
+        fillColor;
+        finalColor;
+        id = "bubble";
+        inRange = false;
+        opacity;
+        priority = 100;
+        radius;
+        strokeColor;
+    }
+
     var ProcessBubbleType;
     (function (ProcessBubbleType) {
         ProcessBubbleType["color"] = "color";
@@ -11885,6 +11940,7 @@
     class Bubbler extends ExternalInteractorBase {
         handleClickMode;
         #maxDistance;
+        #modifiers = new WeakMap();
         #pluginManager;
         constructor(pluginManager, container) {
             super(container);
@@ -11903,13 +11959,21 @@
             return this.#maxDistance;
         }
         clear(particle, _delta, force) {
-            if (particle.bubble.inRange && !force) {
+            const mod = this.#modifiers.get(particle);
+            if (mod?.inRange && !force) {
                 return;
             }
-            delete particle.bubble.div;
-            delete particle.bubble.opacity;
-            delete particle.bubble.radius;
-            delete particle.bubble.color;
+            particle.removeModifier(bubbleMode);
+            this.#modifiers.delete(particle);
+        }
+        getOrCreateModifier(particle) {
+            let mod = this.#modifiers.get(particle);
+            if (!mod) {
+                mod = new BubbleModifier();
+                this.#modifiers.set(particle, mod);
+                particle.addModifier(mod);
+            }
+            return mod;
         }
         init() {
             const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;
@@ -11955,7 +12019,11 @@
             loadOptionProperty(options, "bubble", Bubble, ...sources);
         }
         reset(_interactivityData, particle) {
-            particle.bubble.inRange = false;
+            const mod = this.#modifiers.get(particle);
+            if (mod) {
+                mod.enabled = false;
+                mod.inRange = false;
+            }
         }
         #clickBubble(interactivityData) {
             const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
@@ -11972,7 +12040,9 @@
                 if (!bubble.clicking) {
                     continue;
                 }
-                particle.bubble.inRange = !bubble.durationEnd;
+                const mod = this.getOrCreateModifier(particle);
+                mod.enabled = !bubble.durationEnd;
+                mod.inRange = !bubble.durationEnd;
                 const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds$1;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
@@ -11984,7 +12054,7 @@
                 const sizeData = {
                     bubbleObj: {
                         optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
+                        value: mod.radius,
                     },
                     particlesObj: {
                         optValue: particle.size.max,
@@ -11996,7 +12066,7 @@
                 const opacityData = {
                     bubbleObj: {
                         optValue: bubbleOptions.opacity,
-                        value: particle.bubble.opacity,
+                        value: mod.opacity,
                     },
                     particlesObj: {
                         optValue: particle.opacity?.max ?? defaultOpacity$1,
@@ -12009,7 +12079,8 @@
                     this.#hoverBubbleColor(particle, distMouse);
                 }
                 else {
-                    delete particle.bubble.color;
+                    mod.fillColor = undefined;
+                    mod.strokeColor = undefined;
                 }
             }
         }
@@ -12020,7 +12091,9 @@
             }
             const query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
             for (const particle of query) {
-                particle.bubble.inRange = true;
+                const mod = this.getOrCreateModifier(particle);
+                mod.enabled = true;
+                mod.inRange = true;
                 const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
                     if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
@@ -12038,30 +12111,38 @@
             }
         }
         #hoverBubbleColor(particle, ratio, divBubble) {
-            const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
+            const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble, mod = this.getOrCreateModifier(particle);
             if (!bubbleOptions) {
                 return;
             }
-            if (!particle.bubble.finalColor) {
+            if (!mod.finalColor) {
                 const modeColor = bubbleOptions.color;
                 if (!modeColor) {
                     return;
                 }
                 const bubbleColor = itemFromSingleOrMultiple(modeColor);
-                particle.bubble.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
+                mod.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
             }
-            if (!particle.bubble.finalColor) {
+            if (!mod.finalColor) {
                 return;
             }
             if (bubbleOptions.mix) {
-                particle.bubble.color = undefined;
+                mod.fillColor = undefined;
+                mod.strokeColor = undefined;
                 const pColor = particle.getFillColor();
-                particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
-                    : particle.bubble.finalColor;
+                if (pColor) {
+                    const mixedColor = rgbToHsl(colorMix(pColor, mod.finalColor, ratioOffset - ratio, ratio));
+                    mod.fillColor = mixedColor;
+                    mod.strokeColor = mixedColor;
+                }
+                else {
+                    mod.fillColor = mod.finalColor;
+                    mod.strokeColor = mod.finalColor;
+                }
             }
             else {
-                particle.bubble.color = particle.bubble.finalColor;
+                mod.fillColor = mod.finalColor;
+                mod.strokeColor = mod.finalColor;
             }
         }
         #hoverBubbleOpacity(particle, ratio, divBubble) {
@@ -12071,7 +12152,8 @@
             }
             const pOpacity = particle.opacity?.value ?? defaultOpacity$1, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity$1, ratio);
             if (opacity !== undefined) {
-                particle.bubble.opacity = opacity;
+                const mod = this.getOrCreateModifier(particle);
+                mod.opacity = opacity;
             }
         }
         #hoverBubbleSize(particle, ratio, divBubble) {
@@ -12081,7 +12163,8 @@
             }
             const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
             if (size !== undefined) {
-                particle.bubble.radius = size;
+                const mod = this.getOrCreateModifier(particle);
+                mod.radius = size;
             }
         }
         #process(particle, distMouse, timeSpent, data) {
@@ -12094,13 +12177,14 @@
                 return;
             }
             container.bubble ??= {};
+            const mod = this.getOrCreateModifier(particle);
             if (container.bubble.durationEnd) {
                 if (pObjBubble) {
                     if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
+                        mod.radius = undefined;
                     }
                     if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
+                        mod.opacity = undefined;
                     }
                 }
             }
@@ -12110,19 +12194,19 @@
                     if (obj !== bubbleParam) {
                         const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
                         if (type === ProcessBubbleType.size) {
-                            particle.bubble.radius = value;
+                            mod.radius = value;
                         }
                         if (type === ProcessBubbleType.opacity) {
-                            particle.bubble.opacity = value;
+                            mod.opacity = value;
                         }
                     }
                 }
                 else {
                     if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
+                        mod.radius = undefined;
                     }
                     if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
+                        mod.opacity = undefined;
                     }
                 }
             }
@@ -12143,11 +12227,13 @@
                     if (!area.contains(particle.getPosition())) {
                         continue;
                     }
-                    particle.bubble.inRange = true;
+                    const mod = this.getOrCreateModifier(particle);
+                    mod.enabled = true;
+                    mod.inRange = true;
                     const divs = bubble.divs, divBubble = divMode(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    if (!mod.div || mod.div !== elem) {
                         this.clear(particle, delta, true);
-                        particle.bubble.div = elem;
+                        mod.div = elem;
                     }
                     this.#hoverBubbleSize(particle, defaultRatio, divBubble);
                     this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
@@ -12158,7 +12244,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -12286,7 +12372,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -12390,7 +12476,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -12514,7 +12600,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -12584,7 +12670,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -12627,7 +12713,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -12699,7 +12785,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -12753,7 +12839,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -13059,7 +13145,7 @@
     };
 
     async function loadExternalRepulseInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -13081,9 +13167,17 @@
         }
     }
 
+    class SlowModifier {
+        enabled = false;
+        id = "slow";
+        priority = 100;
+        speedFactor = 1;
+    }
+
     const slowMode = "slow", minRadius$3 = 0;
     class Slower extends ExternalInteractorBase {
         #maxDistance;
+        #modifiers = new WeakMap();
         constructor(container) {
             super(container);
             this.#maxDistance = 0;
@@ -13092,10 +13186,21 @@
             return this.#maxDistance;
         }
         clear(particle, _delta, force) {
-            if (particle.slow.inRange && !force) {
+            const mod = this.#modifiers.get(particle);
+            if (mod?.enabled && !force) {
                 return;
             }
-            particle.slow.factor = 1;
+            particle.removeModifier(slowMode);
+            this.#modifiers.delete(particle);
+        }
+        getOrCreateModifier(particle) {
+            let mod = this.#modifiers.get(particle);
+            if (!mod) {
+                mod = new SlowModifier();
+                this.#modifiers.set(particle, mod);
+                particle.addModifier(mod);
+            }
+            return mod;
         }
         init() {
             const container = this.container, slow = container.actualOptions.interactivity?.modes.slow;
@@ -13115,22 +13220,26 @@
             loadOptionProperty(options, "slow", Slow, ...sources);
         }
         reset(interactivityData, particle) {
-            particle.slow.inRange = false;
+            const mod = this.#modifiers.get(particle);
+            if (mod) {
+                mod.enabled = false;
+            }
             const container = this.container, options = container.actualOptions, mousePos = interactivityData.mouse.position, radius = container.retina.slowModeRadius, slowOptions = options.interactivity?.modes.slow;
             if (!slowOptions || !radius || radius < minRadius$3 || !mousePos) {
                 return;
             }
-            const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor, { slow } = particle;
+            const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor;
             if (dist > radius) {
                 return;
             }
-            slow.inRange = true;
-            slow.factor = proximityFactor / slowFactor;
+            const activeMod = this.getOrCreateModifier(particle);
+            activeMod.enabled = true;
+            activeMod.speedFactor = proximityFactor / slowFactor;
         }
     }
 
     async function loadExternalSlowInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -13192,7 +13301,6 @@
     function replaceImageColor(image, imageData, color, particle, hdr = false) {
         const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {
             color,
-            gif: imageData.gif,
             data: {
                 ...image,
                 svgData: svgColoredData,
@@ -13227,982 +13335,480 @@
         });
     }
 
-    const InterlaceOffsets = [0, 4, 2, 1];
-    const InterlaceSteps = [8, 8, 4, 2];
-
-    class ByteStream {
-        data;
-        pos;
-        constructor(bytes) {
-            this.pos = 0;
-            this.data = new Uint8ClampedArray(bytes);
-        }
-        getString(count) {
-            const slice = this.data.slice(this.pos, this.pos + count);
-            this.pos += slice.length;
-            return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
-        }
-        nextByte() {
-            return this.data[this.pos++];
+    const sides$3 = 12;
+    class ImageDrawer {
+        #container;
+        #engine;
+        constructor(engine, container) {
+            this.#engine = engine;
+            this.#container = container;
         }
-        nextTwoBytes() {
-            const increment = 2, previous = 1, shift = 8;
-            this.pos += increment;
-            return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
+        draw(data) {
+            const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
+            if (!image) {
+                return;
+            }
+            context.globalAlpha = opacity;
+            if (element) {
+                const ratio = image.ratio, pos = {
+                    x: -radius,
+                    y: -radius,
+                }, diameter = radius * double;
+                context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
+            }
+            context.globalAlpha = defaultAlpha$1;
         }
-        readSubBlocks() {
-            let blockString = "", size;
-            const minCount = 0, emptySize = 0;
-            do {
-                size = this.data[this.pos++];
-                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
-                }
-            } while (size !== emptySize);
-            return blockString;
+        getSidesCount() {
+            return sides$3;
         }
-        readSubBlocksBin() {
-            let size = this.data[this.pos], len = 0;
-            const emptySize = 0, increment = 1;
-            for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
-                len += size;
+        async init(container) {
+            const options = container.actualOptions;
+            if (!options.preload || !this.#engine.loadImage) {
+                return;
             }
-            const blockData = new Uint8Array(len);
-            size = this.data[this.pos++];
-            for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
-                for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
-                }
+            const promises = [];
+            for (const imageData of options.preload) {
+                promises.push(this.#engine.loadImage(container, imageData));
             }
-            return blockData;
+            await Promise.all(promises);
         }
-        skipSubBlocks() {
-            for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
+        loadShape(particle) {
+            const container = this.#container;
+            if (!particle.shape || !shapeTypes.includes(particle.shape)) {
+                return;
             }
-            this.pos++;
-        }
-    }
-
-    var DisposalMethod;
-    (function (DisposalMethod) {
-        DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
-        DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
-        DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
-        DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
-        DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
-        DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
-        DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
-        DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
-    })(DisposalMethod || (DisposalMethod = {}));
-
-    var GIFDataHeaders;
-    (function (GIFDataHeaders) {
-        GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
-        GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
-        GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
-        GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
-        GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
-        GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
-        GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
-    })(GIFDataHeaders || (GIFDataHeaders = {}));
-
-    const defaultFrame = 0, initialTime = 0, firstIndex$3 = 0, defaultLoopCount = 0;
-    function parseColorTable(byteStream, count) {
-        const colors = [];
-        for (let i = 0; i < count; i++) {
-            colors.push({
-                r: byteStream.data[byteStream.pos],
-                g: byteStream.data[byteStream.pos + 1],
-                b: byteStream.data[byteStream.pos + 2],
+            const imageData = particle.shapeData;
+            if (!imageData) {
+                return;
+            }
+            const images = this.#engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (image) {
+                return;
+            }
+            void this.#loadImageShape(container, imageData).then(() => {
+                this.loadShape(particle);
             });
-            byteStream.pos += 3;
         }
-        return colors;
-    }
-    function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
-        switch (byteStream.nextByte()) {
-            case GIFDataHeaders.GraphicsControlExtension: {
-                const frame = gif.frames[getFrameIndex(false)];
-                byteStream.pos++;
-                const packedByte = byteStream.nextByte();
-                frame.GCreserved = (packedByte & 0xe0) >>> 5;
-                frame.disposalMethod = (packedByte & 0x1c) >>> 2;
-                frame.userInputDelayFlag = (packedByte & 2) === 2;
-                const transparencyFlag = (packedByte & 1) === 1;
-                frame.delayTime = byteStream.nextTwoBytes() * 0xa;
-                const transparencyIndex = byteStream.nextByte();
-                if (transparencyFlag) {
-                    getTransparencyIndex(transparencyIndex);
-                }
-                byteStream.pos++;
-                break;
+        particleInit(container, particle) {
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
             }
-            case GIFDataHeaders.ApplicationExtension: {
-                byteStream.pos++;
-                const applicationExtension = {
-                    identifier: byteStream.getString(8),
-                    authenticationCode: byteStream.getString(3),
-                    data: byteStream.readSubBlocksBin(),
-                };
-                gif.applicationExtensions.push(applicationExtension);
-                break;
+            const images = this.#engine.getImages?.(container), imageData = particle.shapeData;
+            if (!imageData) {
+                return;
             }
-            case GIFDataHeaders.CommentExtension: {
-                gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
-                break;
+            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (!image) {
+                return;
             }
-            case GIFDataHeaders.PlainTextExtension: {
-                if (gif.globalColorTable.length === 0) {
-                    throw new EvalError("plain text extension without global color table");
+            const replaceColor = imageData.replaceColor;
+            if (image.loading) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
+                return;
+            }
+            void (async () => {
+                let imageRes;
+                if (image.svgData && color) {
+                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
                 }
-                byteStream.pos++;
-                gif.frames[getFrameIndex(false)].plainTextData = {
-                    left: byteStream.nextTwoBytes(),
-                    top: byteStream.nextTwoBytes(),
-                    width: byteStream.nextTwoBytes(),
-                    height: byteStream.nextTwoBytes(),
-                    charSize: {
-                        width: byteStream.nextTwoBytes(),
-                        height: byteStream.nextTwoBytes(),
-                    },
-                    foregroundColor: byteStream.nextByte(),
-                    backgroundColor: byteStream.nextByte(),
-                    text: byteStream.readSubBlocks(),
+                else {
+                    imageRes = {
+                        color,
+                        data: image,
+                        element: image.element,
+                        loaded: true,
+                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? defaultRatio$1),
+                        replaceColor: replaceColor,
+                        source: imageData.src,
+                    };
+                }
+                if (!imageRes.ratio) {
+                    imageRes.ratio = 1;
+                }
+                const close = imageData.close ?? particle.shapeClose, imageShape = {
+                    image: imageRes,
+                    close,
                 };
-                break;
-            }
-            default:
-                byteStream.skipSubBlocks();
-                break;
+                particle.image = imageShape.image;
+                particle.shapeClose = imageShape.close;
+            })();
         }
+        #loadImageShape = async (container, imageShape) => {
+            if (!this.#engine.loadImage) {
+                throw new Error(`Image shape not initialized`);
+            }
+            await this.#engine.loadImage(container, {
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor,
+                src: imageShape.src,
+            });
+        };
     }
-    function readBits(imageData, pos, len) {
-        const bytePos = pos >>> 3, bitPos = pos & 7;
-        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
-            (((1 << len) - 1) << bitPos)) >>>
-            bitPos);
-    }
-    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
-        const frame = gif.frames[getFrameIndex(true)];
-        frame.left = byteStream.nextTwoBytes();
-        frame.top = byteStream.nextTwoBytes();
-        frame.width = byteStream.nextTwoBytes();
-        frame.height = byteStream.nextTwoBytes();
-        const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
-        frame.sortFlag = (packedByte & 0x20) === 0x20;
-        frame.reserved = (packedByte & 0x18) >>> 3;
-        const localColorCount = 1 << ((packedByte & 7) + 1);
-        if (localColorTableFlag) {
-            frame.localColorTable = parseColorTable(byteStream, localColorCount);
-        }
-        const getColor = (index) => {
-            const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
-            if (index !== getTransparencyIndex(null)) {
-                return { r, g, b, a: 255 };
+
+    class Preload {
+        height;
+        name;
+        replaceColor;
+        src = "";
+        width;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
-        }, image = (() => {
-            try {
-                return new ImageData(frame.width, frame.height, canvasSettings);
+            loadProperty(this, "height", data.height);
+            loadProperty(this, "name", data.name);
+            loadProperty(this, "replaceColor", data.replaceColor);
+            loadProperty(this, "src", data.src);
+            loadProperty(this, "width", data.width);
+        }
+    }
+
+    class ImagePreloaderPlugin {
+        id = "image-preloader";
+        #engine;
+        constructor(engine) {
+            this.#engine = engine;
+        }
+        async getPlugin(container) {
+            const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
+            return new ImagePreloaderInstance(this.#engine, container);
+        }
+        loadOptions(_container, options, source) {
+            if (!source?.preload) {
+                return;
             }
-            catch (error) {
-                if (error instanceof DOMException && error.name === "IndexSizeError") {
-                    return null;
+            options.preload ??= [];
+            const preloadOptions = options.preload;
+            for (const item of source.preload) {
+                const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
+                if (existing) {
+                    existing.load(item);
                 }
-                throw error;
-            }
-        })();
-        if (image == null) {
-            throw new EvalError("GIF frame size is to large");
-        }
-        const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
-        if (interlacedFlag) {
-            for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
-                if (InterlaceOffsets[pass] < frame.height) {
-                    let pixelPos = 0, lineIndex = 0, exit = false;
-                    while (!exit) {
-                        const last = code;
-                        code = readBits(imageData, pos, size);
-                        pos += size + 1;
-                        if (code === clearCode) {
-                            size = minCodeSize + 1;
-                            dic.length = clearCode + 2;
-                            for (let i = 0; i < dic.length; i++) {
-                                dic[i] = i < clearCode ? [i] : [];
-                            }
-                        }
-                        else {
-                            if (code >= dic.length) {
-                                dic.push(dic[last].concat(dic[last][0]));
-                            }
-                            else if (last !== clearCode) {
-                                dic.push(dic[last].concat(dic[code][0]));
-                            }
-                            for (const item of dic[code]) {
-                                const { r, g, b, a } = getColor(item);
-                                image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
-                                    InterlaceSteps[pass] * lineIndex +
-                                    (pixelPos % (frame.width * 4)));
-                                pixelPos += 4;
-                            }
-                            if (dic.length === 1 << size && size < 0xc) {
-                                size++;
-                            }
-                        }
-                        if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
-                            lineIndex++;
-                            if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
-                                exit = true;
-                            }
-                        }
-                    }
+                else {
+                    const preload = new Preload();
+                    preload.load(item);
+                    preloadOptions.push(preload);
                 }
             }
-            frame.image = image;
-            frame.bitmap = await createImageBitmap(image);
         }
-        else {
-            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
-            const dic = [[0]];
-            for (;;) {
-                const last = code;
-                code = readBits(imageData, pos, size);
-                pos += size;
-                if (code === clearCode) {
-                    size = minCodeSize + 1;
-                    dic.length = clearCode + 2;
-                    for (let i = 0; i < dic.length; i++) {
-                        dic[i] = i < clearCode ? [i] : [];
-                    }
+        needsPlugin() {
+            return true;
+        }
+    }
+
+    const extLength = 3;
+    function addLoadImageToEngine(engine) {
+        engine.getImages ??= (container) => {
+            engine.images ??= new Map();
+            let images = engine.images.get(container);
+            if (!images) {
+                images = [];
+                engine.images.set(container, images);
+            }
+            return images;
+        };
+        engine.loadImage ??= async (container, data) => {
+            if (!engine.getImages) {
+                throw new Error("No images collection found");
+            }
+            if (!data.name && !data.src) {
+                throw new Error("No image source provided");
+            }
+            engine.images ??= new Map();
+            const containerImages = engine.getImages(container);
+            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - extLength),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                containerImages.push(image);
+                engine.images.set(container, containerImages);
+                let imageFunc;
+                if (data.replaceColor) {
+                    imageFunc = downloadSvgImage;
                 }
                 else {
-                    if (code === clearCode + 1) {
-                        break;
-                    }
-                    if (code >= dic.length) {
-                        dic.push(dic[last].concat(dic[last][0]));
-                    }
-                    else if (last !== clearCode) {
-                        dic.push(dic[last].concat(dic[code][0]));
-                    }
-                    for (const item of dic[code]) {
-                        const { r, g, b, a } = getColor(item);
-                        pixelPos += 4;
-                        image.data.set([r, g, b, a], pixelPos);
-                    }
-                    if (dic.length >= 1 << size && size < 0xc) {
-                        size++;
-                    }
+                    imageFunc = loadImage;
                 }
+                await imageFunc(image);
             }
-            frame.image = image;
-            frame.bitmap = await createImageBitmap(image);
-        }
+            catch {
+                throw new Error(`${data.name ?? data.src} not found`);
+            }
+        };
     }
-    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
-        switch (byteStream.nextByte()) {
-            case GIFDataHeaders.EndOfFile:
-                return true;
-            case GIFDataHeaders.Image:
-                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings);
-                break;
-            case GIFDataHeaders.Extension:
-                parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
-                break;
-            default:
-                throw new EvalError("undefined block found");
-        }
-        return false;
+    async function loadImageShape(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            addLoadImageToEngine(e);
+            e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
+            e.pluginManager.addShape(shapeTypes, container => Promise.resolve(new ImageDrawer(e, container)));
+        });
     }
-    function getGIFLoopAmount(gif) {
-        for (const extension of gif.applicationExtensions) {
-            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
-                continue;
+
+    class LifeDelay extends ValueWithRandom {
+        sync = false;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            return extension.data[1] + (extension.data[2] << 8);
+            super.load(data);
+            loadProperty(this, "sync", data.sync);
         }
-        return Number.NaN;
     }
-    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
-        avgAlpha ??= false;
-        const res = await fetch(gifURL);
-        if (!res.ok && res.status === 404) {
-            throw new EvalError("file not found");
+
+    class LifeDuration extends ValueWithRandom {
+        sync = false;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            super.load(data);
+            loadProperty(this, "sync", data.sync);
         }
-        const buffer = await res.arrayBuffer(), gif = {
-            width: 0,
-            height: 0,
-            totalTime: 0,
-            colorRes: 0,
-            pixelAspectRatio: 0,
-            frames: [],
-            sortFlag: false,
-            globalColorTable: [],
-            backgroundImage: new ImageData(1, 1, canvasSettings),
-            comments: [],
-            applicationExtensions: [],
-        }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
-        if (byteStream.getString(6) !== "GIF89a") {
-            throw new Error("not a supported GIF file");
-        }
-        gif.width = byteStream.nextTwoBytes();
-        gif.height = byteStream.nextTwoBytes();
-        const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
-        gif.colorRes = (packedByte & 0x70) >>> 4;
-        gif.sortFlag = (packedByte & 8) === 8;
-        const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
-        gif.pixelAspectRatio = byteStream.nextByte();
-        if (gif.pixelAspectRatio !== 0) {
-            gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
-        }
-        if (globalColorTableFlag) {
-            gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
-        }
-        const backgroundImage = (() => {
-            try {
-                return new ImageData(gif.width, gif.height, canvasSettings);
-            }
-            catch (error) {
-                if (error instanceof DOMException && error.name === "IndexSizeError") {
-                    return null;
-                }
-                throw error;
+    }
+
+    class Life {
+        count = 0;
+        delay = new LifeDelay();
+        duration = new LifeDuration();
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-        })();
-        if (backgroundImage == null) {
-            throw new Error("GIF frame size is to large");
+            loadProperty(this, "count", data.count);
+            this.delay.load(data.delay);
+            this.duration.load(data.duration);
         }
-        const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
-        backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
-        for (let i = 4; i < backgroundImage.data.length; i *= 2) {
-            backgroundImage.data.copyWithin(i, 0, i);
+    }
+
+    const noTime$1 = 0, infiniteValue$1 = -1, noLife = 0, minCanvasSize = 0;
+    function updateLife(particle, delta, canvasSize) {
+        if (!particle.life) {
+            return;
         }
-        gif.backgroundImage = backgroundImage;
-        let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
-        const getframeIndex = (increment) => {
-            if (increment) {
-                incrementFrameIndex = true;
-            }
-            return frameIndex;
-        }, getTransparencyIndex = (newValue) => {
-            if (newValue != null) {
-                transparencyIndex = newValue;
-            }
-            return transparencyIndex;
-        };
-        try {
-            do {
-                if (incrementFrameIndex) {
-                    gif.frames.push({
-                        left: 0,
-                        top: 0,
-                        width: 0,
-                        height: 0,
-                        disposalMethod: DisposalMethod.Replace,
-                        image: new ImageData(1, 1, canvasSettings),
-                        plainTextData: null,
-                        userInputDelayFlag: false,
-                        delayTime: 0,
-                        sortFlag: false,
-                        localColorTable: [],
-                        reserved: 0,
-                        GCreserved: 0,
-                    });
-                    frameIndex++;
-                    transparencyIndex = -1;
-                    incrementFrameIndex = false;
-                }
-            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
-            gif.frames.length--;
-            for (const frame of gif.frames) {
-                if (frame.userInputDelayFlag && frame.delayTime === 0) {
-                    gif.totalTime = Infinity;
-                    break;
-                }
-                gif.totalTime += frame.delayTime;
+        const life = particle.life;
+        let justSpawned = false;
+        if (particle.spawning) {
+            life.delayTime += delta.value;
+            if (life.delayTime >= particle.life.delay) {
+                justSpawned = true;
+                particle.spawning = false;
+                life.delayTime = noTime$1;
+                life.time = noTime$1;
             }
-            return gif;
-        }
-        catch (error) {
-            if (error instanceof EvalError) {
-                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
+            else {
+                return;
             }
-            throw error;
         }
-    }
-    function drawGif(data, canvasSettings) {
-        const { context, radius, particle, delta } = data, image = particle.image;
-        if (!image?.gifData || !image.gif) {
+        if (life.duration === infiniteValue$1) {
             return;
         }
-        const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
-        if (!offscreenContext) {
-            throw new Error("could not create offscreen canvas context");
+        if (justSpawned) {
+            life.time = noTime$1;
         }
-        offscreenContext.imageSmoothingQuality = "low";
-        offscreenContext.imageSmoothingEnabled = false;
-        offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-        particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;
-        let frameIndex = particle.gifFrame ?? defaultFrame;
-        const pos = { x: -image.gifData.width * half$2, y: -image.gifData.height * half$2 }, frame = image.gifData.frames[frameIndex];
-        particle.gifTime ??= initialTime;
-        if (!frame.bitmap) {
-            return;
+        else {
+            life.time += delta.value;
         }
-        context.scale(radius / image.gifData.width, radius / image.gifData.height);
-        switch (frame.disposalMethod) {
-            case DisposalMethod.UndefinedA:
-            case DisposalMethod.UndefinedB:
-            case DisposalMethod.UndefinedC:
-            case DisposalMethod.UndefinedD:
-            case DisposalMethod.Replace:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                break;
-            case DisposalMethod.Combine:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                break;
-            case DisposalMethod.RestoreBackground:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                if (!image.gifData.globalColorTable.length) {
-                    offscreenContext.putImageData(image.gifData.frames[firstIndex$3].image, pos.x + frame.left, pos.y + frame.top);
-                }
-                else {
-                    offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
-                }
-                break;
-            case DisposalMethod.RestorePrevious:
-                {
-                    const previousImageData = offscreenContext.getImageData(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                    offscreenContext.putImageData(previousImageData, originPoint.x, originPoint.y);
-                }
-                break;
+        if (life.time < life.duration) {
+            return;
         }
-        particle.gifTime += delta.value;
-        if (particle.gifTime > frame.delayTime) {
-            particle.gifTime -= frame.delayTime;
-            if (++frameIndex >= image.gifData.frames.length) {
-                if (--particle.gifLoopCount <= defaultLoopCount) {
-                    return;
-                }
-                frameIndex = firstIndex$3;
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-            }
-            particle.gifFrame = frameIndex;
+        life.time = noTime$1;
+        if (particle.life.count > noLife) {
+            particle.life.count--;
         }
-        context.scale(image.gifData.width / radius, image.gifData.height / radius);
-    }
-    async function loadGifImage(image, canvasSettings) {
-        if (image.type !== "gif") {
-            await loadImage(image);
+        if (particle.life.count === noLife) {
+            particle.destroy();
             return;
         }
-        image.loading = true;
-        try {
-            image.gifData = await decodeGIF(image.source, canvasSettings);
-            image.gifLoopCount = getGIFLoopAmount(image.gifData);
-            if (!image.gifLoopCount) {
-                image.gifLoopCount = Infinity;
-            }
-        }
-        catch {
-            image.error = true;
+        const widthRange = setRangeValue(minCanvasSize, canvasSize.width), heightRange = setRangeValue(minCanvasSize, canvasSize.width);
+        particle.position.x = randomInRangeValue(widthRange);
+        particle.position.y = randomInRangeValue(heightRange);
+        particle.spawning = true;
+        life.delayTime = noTime$1;
+        life.time = noTime$1;
+        particle.reset();
+        const lifeOptions = particle.options.life;
+        if (lifeOptions) {
+            life.delay = getRangeValue(lifeOptions.delay.value) * millisecondsToSeconds$1;
+            life.duration = getRangeValue(lifeOptions.duration.value) * millisecondsToSeconds$1;
         }
-        image.loading = false;
     }
 
-    const sides$3 = 12;
-    class ImageDrawer {
+    const noTime = 0, identity$2 = 1, infiniteValue = -1;
+    class LifeUpdater {
         #container;
-        #engine;
-        constructor(engine, container) {
-            this.#engine = engine;
+        constructor(container) {
             this.#container = container;
         }
-        draw(data) {
-            const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
-            if (!image) {
+        init(particle) {
+            const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
+            if (!lifeOptions) {
                 return;
             }
-            context.globalAlpha = opacity;
-            if (image.gif && image.gifData) {
-                drawGif(data, this.#container.canvas.render.settings);
+            const delayFactor = lifeOptions.delay.sync ? identity$2 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$2 : getRandom();
+            particle.life = {
+                delay: container.retina.reduceFactor
+                    ? ((getRangeValue(lifeOptions.delay.value) * delayFactor) / container.retina.reduceFactor) *
+                        millisecondsToSeconds$1
+                    : noTime,
+                delayTime: noTime,
+                duration: container.retina.reduceFactor
+                    ? ((getRangeValue(lifeOptions.duration.value) * durationFactor) / container.retina.reduceFactor) *
+                        millisecondsToSeconds$1
+                    : noTime,
+                time: noTime,
+                count: lifeOptions.count,
+            };
+            if (particle.life.duration <= noTime) {
+                particle.life.duration = infiniteValue;
             }
-            else if (element) {
-                const ratio = image.ratio, pos = {
-                    x: -radius,
-                    y: -radius,
-                }, diameter = radius * double;
-                context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
+            if (particle.life.count <= noTime) {
+                particle.life.count = infiniteValue;
             }
-            context.globalAlpha = defaultAlpha$1;
+            particle.spawning = particle.life.delay > noTime;
         }
-        getSidesCount() {
-            return sides$3;
+        isEnabled(particle) {
+            return !particle.destroyed;
         }
-        async init(container) {
-            const options = container.actualOptions;
-            if (!options.preload || !this.#engine.loadImage) {
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "life", Life, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle) || !particle.life) {
                 return;
             }
-            const promises = [];
-            for (const imageData of options.preload) {
-                promises.push(this.#engine.loadImage(container, imageData));
-            }
-            await Promise.all(promises);
+            updateLife(particle, delta, this.#container.canvas.size);
         }
-        loadShape(particle) {
-            const container = this.#container;
-            if (!particle.shape || !shapeTypes.includes(particle.shape)) {
-                return;
-            }
-            const imageData = particle.shapeData;
-            if (!imageData) {
-                return;
-            }
-            const images = this.#engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
-            if (image) {
-                return;
-            }
-            void this.#loadImageShape(container, imageData).then(() => {
-                this.loadShape(particle);
+    }
+
+    async function loadLifeUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("life", container => {
+                return Promise.resolve(new LifeUpdater(container));
             });
+        });
+    }
+
+    function drawLine(data) {
+        const { context, particle, radius } = data, shapeData = particle.shapeData, centerY = 0;
+        context.moveTo(-radius, centerY);
+        context.lineTo(radius, centerY);
+        context.lineCap = shapeData?.cap ?? "butt";
+    }
+
+    const sides$2 = 1;
+    class LineDrawer {
+        draw(data) {
+            drawLine(data);
         }
-        particleInit(container, particle) {
-            if (particle.shape !== "image" && particle.shape !== "images") {
-                return;
-            }
-            const images = this.#engine.getImages?.(container), imageData = particle.shapeData;
-            if (!imageData) {
-                return;
-            }
-            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
-            if (!image) {
-                return;
-            }
-            const replaceColor = imageData.replaceColor;
-            if (image.loading) {
-                setTimeout(() => {
-                    this.particleInit(container, particle);
-                });
-                return;
-            }
-            void (async () => {
-                let imageRes;
-                if (image.svgData && color) {
-                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
-                }
-                else {
-                    imageRes = {
-                        color,
-                        data: image,
-                        element: image.element,
-                        gif: image.gif,
-                        gifData: image.gifData,
-                        gifLoopCount: image.gifLoopCount,
-                        loaded: true,
-                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? defaultRatio$1),
-                        replaceColor: replaceColor,
-                        source: imageData.src,
-                    };
-                }
-                if (!imageRes.ratio) {
-                    imageRes.ratio = 1;
-                }
-                const close = imageData.close ?? particle.shapeClose, imageShape = {
-                    image: imageRes,
-                    close,
-                };
-                particle.image = imageShape.image;
-                particle.shapeClose = imageShape.close;
-            })();
+        getSidesCount() {
+            return sides$2;
         }
-        #loadImageShape = async (container, imageShape) => {
-            if (!this.#engine.loadImage) {
-                throw new Error(`Image shape not initialized`);
-            }
-            await this.#engine.loadImage(container, {
-                gif: imageShape.gif,
-                name: imageShape.name,
-                replaceColor: imageShape.replaceColor,
-                src: imageShape.src,
-            });
-        };
     }
 
-    class Preload {
-        gif = false;
-        height;
-        name;
-        replaceColor;
-        src = "";
-        width;
+    async function loadLineShape(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
+        });
+    }
+
+    class Attract {
+        distance = 200;
+        enable = false;
+        rotate;
+        constructor() {
+            this.rotate = {
+                x: 3000,
+                y: 3000,
+            };
+        }
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            loadProperty(this, "gif", data.gif);
-            loadProperty(this, "height", data.height);
-            loadProperty(this, "name", data.name);
-            loadProperty(this, "replaceColor", data.replaceColor);
-            loadProperty(this, "src", data.src);
-            loadProperty(this, "width", data.width);
+            loadRangeProperty(this, "distance", data.distance);
+            loadProperty(this, "enable", data.enable);
+            if (data.rotate) {
+                const rotateX = data.rotate.x;
+                if (rotateX !== undefined) {
+                    this.rotate.x = rotateX;
+                }
+                const rotateY = data.rotate.y;
+                if (rotateY !== undefined) {
+                    this.rotate.y = rotateY;
+                }
+            }
         }
     }
 
-    class ImagePreloaderPlugin {
-        id = "image-preloader";
-        #engine;
-        constructor(engine) {
-            this.#engine = engine;
+    const attractFactor = 1000, identity$1 = 1;
+    class Attractor extends ParticlesInteractorBase {
+        #maxDistance;
+        constructor(container) {
+            super(container);
+            this.#maxDistance = 0;
         }
-        async getPlugin(container) {
-            const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
-            return new ImagePreloaderInstance(this.#engine, container);
+        get maxDistance() {
+            return this.#maxDistance;
         }
-        loadOptions(_container, options, source) {
-            if (!source?.preload) {
+        clear() {
+        }
+        init() {
+        }
+        interact(p1) {
+            if (!p1.options.attract?.enable) {
                 return;
             }
-            options.preload ??= [];
-            const preloadOptions = options.preload;
-            for (const item of source.preload) {
-                const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
-                if (existing) {
-                    existing.load(item);
+            const container = this.container;
+            if (isNull(p1.attractDistance)) {
+                const attractDistance = getRangeValue(p1.options.attract.distance);
+                if (attractDistance > this.#maxDistance) {
+                    this.#maxDistance = attractDistance;
                 }
-                else {
-                    const preload = new Preload();
-                    preload.load(item);
-                    preloadOptions.push(preload);
+                p1.attractDistance = attractDistance * container.retina.pixelRatio;
+            }
+            const distance = p1.attractDistance, pos1 = p1.getPosition(), query = container.particles.grid.queryCircle(pos1, distance);
+            for (const p2 of query) {
+                if (p1 === p2 || !p2.options.attract?.enable || p2.destroyed || p2.spawning) {
+                    continue;
                 }
+                const pos2 = p2.getPosition(), { dx, dy } = getDistances(pos1, pos2), rotate = p1.options.attract.rotate, ax = dx / (rotate.x * attractFactor), ay = dy / (rotate.y * attractFactor), p1Factor = p2.size.value / p1.size.value, p2Factor = identity$1 / p1Factor;
+                p1.velocity.x -= ax * p1Factor;
+                p1.velocity.y -= ay * p1Factor;
+                p2.velocity.x += ax * p2Factor;
+                p2.velocity.y += ay * p2Factor;
             }
         }
-        needsPlugin() {
-            return true;
+        isEnabled(particle) {
+            return particle.options.attract?.enable ?? false;
+        }
+        loadParticlesOptions(options, ...sources) {
+            loadOptionProperty(options, "attract", Attract, ...sources);
+        }
+        reset() {
         }
     }
 
-    const extLength = 3;
-    function addLoadImageToEngine(engine) {
-        engine.getImages ??= (container) => {
-            engine.images ??= new Map();
-            let images = engine.images.get(container);
-            if (!images) {
-                images = [];
-                engine.images.set(container, images);
-            }
-            return images;
-        };
-        engine.loadImage ??= async (container, data) => {
-            if (!engine.getImages) {
-                throw new Error("No images collection found");
-            }
-            if (!data.name && !data.src) {
-                throw new Error("No image source provided");
-            }
-            engine.images ??= new Map();
-            const containerImages = engine.getImages(container);
-            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
-                return;
-            }
-            try {
-                const image = {
-                    gif: data.gif,
-                    name: data.name ?? data.src,
-                    source: data.src,
-                    type: data.src.substring(data.src.length - extLength),
-                    error: false,
-                    loading: true,
-                    replaceColor: data.replaceColor,
-                    ratio: data.width && data.height ? data.width / data.height : undefined,
-                };
-                containerImages.push(image);
-                engine.images.set(container, containerImages);
-                let imageFunc;
-                if (data.gif) {
-                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
-                }
-                else if (data.replaceColor) {
-                    imageFunc = downloadSvgImage;
-                }
-                else {
-                    imageFunc = loadImage;
-                }
-                await imageFunc(image);
-            }
-            catch {
-                throw new Error(`${data.name ?? data.src} not found`);
-            }
-        };
-    }
-    async function loadImageShape(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(e => {
-            addLoadImageToEngine(e);
-            e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
-            e.pluginManager.addShape(shapeTypes, container => Promise.resolve(new ImageDrawer(e, container)));
-        });
-    }
-
-    class LifeDelay extends ValueWithRandom {
-        sync = false;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            loadProperty(this, "sync", data.sync);
-        }
-    }
-
-    class LifeDuration extends ValueWithRandom {
-        sync = false;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            loadProperty(this, "sync", data.sync);
-        }
-    }
-
-    class Life {
-        count = 0;
-        delay = new LifeDelay();
-        duration = new LifeDuration();
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            loadProperty(this, "count", data.count);
-            this.delay.load(data.delay);
-            this.duration.load(data.duration);
-        }
-    }
-
-    const noTime$1 = 0, infiniteValue$1 = -1, noLife = 0, minCanvasSize = 0;
-    function updateLife(particle, delta, canvasSize) {
-        if (!particle.life) {
-            return;
-        }
-        const life = particle.life;
-        let justSpawned = false;
-        if (particle.spawning) {
-            life.delayTime += delta.value;
-            if (life.delayTime >= particle.life.delay) {
-                justSpawned = true;
-                particle.spawning = false;
-                life.delayTime = noTime$1;
-                life.time = noTime$1;
-            }
-            else {
-                return;
-            }
-        }
-        if (life.duration === infiniteValue$1) {
-            return;
-        }
-        if (justSpawned) {
-            life.time = noTime$1;
-        }
-        else {
-            life.time += delta.value;
-        }
-        if (life.time < life.duration) {
-            return;
-        }
-        life.time = noTime$1;
-        if (particle.life.count > noLife) {
-            particle.life.count--;
-        }
-        if (particle.life.count === noLife) {
-            particle.destroy();
-            return;
-        }
-        const widthRange = setRangeValue(minCanvasSize, canvasSize.width), heightRange = setRangeValue(minCanvasSize, canvasSize.width);
-        particle.position.x = randomInRangeValue(widthRange);
-        particle.position.y = randomInRangeValue(heightRange);
-        particle.spawning = true;
-        life.delayTime = noTime$1;
-        life.time = noTime$1;
-        particle.reset();
-        const lifeOptions = particle.options.life;
-        if (lifeOptions) {
-            life.delay = getRangeValue(lifeOptions.delay.value) * millisecondsToSeconds$1;
-            life.duration = getRangeValue(lifeOptions.duration.value) * millisecondsToSeconds$1;
-        }
-    }
-
-    const noTime = 0, identity$2 = 1, infiniteValue = -1;
-    class LifeUpdater {
-        #container;
-        constructor(container) {
-            this.#container = container;
-        }
-        init(particle) {
-            const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
-            if (!lifeOptions) {
-                return;
-            }
-            const delayFactor = lifeOptions.delay.sync ? identity$2 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$2 : getRandom();
-            particle.life = {
-                delay: container.retina.reduceFactor
-                    ? ((getRangeValue(lifeOptions.delay.value) * delayFactor) / container.retina.reduceFactor) *
-                        millisecondsToSeconds$1
-                    : noTime,
-                delayTime: noTime,
-                duration: container.retina.reduceFactor
-                    ? ((getRangeValue(lifeOptions.duration.value) * durationFactor) / container.retina.reduceFactor) *
-                        millisecondsToSeconds$1
-                    : noTime,
-                time: noTime,
-                count: lifeOptions.count,
-            };
-            if (particle.life.duration <= noTime) {
-                particle.life.duration = infiniteValue;
-            }
-            if (particle.life.count <= noTime) {
-                particle.life.count = infiniteValue;
-            }
-            particle.spawning = particle.life.delay > noTime;
-        }
-        isEnabled(particle) {
-            return !particle.destroyed;
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "life", Life, ...sources);
-        }
-        update(particle, delta) {
-            if (!this.isEnabled(particle) || !particle.life) {
-                return;
-            }
-            updateLife(particle, delta, this.#container.canvas.size);
-        }
-    }
-
-    async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("life", container => {
-                return Promise.resolve(new LifeUpdater(container));
-            });
-        });
-    }
-
-    function drawLine(data) {
-        const { context, particle, radius } = data, shapeData = particle.shapeData, centerY = 0;
-        context.moveTo(-radius, centerY);
-        context.lineTo(radius, centerY);
-        context.lineCap = shapeData?.cap ?? "butt";
-    }
-
-    const sides$2 = 1;
-    class LineDrawer {
-        draw(data) {
-            drawLine(data);
-        }
-        getSidesCount() {
-            return sides$2;
-        }
-    }
-
-    async function loadLineShape(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
-        });
-    }
-
-    class Attract {
-        distance = 200;
-        enable = false;
-        rotate;
-        constructor() {
-            this.rotate = {
-                x: 3000,
-                y: 3000,
-            };
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            loadRangeProperty(this, "distance", data.distance);
-            loadProperty(this, "enable", data.enable);
-            if (data.rotate) {
-                const rotateX = data.rotate.x;
-                if (rotateX !== undefined) {
-                    this.rotate.x = rotateX;
-                }
-                const rotateY = data.rotate.y;
-                if (rotateY !== undefined) {
-                    this.rotate.y = rotateY;
-                }
-            }
-        }
-    }
-
-    const attractFactor = 1000, identity$1 = 1;
-    class Attractor extends ParticlesInteractorBase {
-        #maxDistance;
-        constructor(container) {
-            super(container);
-            this.#maxDistance = 0;
-        }
-        get maxDistance() {
-            return this.#maxDistance;
-        }
-        clear() {
-        }
-        init() {
-        }
-        interact(p1) {
-            if (!p1.options.attract?.enable) {
-                return;
-            }
-            const container = this.container;
-            if (isNull(p1.attractDistance)) {
-                const attractDistance = getRangeValue(p1.options.attract.distance);
-                if (attractDistance > this.#maxDistance) {
-                    this.#maxDistance = attractDistance;
-                }
-                p1.attractDistance = attractDistance * container.retina.pixelRatio;
-            }
-            const distance = p1.attractDistance, pos1 = p1.getPosition(), query = container.particles.grid.queryCircle(pos1, distance);
-            for (const p2 of query) {
-                if (p1 === p2 || !p2.options.attract?.enable || p2.destroyed || p2.spawning) {
-                    continue;
-                }
-                const pos2 = p2.getPosition(), { dx, dy } = getDistances(pos1, pos2), rotate = p1.options.attract.rotate, ax = dx / (rotate.x * attractFactor), ay = dy / (rotate.y * attractFactor), p1Factor = p2.size.value / p1.size.value, p2Factor = identity$1 / p1Factor;
-                p1.velocity.x -= ax * p1Factor;
-                p1.velocity.y -= ay * p1Factor;
-                p2.velocity.x += ax * p2Factor;
-                p2.velocity.y += ay * p2Factor;
-            }
-        }
-        isEnabled(particle) {
-            return particle.options.attract?.enable ?? false;
-        }
-        loadParticlesOptions(options, ...sources) {
-            loadOptionProperty(options, "attract", Attract, ...sources);
-        }
-        reset() {
-        }
-    }
-
-    async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register((e) => {
-            ensureInteractivityPluginLoaded(e);
-            e.pluginManager.addInteractor?.("particlesAttract", container => {
-                return Promise.resolve(new Attractor(container));
-            });
+    async function loadParticlesAttractInteraction(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register((e) => {
+            ensureInteractivityPluginLoaded(e);
+            e.pluginManager.addInteractor?.("particlesAttract", container => {
+                return Promise.resolve(new Attractor(container));
+            });
         });
     }
 
@@ -14407,7 +14013,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -14661,7 +14267,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -14751,19 +14357,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
     async function loadTriangleShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
         });
     }
     async function loadPolygonShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -14868,7 +14474,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -14892,7 +14498,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -14926,14 +14532,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["star"], () => Promise.resolve(new StarDrawer()));
         });
     }
 
     async function loadSlim(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -14973,7 +14579,7 @@
     }
 
     const validTypes = ["text", "character", "char", "multiline-text"];
-    const firstIndex$2 = 0, minLength$2 = 0;
+    const firstIndex$3 = 0, minLength$2 = 0;
     function drawText(data) {
         const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
         if (!character) {
@@ -14983,7 +14589,7 @@
         particle.textLines ??= itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
         particle.maxTextLength ??= particle.textLines.length
             ? Math.max(...particle.textLines.map(t => t.length))
-            : (particle.textLines[firstIndex$2]?.length ?? minLength$2);
+            : (particle.textLines[firstIndex$3]?.length ?? minLength$2);
         if (!particle.textLines.length || !particle.maxTextLength) {
             return;
         }
@@ -15013,7 +14619,7 @@
         }
     }
 
-    const firstIndex$1 = 0, minLength$1 = 0;
+    const firstIndex$2 = 0, minLength$1 = 0;
     class TextDrawer {
         draw(data) {
             drawText(data);
@@ -15045,12 +14651,12 @@
             particle.textLines = itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
             particle.maxTextLength = particle.textLines.length
                 ? Math.max(...particle.textLines.map(t => t.length))
-                : (particle.textLines[firstIndex$1]?.length ?? minLength$1);
+                : (particle.textLines[firstIndex$2]?.length ?? minLength$1);
         }
     }
 
     async function loadTextShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new TextDrawer()));
         });
@@ -15143,263 +14749,792 @@
                 }
             }
         }
-        isEnabled(particle) {
-            const tiltAnimation = particle.options.tilt?.animation;
-            return !particle.destroyed && !particle.spawning && !!tiltAnimation?.enable;
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "tilt", Tilt, ...sources);
-        }
-        update(particle, delta) {
-            if (!this.isEnabled(particle) || !particle.tilt) {
-                return;
-            }
-            updateAnimation(particle, particle.tilt, false, exports.DestroyType.none, delta);
-        }
-    }
-
-    async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("tilt", container => {
-                return Promise.resolve(new TiltUpdater(container));
-            });
-        });
+        isEnabled(particle) {
+            const tiltAnimation = particle.options.tilt?.animation;
+            return !particle.destroyed && !particle.spawning && !!tiltAnimation?.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "tilt", Tilt, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle) || !particle.tilt) {
+                return;
+            }
+            updateAnimation(particle, particle.tilt, false, exports.DestroyType.none, delta);
+        }
+    }
+
+    async function loadTiltUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("tilt", container => {
+                return Promise.resolve(new TiltUpdater(container));
+            });
+        });
+    }
+
+    class TwinkleLinksValues {
+        color;
+        enable = false;
+        frequency = 0.05;
+        opacity = 1;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = OptionsColor.create(this.color, data.color);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadRangeProperty(this, "opacity", data.opacity);
+        }
+    }
+
+    class TwinkleParticlesValues {
+        enable = false;
+        fillColor;
+        frequency = 0.05;
+        opacity = 1;
+        strokeColor;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            if (data.fillColor !== undefined) {
+                this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+            }
+            if (data.strokeColor !== undefined) {
+                this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadRangeProperty(this, "opacity", data.opacity);
+        }
+    }
+
+    class Twinkle {
+        links = new TwinkleLinksValues();
+        particles = new TwinkleParticlesValues();
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            this.links.load(data.links);
+            this.particles.load(data.particles);
+        }
+    }
+
+    class TwinkleUpdater {
+        #container;
+        #pluginManager;
+        constructor(pluginManager, container) {
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+        }
+        getColorStyles(particle, _context, _radius, opacity) {
+            const pOptions = particle.options, container = this.#container, twinkleOptions = pOptions["twinkle"];
+            if (!twinkleOptions) {
+                return {};
+            }
+            const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this.#pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this.#pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
+                if (!twinkleFillRgb) {
+                    return undefined;
+                }
+                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
+            }, getTwinkleStrokeStyle = () => {
+                if (!twinkleStrokeRgb) {
+                    return undefined;
+                }
+                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
+            }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
+            res.fill = needsTwinkle ? twinkleFillStyle : undefined;
+            res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
+            return res;
+        }
+        init() {
+        }
+        isEnabled(particle) {
+            const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
+            if (!twinkleOptions) {
+                return false;
+            }
+            return twinkleOptions.particles.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "twinkle", Twinkle, ...sources);
+        }
+        update() {
+        }
+    }
+
+    async function loadTwinkleUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("twinkle", container => {
+                return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
+            });
+        });
+    }
+
+    class WobbleSpeed {
+        angle = 50;
+        move = 10;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadRangeProperty(this, "angle", data.angle);
+            loadRangeProperty(this, "move", data.move);
+        }
+    }
+
+    class Wobble {
+        distance = 5;
+        enable = false;
+        speed = new WobbleSpeed();
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadRangeProperty(this, "distance", data.distance);
+            loadProperty(this, "enable", data.enable);
+            if (data.speed !== undefined) {
+                if (isNumber(data.speed)) {
+                    this.speed.load({ angle: data.speed });
+                }
+                else {
+                    const rangeSpeed = data.speed;
+                    if ("min" in rangeSpeed) {
+                        this.speed.load({ angle: rangeSpeed });
+                    }
+                    else {
+                        this.speed.load(data.speed);
+                    }
+                }
+            }
+        }
+    }
+
+    const defaultDistance$1 = 0, distanceFactor = 60;
+    function updateWobble(container, particle, delta) {
+        const { wobble: wobbleOptions } = particle.options, { wobble } = particle;
+        if (!wobbleOptions?.enable || !wobble) {
+            return;
+        }
+        const reduceFactor = container.retina.reduceFactor, angleSpeed = wobble.angleSpeed * delta.factor * reduceFactor, moveSpeed = wobble.moveSpeed * delta.factor * reduceFactor, distance = (moveSpeed * (particle.retina.wobbleDistance ?? defaultDistance$1)) / (millisecondsToSeconds$1 / distanceFactor), max = doublePI, { position } = particle;
+        wobble.angle += angleSpeed;
+        if (wobble.angle > max) {
+            wobble.angle -= max;
+        }
+        position.x += distance * Math.cos(wobble.angle);
+        position.y += distance * Math.abs(Math.sin(wobble.angle));
+    }
+
+    const maxAngle$1 = 360, moveSpeedFactor$1 = 10, defaultDistance = 0;
+    class WobbleUpdater {
+        #container;
+        constructor(container) {
+            this.#container = container;
+        }
+        init(particle) {
+            const wobbleOpt = particle.options.wobble;
+            if (wobbleOpt?.enable) {
+                particle.wobble = {
+                    angle: getRandom() * doublePI,
+                    angleSpeed: getRangeValue(wobbleOpt.speed.angle) / maxAngle$1,
+                    moveSpeed: getRangeValue(wobbleOpt.speed.move) / moveSpeedFactor$1,
+                };
+            }
+            else {
+                particle.wobble = {
+                    angle: 0,
+                    angleSpeed: 0,
+                    moveSpeed: 0,
+                };
+            }
+            particle.retina.wobbleDistance =
+                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this.#container.retina.pixelRatio;
+        }
+        isEnabled(particle) {
+            return !particle.destroyed && !particle.spawning && !!particle.options.wobble?.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "wobble", Wobble, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle)) {
+                return;
+            }
+            updateWobble(this.#container, particle, delta);
+        }
+    }
+
+    async function loadWobbleUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("wobble", container => {
+                return Promise.resolve(new WobbleUpdater(container));
+            });
+        });
+    }
+
+    async function loadFull(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(async (e) => {
+            const loadEmittersPluginBundle = async (e) => {
+                await loadEmittersPlugin(e);
+                await Promise.all([
+                    loadEmittersShapeCircle(e),
+                    loadEmittersShapeSquare(e),
+                ]);
+            }, loadInteractivityForFull = async (e) => {
+                await loadSlim(e);
+                await Promise.all([
+                    loadExternalDragInteraction(e),
+                    loadExternalTrailInteraction(e),
+                    loadAbsorbersPlugin(e),
+                    loadEmittersPluginBundle(e),
+                ]);
+            };
+            await Promise.all([
+                loadInteractivityForFull(e),
+                loadDestroyUpdater(e),
+                loadRollUpdater(e),
+                loadTiltUpdater(e),
+                loadTwinkleUpdater(e),
+                loadWobbleUpdater(e),
+                loadTextShape(e),
+            ]);
+        });
+    }
+
+    const InterlaceOffsets = [0, 4, 2, 1];
+    const InterlaceSteps = [8, 8, 4, 2];
+
+    class ByteStream {
+        data;
+        pos;
+        constructor(bytes) {
+            this.pos = 0;
+            this.data = new Uint8ClampedArray(bytes);
+        }
+        getString(count) {
+            const slice = this.data.slice(this.pos, this.pos + count);
+            this.pos += slice.length;
+            return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
+        }
+        nextByte() {
+            return this.data[this.pos++];
+        }
+        nextTwoBytes() {
+            const increment = 2, previous = 1, shift = 8;
+            this.pos += increment;
+            return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
+        }
+        readSubBlocks() {
+            let blockString = "", size;
+            const minCount = 0, emptySize = 0;
+            do {
+                size = this.data[this.pos++];
+                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
+                }
+            } while (size !== emptySize);
+            return blockString;
+        }
+        readSubBlocksBin() {
+            let size = this.data[this.pos], len = 0;
+            const emptySize = 0, increment = 1;
+            for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
+                len += size;
+            }
+            const blockData = new Uint8Array(len);
+            size = this.data[this.pos++];
+            for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+                for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
+                }
+            }
+            return blockData;
+        }
+        skipSubBlocks() {
+            for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
+            }
+            this.pos++;
+        }
+    }
+
+    var DisposalMethod;
+    (function (DisposalMethod) {
+        DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
+        DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
+        DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
+        DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
+        DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
+        DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
+        DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
+        DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
+    })(DisposalMethod || (DisposalMethod = {}));
+
+    var GIFDataHeaders;
+    (function (GIFDataHeaders) {
+        GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
+        GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
+        GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
+        GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
+        GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
+        GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
+        GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
+    })(GIFDataHeaders || (GIFDataHeaders = {}));
+
+    const defaultFrame = 0, initialTime = 0, firstIndex$1 = 0, defaultLoopCount = 0;
+    function parseColorTable(byteStream, count) {
+        const colors = [];
+        for (let i = 0; i < count; i++) {
+            colors.push({
+                r: byteStream.data[byteStream.pos],
+                g: byteStream.data[byteStream.pos + 1],
+                b: byteStream.data[byteStream.pos + 2],
+            });
+            byteStream.pos += 3;
+        }
+        return colors;
+    }
+    function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.GraphicsControlExtension: {
+                const frame = gif.frames[getFrameIndex(false)];
+                byteStream.pos++;
+                const packedByte = byteStream.nextByte();
+                frame.GCreserved = (packedByte & 0xe0) >>> 5;
+                frame.disposalMethod = (packedByte & 0x1c) >>> 2;
+                frame.userInputDelayFlag = (packedByte & 2) === 2;
+                const transparencyFlag = (packedByte & 1) === 1;
+                frame.delayTime = byteStream.nextTwoBytes() * 0xa;
+                const transparencyIndex = byteStream.nextByte();
+                if (transparencyFlag) {
+                    getTransparencyIndex(transparencyIndex);
+                }
+                byteStream.pos++;
+                break;
+            }
+            case GIFDataHeaders.ApplicationExtension: {
+                byteStream.pos++;
+                const applicationExtension = {
+                    identifier: byteStream.getString(8),
+                    authenticationCode: byteStream.getString(3),
+                    data: byteStream.readSubBlocksBin(),
+                };
+                gif.applicationExtensions.push(applicationExtension);
+                break;
+            }
+            case GIFDataHeaders.CommentExtension: {
+                gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
+                break;
+            }
+            case GIFDataHeaders.PlainTextExtension: {
+                if (gif.globalColorTable.length === 0) {
+                    throw new EvalError("plain text extension without global color table");
+                }
+                byteStream.pos++;
+                gif.frames[getFrameIndex(false)].plainTextData = {
+                    left: byteStream.nextTwoBytes(),
+                    top: byteStream.nextTwoBytes(),
+                    width: byteStream.nextTwoBytes(),
+                    height: byteStream.nextTwoBytes(),
+                    charSize: {
+                        width: byteStream.nextTwoBytes(),
+                        height: byteStream.nextTwoBytes(),
+                    },
+                    foregroundColor: byteStream.nextByte(),
+                    backgroundColor: byteStream.nextByte(),
+                    text: byteStream.readSubBlocks(),
+                };
+                break;
+            }
+            default:
+                byteStream.skipSubBlocks();
+                break;
+        }
+    }
+    function readBits(imageData, pos, len) {
+        const bytePos = pos >>> 3, bitPos = pos & 7;
+        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
+            (((1 << len) - 1) << bitPos)) >>>
+            bitPos);
+    }
+    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        const frame = gif.frames[getFrameIndex(true)];
+        frame.left = byteStream.nextTwoBytes();
+        frame.top = byteStream.nextTwoBytes();
+        frame.width = byteStream.nextTwoBytes();
+        frame.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
+        frame.sortFlag = (packedByte & 0x20) === 0x20;
+        frame.reserved = (packedByte & 0x18) >>> 3;
+        const localColorCount = 1 << ((packedByte & 7) + 1);
+        if (localColorTableFlag) {
+            frame.localColorTable = parseColorTable(byteStream, localColorCount);
+        }
+        const getColor = (index) => {
+            const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
+            if (index !== getTransparencyIndex(null)) {
+                return { r, g, b, a: 255 };
+            }
+            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
+        }, image = (() => {
+            try {
+                return new ImageData(frame.width, frame.height, canvasSettings);
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (image == null) {
+            throw new EvalError("GIF frame size is to large");
+        }
+        const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
+        if (interlacedFlag) {
+            for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
+                if (InterlaceOffsets[pass] < frame.height) {
+                    let pixelPos = 0, lineIndex = 0, exit = false;
+                    while (!exit) {
+                        const last = code;
+                        code = readBits(imageData, pos, size);
+                        pos += size + 1;
+                        if (code === clearCode) {
+                            size = minCodeSize + 1;
+                            dic.length = clearCode + 2;
+                            for (let i = 0; i < dic.length; i++) {
+                                dic[i] = i < clearCode ? [i] : [];
+                            }
+                        }
+                        else {
+                            if (code >= dic.length) {
+                                dic.push(dic[last].concat(dic[last][0]));
+                            }
+                            else if (last !== clearCode) {
+                                dic.push(dic[last].concat(dic[code][0]));
+                            }
+                            for (const item of dic[code]) {
+                                const { r, g, b, a } = getColor(item);
+                                image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
+                                    InterlaceSteps[pass] * lineIndex +
+                                    (pixelPos % (frame.width * 4)));
+                                pixelPos += 4;
+                            }
+                            if (dic.length === 1 << size && size < 0xc) {
+                                size++;
+                            }
+                        }
+                        if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
+                            lineIndex++;
+                            if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
+                                exit = true;
+                            }
+                        }
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
+        else {
+            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
+            const dic = [[0]];
+            for (;;) {
+                const last = code;
+                code = readBits(imageData, pos, size);
+                pos += size;
+                if (code === clearCode) {
+                    size = minCodeSize + 1;
+                    dic.length = clearCode + 2;
+                    for (let i = 0; i < dic.length; i++) {
+                        dic[i] = i < clearCode ? [i] : [];
+                    }
+                }
+                else {
+                    if (code === clearCode + 1) {
+                        break;
+                    }
+                    if (code >= dic.length) {
+                        dic.push(dic[last].concat(dic[last][0]));
+                    }
+                    else if (last !== clearCode) {
+                        dic.push(dic[last].concat(dic[code][0]));
+                    }
+                    for (const item of dic[code]) {
+                        const { r, g, b, a } = getColor(item);
+                        pixelPos += 4;
+                        image.data.set([r, g, b, a], pixelPos);
+                    }
+                    if (dic.length >= 1 << size && size < 0xc) {
+                        size++;
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
     }
-
-    class TwinkleLinksValues {
-        color;
-        enable = false;
-        frequency = 0.05;
-        opacity = 1;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.color !== undefined) {
-                this.color = OptionsColor.create(this.color, data.color);
-            }
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadRangeProperty(this, "opacity", data.opacity);
+    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.EndOfFile:
+                return true;
+            case GIFDataHeaders.Image:
+                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings);
+                break;
+            case GIFDataHeaders.Extension:
+                parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+                break;
+            default:
+                throw new EvalError("undefined block found");
         }
+        return false;
     }
-
-    class TwinkleParticlesValues {
-        enable = false;
-        fillColor;
-        frequency = 0.05;
-        opacity = 1;
-        strokeColor;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.fillColor !== undefined) {
-                this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
-            }
-            if (data.strokeColor !== undefined) {
-                this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
+    function getGIFLoopAmount(gif) {
+        for (const extension of gif.applicationExtensions) {
+            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
+                continue;
             }
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadRangeProperty(this, "opacity", data.opacity);
+            return extension.data[1] + (extension.data[2] << 8);
         }
+        return Number.NaN;
     }
-
-    class Twinkle {
-        links = new TwinkleLinksValues();
-        particles = new TwinkleParticlesValues();
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            this.links.load(data.links);
-            this.particles.load(data.particles);
+    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
+        avgAlpha ??= false;
+        const res = await fetch(gifURL);
+        if (!res.ok && res.status === 404) {
+            throw new EvalError("file not found");
         }
-    }
-
-    class TwinkleUpdater {
-        #container;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            this.#pluginManager = pluginManager;
-            this.#container = container;
+        const buffer = await res.arrayBuffer(), gif = {
+            width: 0,
+            height: 0,
+            totalTime: 0,
+            colorRes: 0,
+            pixelAspectRatio: 0,
+            frames: [],
+            sortFlag: false,
+            globalColorTable: [],
+            backgroundImage: new ImageData(1, 1, canvasSettings),
+            comments: [],
+            applicationExtensions: [],
+        }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
+        if (byteStream.getString(6) !== "GIF89a") {
+            throw new Error("not a supported GIF file");
         }
-        getColorStyles(particle, _context, _radius, opacity) {
-            const pOptions = particle.options, container = this.#container, twinkleOptions = pOptions["twinkle"];
-            if (!twinkleOptions) {
-                return {};
-            }
-            const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this.#pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this.#pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
-                if (!twinkleFillRgb) {
-                    return undefined;
-                }
-                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
-            }, getTwinkleStrokeStyle = () => {
-                if (!twinkleStrokeRgb) {
-                    return undefined;
-                }
-                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
-            }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
-            res.fill = needsTwinkle ? twinkleFillStyle : undefined;
-            res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
-            return res;
+        gif.width = byteStream.nextTwoBytes();
+        gif.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
+        gif.colorRes = (packedByte & 0x70) >>> 4;
+        gif.sortFlag = (packedByte & 8) === 8;
+        const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
+        gif.pixelAspectRatio = byteStream.nextByte();
+        if (gif.pixelAspectRatio !== 0) {
+            gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
         }
-        init() {
+        if (globalColorTableFlag) {
+            gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
         }
-        isEnabled(particle) {
-            const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
-            if (!twinkleOptions) {
-                return false;
+        const backgroundImage = (() => {
+            try {
+                return new ImageData(gif.width, gif.height, canvasSettings);
             }
-            return twinkleOptions.particles.enable;
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "twinkle", Twinkle, ...sources);
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (backgroundImage == null) {
+            throw new Error("GIF frame size is to large");
         }
-        update() {
+        const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
+        backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
+        for (let i = 4; i < backgroundImage.data.length; i *= 2) {
+            backgroundImage.data.copyWithin(i, 0, i);
         }
-    }
-
-    async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("twinkle", container => {
-                return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
-            });
-        });
-    }
-
-    class WobbleSpeed {
-        angle = 50;
-        move = 10;
-        load(data) {
-            if (isNull(data)) {
-                return;
+        gif.backgroundImage = backgroundImage;
+        let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
+        const getframeIndex = (increment) => {
+            if (increment) {
+                incrementFrameIndex = true;
             }
-            loadRangeProperty(this, "angle", data.angle);
-            loadRangeProperty(this, "move", data.move);
-        }
-    }
-
-    class Wobble {
-        distance = 5;
-        enable = false;
-        speed = new WobbleSpeed();
-        load(data) {
-            if (isNull(data)) {
-                return;
+            return frameIndex;
+        }, getTransparencyIndex = (newValue) => {
+            if (newValue != null) {
+                transparencyIndex = newValue;
             }
-            loadRangeProperty(this, "distance", data.distance);
-            loadProperty(this, "enable", data.enable);
-            if (data.speed !== undefined) {
-                if (isNumber(data.speed)) {
-                    this.speed.load({ angle: data.speed });
-                }
-                else {
-                    const rangeSpeed = data.speed;
-                    if ("min" in rangeSpeed) {
-                        this.speed.load({ angle: rangeSpeed });
-                    }
-                    else {
-                        this.speed.load(data.speed);
-                    }
+            return transparencyIndex;
+        };
+        try {
+            do {
+                if (incrementFrameIndex) {
+                    gif.frames.push({
+                        left: 0,
+                        top: 0,
+                        width: 0,
+                        height: 0,
+                        disposalMethod: DisposalMethod.Replace,
+                        image: new ImageData(1, 1, canvasSettings),
+                        plainTextData: null,
+                        userInputDelayFlag: false,
+                        delayTime: 0,
+                        sortFlag: false,
+                        localColorTable: [],
+                        reserved: 0,
+                        GCreserved: 0,
+                    });
+                    frameIndex++;
+                    transparencyIndex = -1;
+                    incrementFrameIndex = false;
+                }
+            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
+            gif.frames.length--;
+            for (const frame of gif.frames) {
+                if (frame.userInputDelayFlag && frame.delayTime === 0) {
+                    gif.totalTime = Infinity;
+                    break;
                 }
+                gif.totalTime += frame.delayTime;
+            }
+            return gif;
+        }
+        catch (error) {
+            if (error instanceof EvalError) {
+                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
             }
+            throw error;
         }
     }
-
-    const defaultDistance$1 = 0, distanceFactor = 60;
-    function updateWobble(container, particle, delta) {
-        const { wobble: wobbleOptions } = particle.options, { wobble } = particle;
-        if (!wobbleOptions?.enable || !wobble) {
+    function drawGif(data, canvasSettings) {
+        const { context, radius, particle, delta } = data, gifData = particle.gifData;
+        if (!gifData) {
             return;
         }
-        const reduceFactor = container.retina.reduceFactor, angleSpeed = wobble.angleSpeed * delta.factor * reduceFactor, moveSpeed = wobble.moveSpeed * delta.factor * reduceFactor, distance = (moveSpeed * (particle.retina.wobbleDistance ?? defaultDistance$1)) / (millisecondsToSeconds$1 / distanceFactor), max = doublePI, { position } = particle;
-        wobble.angle += angleSpeed;
-        if (wobble.angle > max) {
-            wobble.angle -= max;
+        const offscreenCanvas = new OffscreenCanvas(gifData.width, gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
+        if (!offscreenContext) {
+            throw new Error("could not create offscreen canvas context");
         }
-        position.x += distance * Math.cos(wobble.angle);
-        position.y += distance * Math.abs(Math.sin(wobble.angle));
+        offscreenContext.imageSmoothingQuality = "low";
+        offscreenContext.imageSmoothingEnabled = false;
+        offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+        let frameIndex = particle.gifFrame ?? defaultFrame;
+        const pos = { x: -gifData.width * half$2, y: -gifData.height * half$2 }, frame = gifData.frames[frameIndex];
+        particle.gifTime ??= initialTime;
+        if (!frame.bitmap) {
+            return;
+        }
+        context.scale(radius / gifData.width, radius / gifData.height);
+        switch (frame.disposalMethod) {
+            case DisposalMethod.UndefinedA:
+            case DisposalMethod.UndefinedB:
+            case DisposalMethod.UndefinedC:
+            case DisposalMethod.UndefinedD:
+            case DisposalMethod.Replace:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                break;
+            case DisposalMethod.Combine:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                break;
+            case DisposalMethod.RestoreBackground:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                if (!gifData.globalColorTable.length) {
+                    offscreenContext.putImageData(gifData.frames[firstIndex$1].image, pos.x + frame.left, pos.y + frame.top);
+                }
+                else {
+                    offscreenContext.putImageData(gifData.backgroundImage, pos.x, pos.y);
+                }
+                break;
+            case DisposalMethod.RestorePrevious:
+                {
+                    const previousImageData = offscreenContext.getImageData(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                    context.drawImage(offscreenCanvas, pos.x, pos.y);
+                    offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.putImageData(previousImageData, originPoint.x, originPoint.y);
+                }
+                break;
+        }
+        particle.gifTime += delta.value;
+        if (particle.gifTime > frame.delayTime) {
+            particle.gifTime -= frame.delayTime;
+            if (++frameIndex >= gifData.frames.length) {
+                if (particle.gifLoopCount == null || --particle.gifLoopCount <= defaultLoopCount) {
+                    return;
+                }
+                frameIndex = firstIndex$1;
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+            }
+            particle.gifFrame = frameIndex;
+        }
+        context.scale(gifData.width / radius, gifData.height / radius);
     }
 
-    const maxAngle$1 = 360, moveSpeedFactor$1 = 10, defaultDistance = 0;
-    class WobbleUpdater {
+    class GifDrawer {
         #container;
+        #gifCache;
         constructor(container) {
             this.#container = container;
+            this.#gifCache = new Map();
         }
-        init(particle) {
-            const wobbleOpt = particle.options.wobble;
-            if (wobbleOpt?.enable) {
-                particle.wobble = {
-                    angle: getRandom() * doublePI,
-                    angleSpeed: getRangeValue(wobbleOpt.speed.angle) / maxAngle$1,
-                    moveSpeed: getRangeValue(wobbleOpt.speed.move) / moveSpeedFactor$1,
-                };
-            }
-            else {
-                particle.wobble = {
-                    angle: 0,
-                    angleSpeed: 0,
-                    moveSpeed: 0,
-                };
-            }
-            particle.retina.wobbleDistance =
-                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this.#container.retina.pixelRatio;
+        destroy() {
+            this.#gifCache.clear();
         }
-        isEnabled(particle) {
-            return !particle.destroyed && !particle.spawning && !!particle.options.wobble?.enable;
+        draw(data) {
+            const { context, opacity } = data;
+            if (!data.particle.gifData)
+                return;
+            context.globalAlpha = opacity;
+            drawGif(data, this.#container.canvas.render.settings);
+            context.globalAlpha = 1;
         }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "wobble", Wobble, ...sources);
+        loadShape(particle) {
+            const shapeData = particle.shapeData;
+            if (!shapeData?.src)
+                return;
+            if (this.#gifCache.has(shapeData.src))
+                return;
+            void decodeGIF(shapeData.src, { colorSpace: "srgb" }).then(gifData => {
+                this.#gifCache.set(shapeData.src, gifData);
+            });
         }
-        update(particle, delta) {
-            if (!this.isEnabled(particle)) {
+        particleInit(container, particle) {
+            const shapeData = particle.shapeData;
+            if (!shapeData?.src)
+                return;
+            const gifData = this.#gifCache.get(shapeData.src);
+            if (!gifData) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
                 return;
             }
-            updateWobble(this.#container, particle, delta);
+            particle.gifData = gifData;
+            particle.gifFrame = 0;
+            particle.gifTime = 0;
+            particle.gifLoopCount = getGIFLoopAmount(gifData);
+            if (particle.gifLoopCount === 0) {
+                particle.gifLoopCount = Number.POSITIVE_INFINITY;
+            }
+            if (shapeData.loopCount !== undefined) {
+                particle.gifLoopCount = shapeData.loopCount;
+            }
         }
     }
 
-    async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.2.0");
+    async function loadGifShape(engine) {
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("wobble", container => {
-                return Promise.resolve(new WobbleUpdater(container));
-            });
-        });
-    }
-
-    async function loadFull(engine) {
-        engine.checkVersion("4.2.0");
-        await engine.pluginManager.register(async (e) => {
-            const loadEmittersPluginBundle = async (e) => {
-                await loadEmittersPlugin(e);
-                await Promise.all([
-                    loadEmittersShapeCircle(e),
-                    loadEmittersShapeSquare(e),
-                ]);
-            }, loadInteractivityForFull = async (e) => {
-                await loadSlim(e);
-                await Promise.all([
-                    loadExternalDragInteraction(e),
-                    loadExternalTrailInteraction(e),
-                    loadAbsorbersPlugin(e),
-                    loadEmittersPluginBundle(e),
-                ]);
-            };
-            await Promise.all([
-                loadInteractivityForFull(e),
-                loadDestroyUpdater(e),
-                loadRollUpdater(e),
-                loadTiltUpdater(e),
-                loadTwinkleUpdater(e),
-                loadWobbleUpdater(e),
-                loadTextShape(e),
-            ]);
+            e.pluginManager.addShape(["gif", "gifs"], container => Promise.resolve(new GifDrawer(container)));
         });
     }
 
@@ -15513,14 +15648,14 @@
         }
     }
 
-    function updateGradient(particle, delta) {
+    function updateGradient(particle, delta, hdr) {
         const { gradient } = particle;
         if (!gradient) {
             return;
         }
         updateAnimation(particle, gradient.angle, false, exports.DestroyType.none, delta);
         for (const color of gradient.colors) {
-            updateColor(color.value, delta);
+            updateColor(color.value, delta, hdr);
             if (color.opacity) {
                 updateAnimation(particle, color.opacity, true, exports.DestroyType.none, delta);
             }
@@ -15652,12 +15787,12 @@
             }
         }
         update(particle, delta) {
-            updateGradient(particle, delta);
+            updateGradient(particle, delta, this.#container.hdr);
         }
     }
 
     async function loadGradientUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("gradient", container => {
                 return Promise.resolve(new GradientUpdater(e.pluginManager, container));
@@ -15777,7 +15912,7 @@
 
     const gridPathName = "gridPathGenerator";
     async function loadGridPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(gridPathName, container => {
@@ -15806,7 +15941,7 @@
     }
 
     async function loadHeartShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart"], () => Promise.resolve(new HeartDrawer()));
         });
@@ -15922,7 +16057,7 @@
     }
 
     async function loadHsvColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsv", new HsvColorManager());
         });
@@ -16007,7 +16142,7 @@
     }
 
     async function loadHwbColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hwb", new HwbColorManager());
         });
@@ -16155,7 +16290,7 @@
     }
 
     async function loadInfectionPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new InfectionPlugin());
@@ -16181,7 +16316,7 @@
     }
 
     async function loadInfinityShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["infinity"], () => Promise.resolve(new InfinityDrawer()));
         });
@@ -16282,7 +16417,7 @@
     }
 
     async function loadLabColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lab", new LabColorManager());
         });
@@ -16383,7 +16518,7 @@
     }
 
     async function loadLchColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("lch", new LchColorManager());
         });
@@ -16437,7 +16572,7 @@
 
     const levyPathName = "levyPathGenerator";
     async function loadLevyPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(levyPathName, container => {
@@ -16653,7 +16788,7 @@
     }
 
     async function loadLightInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalLight", container => {
@@ -16711,7 +16846,7 @@
     }
 
     async function loadManualParticlesPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ManualParticlesPlugin());
         });
@@ -16932,7 +17067,7 @@
     }
 
     async function loadMatrixShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["matrix"], () => Promise.resolve(new MatrixDrawer()));
         });
@@ -16984,7 +17119,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -17167,7 +17302,7 @@
     }
 
     async function loadNamedColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("named", new NamedColorManager());
         });
@@ -17263,7 +17398,7 @@
     }
 
     async function loadOklabColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklab", new OklabColorManager());
         });
@@ -17359,7 +17494,7 @@
     }
 
     async function loadOklchColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("oklch", new OklchColorManager());
         });
@@ -17494,7 +17629,7 @@
     }
 
     async function loadOrbitUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("orbit", container => {
                 return Promise.resolve(new OrbitUpdater(e.pluginManager, container));
@@ -17534,7 +17669,7 @@
     }
 
     async function loadParticlesEffect(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("particles", container => {
                 return Promise.resolve(new ParticlesDrawer(container));
@@ -17626,7 +17761,7 @@
     }
 
     async function loadParticlesRepulseInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesRepulse", container => {
@@ -17653,7 +17788,7 @@
     }
 
     async function loadPathShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["path"], () => Promise.resolve(new PathDrawer()));
         });
@@ -18057,7 +18192,7 @@
 
     const perlinNoisePathName = "perlinNoise";
     async function loadPerlinNoisePath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(perlinNoisePathName, container => {
@@ -18105,7 +18240,7 @@
     }
 
     async function loadPoissonDiscPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PoissonDiscPlugin());
         });
@@ -18292,7 +18427,7 @@
     }
 
     async function loadPolygonMaskPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PolygonMaskPlugin(e.pluginManager));
         });
@@ -18358,7 +18493,7 @@
 
     const polygonPathName = "polygonPathGenerator";
     async function loadPolygonPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(polygonPathName, container => {
@@ -18388,7 +18523,7 @@
 
     const randomPathName = "randomPathGenerator";
     async function loadRandomPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(randomPathName, () => {
@@ -18468,7 +18603,7 @@
     }
 
     async function loadResponsivePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ResponsivePlugin());
         });
@@ -18866,7 +19001,7 @@
     }
 
     async function loadRibbonShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["ribbon"], (container) => Promise.resolve(new RibbonDrawer(container)));
         });
@@ -18915,7 +19050,7 @@
     }
 
     async function loadRoundedPolygonShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-polygon"], () => Promise.resolve(new RoundedPolygonDrawer()));
         });
@@ -18962,7 +19097,7 @@
     }
 
     async function loadRoundedRectShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["rounded-rect"], () => Promise.resolve(new RoundedRectDrawer()));
         });
@@ -19120,7 +19255,7 @@
 
     const svgPathName = "svgPathGenerator";
     async function loadSVGPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(svgPathName, container => {
@@ -19161,7 +19296,7 @@
     }
 
     async function loadShadowEffect(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("shadow", container => {
                 return Promise.resolve(new ShadowDrawer(e.pluginManager, container));
@@ -19183,7 +19318,7 @@
 
     const simplexNoisePathName = "simplexNoise";
     async function loadSimplexNoisePath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(simplexNoisePathName, container => {
@@ -19500,7 +19635,7 @@
     }
 
     async function loadSoundsPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new SoundsPlugin(e));
         });
@@ -19569,7 +19704,7 @@
 
     const spiralPathName = "spiralPathGenerator";
     async function loadSpiralPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(spiralPathName, container => {
@@ -19609,7 +19744,7 @@
     }
 
     async function loadSpiralShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spiral"], () => Promise.resolve(new SpiralDrawer()));
         });
@@ -19653,7 +19788,7 @@
     }
 
     async function loadSquircleShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["squircle"], () => Promise.resolve(new SquircleDrawer()));
         });
@@ -19757,7 +19892,7 @@
     }
 
     async function loadThemesPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ThemesPlugin());
         });
@@ -19873,7 +20008,7 @@
     }
 
     async function loadTrailEffect(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("trail", container => {
                 return Promise.resolve(new TrailDrawer(container));
@@ -19937,7 +20072,7 @@
     }
 
     async function loadTrailPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
         });
@@ -19986,7 +20121,7 @@
 
     const zigZagPathName = "zigZagPathGenerator";
     async function loadZigZagPath(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureBaseMoverLoaded(e);
             e.pluginManager.addPathGenerator?.(zigZagPathName, container => {
@@ -20043,14 +20178,14 @@
     }
 
     async function loadZoomPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new ZoomPlugin());
         });
     }
 
     async function loadAll(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractionsForAll = async (e) => {
                 await loadFull(e);
@@ -20126,6 +20261,7 @@
                 loadArrowShape(e),
                 loadCardsShape(e),
                 loadCogShape(e),
+                loadGifShape(e),
                 loadHeartShape(e),
                 loadInfinityShape(e),
                 loadMatrixShape(e),
@@ -20151,10 +20287,10 @@
         }
     }
     class RenderManager {
+        #backgroundElement;
+        #backgroundWarnings;
         #canvasClearPlugins;
         #canvasManager;
-        #canvasPaintPlugins;
-        #clearDrawPlugins;
         #colorPlugins;
         #container;
         #context;
@@ -20162,9 +20298,7 @@
         #drawParticlePlugins;
         #drawParticlesCleanupPlugins;
         #drawParticlesSetupPlugins;
-        #drawPlugins;
-        #drawSettingsCleanupPlugins;
-        #drawSettingsSetupPlugins;
+        #layers;
         #pluginManager;
         #postDrawUpdaters;
         #preDrawUpdaters;
@@ -20176,18 +20310,25 @@
             this.#container = container;
             this.#canvasManager = canvasManager;
             this.#context = null;
+            this.#backgroundElement = null;
+            this.#backgroundWarnings = new Set();
             this.#preDrawUpdaters = [];
             this.#postDrawUpdaters = [];
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesCleanupPlugins = [];
             this.#drawParticlesSetupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            this.#layers = {
+                0: [],
+                1: [],
+                2: [],
+                3: [],
+                4: [],
+                5: [],
+                6: [],
+                7: [],
+            };
         }
         get settings() {
             return this.#contextSettings;
@@ -20201,32 +20342,38 @@
             });
         }
         clear() {
-            let pluginHandled = false;
             for (const plugin of this.#canvasClearPlugins) {
-                pluginHandled = plugin.canvasClear?.() ?? false;
-                if (pluginHandled) {
-                    break;
+                if (plugin.canvasClear?.() ?? false) {
+                    return;
                 }
             }
-            if (pluginHandled) {
-                return;
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    for (const plugin of this.#getLayerPlugins(layer)) {
+                        if (plugin.canvasClear?.() ?? false) {
+                            return;
+                        }
+                    }
+                }
             }
             this.canvasClear();
         }
         destroy() {
             this.stop();
+            this.#backgroundElement = null;
+            this.#backgroundWarnings.clear();
             this.#preDrawUpdaters = [];
             this.#postDrawUpdaters = [];
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesCleanupPlugins = [];
             this.#drawParticlesSetupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
+                }
+            }
         }
         draw(cb) {
             const ctx = this.#context;
@@ -20283,21 +20430,40 @@
             });
         }
         drawParticles(delta) {
-            const { particles } = this.#container;
+            const { particles, actualOptions } = this.#container;
             this.clear();
             particles.update(delta);
             this.draw(ctx => {
-                for (const plugin of this.#drawSettingsSetupPlugins) {
+                const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
+                if (this.#backgroundElement) {
+                    try {
+                        ctx.drawImage(this.#backgroundElement, originPoint.x, originPoint.y, width, height);
+                    }
+                    catch {
+                        this.#warnOnce("background-element-draw-error", "Error drawing background element onto canvas");
+                    }
+                }
+                const background = actualOptions.background;
+                if (background.draw) {
+                    try {
+                        background.draw(ctx, delta);
+                    }
+                    catch {
+                        this.#warnOnce("background-draw-error", "Error in background.draw callback");
+                    }
+                }
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
+                    plugin.canvasPaint?.();
+                }
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
                 }
-                for (const plugin of this.#drawPlugins) {
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.PluginContent)) {
                     plugin.draw?.(ctx, delta);
                 }
                 particles.drawParticles(delta);
-                for (const plugin of this.#clearDrawPlugins) {
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasCleanup)) {
                     plugin.clearDraw?.(ctx, delta);
-                }
-                for (const plugin of this.#drawSettingsCleanupPlugins) {
                     plugin.drawSettingsCleanup?.(ctx, delta);
                 }
             });
@@ -20305,29 +20471,24 @@
         init() {
             this.initUpdaters();
             this.initPlugins();
+            this.#resolveBackgroundElement();
             this.paint();
         }
         initPlugins() {
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesSetupPlugins = [];
             this.#drawParticlesCleanupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
+                }
+            }
             for (const plugin of this.#container.plugins) {
                 if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                     this.#colorPlugins.push(plugin);
                 }
-                if (plugin.canvasClear) {
-                    this.#canvasClearPlugins.push(plugin);
-                }
-                if (plugin.canvasPaint) {
-                    this.#canvasPaintPlugins.push(plugin);
-                }
                 if (plugin.drawParticle) {
                     this.#drawParticlePlugins.push(plugin);
                 }
@@ -20337,17 +20498,20 @@
                 if (plugin.drawParticleCleanup) {
                     this.#drawParticlesCleanupPlugins.push(plugin);
                 }
-                if (plugin.draw) {
-                    this.#drawPlugins.push(plugin);
+                if (plugin.canvasClear) {
+                    this.#canvasClearPlugins.push(plugin);
+                }
+                if (plugin.canvasPaint) {
+                    this.#getLayerPlugins(exports.DrawLayer.BackgroundMask).push(plugin);
                 }
                 if (plugin.drawSettingsSetup) {
-                    this.#drawSettingsSetupPlugins.push(plugin);
+                    this.#getLayerPlugins(exports.DrawLayer.CanvasSetup).push(plugin);
                 }
-                if (plugin.drawSettingsCleanup) {
-                    this.#drawSettingsCleanupPlugins.push(plugin);
+                if (plugin.draw) {
+                    this.#getLayerPlugins(exports.DrawLayer.PluginContent).push(plugin);
                 }
-                if (plugin.clearDraw) {
-                    this.#clearDrawPlugins.push(plugin);
+                if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
+                    this.#getLayerPlugins(exports.DrawLayer.CanvasCleanup).push(plugin);
                 }
             }
         }
@@ -20365,7 +20529,7 @@
         }
         paint() {
             let handled = false;
-            for (const plugin of this.#canvasPaintPlugins) {
+            for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
                 handled = plugin.canvasPaint?.() ?? false;
                 if (handled) {
                     break;
@@ -20538,6 +20702,9 @@
             }
             drawer.beforeDraw(data);
         }
+        #getLayerPlugins(layer) {
+            return this.#layers[layer];
+        }
         #getPluginParticleColors(particle) {
             let fColor, sColor;
             for (const plugin of this.#colorPlugins) {
@@ -20555,6 +20722,39 @@
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
         }
+        #resolveBackgroundElement() {
+            const background = this.#container.actualOptions.background;
+            this.#backgroundElement = null;
+            if (!background.element) {
+                return;
+            }
+            if (typeof background.element === "string") {
+                if (typeof document !== "undefined") {
+                    const node = document.querySelector(background.element);
+                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                        this.#backgroundElement = node;
+                    }
+                    else if (node) {
+                        this.#warnOnce("background-element-not-supported", `Background element "${background.element}" is not a supported drawable element (canvas, video, or img)`);
+                    }
+                    else {
+                        this.#warnOnce("background-element-not-found", `Background element selector "${background.element}" not found`);
+                    }
+                }
+            }
+            else if (background.element instanceof HTMLCanvasElement ||
+                background.element instanceof OffscreenCanvas ||
+                background.element instanceof HTMLVideoElement ||
+                background.element instanceof HTMLImageElement) {
+                this.#backgroundElement = background.element;
+            }
+        }
+        #warnOnce(key, message) {
+            if (!this.#backgroundWarnings.has(key)) {
+                this.#backgroundWarnings.add(key);
+                getLogger().warning(message);
+            }
+        }
     }
 
     const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -21131,7 +21331,6 @@
     }
     class Particle {
         backColor;
-        bubble;
         destroyed;
         direction;
         effect;
@@ -21165,7 +21364,6 @@
         shapeData;
         sides;
         size;
-        slow;
         spawning;
         strokeColor;
         strokeOpacity;
@@ -21187,18 +21385,25 @@
             d: 1,
         };
         #container;
+        #modifiers = [];
         #pluginManager;
         constructor(pluginManager, container) {
             this.#pluginManager = pluginManager;
             this.#container = container;
         }
+        addModifier(modifier) {
+            this.#modifiers.push(modifier);
+            this.#modifiers.sort((a, b) => a.priority - b.priority);
+        }
+        clearModifiers() {
+            this.#modifiers.length = 0;
+        }
         destroy(override) {
             if (this.unbreakable || this.destroyed) {
                 return;
             }
             this.destroyed = true;
-            this.bubble.inRange = false;
-            this.slow.inRange = false;
+            this.clearModifiers();
             const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
             for (const plugin of container.particleDestroyedPlugins) {
@@ -21220,13 +21425,16 @@
             return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle$1);
         }
         getFillColor() {
-            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
+            return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.fillColor), m => m.fillColor));
         }
         getMass() {
             return this.getRadius() ** squareExp * Math.PI * half$2;
         }
+        getModifier(id) {
+            return this.#modifiers.find(m => m.id === id);
+        }
         getOpacity() {
-            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity$3), fillOpacity = this.fillOpacity ?? defaultOpacity$3, strokeOpacity = this.strokeOpacity ?? defaultOpacity$3;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$3), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$3, strokeOpacity = this.strokeOpacity ?? defaultOpacity$3;
             this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
             this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
@@ -21239,7 +21447,7 @@
             return this.#cachedPosition;
         }
         getRadius() {
-            return this.bubble.radius ?? this.size.value;
+            return this.#applyModifiers(this.size.value, m => m.radius);
         }
         getRotateData() {
             const angle = this.getAngle();
@@ -21248,7 +21456,7 @@
             return this.#cachedRotateData;
         }
         getStrokeColor() {
-            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
+            return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.strokeColor), m => m.strokeColor));
         }
         getTransformData(externalTransform) {
             const rotateData = this.getRotateData(), rotating = this.isRotating;
@@ -21268,13 +21476,6 @@
             this.options = resolveParticleOptions(this, container, this.#pluginManager, overrideOptions);
             container.retina.initParticle(this);
             runUpdaterPreInit(container.particleUpdaters, this);
-            this.bubble = {
-                inRange: false,
-            };
-            this.slow = {
-                inRange: false,
-                factor: 1,
-            };
             this.#initPosition(position);
             this.initialVelocity = this.#calculateVelocity();
             this.velocity = this.initialVelocity.copy();
@@ -21314,11 +21515,29 @@
         isVisible() {
             return !this.destroyed && !this.spawning && this.isInsideCanvas();
         }
+        removeModifier(id) {
+            const idx = this.#modifiers.findIndex(m => m.id === id);
+            if (idx >= defaultAngle$1) {
+                this.#modifiers.splice(idx, identity$3);
+            }
+        }
         reset() {
             for (const updater of this.#container.particleUpdaters) {
                 updater.reset?.(this);
             }
         }
+        #applyModifiers(base, getter) {
+            let value = base;
+            for (const mod of this.#modifiers) {
+                if (mod.enabled) {
+                    const override = getter(mod);
+                    if (override !== undefined) {
+                        value = override;
+                    }
+                }
+            }
+            return value;
+        }
         #calcPosition(position, zIndex) {
             let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
             const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size;
@@ -22420,10 +22639,13 @@
     });
 
     class BackgroundMaskPluginInstance {
+        layer = exports.DrawLayer.BackgroundMask;
         #container;
         #coverColorStyle;
         #coverImage;
         #defaultCompositeValue;
+        #maskElement;
+        #maskWarnings = new Set();
         #pluginManager;
         constructor(pluginManager, container) {
             this.#pluginManager = pluginManager;
@@ -22437,19 +22659,52 @@
             return this.canvasPaint();
         }
         canvasPaint() {
-            if (!this.#container.actualOptions.backgroundMask?.enable) {
+            const { backgroundMask } = this.#container.actualOptions;
+            if (!backgroundMask?.enable) {
                 return false;
             }
             const canvas = this.#container.canvas;
             canvas.render.canvasClear();
-            if (this.#coverImage) {
-                canvas.render.paintImage(this.#coverImage.image, this.#coverImage.opacity);
+            const cover = backgroundMask.cover;
+            let dynamicUsed = false;
+            const maskElement = this.#maskElement;
+            if (maskElement) {
+                dynamicUsed = true;
+                canvas.render.draw(ctx => {
+                    try {
+                        ctx.drawImage(maskElement, originPoint.x, originPoint.y, canvas.size.width, canvas.size.height);
+                    }
+                    catch {
+                        this.#maskWarnOnce("mask-element-draw-error", "Error drawing background mask cover element onto canvas");
+                    }
+                });
             }
-            else {
-                canvas.render.paintBase(this.#coverColorStyle);
+            if (cover.draw) {
+                dynamicUsed = true;
+                const drawFn = cover.draw;
+                canvas.render.draw(ctx => {
+                    try {
+                        drawFn(ctx, { value: 0, factor: 1 });
+                    }
+                    catch {
+                        this.#maskWarnOnce("mask-draw-error", "Error in mask cover.draw callback");
+                    }
+                });
+            }
+            if (!dynamicUsed) {
+                if (this.#coverImage) {
+                    canvas.render.paintImage(this.#coverImage.image, this.#coverImage.opacity);
+                }
+                else {
+                    canvas.render.paintBase(this.#coverColorStyle);
+                }
             }
             return true;
         }
+        destroy() {
+            this.#maskElement = null;
+            this.#maskWarnings.clear();
+        }
         drawSettingsCleanup(context) {
             if (!this.#defaultCompositeValue) {
                 return;
@@ -22462,7 +22717,9 @@
             context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
         }
         async init() {
+            this.#maskWarnings.clear();
             await this.#initCover();
+            this.#resolveMaskElement();
         }
         #initCover = async () => {
             const options = this.#container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
@@ -22476,11 +22733,9 @@
                     this.#coverColorStyle = getStyleFromRgb(coverColor, this.#container.hdr, coverColor.a);
                 }
             }
-            else {
+            else if (cover?.image) {
+                const coverImage = cover.image;
                 await new Promise((resolve, reject) => {
-                    if (!cover?.image) {
-                        return;
-                    }
                     const img = safeDocument().createElement("img");
                     img.addEventListener("load", () => {
                         this.#coverImage = {
@@ -22492,10 +22747,44 @@
                     img.addEventListener("error", () => {
                         reject(new Error("Error loading image"));
                     });
-                    img.src = cover.image;
+                    img.src = coverImage;
                 });
             }
         };
+        #maskWarnOnce = (key, message) => {
+            if (this.#maskWarnings.has(key)) {
+                return;
+            }
+            this.#maskWarnings.add(key);
+            getLogger().warning(`[tsParticles BackgroundMask] ${message}`);
+        };
+        #resolveMaskElement = () => {
+            const cover = this.#container.actualOptions.backgroundMask?.cover;
+            this.#maskElement = null;
+            if (!cover?.element) {
+                return;
+            }
+            if (typeof cover.element === "string") {
+                if (typeof document !== "undefined") {
+                    const node = document.querySelector(cover.element);
+                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                        this.#maskElement = node;
+                    }
+                    else if (node) {
+                        this.#maskWarnOnce("mask-element-not-supported", `Mask cover element "${cover.element}" matched a non-drawable element (expected canvas, video, or img)`);
+                    }
+                    else {
+                        this.#maskWarnOnce("mask-element-not-found", `Mask cover element selector "${cover.element}" not found in the DOM`);
+                    }
+                }
+            }
+            else if (cover.element instanceof HTMLCanvasElement ||
+                cover.element instanceof OffscreenCanvas ||
+                cover.element instanceof HTMLVideoElement ||
+                cover.element instanceof HTMLImageElement) {
+                this.#maskElement = cover.element;
+            }
+        };
     }
 
     var BackgroundMaskPluginInstance$1 = /*#__PURE__*/Object.freeze({
@@ -22611,7 +22900,8 @@
         particle.lastPathTime -= pathDelay;
     }
     function getProximitySpeedFactor(particle) {
-        return particle.slow.inRange ? particle.slow.factor : identity$3;
+        const mod = particle.getModifier("slow");
+        return mod?.enabled ? (mod.speedFactor ?? identity$3) : identity$3;
     }
     function initSpin(container, particle) {
         const options = particle.options, spinOptions = options.move.spin;
@@ -23775,6 +24065,7 @@
     });
 
     class BlendPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #defaultCompositeValue;
         constructor(container) {
@@ -26880,6 +27171,7 @@
 
     const minimumLength = 0;
     class TrailPluginInstance {
+        layer = exports.DrawLayer.PluginContent;
         #container;
         #pluginManager;
         #trailFill;
@@ -27133,6 +27425,7 @@
     }
 
     class ZoomPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #listeners;
         constructor(container) {
@@ -28044,6 +28337,7 @@
     exports.hPhase = hPhase;
     exports.half = half$2;
     exports.hslToRgb = hslToRgb;
+    exports.hslToRgbFloat = hslToRgbFloat;
     exports.hslaToRgba = hslaToRgba;
     exports.identity = identity$3;
     exports.inverseFactorNumerator = inverseFactorNumerator;