tsparticles 4.2.0 → 4.3.0

package/tsparticles.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.3.0";
         }
         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
+            ? 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$2, 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$2, 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 {
@@ -2413,7 +2446,7 @@
     }
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -2653,7 +2686,7 @@
     }
 
     async function loadAbsorbersInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -2701,7 +2734,7 @@
     }
 
     async function loadAbsorbersPluginSimple(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const pluginManager = e.pluginManager, instancesManager = await getAbsorbersInstancesManager(e);
             pluginManager.addPlugin(new AbsorbersPlugin(instancesManager));
@@ -3027,7 +3060,7 @@
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -3345,7 +3378,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             ensureInteractivityPluginLoaded(e);
@@ -3388,7 +3421,7 @@
     }
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3445,7 +3478,7 @@
     }
 
     async function loadEmittersShapeCircle(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("circle", new EmittersCircleShapeGenerator());
@@ -3526,7 +3559,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -3708,7 +3741,7 @@
     }
 
     async function loadExternalDragInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDrag", container => {
@@ -3881,7 +3914,7 @@
     }
 
     async function loadExternalTrailInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalTrail", container => {
@@ -4017,7 +4050,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -4063,7 +4096,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -4100,7 +4133,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -4148,7 +4181,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -4201,7 +4234,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -4225,7 +4258,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -4441,7 +4474,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -4786,7 +4819,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -4851,13 +4884,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.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -4912,7 +4945,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -4997,7 +5030,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -5006,7 +5039,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -5029,7 +5062,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.3.0");
         await engine.pluginManager.register(e => {
             for (const [easing, easingFn] of easingsFunctions) {
                 e.pluginManager.addEasing(easing, easingFn);
@@ -5137,7 +5170,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes$1, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -5370,7 +5403,7 @@
     };
 
     async function loadExternalAttractInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalAttract", container => {
@@ -5559,7 +5592,7 @@
     }
 
     async function loadExternalBounceInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBounce", container => {
@@ -5619,6 +5652,19 @@
         }
     }
 
+    class BubbleModifier {
+        div;
+        enabled = false;
+        fillColor;
+        finalColor;
+        id = "bubble";
+        inRange = false;
+        opacity;
+        priority = 100;
+        radius;
+        strokeColor;
+    }
+
     var ProcessBubbleType;
     (function (ProcessBubbleType) {
         ProcessBubbleType["color"] = "color";
@@ -5642,6 +5688,7 @@
     class Bubbler extends ExternalInteractorBase {
         handleClickMode;
         #maxDistance;
+        #modifiers = new WeakMap();
         #pluginManager;
         constructor(pluginManager, container) {
             super(container);
@@ -5660,13 +5707,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;
@@ -5712,7 +5767,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;
@@ -5729,7 +5788,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;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
@@ -5741,7 +5802,7 @@
                 const sizeData = {
                     bubbleObj: {
                         optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
+                        value: mod.radius,
                     },
                     particlesObj: {
                         optValue: particle.size.max,
@@ -5753,7 +5814,7 @@
                 const opacityData = {
                     bubbleObj: {
                         optValue: bubbleOptions.opacity,
-                        value: particle.bubble.opacity,
+                        value: mod.opacity,
                     },
                     particlesObj: {
                         optValue: particle.opacity?.max ?? defaultOpacity$1,
@@ -5766,7 +5827,8 @@
                     this.#hoverBubbleColor(particle, distMouse);
                 }
                 else {
-                    delete particle.bubble.color;
+                    mod.fillColor = undefined;
+                    mod.strokeColor = undefined;
                 }
             }
         }
@@ -5777,7 +5839,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) {
@@ -5795,30 +5859,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) {
@@ -5828,7 +5900,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) {
@@ -5838,7 +5911,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) {
@@ -5851,13 +5925,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;
                     }
                 }
             }
@@ -5867,19 +5942,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;
                     }
                 }
             }
@@ -5900,11 +5975,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);
@@ -5915,7 +5992,7 @@
     }
 
     async function loadExternalBubbleInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalBubble", container => {
@@ -6043,7 +6120,7 @@
     }
 
     async function loadExternalConnectInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalConnect", container => {
@@ -6147,7 +6224,7 @@
     }
 
     async function loadExternalDestroyInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalDestroy", async (container) => {
