@tsparticles/confetti 4.2.1 → 4.3.1

package/tsparticles.confetti.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.1 */
+/* tsParticles v4.3.1 */
 (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.1";
+            return "4.3.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
+            ? 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$2, 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$2, 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$2).toString()})`;
     }
     function getStyleFromHsl(color, hdr, opacity) {
-        const op = opacity ?? defaultOpacity$2, 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$2, 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 {
@@ -2220,7 +2253,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2257,7 +2290,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2305,7 +2338,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2358,7 +2391,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2382,7 +2415,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -2598,7 +2631,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -2943,7 +2976,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3008,13 +3041,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.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3069,7 +3102,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3154,7 +3187,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3163,7 +3196,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3190,19 +3223,19 @@
         SegmentType["ellipse"] = "ellipse";
     })(SegmentType || (SegmentType = {}));
 
-    const firstIndex$1 = 0, index2 = 1, index3 = 2, index4 = 3;
+    const firstIndex = 0, index2 = 1, index3 = 2, index4 = 3;
     function drawPath(ctx, radius, path) {
-        const firstSegment = path.segments[firstIndex$1];
+        const firstSegment = path.segments[firstIndex];
         if (!firstSegment) {
             return;
         }
-        const firstValue = firstSegment.values[firstIndex$1];
+        const firstValue = firstSegment.values[firstIndex];
         if (!firstValue) {
             return;
         }
         ctx.moveTo(firstValue.x * radius, firstValue.y * radius);
         for (const segment of path.segments) {
-            const value = segment.values[firstIndex$1];
+            const value = segment.values[firstIndex];
             if (!value) {
                 continue;
             }
@@ -3249,7 +3282,7 @@
             if (!segment) {
                 continue;
             }
-            const value = segment.values[firstIndex$1], index2 = 1, index3 = 2, segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3];
+            const value = segment.values[firstIndex], index2 = 1, index3 = 2, segmentValue2 = segment.values[index2], segmentValue3 = segment.values[index3];
             switch (segment.type) {
                 case SegmentType.line:
                     if (!value) {
@@ -3463,7 +3496,7 @@
     }
 
     async function loadClubsSuitShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
         });
@@ -3477,7 +3510,7 @@
     }
 
     async function loadDiamondsSuitShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
         });
@@ -3491,7 +3524,7 @@
     };
 
     async function loadHeartsSuitShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer$1()));
         });
@@ -3505,14 +3538,14 @@
     }
 
     async function loadSpadesSuitShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
         });
     }
 
     async function loadCardSuitsShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await Promise.all([
             loadClubsSuitShape(engine),
             loadDiamondsSuitShape(engine),
@@ -3727,7 +3760,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3829,7 +3862,7 @@
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -3855,7 +3888,7 @@
     }
 
     async function loadHeartShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart"], () => Promise.resolve(new HeartDrawer()));
         });
@@ -3914,7 +3947,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,
@@ -3949,495 +3981,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 = 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].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;
-                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$2 = 12;
     class ImageDrawer {
         #container;
@@ -4452,10 +3995,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,
@@ -4524,9 +4064,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),
                         replaceColor: replaceColor,
@@ -4549,7 +4086,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,
@@ -4558,7 +4094,6 @@
     }
 
     class Preload {
-        gif = false;
         height;
         name;
         replaceColor;
@@ -4568,7 +4103,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);
@@ -4635,7 +4169,6 @@
             }
             try {
                 const image = {
-                    gif: data.gif,
                     name: data.name ?? data.src,
                     source: data.src,
                     type: data.src.substring(data.src.length - extLength),
@@ -4647,10 +4180,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 {
@@ -4664,7 +4194,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -4809,7 +4339,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -4863,7 +4393,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -4948,19 +4478,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
     async function loadTriangleShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
         });
     }
     async function loadPolygonShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -5094,7 +4624,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -5200,7 +4730,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -5224,7 +4754,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -5258,7 +4788,7 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["star"], () => Promise.resolve(new StarDrawer()));
         });
@@ -5367,7 +4897,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -5469,7 +4999,7 @@
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -5874,7 +5404,7 @@
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBasic(e),
@@ -5947,7 +5477,7 @@
     confetti.init = async () => {
         await initPlugins(tsParticles);
     };
-    confetti.version = "4.2.1";
+    confetti.version = "4.3.1";
     globalThis.confetti = confetti;
 
     const globalObject = globalThis;
@@ -5962,10 +5492,10 @@
         }
     }
     class RenderManager {
+        #backgroundElement;
+        #backgroundWarnings;
         #canvasClearPlugins;
         #canvasManager;
-        #canvasPaintPlugins;
-        #clearDrawPlugins;
         #colorPlugins;
         #container;
         #context;
@@ -5973,9 +5503,7 @@
         #drawParticlePlugins;
         #drawParticlesCleanupPlugins;
         #drawParticlesSetupPlugins;
-        #drawPlugins;
-        #drawSettingsCleanupPlugins;
-        #drawSettingsSetupPlugins;
+        #layers;
         #pluginManager;
         #postDrawUpdaters;
         #preDrawUpdaters;
@@ -5987,18 +5515,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;
@@ -6012,32 +5547,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;
@@ -6094,21 +5635,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);
                 }
             });
@@ -6116,29 +5676,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);
                 }
@@ -6148,17 +5703,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);
                 }
             }
         }
@@ -6176,7 +5734,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;
@@ -6349,6 +5907,9 @@
             }
             drawer.beforeDraw(data);
         }
+        #getLayerPlugins(layer) {
+            return this.#layers[layer];
+        }
         #getPluginParticleColors(particle) {
             let fColor, sColor;
             for (const plugin of this.#colorPlugins) {
@@ -6366,6 +5927,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) => {
@@ -6942,7 +6536,6 @@
     }
     class Particle {
         backColor;
-        bubble;
         destroyed;
         direction;
         effect;
@@ -6976,7 +6569,6 @@
         shapeData;
         sides;
         size;
-        slow;
         spawning;
         strokeColor;
         strokeOpacity;
@@ -6998,18 +6590,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) {
@@ -7031,13 +6630,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$2), fillOpacity = this.fillOpacity ?? defaultOpacity$2, strokeOpacity = this.strokeOpacity ?? defaultOpacity$2;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$2), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$2, strokeOpacity = this.strokeOpacity ?? defaultOpacity$2;
             this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
             this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
@@ -7050,7 +6652,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();
@@ -7059,7 +6661,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;
@@ -7079,13 +6681,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();
@@ -7125,11 +6720,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;
@@ -8231,6 +7844,7 @@
     });
 
     class BlendPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #defaultCompositeValue;
         constructor(container) {
@@ -8376,7 +7990,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;
@@ -9179,6 +8794,7 @@
     exports.hPhase = hPhase;
     exports.half = half;
     exports.hslToRgb = hslToRgb;
+    exports.hslToRgbFloat = hslToRgbFloat;
     exports.hslaToRgba = hslaToRgba;
     exports.identity = identity$2;
     exports.inverseFactorNumerator = inverseFactorNumerator;