@@ -6271,7 +6348,7 @@
     }
 
     async function loadExternalGrabInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalGrab", container => {
@@ -6341,7 +6418,7 @@
     }
 
     async function loadExternalParallaxInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalParallax", container => {
@@ -6384,7 +6461,7 @@
     }
 
     async function loadExternalPauseInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPause", container => {
@@ -6456,7 +6533,7 @@
     }
 
     async function loadExternalPushInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalPush", container => {
@@ -6510,7 +6587,7 @@
     }
 
     async function loadExternalRemoveInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalRemove", container => {
@@ -6816,7 +6893,7 @@
     }
 
     async function loadExternalRepulseInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             const pluginManager = e.pluginManager;
@@ -6838,9 +6915,17 @@
         }
     }
 
+    class SlowModifier {
+        enabled = false;
+        id = "slow";
+        priority = 100;
+        speedFactor = 1;
+    }
+
     const slowMode = "slow", minRadius$1 = 0;
     class Slower extends ExternalInteractorBase {
         #maxDistance;
+        #modifiers = new WeakMap();
         constructor(container) {
             super(container);
             this.#maxDistance = 0;
@@ -6849,10 +6934,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;
@@ -6872,22 +6968,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$1 || !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.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalSlow", container => {
@@ -6949,7 +7049,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,
@@ -6984,495 +7083,6 @@
         });
     }
 
-    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$2 = 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);
-        }
-    }
-    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;
-    }
-    function getGIFLoopAmount(gif) {
-        for (const extension of gif.applicationExtensions) {
-            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
-                continue;
-            }
-            return extension.data[1] + (extension.data[2] << 8);
-        }
-        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");
-        }
-        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;
-            }
-        })();
-        if (backgroundImage == null) {
-            throw new Error("GIF frame size is to large");
-        }
-        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);
-        }
-        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;
-            }
-            return gif;
-        }
-        catch (error) {
-            if (error instanceof EvalError) {
-                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
-            }
-            throw error;
-        }
-    }
-    function drawGif(data, canvasSettings) {
-        const { context, radius, particle, delta } = data, image = particle.image;
-        if (!image?.gifData || !image.gif) {
-            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");
-        }
-        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, y: -image.gifData.height * half }, frame = image.gifData.frames[frameIndex];
-        particle.gifTime ??= initialTime;
-        if (!frame.bitmap) {
-            return;
-        }
-        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$2].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;
-        }
-        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$2;
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-            }
-            particle.gifFrame = frameIndex;
-        }
-        context.scale(image.gifData.width / radius, image.gifData.height / radius);
-    }
-    async function loadGifImage(image, canvasSettings) {
-        if (image.type !== "gif") {
-            await loadImage(image);
-            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;
-        }
-        image.loading = false;
-    }
-
     const sides$3 = 12;
     class ImageDrawer {
         #container;
@@ -7487,10 +7097,7 @@
                 return;
             }
             context.globalAlpha = opacity;
-            if (image.gif && image.gifData) {
-                drawGif(data, this.#container.canvas.render.settings);
-            }
-            else if (element) {
+            if (element) {
                 const ratio = image.ratio, pos = {
                     x: -radius,
                     y: -radius,
@@ -7559,9 +7166,6 @@
                         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,
@@ -7584,7 +7188,6 @@
                 throw new Error(`Image shape not initialized`);
             }
             await this.#engine.loadImage(container, {
-                gif: imageShape.gif,
                 name: imageShape.name,
                 replaceColor: imageShape.replaceColor,
                 src: imageShape.src,
@@ -7593,7 +7196,6 @@
     }
 
     class Preload {
-        gif = false;
         height;
         name;
         replaceColor;
@@ -7603,7 +7205,6 @@
             if (isNull(data)) {
                 return;
             }
-            loadProperty(this, "gif", data.gif);
             loadProperty(this, "height", data.height);
             loadProperty(this, "name", data.name);
             loadProperty(this, "replaceColor", data.replaceColor);
@@ -7670,7 +7271,6 @@
             }
             try {
                 const image = {
-                    gif: data.gif,
                     name: data.name ?? data.src,
                     source: data.src,
                     type: data.src.substring(data.src.length - extLength),
@@ -7682,10 +7282,7 @@
                 containerImages.push(image);
                 engine.images.set(container, containerImages);
                 let imageFunc;
-                if (data.gif) {
-                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
-                }
-                else if (data.replaceColor) {
+                if (data.replaceColor) {
                     imageFunc = downloadSvgImage;
                 }
                 else {
@@ -7699,7 +7296,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -7844,7 +7441,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -7870,7 +7467,7 @@
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -7954,7 +7551,7 @@
     }
 
     async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("particlesAttract", container => {
@@ -8164,7 +7761,7 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -8418,7 +8015,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -8508,19 +8105,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         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.3.0");
         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.3.0");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -8625,7 +8222,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -8649,7 +8246,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -8683,14 +8280,14 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         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.3.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractivityForSlim = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -8807,7 +8404,7 @@
     }
 
     async function loadTextShape(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new TextDrawer()));
         });
@@ -8916,7 +8513,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -9020,7 +8617,7 @@
     }
 
     async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("twinkle", container => {
                 return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
@@ -9122,7 +8719,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -9131,7 +8728,7 @@
     }
 
     async function loadFull(engine) {
-        engine.checkVersion("4.2.0");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersPluginBundle = async (e) => {
                 await loadEmittersPlugin(e);
@@ -9172,10 +8769,10 @@
         }
     }
     class RenderManager {
+        #backgroundElement;
+        #backgroundWarnings;
         #canvasClearPlugins;
         #canvasManager;
-        #canvasPaintPlugins;
-        #clearDrawPlugins;
         #colorPlugins;
         #container;
         #context;
@@ -9183,9 +8780,7 @@
         #drawParticlePlugins;
         #drawParticlesCleanupPlugins;
         #drawParticlesSetupPlugins;
-        #drawPlugins;
-        #drawSettingsCleanupPlugins;
-        #drawSettingsSetupPlugins;
+        #layers;
         #pluginManager;
         #postDrawUpdaters;
         #preDrawUpdaters;
@@ -9197,18 +8792,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;
@@ -9222,32 +8824,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;
@@ -9304,21 +8912,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);
                 }
             });
@@ -9326,29 +8953,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);
                 }
@@ -9358,17 +8980,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);
                 }
             }
         }
@@ -9386,7 +9011,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;
@@ -9559,6 +9184,9 @@
             }
             drawer.beforeDraw(data);
         }
+        #getLayerPlugins(layer) {
+            return this.#layers[layer];
+        }
         #getPluginParticleColors(particle) {
             let fColor, sColor;
             for (const plugin of this.#colorPlugins) {
@@ -9576,6 +9204,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) => {
@@ -10152,7 +9813,6 @@
     }
     class Particle {
         backColor;
-        bubble;
         destroyed;
         direction;
         effect;
@@ -10186,7 +9846,6 @@
         shapeData;
         sides;
         size;
-        slow;
         spawning;
         strokeColor;
         strokeOpacity;
@@ -10208,18 +9867,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) {
@@ -10241,13 +9907,16 @@
             return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
         }
         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;
         }
+        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;
@@ -10260,7 +9929,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();
@@ -10269,7 +9938,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;
@@ -10289,13 +9958,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();
@@ -10335,11 +9997,29 @@
         isVisible() {
             return !this.destroyed && !this.spawning && this.isInsideCanvas();
         }
+        removeModifier(id) {
+            const idx = this.#modifiers.findIndex(m => m.id === id);
+            if (idx >= defaultAngle) {
+                this.#modifiers.splice(idx, identity$2);
+            }
+        }
         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;
@@ -12225,6 +11905,7 @@
     });
 
     class BlendPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #defaultCompositeValue;
         constructor(container) {
@@ -12370,7 +12051,8 @@
         particle.lastPathTime -= pathDelay;
     }
     function getProximitySpeedFactor(particle) {
-        return particle.slow.inRange ? particle.slow.factor : identity$2;
+        const mod = particle.getModifier("slow");
+        return mod?.enabled ? (mod.speedFactor ?? identity$2) : identity$2;
     }
     function initSpin(container, particle) {
         const options = particle.options, spinOptions = options.move.spin;
@@ -13387,6 +13069,7 @@
     exports.hPhase = hPhase;
     exports.half = half;
     exports.hslToRgb = hslToRgb;
+    exports.hslToRgbFloat = hslToRgbFloat;
     exports.hslaToRgba = hslaToRgba;
     exports.identity = identity$2;
     exports.inverseFactorNumerator = inverseFactorNumerator;