@tsparticles/all 4.2.1 → 4.3.0

package/tsparticles.all.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* tsParticles v4.2.1 */
+/* 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];
@@ -1112,6 +1110,18 @@
         AnimationStatus["decreasing"] = "decreasing";
     })(exports.AnimationStatus || (exports.AnimationStatus = {}));
 
+    exports.DrawLayer = void 0;
+    (function (DrawLayer) {
+        DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
+        DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
+        DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
+        DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
+        DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
+        DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
+        DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
+        DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
+    })(exports.DrawLayer || (exports.DrawLayer = {}));
+
     class OptionLoader {
         load(data) {
             if (isNull(data)) {
@@ -1270,6 +1280,8 @@
 
     class Background extends OptionLoader {
         color;
+        draw;
+        element;
         image = "";
         opacity = 1;
         position = "";
@@ -1284,6 +1296,8 @@
             if (data.color !== undefined) {
                 this.color = OptionsColor.create(this.color, data.color);
             }
+            loadProperty(this, "element", data.element);
+            loadProperty(this, "draw", data.draw);
             loadProperty(this, "image", data.image);
             loadProperty(this, "position", data.position);
             loadProperty(this, "repeat", data.repeat);
@@ -1829,7 +1843,7 @@
         }
     }
 
-    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, sdrReferenceWhiteNits = 203;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203, hdrAnimationScale = sdrReferenceWhiteNits / maxNits;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
@@ -1972,6 +1986,17 @@
             : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
         return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
     }
+    function hslToRgbFloat(hsl) {
+        const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
+        if (s === sMin) {
+            const grayscaleValue = lNormalized * rgbMax;
+            return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
+        }
+        const temp1 = lNormalized < half$2
+            ? lNormalized * (sNormalizedOffset + sNormalized)
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
+        return { r: red, g: green, b: blue };
+    }
     function hslaToRgba(hsla) {
         const rgbResult = hslToRgb(hsla);
         return {
@@ -1981,8 +2006,16 @@
             r: rgbResult.r,
         };
     }
-    function getRandomRgbColor(min) {
-        const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity$3, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
+    function getRandomRgbColor(min, hdr) {
+        const fixedMin = min ?? defaultRgbMin;
+        if (hdr) {
+            return {
+                r: getRandomInRange(fixedMin, rgbMax),
+                g: getRandomInRange(fixedMin, rgbMax),
+                b: getRandomInRange(fixedMin, rgbMax),
+            };
+        }
+        const fixedMax = rgbMax + identity$3, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
         return {
             b: getRgbInRangeValue(),
             g: getRgbInRangeValue(),
@@ -1990,7 +2023,7 @@
         };
     }
     function getStyleFromRgb(color, hdr, opacity) {
-        const op = opacity ?? defaultOpacity$3, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? defaultOpacity$3, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
         return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
     }
     function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
@@ -2001,9 +2034,9 @@
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$3).toString()})`;
     }
     function getStyleFromHsl(color, hdr, opacity) {
-        const op = opacity ?? defaultOpacity$3, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+        const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? defaultOpacity$3, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
         return getCachedStyle(key, () => hdr
-            ? getStyleFromRgb(hslToRgb(color), true, opacity)
+            ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
             : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
     function colorMix(color1, color2, size1, size2) {
@@ -2123,7 +2156,7 @@
             colorValue.velocity = defaultVelocity;
         }
     }
-    function updateColorValue(data, decrease, delta) {
+    function updateColorValue(data, decrease, delta, hdr) {
         const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
         if (!data.enable ||
             ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -2136,7 +2169,7 @@
         if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
             return;
         }
-        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
+        const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = ((data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor) * (hdr ? hdrAnimationScale : identity), decay = data.decay ?? identity, max = data.max, min = data.min;
         if (!decrease || data.status === exports.AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -2163,14 +2196,14 @@
         }
         data.value = clamp(data.value, min, max);
     }
-    function updateColor(color, delta) {
+    function updateColor(color, delta, hdr) {
         if (!color) {
             return;
         }
         const { h, s, l } = color;
-        updateColorValue(h, false, delta);
-        updateColorValue(s, true, delta);
-        updateColorValue(l, true, delta);
+        updateColorValue(h, false, delta, hdr);
+        updateColorValue(s, true, delta, hdr);
+        updateColorValue(l, true, delta, hdr);
     }
     function alterHsl(color, type, value) {
         return {
@@ -2218,6 +2251,8 @@
 
     class BackgroundMaskCover {
         color;
+        draw;
+        element;
         image;
         opacity = 1;
         load(data) {
@@ -2227,6 +2262,8 @@
             if (data.color !== undefined) {
                 this.color = OptionsColor.create(this.color, data.color);
             }
+            loadProperty(this, "draw", data.draw);
+            loadProperty(this, "element", data.element);
             loadProperty(this, "image", data.image);
             loadProperty(this, "opacity", data.opacity);
         }
@@ -2243,7 +2280,12 @@
             loadProperty(this, "composite", data.composite);
             if (data.cover !== undefined) {
                 const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
-                this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
+                this.cover.load(cover.color !== undefined ||
+                    cover.draw !== undefined ||
+                    cover.element !== undefined ||
+                    cover.image !== undefined
+                    ? cover
+                    : { color: color });
             }
             loadProperty(this, "enable", data.enable);
         }
@@ -11108,8 +11150,8 @@
             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);
         }
     }
 
@@ -11862,6 +11904,19 @@
         }
     }
 
+    class BubbleModifier {
+        div;
+        enabled = false;
+        fillColor;
+        finalColor;
+        id = "bubble";
+        inRange = false;
+        opacity;
+        priority = 100;
+        radius;
+        strokeColor;
+    }
+
     var ProcessBubbleType;
     (function (ProcessBubbleType) {
         ProcessBubbleType["color"] = "color";
@@ -11885,6 +11940,7 @@
     class Bubbler extends ExternalInteractorBase {
         handleClickMode;
         #maxDistance;
+        #modifiers = new WeakMap();
         #pluginManager;
         constructor(pluginManager, container) {
             super(container);
@@ -11903,13 +11959,21 @@
             return this.#maxDistance;
         }
         clear(particle, _delta, force) {
-            if (particle.bubble.inRange && !force) {
+            const mod = this.#modifiers.get(particle);
+            if (mod?.inRange && !force) {
                 return;
             }
-            delete particle.bubble.div;
-            delete particle.bubble.opacity;
-            delete particle.bubble.radius;
-            delete particle.bubble.color;
+            particle.removeModifier(bubbleMode);
+            this.#modifiers.delete(particle);
+        }
+        getOrCreateModifier(particle) {
+            let mod = this.#modifiers.get(particle);
+            if (!mod) {
+                mod = new BubbleModifier();
+                this.#modifiers.set(particle, mod);
+                particle.addModifier(mod);
+            }
+            return mod;
         }
         init() {
             const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;
@@ -11955,7 +12019,11 @@
             loadOptionProperty(options, "bubble", Bubble, ...sources);
         }
         reset(_interactivityData, particle) {
-            particle.bubble.inRange = false;
+            const mod = this.#modifiers.get(particle);
+            if (mod) {
+                mod.enabled = false;
+                mod.inRange = false;
+            }
         }
         #clickBubble(interactivityData) {
             const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
@@ -11972,7 +12040,9 @@
                 if (!bubble.clicking) {
                     continue;
                 }
-                particle.bubble.inRange = !bubble.durationEnd;
+                const mod = this.getOrCreateModifier(particle);
+                mod.enabled = !bubble.durationEnd;
+                mod.inRange = !bubble.durationEnd;
                 const pos = particle.getPosition(), distMouse = getDistance(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / millisecondsToSeconds$1;
                 if (timeSpent > bubbleOptions.duration) {
                     bubble.durationEnd = true;
@@ -11984,7 +12054,7 @@
                 const sizeData = {
                     bubbleObj: {
                         optValue: container.retina.bubbleModeSize,
-                        value: particle.bubble.radius,
+                        value: mod.radius,
                     },
                     particlesObj: {
                         optValue: particle.size.max,
@@ -11996,7 +12066,7 @@
                 const opacityData = {
                     bubbleObj: {
                         optValue: bubbleOptions.opacity,
-                        value: particle.bubble.opacity,
+                        value: mod.opacity,
                     },
                     particlesObj: {
                         optValue: particle.opacity?.max ?? defaultOpacity$1,
@@ -12009,7 +12079,8 @@
                     this.#hoverBubbleColor(particle, distMouse);
                 }
                 else {
-                    delete particle.bubble.color;
+                    mod.fillColor = undefined;
+                    mod.strokeColor = undefined;
                 }
             }
         }
@@ -12020,7 +12091,9 @@
             }
             const query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
             for (const particle of query) {
-                particle.bubble.inRange = true;
+                const mod = this.getOrCreateModifier(particle);
+                mod.enabled = true;
+                mod.inRange = true;
                 const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
                 if (pointDistance <= distance) {
                     if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
@@ -12038,30 +12111,38 @@
             }
         }
         #hoverBubbleColor(particle, ratio, divBubble) {
-            const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
+            const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble, mod = this.getOrCreateModifier(particle);
             if (!bubbleOptions) {
                 return;
             }
-            if (!particle.bubble.finalColor) {
+            if (!mod.finalColor) {
                 const modeColor = bubbleOptions.color;
                 if (!modeColor) {
                     return;
                 }
                 const bubbleColor = itemFromSingleOrMultiple(modeColor);
-                particle.bubble.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
+                mod.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
             }
-            if (!particle.bubble.finalColor) {
+            if (!mod.finalColor) {
                 return;
             }
             if (bubbleOptions.mix) {
-                particle.bubble.color = undefined;
+                mod.fillColor = undefined;
+                mod.strokeColor = undefined;
                 const pColor = particle.getFillColor();
-                particle.bubble.color = pColor
-                    ? rgbToHsl(colorMix(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
-                    : particle.bubble.finalColor;
+                if (pColor) {
+                    const mixedColor = rgbToHsl(colorMix(pColor, mod.finalColor, ratioOffset - ratio, ratio));
+                    mod.fillColor = mixedColor;
+                    mod.strokeColor = mixedColor;
+                }
+                else {
+                    mod.fillColor = mod.finalColor;
+                    mod.strokeColor = mod.finalColor;
+                }
             }
             else {
-                particle.bubble.color = particle.bubble.finalColor;
+                mod.fillColor = mod.finalColor;
+                mod.strokeColor = mod.finalColor;
             }
         }
         #hoverBubbleOpacity(particle, ratio, divBubble) {
@@ -12071,7 +12152,8 @@
             }
             const pOpacity = particle.opacity?.value ?? defaultOpacity$1, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity$1, ratio);
             if (opacity !== undefined) {
-                particle.bubble.opacity = opacity;
+                const mod = this.getOrCreateModifier(particle);
+                mod.opacity = opacity;
             }
         }
         #hoverBubbleSize(particle, ratio, divBubble) {
@@ -12081,7 +12163,8 @@
             }
             const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
             if (size !== undefined) {
-                particle.bubble.radius = size;
+                const mod = this.getOrCreateModifier(particle);
+                mod.radius = size;
             }
         }
         #process(particle, distMouse, timeSpent, data) {
@@ -12094,13 +12177,14 @@
                 return;
             }
             container.bubble ??= {};
+            const mod = this.getOrCreateModifier(particle);
             if (container.bubble.durationEnd) {
                 if (pObjBubble) {
                     if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
+                        mod.radius = undefined;
                     }
                     if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
+                        mod.opacity = undefined;
                     }
                 }
             }
@@ -12110,19 +12194,19 @@
                     if (obj !== bubbleParam) {
                         const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
                         if (type === ProcessBubbleType.size) {
-                            particle.bubble.radius = value;
+                            mod.radius = value;
                         }
                         if (type === ProcessBubbleType.opacity) {
-                            particle.bubble.opacity = value;
+                            mod.opacity = value;
                         }
                     }
                 }
                 else {
                     if (type === ProcessBubbleType.size) {
-                        delete particle.bubble.radius;
+                        mod.radius = undefined;
                     }
                     if (type === ProcessBubbleType.opacity) {
-                        delete particle.bubble.opacity;
+                        mod.opacity = undefined;
                     }
                 }
             }
@@ -12143,11 +12227,13 @@
                     if (!area.contains(particle.getPosition())) {
                         continue;
                     }
-                    particle.bubble.inRange = true;
+                    const mod = this.getOrCreateModifier(particle);
+                    mod.enabled = true;
+                    mod.inRange = true;
                     const divs = bubble.divs, divBubble = divMode(divs, elem);
-                    if (!particle.bubble.div || particle.bubble.div !== elem) {
+                    if (!mod.div || mod.div !== elem) {
                         this.clear(particle, delta, true);
-                        particle.bubble.div = elem;
+                        mod.div = elem;
                     }
                     this.#hoverBubbleSize(particle, defaultRatio, divBubble);
                     this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
@@ -13081,9 +13167,17 @@
         }
     }
 
+    class SlowModifier {
+        enabled = false;
+        id = "slow";
+        priority = 100;
+        speedFactor = 1;
+    }
+
     const slowMode = "slow", minRadius$3 = 0;
     class Slower extends ExternalInteractorBase {
         #maxDistance;
+        #modifiers = new WeakMap();
         constructor(container) {
             super(container);
             this.#maxDistance = 0;
@@ -13092,10 +13186,21 @@
             return this.#maxDistance;
         }
         clear(particle, _delta, force) {
-            if (particle.slow.inRange && !force) {
+            const mod = this.#modifiers.get(particle);
+            if (mod?.enabled && !force) {
                 return;
             }
-            particle.slow.factor = 1;
+            particle.removeModifier(slowMode);
+            this.#modifiers.delete(particle);
+        }
+        getOrCreateModifier(particle) {
+            let mod = this.#modifiers.get(particle);
+            if (!mod) {
+                mod = new SlowModifier();
+                this.#modifiers.set(particle, mod);
+                particle.addModifier(mod);
+            }
+            return mod;
         }
         init() {
             const container = this.container, slow = container.actualOptions.interactivity?.modes.slow;
@@ -13115,17 +13220,21 @@
             loadOptionProperty(options, "slow", Slow, ...sources);
         }
         reset(interactivityData, particle) {
-            particle.slow.inRange = false;
+            const mod = this.#modifiers.get(particle);
+            if (mod) {
+                mod.enabled = false;
+            }
             const container = this.container, options = container.actualOptions, mousePos = interactivityData.mouse.position, radius = container.retina.slowModeRadius, slowOptions = options.interactivity?.modes.slow;
             if (!slowOptions || !radius || radius < minRadius$3 || !mousePos) {
                 return;
             }
-            const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor, { slow } = particle;
+            const particlePos = particle.getPosition(), dist = getDistance(mousePos, particlePos), proximityFactor = dist / radius, slowFactor = slowOptions.factor;
             if (dist > radius) {
                 return;
             }
-            slow.inRange = true;
-            slow.factor = proximityFactor / slowFactor;
+            const activeMod = this.getOrCreateModifier(particle);
+            activeMod.enabled = true;
+            activeMod.speedFactor = proximityFactor / slowFactor;
         }
     }
 
@@ -13192,7 +13301,6 @@
     function replaceImageColor(image, imageData, color, particle, hdr = false) {
         const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {
             color,
-            gif: imageData.gif,
             data: {
                 ...image,
                 svgData: svgColoredData,
@@ -13227,932 +13335,827 @@
         });
     }
 
-    const InterlaceOffsets = [0, 4, 2, 1];
-    const InterlaceSteps = [8, 8, 4, 2];
-
-    class ByteStream {
-        data;
-        pos;
-        constructor(bytes) {
-            this.pos = 0;
-            this.data = new Uint8ClampedArray(bytes);
-        }
-        getString(count) {
-            const slice = this.data.slice(this.pos, this.pos + count);
-            this.pos += slice.length;
-            return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
-        }
-        nextByte() {
-            return this.data[this.pos++];
+    const sides$3 = 12;
+    class ImageDrawer {
+        #container;
+        #engine;
+        constructor(engine, container) {
+            this.#engine = engine;
+            this.#container = container;
         }
-        nextTwoBytes() {
-            const increment = 2, previous = 1, shift = 8;
-            this.pos += increment;
-            return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
+        draw(data) {
+            const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
+            if (!image) {
+                return;
+            }
+            context.globalAlpha = opacity;
+            if (element) {
+                const ratio = image.ratio, pos = {
+                    x: -radius,
+                    y: -radius,
+                }, diameter = radius * double;
+                context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
+            }
+            context.globalAlpha = defaultAlpha$1;
         }
-        readSubBlocks() {
-            let blockString = "", size;
-            const minCount = 0, emptySize = 0;
-            do {
-                size = this.data[this.pos++];
-                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
-                }
-            } while (size !== emptySize);
-            return blockString;
+        getSidesCount() {
+            return sides$3;
         }
-        readSubBlocksBin() {
-            let size = this.data[this.pos], len = 0;
-            const emptySize = 0, increment = 1;
-            for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
-                len += size;
+        async init(container) {
+            const options = container.actualOptions;
+            if (!options.preload || !this.#engine.loadImage) {
+                return;
             }
-            const blockData = new Uint8Array(len);
-            size = this.data[this.pos++];
-            for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
-                for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
-                }
+            const promises = [];
+            for (const imageData of options.preload) {
+                promises.push(this.#engine.loadImage(container, imageData));
             }
-            return blockData;
+            await Promise.all(promises);
         }
-        skipSubBlocks() {
-            for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
+        loadShape(particle) {
+            const container = this.#container;
+            if (!particle.shape || !shapeTypes.includes(particle.shape)) {
+                return;
             }
-            this.pos++;
-        }
-    }
-
-    var DisposalMethod;
-    (function (DisposalMethod) {
-        DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
-        DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
-        DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
-        DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
-        DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
-        DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
-        DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
-        DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
-    })(DisposalMethod || (DisposalMethod = {}));
-
-    var GIFDataHeaders;
-    (function (GIFDataHeaders) {
-        GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
-        GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
-        GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
-        GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
-        GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
-        GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
-        GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
-    })(GIFDataHeaders || (GIFDataHeaders = {}));
-
-    const defaultFrame = 0, initialTime = 0, firstIndex$3 = 0, defaultLoopCount = 0;
-    function parseColorTable(byteStream, count) {
-        const colors = [];
-        for (let i = 0; i < count; i++) {
-            colors.push({
-                r: byteStream.data[byteStream.pos],
-                g: byteStream.data[byteStream.pos + 1],
-                b: byteStream.data[byteStream.pos + 2],
+            const imageData = particle.shapeData;
+            if (!imageData) {
+                return;
+            }
+            const images = this.#engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (image) {
+                return;
+            }
+            void this.#loadImageShape(container, imageData).then(() => {
+                this.loadShape(particle);
             });
-            byteStream.pos += 3;
         }
-        return colors;
-    }
-    function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
-        switch (byteStream.nextByte()) {
-            case GIFDataHeaders.GraphicsControlExtension: {
-                const frame = gif.frames[getFrameIndex(false)];
-                byteStream.pos++;
-                const packedByte = byteStream.nextByte();
-                frame.GCreserved = (packedByte & 0xe0) >>> 5;
-                frame.disposalMethod = (packedByte & 0x1c) >>> 2;
-                frame.userInputDelayFlag = (packedByte & 2) === 2;
-                const transparencyFlag = (packedByte & 1) === 1;
-                frame.delayTime = byteStream.nextTwoBytes() * 0xa;
-                const transparencyIndex = byteStream.nextByte();
-                if (transparencyFlag) {
-                    getTransparencyIndex(transparencyIndex);
-                }
-                byteStream.pos++;
-                break;
+        particleInit(container, particle) {
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
             }
-            case GIFDataHeaders.ApplicationExtension: {
-                byteStream.pos++;
-                const applicationExtension = {
-                    identifier: byteStream.getString(8),
-                    authenticationCode: byteStream.getString(3),
-                    data: byteStream.readSubBlocksBin(),
-                };
-                gif.applicationExtensions.push(applicationExtension);
-                break;
+            const images = this.#engine.getImages?.(container), imageData = particle.shapeData;
+            if (!imageData) {
+                return;
             }
-            case GIFDataHeaders.CommentExtension: {
-                gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
-                break;
+            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (!image) {
+                return;
             }
-            case GIFDataHeaders.PlainTextExtension: {
-                if (gif.globalColorTable.length === 0) {
-                    throw new EvalError("plain text extension without global color table");
+            const replaceColor = imageData.replaceColor;
+            if (image.loading) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
+                return;
+            }
+            void (async () => {
+                let imageRes;
+                if (image.svgData && color) {
+                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
                 }
-                byteStream.pos++;
-                gif.frames[getFrameIndex(false)].plainTextData = {
-                    left: byteStream.nextTwoBytes(),
-                    top: byteStream.nextTwoBytes(),
-                    width: byteStream.nextTwoBytes(),
-                    height: byteStream.nextTwoBytes(),
-                    charSize: {
-                        width: byteStream.nextTwoBytes(),
-                        height: byteStream.nextTwoBytes(),
-                    },
-                    foregroundColor: byteStream.nextByte(),
-                    backgroundColor: byteStream.nextByte(),
-                    text: byteStream.readSubBlocks(),
+                else {
+                    imageRes = {
+                        color,
+                        data: image,
+                        element: image.element,
+                        loaded: true,
+                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? defaultRatio$1),
+                        replaceColor: replaceColor,
+                        source: imageData.src,
+                    };
+                }
+                if (!imageRes.ratio) {
+                    imageRes.ratio = 1;
+                }
+                const close = imageData.close ?? particle.shapeClose, imageShape = {
+                    image: imageRes,
+                    close,
                 };
-                break;
-            }
-            default:
-                byteStream.skipSubBlocks();
-                break;
+                particle.image = imageShape.image;
+                particle.shapeClose = imageShape.close;
+            })();
         }
+        #loadImageShape = async (container, imageShape) => {
+            if (!this.#engine.loadImage) {
+                throw new Error(`Image shape not initialized`);
+            }
+            await this.#engine.loadImage(container, {
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor,
+                src: imageShape.src,
+            });
+        };
     }
-    function readBits(imageData, pos, len) {
-        const bytePos = pos >>> 3, bitPos = pos & 7;
-        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
-            (((1 << len) - 1) << bitPos)) >>>
-            bitPos);
-    }
-    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
-        const frame = gif.frames[getFrameIndex(true)];
-        frame.left = byteStream.nextTwoBytes();
-        frame.top = byteStream.nextTwoBytes();
-        frame.width = byteStream.nextTwoBytes();
-        frame.height = byteStream.nextTwoBytes();
-        const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
-        frame.sortFlag = (packedByte & 0x20) === 0x20;
-        frame.reserved = (packedByte & 0x18) >>> 3;
-        const localColorCount = 1 << ((packedByte & 7) + 1);
-        if (localColorTableFlag) {
-            frame.localColorTable = parseColorTable(byteStream, localColorCount);
-        }
-        const getColor = (index) => {
-            const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
-            if (index !== getTransparencyIndex(null)) {
-                return { r, g, b, a: 255 };
+
+    class Preload {
+        height;
+        name;
+        replaceColor;
+        src = "";
+        width;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
-        }, image = (() => {
-            try {
-                return new ImageData(frame.width, frame.height, canvasSettings);
+            loadProperty(this, "height", data.height);
+            loadProperty(this, "name", data.name);
+            loadProperty(this, "replaceColor", data.replaceColor);
+            loadProperty(this, "src", data.src);
+            loadProperty(this, "width", data.width);
+        }
+    }
+
+    class ImagePreloaderPlugin {
+        id = "image-preloader";
+        #engine;
+        constructor(engine) {
+            this.#engine = engine;
+        }
+        async getPlugin(container) {
+            const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
+            return new ImagePreloaderInstance(this.#engine, container);
+        }
+        loadOptions(_container, options, source) {
+            if (!source?.preload) {
+                return;
             }
-            catch (error) {
-                if (error instanceof DOMException && error.name === "IndexSizeError") {
-                    return null;
+            options.preload ??= [];
+            const preloadOptions = options.preload;
+            for (const item of source.preload) {
+                const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
+                if (existing) {
+                    existing.load(item);
                 }
-                throw error;
-            }
-        })();
-        if (image == null) {
-            throw new EvalError("GIF frame size is to large");
-        }
-        const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
-        if (interlacedFlag) {
-            for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
-                if (InterlaceOffsets[pass] < frame.height) {
-                    let pixelPos = 0, lineIndex = 0, exit = false;
-                    while (!exit) {
-                        const last = code;
-                        code = readBits(imageData, pos, size);
-                        pos += size + 1;
-                        if (code === clearCode) {
-                            size = minCodeSize + 1;
-                            dic.length = clearCode + 2;
-                            for (let i = 0; i < dic.length; i++) {
-                                dic[i] = i < clearCode ? [i] : [];
-                            }
-                        }
-                        else {
-                            if (code >= dic.length) {
-                                dic.push(dic[last].concat(dic[last][0]));
-                            }
-                            else if (last !== clearCode) {
-                                dic.push(dic[last].concat(dic[code][0]));
-                            }
-                            for (const item of dic[code]) {
-                                const { r, g, b, a } = getColor(item);
-                                image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
-                                    InterlaceSteps[pass] * lineIndex +
-                                    (pixelPos % (frame.width * 4)));
-                                pixelPos += 4;
-                            }
-                            if (dic.length === 1 << size && size < 0xc) {
-                                size++;
-                            }
-                        }
-                        if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
-                            lineIndex++;
-                            if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
-                                exit = true;
-                            }
-                        }
-                    }
+                else {
+                    const preload = new Preload();
+                    preload.load(item);
+                    preloadOptions.push(preload);
                 }
             }
-            frame.image = image;
-            frame.bitmap = await createImageBitmap(image);
         }
-        else {
-            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
-            const dic = [[0]];
-            for (;;) {
-                const last = code;
-                code = readBits(imageData, pos, size);
-                pos += size;
-                if (code === clearCode) {
-                    size = minCodeSize + 1;
-                    dic.length = clearCode + 2;
-                    for (let i = 0; i < dic.length; i++) {
-                        dic[i] = i < clearCode ? [i] : [];
-                    }
+        needsPlugin() {
+            return true;
+        }
+    }
+
+    const extLength = 3;
+    function addLoadImageToEngine(engine) {
+        engine.getImages ??= (container) => {
+            engine.images ??= new Map();
+            let images = engine.images.get(container);
+            if (!images) {
+                images = [];
+                engine.images.set(container, images);
+            }
+            return images;
+        };
+        engine.loadImage ??= async (container, data) => {
+            if (!engine.getImages) {
+                throw new Error("No images collection found");
+            }
+            if (!data.name && !data.src) {
+                throw new Error("No image source provided");
+            }
+            engine.images ??= new Map();
+            const containerImages = engine.getImages(container);
+            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - extLength),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                containerImages.push(image);
+                engine.images.set(container, containerImages);
+                let imageFunc;
+                if (data.replaceColor) {
+                    imageFunc = downloadSvgImage;
                 }
                 else {
-                    if (code === clearCode + 1) {
-                        break;
-                    }
-                    if (code >= dic.length) {
-                        dic.push(dic[last].concat(dic[last][0]));
-                    }
-                    else if (last !== clearCode) {
-                        dic.push(dic[last].concat(dic[code][0]));
-                    }
-                    for (const item of dic[code]) {
-                        const { r, g, b, a } = getColor(item);
-                        pixelPos += 4;
-                        image.data.set([r, g, b, a], pixelPos);
-                    }
-                    if (dic.length >= 1 << size && size < 0xc) {
-                        size++;
-                    }
+                    imageFunc = loadImage;
                 }
+                await imageFunc(image);
             }
-            frame.image = image;
-            frame.bitmap = await createImageBitmap(image);
-        }
+            catch {
+                throw new Error(`${data.name ?? data.src} not found`);
+            }
+        };
     }
-    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
-        switch (byteStream.nextByte()) {
-            case GIFDataHeaders.EndOfFile:
-                return true;
-            case GIFDataHeaders.Image:
-                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings);
-                break;
-            case GIFDataHeaders.Extension:
-                parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
-                break;
-            default:
-                throw new EvalError("undefined block found");
-        }
-        return false;
+    async function loadImageShape(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            addLoadImageToEngine(e);
+            e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
+            e.pluginManager.addShape(shapeTypes, container => Promise.resolve(new ImageDrawer(e, container)));
+        });
     }
-    function getGIFLoopAmount(gif) {
-        for (const extension of gif.applicationExtensions) {
-            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
-                continue;
+
+    class LifeDelay extends ValueWithRandom {
+        sync = false;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            return extension.data[1] + (extension.data[2] << 8);
+            super.load(data);
+            loadProperty(this, "sync", data.sync);
         }
-        return Number.NaN;
     }
-    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
-        avgAlpha ??= false;
-        const res = await fetch(gifURL);
-        if (!res.ok && res.status === 404) {
-            throw new EvalError("file not found");
+
+    class LifeDuration extends ValueWithRandom {
+        sync = false;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            super.load(data);
+            loadProperty(this, "sync", data.sync);
         }
-        const buffer = await res.arrayBuffer(), gif = {
-            width: 0,
-            height: 0,
-            totalTime: 0,
-            colorRes: 0,
-            pixelAspectRatio: 0,
-            frames: [],
-            sortFlag: false,
-            globalColorTable: [],
-            backgroundImage: new ImageData(1, 1, canvasSettings),
-            comments: [],
-            applicationExtensions: [],
-        }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
-        if (byteStream.getString(6) !== "GIF89a") {
-            throw new Error("not a supported GIF file");
-        }
-        gif.width = byteStream.nextTwoBytes();
-        gif.height = byteStream.nextTwoBytes();
-        const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
-        gif.colorRes = (packedByte & 0x70) >>> 4;
-        gif.sortFlag = (packedByte & 8) === 8;
-        const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
-        gif.pixelAspectRatio = byteStream.nextByte();
-        if (gif.pixelAspectRatio !== 0) {
-            gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
-        }
-        if (globalColorTableFlag) {
-            gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
-        }
-        const backgroundImage = (() => {
-            try {
-                return new ImageData(gif.width, gif.height, canvasSettings);
-            }
-            catch (error) {
-                if (error instanceof DOMException && error.name === "IndexSizeError") {
-                    return null;
-                }
-                throw error;
+    }
+
+    class Life {
+        count = 0;
+        delay = new LifeDelay();
+        duration = new LifeDuration();
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-        })();
-        if (backgroundImage == null) {
-            throw new Error("GIF frame size is to large");
+            loadProperty(this, "count", data.count);
+            this.delay.load(data.delay);
+            this.duration.load(data.duration);
         }
-        const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
-        backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
-        for (let i = 4; i < backgroundImage.data.length; i *= 2) {
-            backgroundImage.data.copyWithin(i, 0, i);
+    }
+
+    const noTime$1 = 0, infiniteValue$1 = -1, noLife = 0, minCanvasSize = 0;
+    function updateLife(particle, delta, canvasSize) {
+        if (!particle.life) {
+            return;
         }
-        gif.backgroundImage = backgroundImage;
-        let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
-        const getframeIndex = (increment) => {
-            if (increment) {
-                incrementFrameIndex = true;
-            }
-            return frameIndex;
-        }, getTransparencyIndex = (newValue) => {
-            if (newValue != null) {
-                transparencyIndex = newValue;
-            }
-            return transparencyIndex;
-        };
-        try {
-            do {
-                if (incrementFrameIndex) {
-                    gif.frames.push({
-                        left: 0,
-                        top: 0,
-                        width: 0,
-                        height: 0,
-                        disposalMethod: DisposalMethod.Replace,
-                        image: new ImageData(1, 1, canvasSettings),
-                        plainTextData: null,
-                        userInputDelayFlag: false,
-                        delayTime: 0,
-                        sortFlag: false,
-                        localColorTable: [],
-                        reserved: 0,
-                        GCreserved: 0,
-                    });
-                    frameIndex++;
-                    transparencyIndex = -1;
-                    incrementFrameIndex = false;
-                }
-            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
-            gif.frames.length--;
-            for (const frame of gif.frames) {
-                if (frame.userInputDelayFlag && frame.delayTime === 0) {
-                    gif.totalTime = Infinity;
-                    break;
-                }
-                gif.totalTime += frame.delayTime;
+        const life = particle.life;
+        let justSpawned = false;
+        if (particle.spawning) {
+            life.delayTime += delta.value;
+            if (life.delayTime >= particle.life.delay) {
+                justSpawned = true;
+                particle.spawning = false;
+                life.delayTime = noTime$1;
+                life.time = noTime$1;
             }
-            return gif;
-        }
-        catch (error) {
-            if (error instanceof EvalError) {
-                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
+            else {
+                return;
             }
-            throw error;
         }
-    }
-    function drawGif(data, canvasSettings) {
-        const { context, radius, particle, delta } = data, image = particle.image;
-        if (!image?.gifData || !image.gif) {
+        if (life.duration === infiniteValue$1) {
             return;
         }
-        const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
-        if (!offscreenContext) {
-            throw new Error("could not create offscreen canvas context");
+        if (justSpawned) {
+            life.time = noTime$1;
         }
-        offscreenContext.imageSmoothingQuality = "low";
-        offscreenContext.imageSmoothingEnabled = false;
-        offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-        particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;
-        let frameIndex = particle.gifFrame ?? defaultFrame;
-        const pos = { x: -image.gifData.width * half$2, y: -image.gifData.height * half$2 }, frame = image.gifData.frames[frameIndex];
-        particle.gifTime ??= initialTime;
-        if (!frame.bitmap) {
-            return;
+        else {
+            life.time += delta.value;
         }
-        context.scale(radius / image.gifData.width, radius / image.gifData.height);
-        switch (frame.disposalMethod) {
-            case DisposalMethod.UndefinedA:
-            case DisposalMethod.UndefinedB:
-            case DisposalMethod.UndefinedC:
-            case DisposalMethod.UndefinedD:
-            case DisposalMethod.Replace:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                break;
-            case DisposalMethod.Combine:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                break;
-            case DisposalMethod.RestoreBackground:
-                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                context.drawImage(offscreenCanvas, pos.x, pos.y);
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                if (!image.gifData.globalColorTable.length) {
-                    offscreenContext.putImageData(image.gifData.frames[firstIndex$3].image, pos.x + frame.left, pos.y + frame.top);
-                }
-                else {
-                    offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
-                }
-                break;
-            case DisposalMethod.RestorePrevious:
-                {
-                    const previousImageData = offscreenContext.getImageData(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-                    offscreenContext.putImageData(previousImageData, originPoint.x, originPoint.y);
-                }
-                break;
+        if (life.time < life.duration) {
+            return;
         }
-        particle.gifTime += delta.value;
-        if (particle.gifTime > frame.delayTime) {
-            particle.gifTime -= frame.delayTime;
-            if (++frameIndex >= image.gifData.frames.length) {
-                if (--particle.gifLoopCount <= defaultLoopCount) {
-                    return;
-                }
-                frameIndex = firstIndex$3;
-                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
-            }
-            particle.gifFrame = frameIndex;
+        life.time = noTime$1;
+        if (particle.life.count > noLife) {
+            particle.life.count--;
         }
-        context.scale(image.gifData.width / radius, image.gifData.height / radius);
-    }
-    async function loadGifImage(image, canvasSettings) {
-        if (image.type !== "gif") {
-            await loadImage(image);
+        if (particle.life.count === noLife) {
+            particle.destroy();
             return;
         }
-        image.loading = true;
-        try {
-            image.gifData = await decodeGIF(image.source, canvasSettings);
-            image.gifLoopCount = getGIFLoopAmount(image.gifData);
-            if (!image.gifLoopCount) {
-                image.gifLoopCount = Infinity;
-            }
-        }
-        catch {
-            image.error = true;
+        const widthRange = setRangeValue(minCanvasSize, canvasSize.width), heightRange = setRangeValue(minCanvasSize, canvasSize.width);
+        particle.position.x = randomInRangeValue(widthRange);
+        particle.position.y = randomInRangeValue(heightRange);
+        particle.spawning = true;
+        life.delayTime = noTime$1;
+        life.time = noTime$1;
+        particle.reset();
+        const lifeOptions = particle.options.life;
+        if (lifeOptions) {
+            life.delay = getRangeValue(lifeOptions.delay.value) * millisecondsToSeconds$1;
+            life.duration = getRangeValue(lifeOptions.duration.value) * millisecondsToSeconds$1;
         }
-        image.loading = false;
     }
 
-    const sides$3 = 12;
-    class ImageDrawer {
+    const noTime = 0, identity$2 = 1, infiniteValue = -1;
+    class LifeUpdater {
         #container;
-        #engine;
-        constructor(engine, container) {
-            this.#engine = engine;
+        constructor(container) {
             this.#container = container;
         }
-        draw(data) {
-            const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
-            if (!image) {
+        init(particle) {
+            const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
+            if (!lifeOptions) {
                 return;
             }
-            context.globalAlpha = opacity;
-            if (image.gif && image.gifData) {
-                drawGif(data, this.#container.canvas.render.settings);
+            const delayFactor = lifeOptions.delay.sync ? identity$2 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$2 : getRandom();
+            particle.life = {
+                delay: container.retina.reduceFactor
+                    ? ((getRangeValue(lifeOptions.delay.value) * delayFactor) / container.retina.reduceFactor) *
+                        millisecondsToSeconds$1
+                    : noTime,
+                delayTime: noTime,
+                duration: container.retina.reduceFactor
+                    ? ((getRangeValue(lifeOptions.duration.value) * durationFactor) / container.retina.reduceFactor) *
+                        millisecondsToSeconds$1
+                    : noTime,
+                time: noTime,
+                count: lifeOptions.count,
+            };
+            if (particle.life.duration <= noTime) {
+                particle.life.duration = infiniteValue;
             }
-            else if (element) {
-                const ratio = image.ratio, pos = {
-                    x: -radius,
-                    y: -radius,
-                }, diameter = radius * double;
-                context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
+            if (particle.life.count <= noTime) {
+                particle.life.count = infiniteValue;
             }
-            context.globalAlpha = defaultAlpha$1;
+            particle.spawning = particle.life.delay > noTime;
         }
-        getSidesCount() {
-            return sides$3;
+        isEnabled(particle) {
+            return !particle.destroyed;
         }
-        async init(container) {
-            const options = container.actualOptions;
-            if (!options.preload || !this.#engine.loadImage) {
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "life", Life, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle) || !particle.life) {
                 return;
             }
-            const promises = [];
-            for (const imageData of options.preload) {
-                promises.push(this.#engine.loadImage(container, imageData));
-            }
-            await Promise.all(promises);
+            updateLife(particle, delta, this.#container.canvas.size);
         }
-        loadShape(particle) {
-            const container = this.#container;
-            if (!particle.shape || !shapeTypes.includes(particle.shape)) {
-                return;
-            }
-            const imageData = particle.shapeData;
-            if (!imageData) {
-                return;
-            }
-            const images = this.#engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
-            if (image) {
-                return;
-            }
-            void this.#loadImageShape(container, imageData).then(() => {
-                this.loadShape(particle);
+    }
+
+    async function loadLifeUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("life", container => {
+                return Promise.resolve(new LifeUpdater(container));
             });
+        });
+    }
+
+    function drawLine(data) {
+        const { context, particle, radius } = data, shapeData = particle.shapeData, centerY = 0;
+        context.moveTo(-radius, centerY);
+        context.lineTo(radius, centerY);
+        context.lineCap = shapeData?.cap ?? "butt";
+    }
+
+    const sides$2 = 1;
+    class LineDrawer {
+        draw(data) {
+            drawLine(data);
         }
-        particleInit(container, particle) {
-            if (particle.shape !== "image" && particle.shape !== "images") {
-                return;
-            }
-            const images = this.#engine.getImages?.(container), imageData = particle.shapeData;
-            if (!imageData) {
-                return;
-            }
-            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
-            if (!image) {
-                return;
-            }
-            const replaceColor = imageData.replaceColor;
-            if (image.loading) {
-                setTimeout(() => {
-                    this.particleInit(container, particle);
-                });
-                return;
-            }
-            void (async () => {
-                let imageRes;
-                if (image.svgData && color) {
-                    imageRes = await replaceImageColor(image, imageData, color, particle, container.hdr);
-                }
-                else {
-                    imageRes = {
-                        color,
-                        data: image,
-                        element: image.element,
-                        gif: image.gif,
-                        gifData: image.gifData,
-                        gifLoopCount: image.gifLoopCount,
-                        loaded: true,
-                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? defaultRatio$1),
-                        replaceColor: replaceColor,
-                        source: imageData.src,
-                    };
-                }
-                if (!imageRes.ratio) {
-                    imageRes.ratio = 1;
-                }
-                const close = imageData.close ?? particle.shapeClose, imageShape = {
-                    image: imageRes,
-                    close,
-                };
-                particle.image = imageShape.image;
-                particle.shapeClose = imageShape.close;
-            })();
+        getSidesCount() {
+            return sides$2;
         }
-        #loadImageShape = async (container, imageShape) => {
-            if (!this.#engine.loadImage) {
-                throw new Error(`Image shape not initialized`);
-            }
-            await this.#engine.loadImage(container, {
-                gif: imageShape.gif,
-                name: imageShape.name,
-                replaceColor: imageShape.replaceColor,
-                src: imageShape.src,
-            });
-        };
     }
 
-    class Preload {
-        gif = false;
-        height;
-        name;
-        replaceColor;
-        src = "";
-        width;
+    async function loadLineShape(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
+        });
+    }
+
+    class Attract {
+        distance = 200;
+        enable = false;
+        rotate;
+        constructor() {
+            this.rotate = {
+                x: 3000,
+                y: 3000,
+            };
+        }
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            loadProperty(this, "gif", data.gif);
-            loadProperty(this, "height", data.height);
-            loadProperty(this, "name", data.name);
-            loadProperty(this, "replaceColor", data.replaceColor);
-            loadProperty(this, "src", data.src);
-            loadProperty(this, "width", data.width);
+            loadRangeProperty(this, "distance", data.distance);
+            loadProperty(this, "enable", data.enable);
+            if (data.rotate) {
+                const rotateX = data.rotate.x;
+                if (rotateX !== undefined) {
+                    this.rotate.x = rotateX;
+                }
+                const rotateY = data.rotate.y;
+                if (rotateY !== undefined) {
+                    this.rotate.y = rotateY;
+                }
+            }
         }
     }
 
-    class ImagePreloaderPlugin {
-        id = "image-preloader";
-        #engine;
-        constructor(engine) {
-            this.#engine = engine;
+    const attractFactor = 1000, identity$1 = 1;
+    class Attractor extends ParticlesInteractorBase {
+        #maxDistance;
+        constructor(container) {
+            super(container);
+            this.#maxDistance = 0;
         }
-        async getPlugin(container) {
-            const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
-            return new ImagePreloaderInstance(this.#engine, container);
+        get maxDistance() {
+            return this.#maxDistance;
         }
-        loadOptions(_container, options, source) {
-            if (!source?.preload) {
+        clear() {
+        }
+        init() {
+        }
+        interact(p1) {
+            if (!p1.options.attract?.enable) {
                 return;
             }
-            options.preload ??= [];
-            const preloadOptions = options.preload;
-            for (const item of source.preload) {
-                const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
-                if (existing) {
-                    existing.load(item);
+            const container = this.container;
+            if (isNull(p1.attractDistance)) {
+                const attractDistance = getRangeValue(p1.options.attract.distance);
+                if (attractDistance > this.#maxDistance) {
+                    this.#maxDistance = attractDistance;
                 }
-                else {
-                    const preload = new Preload();
-                    preload.load(item);
-                    preloadOptions.push(preload);
+                p1.attractDistance = attractDistance * container.retina.pixelRatio;
+            }
+            const distance = p1.attractDistance, pos1 = p1.getPosition(), query = container.particles.grid.queryCircle(pos1, distance);
+            for (const p2 of query) {
+                if (p1 === p2 || !p2.options.attract?.enable || p2.destroyed || p2.spawning) {
+                    continue;
                 }
+                const pos2 = p2.getPosition(), { dx, dy } = getDistances(pos1, pos2), rotate = p1.options.attract.rotate, ax = dx / (rotate.x * attractFactor), ay = dy / (rotate.y * attractFactor), p1Factor = p2.size.value / p1.size.value, p2Factor = identity$1 / p1Factor;
+                p1.velocity.x -= ax * p1Factor;
+                p1.velocity.y -= ay * p1Factor;
+                p2.velocity.x += ax * p2Factor;
+                p2.velocity.y += ay * p2Factor;
             }
         }
-        needsPlugin() {
-            return true;
+        isEnabled(particle) {
+            return particle.options.attract?.enable ?? false;
+        }
+        loadParticlesOptions(options, ...sources) {
+            loadOptionProperty(options, "attract", Attract, ...sources);
+        }
+        reset() {
         }
     }
 
-    const extLength = 3;
-    function addLoadImageToEngine(engine) {
-        engine.getImages ??= (container) => {
-            engine.images ??= new Map();
-            let images = engine.images.get(container);
-            if (!images) {
-                images = [];
-                engine.images.set(container, images);
-            }
-            return images;
-        };
-        engine.loadImage ??= async (container, data) => {
-            if (!engine.getImages) {
-                throw new Error("No images collection found");
-            }
-            if (!data.name && !data.src) {
-                throw new Error("No image source provided");
+    async function loadParticlesAttractInteraction(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register((e) => {
+            ensureInteractivityPluginLoaded(e);
+            e.pluginManager.addInteractor?.("particlesAttract", container => {
+                return Promise.resolve(new Attractor(container));
+            });
+        });
+    }
+
+    var CollisionMode;
+    (function (CollisionMode) {
+        CollisionMode["absorb"] = "absorb";
+        CollisionMode["bounce"] = "bounce";
+        CollisionMode["destroy"] = "destroy";
+    })(CollisionMode || (CollisionMode = {}));
+
+    class CollisionsAbsorb {
+        speed = 2;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            engine.images ??= new Map();
-            const containerImages = engine.getImages(container);
-            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
+            loadProperty(this, "speed", data.speed);
+        }
+    }
+
+    class CollisionsOverlap {
+        enable = true;
+        retries = 0;
+        load(data) {
+            if (isNull(data)) {
                 return;
             }
-            try {
-                const image = {
-                    gif: data.gif,
-                    name: data.name ?? data.src,
-                    source: data.src,
-                    type: data.src.substring(data.src.length - extLength),
-                    error: false,
-                    loading: true,
-                    replaceColor: data.replaceColor,
-                    ratio: data.width && data.height ? data.width / data.height : undefined,
-                };
-                containerImages.push(image);
-                engine.images.set(container, containerImages);
-                let imageFunc;
-                if (data.gif) {
-                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
-                }
-                else if (data.replaceColor) {
-                    imageFunc = downloadSvgImage;
-                }
-                else {
-                    imageFunc = loadImage;
-                }
-                await imageFunc(image);
-            }
-            catch {
-                throw new Error(`${data.name ?? data.src} not found`);
-            }
-        };
-    }
-    async function loadImageShape(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            addLoadImageToEngine(e);
-            e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
-            e.pluginManager.addShape(shapeTypes, container => Promise.resolve(new ImageDrawer(e, container)));
-        });
-    }
-
-    class LifeDelay extends ValueWithRandom {
-        sync = false;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            loadProperty(this, "sync", data.sync);
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "retries", data.retries);
         }
     }
 
-    class LifeDuration extends ValueWithRandom {
-        sync = false;
+    class Collisions {
+        absorb = new CollisionsAbsorb();
+        bounce = new ParticlesBounce();
+        enable = false;
+        maxSpeed = 50;
+        mode = CollisionMode.bounce;
+        overlap = new CollisionsOverlap();
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            super.load(data);
-            loadProperty(this, "sync", data.sync);
+            this.absorb.load(data.absorb);
+            this.bounce.load(data.bounce);
+            loadProperty(this, "enable", data.enable);
+            loadRangeProperty(this, "maxSpeed", data.maxSpeed);
+            loadProperty(this, "mode", data.mode);
+            this.overlap.load(data.overlap);
         }
     }
 
-    class Life {
-        count = 0;
-        delay = new LifeDelay();
-        duration = new LifeDuration();
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            loadProperty(this, "count", data.count);
-            this.delay.load(data.delay);
-            this.duration.load(data.duration);
+    const minAbsorbAmount = 0;
+    function updateAbsorb(p1, r1, p2, r2, delta, pixelRatio) {
+        if (!p1.options.collisions || !p2.options.collisions) {
+            return;
+        }
+        const absorbSpeed = p1.options.collisions.absorb.speed, shrinkAmount = clamp(absorbSpeed * delta.factor, minAbsorbAmount, r2);
+        p1.size.value = Math.sqrt(r1 * r1 + shrinkAmount * shrinkAmount);
+        p2.size.value -= shrinkAmount;
+        if (p2.size.value <= pixelRatio) {
+            p2.size.value = 0;
+            p2.destroy();
         }
     }
-
-    const noTime$1 = 0, infiniteValue$1 = -1, noLife = 0, minCanvasSize = 0;
-    function updateLife(particle, delta, canvasSize) {
-        if (!particle.life) {
-            return;
+    function absorb(p1, p2, delta, pixelRatio) {
+        const r1 = p1.getRadius(), r2 = p2.getRadius();
+        if (!r1 && r2) {
+            p1.destroy();
         }
-        const life = particle.life;
-        let justSpawned = false;
-        if (particle.spawning) {
-            life.delayTime += delta.value;
-            if (life.delayTime >= particle.life.delay) {
-                justSpawned = true;
-                particle.spawning = false;
-                life.delayTime = noTime$1;
-                life.time = noTime$1;
+        else if (r1 && !r2) {
+            p2.destroy();
+        }
+        else if (r1 && r2) {
+            if (r1 >= r2) {
+                updateAbsorb(p1, r1, p2, r2, delta, pixelRatio);
             }
             else {
-                return;
+                updateAbsorb(p2, r2, p1, r1, delta, pixelRatio);
             }
         }
-        if (life.duration === infiniteValue$1) {
+    }
+
+    const energyCorrectionMinRatio = 1e-6, energyDriftThreshold = 1e-4, correctionFactorNeutral = 1, fixBounceSpeed = (p) => {
+        if (!p.options.collisions) {
             return;
         }
-        if (justSpawned) {
-            life.time = noTime$1;
+        p.collisionMaxSpeed ??= getRangeValue(p.options.collisions.maxSpeed);
+        if (p.velocity.length > p.collisionMaxSpeed) {
+            p.velocity.length = p.collisionMaxSpeed;
         }
-        else {
-            life.time += delta.value;
+    };
+    function bounce(p1, p2) {
+        const m1 = p1.getMass(), m2 = p2.getMass(), speed1Before = p1.velocity.length, speed2Before = p2.velocity.length, keBefore = m1 * speed1Before * speed1Before + m2 * speed2Before * speed2Before;
+        circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
+        const speed1After = p1.velocity.length, speed2After = p2.velocity.length, keAfter = m1 * speed1After * speed1After + m2 * speed2After * speed2After;
+        if (keAfter > keBefore * energyCorrectionMinRatio) {
+            const correctionFactor = Math.sqrt(keBefore / keAfter);
+            if (Math.abs(correctionFactor - correctionFactorNeutral) > energyDriftThreshold) {
+                p1.velocity.length = speed1After * correctionFactor;
+                p2.velocity.length = speed2After * correctionFactor;
+            }
         }
-        if (life.time < life.duration) {
-            return;
+        fixBounceSpeed(p1);
+        fixBounceSpeed(p2);
+    }
+
+    function destroy(p1, p2) {
+        if (!p1.unbreakable && !p2.unbreakable) {
+            bounce(p1, p2);
         }
-        life.time = noTime$1;
-        if (particle.life.count > noLife) {
-            particle.life.count--;
+        const p1Radius = p1.getRadius(), p2Radius = p2.getRadius();
+        if (!p1Radius && p2Radius) {
+            p1.destroy();
         }
-        if (particle.life.count === noLife) {
-            particle.destroy();
+        else if (p1Radius && !p2Radius) {
+            p2.destroy();
+        }
+        else if (p1Radius && p2Radius) {
+            const deleteP = p1.getRadius() >= p2.getRadius() ? p2 : p1;
+            deleteP.destroy();
+        }
+    }
+
+    function resolveCollision(p1, p2, delta, pixelRatio) {
+        if (!p1.options.collisions || !p2.options.collisions) {
             return;
         }
-        const widthRange = setRangeValue(minCanvasSize, canvasSize.width), heightRange = setRangeValue(minCanvasSize, canvasSize.width);
-        particle.position.x = randomInRangeValue(widthRange);
-        particle.position.y = randomInRangeValue(heightRange);
-        particle.spawning = true;
-        life.delayTime = noTime$1;
-        life.time = noTime$1;
-        particle.reset();
-        const lifeOptions = particle.options.life;
-        if (lifeOptions) {
-            life.delay = getRangeValue(lifeOptions.delay.value) * millisecondsToSeconds$1;
-            life.duration = getRangeValue(lifeOptions.duration.value) * millisecondsToSeconds$1;
+        switch (p1.options.collisions.mode) {
+            case CollisionMode.absorb: {
+                absorb(p1, p2, delta, pixelRatio);
+                break;
+            }
+            case CollisionMode.bounce: {
+                bounce(p1, p2);
+                break;
+            }
+            case CollisionMode.destroy: {
+                destroy(p1, p2);
+                break;
+            }
         }
     }
 
-    const noTime = 0, identity$2 = 1, infiniteValue = -1;
-    class LifeUpdater {
-        #container;
+    class Collider extends ParticlesInteractorBase {
+        maxDistance;
         constructor(container) {
-            this.#container = container;
+            super(container);
+            this.maxDistance = 0;
         }
-        init(particle) {
-            const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
-            if (!lifeOptions) {
+        clear() {
+        }
+        init() {
+        }
+        interact(p1, _interactivityData, delta) {
+            if (p1.destroyed || p1.spawning) {
                 return;
             }
-            const delayFactor = lifeOptions.delay.sync ? identity$2 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$2 : getRandom();
-            particle.life = {
-                delay: container.retina.reduceFactor
-                    ? ((getRangeValue(lifeOptions.delay.value) * delayFactor) / container.retina.reduceFactor) *
-                        millisecondsToSeconds$1
-                    : noTime,
-                delayTime: noTime,
-                duration: container.retina.reduceFactor
-                    ? ((getRangeValue(lifeOptions.duration.value) * durationFactor) / container.retina.reduceFactor) *
-                        millisecondsToSeconds$1
-                    : noTime,
-                time: noTime,
-                count: lifeOptions.count,
-            };
-            if (particle.life.duration <= noTime) {
-                particle.life.duration = infiniteValue;
-            }
-            if (particle.life.count <= noTime) {
-                particle.life.count = infiniteValue;
+            const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.grid.queryCircle(pos1, radius1 * double);
+            for (const p2 of query) {
+                if (p1 === p2 ||
+                    p1.id >= p2.id ||
+                    !p1.options.collisions?.enable ||
+                    !p2.options.collisions?.enable ||
+                    p1.options.collisions.mode !== p2.options.collisions.mode ||
+                    p2.destroyed ||
+                    p2.spawning) {
+                    continue;
+                }
+                const pos2 = p2.getPosition(), radius2 = p2.getRadius();
+                if (Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) > radius1 + radius2) {
+                    continue;
+                }
+                const dist = getDistance(pos1, pos2), distP = radius1 + radius2;
+                if (dist > distP) {
+                    continue;
+                }
+                resolveCollision(p1, p2, delta, container.retina.pixelRatio);
             }
-            particle.spawning = particle.life.delay > noTime;
         }
         isEnabled(particle) {
-            return !particle.destroyed;
+            return !!particle.options.collisions?.enable;
         }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "life", Life, ...sources);
+        loadParticlesOptions(options, ...sources) {
+            loadOptionProperty(options, "collisions", Collisions, ...sources);
         }
-        update(particle, delta) {
-            if (!this.isEnabled(particle) || !particle.life) {
-                return;
-            }
-            updateLife(particle, delta, this.#container.canvas.size);
+        reset() {
         }
     }
 
-    async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("life", container => {
-                return Promise.resolve(new LifeUpdater(container));
-            });
-        });
-    }
-
-    function drawLine(data) {
-        const { context, particle, radius } = data, shapeData = particle.shapeData, centerY = 0;
-        context.moveTo(-radius, centerY);
-        context.lineTo(radius, centerY);
-        context.lineCap = shapeData?.cap ?? "butt";
-    }
-
-    const sides$2 = 1;
-    class LineDrawer {
-        draw(data) {
-            drawLine(data);
+    class OverlapPlugin {
+        id = "overlap";
+        async getPlugin(container) {
+            const { OverlapPluginInstance } = await Promise.resolve().then(function () { return OverlapPluginInstance$1; });
+            return new OverlapPluginInstance(container);
         }
-        getSidesCount() {
-            return sides$2;
+        loadOptions() {
+        }
+        needsPlugin() {
+            return true;
         }
     }
 
-    async function loadLineShape(engine) {
+    async function loadParticlesCollisionsInteraction(engine) {
         engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
+        await engine.pluginManager.register((e) => {
+            ensureInteractivityPluginLoaded(e);
+            e.pluginManager.addPlugin(new OverlapPlugin());
+            e.pluginManager.addInteractor?.("particlesCollisions", container => {
+                return Promise.resolve(new Collider(container));
+            });
         });
     }
 
-    class Attract {
-        distance = 200;
+    class CircleWarp extends Circle {
+        #canvasSize;
+        constructor(x, y, radius, canvasSize) {
+            super(x, y, radius);
+            this.#canvasSize = canvasSize;
+        }
+        contains(point) {
+            if (super.contains(point))
+                return true;
+            const { width, height } = this.#canvasSize, { x, y } = point;
+            return (super.contains({ x: x - width, y }) ||
+                super.contains({ x: x + width, y }) ||
+                super.contains({ x, y: y - height }) ||
+                super.contains({ x, y: y + height }) ||
+                super.contains({ x: x - width, y: y - height }) ||
+                super.contains({ x: x + width, y: y + height }) ||
+                super.contains({ x: x - width, y: y + height }) ||
+                super.contains({ x: x + width, y: y - height }));
+        }
+        intersects(range) {
+            if (super.intersects(range))
+                return true;
+            const { width, height } = this.#canvasSize, pos = range.position, shifts = [
+                { x: -width, y: 0 },
+                { x: width, y: 0 },
+                { x: 0, y: -height },
+                { x: 0, y: height },
+                { x: -width, y: -height },
+                { x: width, y: height },
+                { x: -width, y: height },
+                { x: width, y: -height },
+            ];
+            for (const shift of shifts) {
+                const shiftedPos = { x: pos.x + shift.x, y: pos.y + shift.y };
+                let shiftedRange;
+                if (range instanceof Circle) {
+                    shiftedRange = new Circle(shiftedPos.x, shiftedPos.y, range.radius);
+                }
+                else {
+                    const rect = range;
+                    shiftedRange = new Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);
+                }
+                if (super.intersects(shiftedRange))
+                    return true;
+            }
+            return false;
+        }
+    }
+
+    class LinksShadow {
+        blur = 5;
+        color = new OptionsColor();
         enable = false;
-        rotate;
         constructor() {
-            this.rotate = {
-                x: 3000,
-                y: 3000,
-            };
+            this.color.value = "#000";
         }
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            loadRangeProperty(this, "distance", data.distance);
+            loadProperty(this, "blur", data.blur);
+            this.color = OptionsColor.create(this.color, data.color);
             loadProperty(this, "enable", data.enable);
-            if (data.rotate) {
-                const rotateX = data.rotate.x;
-                if (rotateX !== undefined) {
-                    this.rotate.x = rotateX;
-                }
-                const rotateY = data.rotate.y;
-                if (rotateY !== undefined) {
-                    this.rotate.y = rotateY;
-                }
+        }
+    }
+
+    class LinksTriangle {
+        color;
+        enable = false;
+        frequency = 1;
+        opacity;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = OptionsColor.create(this.color, data.color);
             }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadProperty(this, "opacity", data.opacity);
         }
     }
 
-    const attractFactor = 1000, identity$1 = 1;
-    class Attractor extends ParticlesInteractorBase {
+    class Links {
+        blink = false;
+        color = new OptionsColor();
+        consent = false;
+        distance = 100;
+        enable = false;
+        frequency = 1;
+        id;
+        opacity = 1;
+        shadow = new LinksShadow();
+        triangles = new LinksTriangle();
+        warp = false;
+        width = 1;
+        constructor() {
+            this.color.value = "#fff";
+        }
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadProperty(this, "id", data.id);
+            loadProperty(this, "blink", data.blink);
+            this.color = OptionsColor.create(this.color, data.color);
+            loadProperty(this, "consent", data.consent);
+            loadProperty(this, "distance", data.distance);
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadProperty(this, "opacity", data.opacity);
+            this.shadow.load(data.shadow);
+            this.triangles.load(data.triangles);
+            loadProperty(this, "width", data.width);
+            loadProperty(this, "warp", data.warp);
+        }
+    }
+
+    const opacityOffset = 1, minDistance$1 = 0;
+    function getWarpDistance(pos1, pos2, canvasSize) {
+        const { dx, dy } = getDistances(pos1, pos2), absDiffs = { x: Math.abs(dx), y: Math.abs(dy) }, warpDistances = {
+            x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
+            y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
+        };
+        return Math.hypot(warpDistances.x, warpDistances.y);
+    }
+    class Linker extends ParticlesInteractorBase {
         #maxDistance;
-        constructor(container) {
+        #pluginManager;
+        constructor(pluginManager, container) {
             super(container);
+            this.#pluginManager = pluginManager;
             this.#maxDistance = 0;
         }
         get maxDistance() {
@@ -14161,705 +14164,308 @@
         clear() {
         }
         init() {
+            this.container.particles.linksColor = undefined;
+            this.container.particles.linksColors = new Map();
         }
         interact(p1) {
-            if (!p1.options.attract?.enable) {
+            if (!p1.options.links) {
                 return;
             }
-            const container = this.container;
-            if (isNull(p1.attractDistance)) {
-                const attractDistance = getRangeValue(p1.options.attract.distance);
-                if (attractDistance > this.#maxDistance) {
-                    this.#maxDistance = attractDistance;
-                }
-                p1.attractDistance = attractDistance * container.retina.pixelRatio;
+            p1.links = [];
+            if (p1.linksDistance && p1.linksDistance > this.#maxDistance) {
+                this.#maxDistance = p1.linksDistance;
             }
-            const distance = p1.attractDistance, pos1 = p1.getPosition(), query = container.particles.grid.queryCircle(pos1, distance);
+            const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
+            if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
+                return;
+            }
+            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);
             for (const p2 of query) {
-                if (p1 === p2 || !p2.options.attract?.enable || p2.destroyed || p2.spawning) {
+                const linkOpt2 = p2.options.links;
+                if (p1 === p2 ||
+                    !linkOpt2?.enable ||
+                    linkOpt1.id !== linkOpt2.id ||
+                    p2.spawning ||
+                    p2.destroyed ||
+                    !p2.links ||
+                    p1.links.some(t => t.destination === p2) ||
+                    p2.links.some(t => t.destination === p1)) {
                     continue;
                 }
-                const pos2 = p2.getPosition(), { dx, dy } = getDistances(pos1, pos2), rotate = p1.options.attract.rotate, ax = dx / (rotate.x * attractFactor), ay = dy / (rotate.y * attractFactor), p1Factor = p2.size.value / p1.size.value, p2Factor = identity$1 / p1Factor;
-                p1.velocity.x -= ax * p1Factor;
-                p1.velocity.y -= ay * p1Factor;
-                p2.velocity.x += ax * p2Factor;
-                p2.velocity.y += ay * p2Factor;
+                const pos2 = p2.getPosition();
+                if (pos2.x < originPoint.x || pos2.y < originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
+                    continue;
+                }
+                const distDirect = getDistances(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);
+                if (distance > optDistance) {
+                    continue;
+                }
+                const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
+                this.#setColor(p1);
+                p1.links.push({
+                    destination: p2,
+                    opacity: opacityLine,
+                    color: this.#getLinkColor(p1, p2),
+                    isWarped: distWarp < distDirect,
+                });
             }
         }
         isEnabled(particle) {
-            return particle.options.attract?.enable ?? false;
+            return !!particle.options.links?.enable;
         }
         loadParticlesOptions(options, ...sources) {
-            loadOptionProperty(options, "attract", Attract, ...sources);
+            loadOptionProperty(options, "links", Links, ...sources);
         }
         reset() {
         }
-    }
-
-    async function loadParticlesAttractInteraction(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register((e) => {
-            ensureInteractivityPluginLoaded(e);
-            e.pluginManager.addInteractor?.("particlesAttract", container => {
-                return Promise.resolve(new Attractor(container));
-            });
-        });
-    }
-
-    var CollisionMode;
-    (function (CollisionMode) {
-        CollisionMode["absorb"] = "absorb";
-        CollisionMode["bounce"] = "bounce";
-        CollisionMode["destroy"] = "destroy";
-    })(CollisionMode || (CollisionMode = {}));
-
-    class CollisionsAbsorb {
-        speed = 2;
-        load(data) {
-            if (isNull(data)) {
+        #getLinkColor(p1, p2) {
+            const container = this.container, linksOptions = p1.options.links;
+            if (!linksOptions) {
                 return;
             }
-            loadProperty(this, "speed", data.speed);
-        }
-    }
-
-    class CollisionsOverlap {
-        enable = true;
-        retries = 0;
-        load(data) {
-            if (isNull(data)) {
+            const linkColor = linksOptions.id !== undefined
+                ? container.particles.linksColors.get(linksOptions.id)
+                : container.particles.linksColor;
+            return getLinkColor(p1, p2, linkColor);
+        }
+        #setColor(p1) {
+            if (!p1.options.links) {
                 return;
             }
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "retries", data.retries);
-        }
-    }
-
-    class Collisions {
-        absorb = new CollisionsAbsorb();
-        bounce = new ParticlesBounce();
-        enable = false;
-        maxSpeed = 50;
-        mode = CollisionMode.bounce;
-        overlap = new CollisionsOverlap();
-        load(data) {
-            if (isNull(data)) {
+            const container = this.container, linksOptions = p1.options.links;
+            let linkColor = linksOptions.id === undefined
+                ? container.particles.linksColor
+                : container.particles.linksColors.get(linksOptions.id);
+            if (linkColor) {
                 return;
             }
-            this.absorb.load(data.absorb);
-            this.bounce.load(data.bounce);
-            loadProperty(this, "enable", data.enable);
-            loadRangeProperty(this, "maxSpeed", data.maxSpeed);
-            loadProperty(this, "mode", data.mode);
-            this.overlap.load(data.overlap);
-        }
-    }
-
-    const minAbsorbAmount = 0;
-    function updateAbsorb(p1, r1, p2, r2, delta, pixelRatio) {
-        if (!p1.options.collisions || !p2.options.collisions) {
-            return;
-        }
-        const absorbSpeed = p1.options.collisions.absorb.speed, shrinkAmount = clamp(absorbSpeed * delta.factor, minAbsorbAmount, r2);
-        p1.size.value = Math.sqrt(r1 * r1 + shrinkAmount * shrinkAmount);
-        p2.size.value -= shrinkAmount;
-        if (p2.size.value <= pixelRatio) {
-            p2.size.value = 0;
-            p2.destroy();
-        }
-    }
-    function absorb(p1, p2, delta, pixelRatio) {
-        const r1 = p1.getRadius(), r2 = p2.getRadius();
-        if (!r1 && r2) {
-            p1.destroy();
-        }
-        else if (r1 && !r2) {
-            p2.destroy();
-        }
-        else if (r1 && r2) {
-            if (r1 >= r2) {
-                updateAbsorb(p1, r1, p2, r2, delta, pixelRatio);
+            linkColor = getLinkRandomColor(this.#pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
+            if (linksOptions.id === undefined) {
+                container.particles.linksColor = linkColor;
             }
             else {
-                updateAbsorb(p2, r2, p1, r1, delta, pixelRatio);
+                container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         }
     }
 
-    const energyCorrectionMinRatio = 1e-6, energyDriftThreshold = 1e-4, correctionFactorNeutral = 1, fixBounceSpeed = (p) => {
-        if (!p.options.collisions) {
-            return;
+    class LinksPlugin {
+        id = "links";
+        #pluginManager;
+        constructor(pluginManager) {
+            this.#pluginManager = pluginManager;
         }
-        p.collisionMaxSpeed ??= getRangeValue(p.options.collisions.maxSpeed);
-        if (p.velocity.length > p.collisionMaxSpeed) {
-            p.velocity.length = p.collisionMaxSpeed;
+        async getPlugin(container) {
+            const { LinkInstance } = await Promise.resolve().then(function () { return LinkInstance$1; });
+            return new LinkInstance(this.#pluginManager, container);
         }
-    };
-    function bounce(p1, p2) {
-        const m1 = p1.getMass(), m2 = p2.getMass(), speed1Before = p1.velocity.length, speed2Before = p2.velocity.length, keBefore = m1 * speed1Before * speed1Before + m2 * speed2Before * speed2Before;
-        circleBounce(circleBounceDataFromParticle(p1), circleBounceDataFromParticle(p2));
-        const speed1After = p1.velocity.length, speed2After = p2.velocity.length, keAfter = m1 * speed1After * speed1After + m2 * speed2After * speed2After;
-        if (keAfter > keBefore * energyCorrectionMinRatio) {
-            const correctionFactor = Math.sqrt(keBefore / keAfter);
-            if (Math.abs(correctionFactor - correctionFactorNeutral) > energyDriftThreshold) {
-                p1.velocity.length = speed1After * correctionFactor;
-                p2.velocity.length = speed2After * correctionFactor;
-            }
+        loadOptions() {
+        }
+        needsPlugin() {
+            return true;
         }
-        fixBounceSpeed(p1);
-        fixBounceSpeed(p2);
     }
 
-    function destroy(p1, p2) {
-        if (!p1.unbreakable && !p2.unbreakable) {
-            bounce(p1, p2);
-        }
-        const p1Radius = p1.getRadius(), p2Radius = p2.getRadius();
-        if (!p1Radius && p2Radius) {
-            p1.destroy();
-        }
-        else if (p1Radius && !p2Radius) {
-            p2.destroy();
-        }
-        else if (p1Radius && p2Radius) {
-            const deleteP = p1.getRadius() >= p2.getRadius() ? p2 : p1;
-            deleteP.destroy();
-        }
+    async function loadParticlesLinksInteraction(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register((e) => {
+            const pluginManager = e.pluginManager;
+            ensureInteractivityPluginLoaded(e);
+            pluginManager.addPlugin(new LinksPlugin(pluginManager));
+            pluginManager.addInteractor?.("particlesLinks", container => {
+                return Promise.resolve(new Linker(pluginManager, container));
+            });
+        });
     }
 
-    function resolveCollision(p1, p2, delta, pixelRatio) {
-        if (!p1.options.collisions || !p2.options.collisions) {
-            return;
+    const polygonCache = new Map(), noOffset = 0;
+    function getUnitPolygon(sides) {
+        const cached = polygonCache.get(sides);
+        if (cached) {
+            return cached;
         }
-        switch (p1.options.collisions.mode) {
-            case CollisionMode.absorb: {
-                absorb(p1, p2, delta, pixelRatio);
-                break;
+        const step = doublePI / sides, isOdd = !!(sides % double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * half$2, verts = [];
+        for (let i = 0; i < sides; i++) {
+            const angle = baseAngle + i * step;
+            verts[i] = {
+                x: Math.cos(angle),
+                y: Math.sin(angle),
+            };
+        }
+        polygonCache.set(sides, verts);
+        return verts;
+    }
+    function drawPolygon(data, side) {
+        const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);
+        context.beginPath();
+        for (let i = 0; i < verts.length; i++) {
+            const vert = verts[i];
+            if (!vert) {
+                continue;
             }
-            case CollisionMode.bounce: {
-                bounce(p1, p2);
-                break;
+            const x = vert.x * radius, y = vert.y * radius;
+            if (i) {
+                context.lineTo(x, y);
             }
-            case CollisionMode.destroy: {
-                destroy(p1, p2);
-                break;
+            else {
+                context.moveTo(x, y);
             }
         }
+        context.closePath();
     }
 
-    class Collider extends ParticlesInteractorBase {
-        maxDistance;
-        constructor(container) {
-            super(container);
-            this.maxDistance = 0;
-        }
-        clear() {
-        }
-        init() {
-        }
-        interact(p1, _interactivityData, delta) {
-            if (p1.destroyed || p1.spawning) {
-                return;
-            }
-            const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.grid.queryCircle(pos1, radius1 * double);
-            for (const p2 of query) {
-                if (p1 === p2 ||
-                    p1.id >= p2.id ||
-                    !p1.options.collisions?.enable ||
-                    !p2.options.collisions?.enable ||
-                    p1.options.collisions.mode !== p2.options.collisions.mode ||
-                    p2.destroyed ||
-                    p2.spawning) {
-                    continue;
-                }
-                const pos2 = p2.getPosition(), radius2 = p2.getRadius();
-                if (Math.abs(Math.round(pos1.z) - Math.round(pos2.z)) > radius1 + radius2) {
-                    continue;
-                }
-                const dist = getDistance(pos1, pos2), distP = radius1 + radius2;
-                if (dist > distP) {
-                    continue;
-                }
-                resolveCollision(p1, p2, delta, container.retina.pixelRatio);
-            }
-        }
-        isEnabled(particle) {
-            return !!particle.options.collisions?.enable;
-        }
-        loadParticlesOptions(options, ...sources) {
-            loadOptionProperty(options, "collisions", Collisions, ...sources);
+    const defaultSides$3 = 5;
+    class PolygonDrawerBase {
+        draw(data) {
+            const { particle, radius } = data, side = this.getSidesData(particle, radius);
+            drawPolygon(data, side);
         }
-        reset() {
+        getSidesCount(particle) {
+            const polygon = particle.shapeData;
+            return Math.round(getRangeValue(polygon?.sides ?? defaultSides$3));
         }
     }
 
-    class OverlapPlugin {
-        id = "overlap";
-        async getPlugin(container) {
-            const { OverlapPluginInstance } = await Promise.resolve().then(function () { return OverlapPluginInstance$1; });
-            return new OverlapPluginInstance(container);
+    const yFactor$1 = 2.66, sidesFactor$1 = 3;
+    class PolygonDrawer extends PolygonDrawerBase {
+        getSidesData(particle, radius) {
+            const { sides } = particle;
+            return {
+                count: {
+                    denominator: 1,
+                    numerator: sides,
+                },
+                length: (radius * yFactor$1) / (sides / sidesFactor$1),
+            };
         }
-        loadOptions() {
+    }
+
+    const sides$1 = 3, yFactor = 2.66, sidesFactor = 3;
+    class TriangleDrawer extends PolygonDrawerBase {
+        getSidesCount() {
+            return sides$1;
         }
-        needsPlugin() {
-            return true;
+        getSidesData(_particle, radius) {
+            return {
+                count: {
+                    denominator: 1,
+                    numerator: sides$1,
+                },
+                length: (radius * yFactor) / (sides$1 / sidesFactor),
+            };
         }
     }
 
-    async function loadParticlesCollisionsInteraction(engine) {
+    async function loadGenericPolygonShape(engine) {
         engine.checkVersion("4.2.1");
-        await engine.pluginManager.register((e) => {
-            ensureInteractivityPluginLoaded(e);
-            e.pluginManager.addPlugin(new OverlapPlugin());
-            e.pluginManager.addInteractor?.("particlesCollisions", container => {
-                return Promise.resolve(new Collider(container));
-            });
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
-
-    class CircleWarp extends Circle {
-        #canvasSize;
-        constructor(x, y, radius, canvasSize) {
-            super(x, y, radius);
-            this.#canvasSize = canvasSize;
-        }
-        contains(point) {
-            if (super.contains(point))
-                return true;
-            const { width, height } = this.#canvasSize, { x, y } = point;
-            return (super.contains({ x: x - width, y }) ||
-                super.contains({ x: x + width, y }) ||
-                super.contains({ x, y: y - height }) ||
-                super.contains({ x, y: y + height }) ||
-                super.contains({ x: x - width, y: y - height }) ||
-                super.contains({ x: x + width, y: y + height }) ||
-                super.contains({ x: x - width, y: y + height }) ||
-                super.contains({ x: x + width, y: y - height }));
-        }
-        intersects(range) {
-            if (super.intersects(range))
-                return true;
-            const { width, height } = this.#canvasSize, pos = range.position, shifts = [
-                { x: -width, y: 0 },
-                { x: width, y: 0 },
-                { x: 0, y: -height },
-                { x: 0, y: height },
-                { x: -width, y: -height },
-                { x: width, y: height },
-                { x: -width, y: height },
-                { x: width, y: -height },
-            ];
-            for (const shift of shifts) {
-                const shiftedPos = { x: pos.x + shift.x, y: pos.y + shift.y };
-                let shiftedRange;
-                if (range instanceof Circle) {
-                    shiftedRange = new Circle(shiftedPos.x, shiftedPos.y, range.radius);
-                }
-                else {
-                    const rect = range;
-                    shiftedRange = new Rectangle(shiftedPos.x, shiftedPos.y, rect.size.width, rect.size.height);
-                }
-                if (super.intersects(shiftedRange))
-                    return true;
-            }
-            return false;
-        }
+    async function loadTriangleShape(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
+        });
     }
-
-    class LinksShadow {
-        blur = 5;
-        color = new OptionsColor();
-        enable = false;
-        constructor() {
-            this.color.value = "#000";
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            loadProperty(this, "blur", data.blur);
-            this.color = OptionsColor.create(this.color, data.color);
-            loadProperty(this, "enable", data.enable);
-        }
+    async function loadPolygonShape(engine) {
+        engine.checkVersion("4.2.1");
+        await Promise.all([
+            loadGenericPolygonShape(engine),
+            loadTriangleShape(engine),
+        ]);
     }
 
-    class LinksTriangle {
-        color;
+    class RotateAnimation {
+        decay = 0;
         enable = false;
-        frequency = 1;
-        opacity;
+        speed = 0;
+        sync = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.color !== undefined) {
-                this.color = OptionsColor.create(this.color, data.color);
-            }
             loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadProperty(this, "opacity", data.opacity);
+            loadRangeProperty(this, "speed", data.speed);
+            loadRangeProperty(this, "decay", data.decay);
+            loadProperty(this, "sync", data.sync);
         }
     }
 
-    class Links {
-        blink = false;
-        color = new OptionsColor();
-        consent = false;
-        distance = 100;
-        enable = false;
-        frequency = 1;
-        id;
-        opacity = 1;
-        shadow = new LinksShadow();
-        triangles = new LinksTriangle();
-        warp = false;
-        width = 1;
-        constructor() {
-            this.color.value = "#fff";
-        }
+    class Rotate extends ValueWithRandom {
+        animation = new RotateAnimation();
+        direction = exports.RotateDirection.clockwise;
+        path = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            loadProperty(this, "id", data.id);
-            loadProperty(this, "blink", data.blink);
-            this.color = OptionsColor.create(this.color, data.color);
-            loadProperty(this, "consent", data.consent);
-            loadProperty(this, "distance", data.distance);
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadProperty(this, "opacity", data.opacity);
-            this.shadow.load(data.shadow);
-            this.triangles.load(data.triangles);
-            loadProperty(this, "width", data.width);
-            loadProperty(this, "warp", data.warp);
+            super.load(data);
+            loadProperty(this, "direction", data.direction);
+            this.animation.load(data.animation);
+            loadProperty(this, "path", data.path);
         }
     }
 
-    const opacityOffset = 1, minDistance$1 = 0;
-    function getWarpDistance(pos1, pos2, canvasSize) {
-        const { dx, dy } = getDistances(pos1, pos2), absDiffs = { x: Math.abs(dx), y: Math.abs(dy) }, warpDistances = {
-            x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),
-            y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y),
-        };
-        return Math.hypot(warpDistances.x, warpDistances.y);
-    }
-    class Linker extends ParticlesInteractorBase {
-        #maxDistance;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            super(container);
-            this.#pluginManager = pluginManager;
-            this.#maxDistance = 0;
-        }
-        get maxDistance() {
-            return this.#maxDistance;
-        }
-        clear() {
-        }
-        init() {
-            this.container.particles.linksColor = undefined;
-            this.container.particles.linksColors = new Map();
+    const doublePIDeg = 360;
+    class RotateUpdater {
+        #container;
+        constructor(container) {
+            this.#container = container;
         }
-        interact(p1) {
-            if (!p1.options.links) {
+        init(particle) {
+            const rotateOptions = particle.options.rotate;
+            if (!rotateOptions) {
                 return;
             }
-            p1.links = [];
-            if (p1.linksDistance && p1.linksDistance > this.#maxDistance) {
-                this.#maxDistance = p1.linksDistance;
+            particle.rotate = {
+                enable: rotateOptions.animation.enable,
+                value: degToRad(getRangeValue(rotateOptions.value)),
+                min: 0,
+                max: doublePI,
+            };
+            particle.pathRotation = rotateOptions.path;
+            let rotateDirection = rotateOptions.direction;
+            if (rotateDirection === exports.RotateDirection.random) {
+                const index = Math.floor(getRandom() * double), minIndex = 0;
+                rotateDirection = index > minIndex ? exports.RotateDirection.counterClockwise : exports.RotateDirection.clockwise;
             }
-            const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;
-            if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
-                return;
+            switch (rotateDirection) {
+                case exports.RotateDirection.counterClockwise:
+                case "counterClockwise":
+                    particle.rotate.status = exports.AnimationStatus.decreasing;
+                    break;
+                case exports.RotateDirection.clockwise:
+                    particle.rotate.status = exports.AnimationStatus.increasing;
+                    break;
             }
-            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);
-            for (const p2 of query) {
-                const linkOpt2 = p2.options.links;
-                if (p1 === p2 ||
-                    !linkOpt2?.enable ||
-                    linkOpt1.id !== linkOpt2.id ||
-                    p2.spawning ||
-                    p2.destroyed ||
-                    !p2.links ||
-                    p1.links.some(t => t.destination === p2) ||
-                    p2.links.some(t => t.destination === p1)) {
-                    continue;
-                }
-                const pos2 = p2.getPosition();
-                if (pos2.x < originPoint.x || pos2.y < originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {
-                    continue;
-                }
-                const distDirect = getDistances(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);
-                if (distance > optDistance) {
-                    continue;
+            const rotateAnimation = rotateOptions.animation;
+            if (rotateAnimation.enable) {
+                particle.rotate.decay = identity$3 - getRangeValue(rotateAnimation.decay);
+                particle.rotate.velocity =
+                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.#container.retina.reduceFactor;
+                if (!rotateAnimation.sync) {
+                    particle.rotate.velocity *= getRandom();
                 }
-                const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;
-                this.#setColor(p1);
-                p1.links.push({
-                    destination: p2,
-                    opacity: opacityLine,
-                    color: this.#getLinkColor(p1, p2),
-                    isWarped: distWarp < distDirect,
-                });
             }
+            particle.rotation = particle.rotate.value;
         }
         isEnabled(particle) {
-            return !!particle.options.links?.enable;
-        }
-        loadParticlesOptions(options, ...sources) {
-            loadOptionProperty(options, "links", Links, ...sources);
+            const rotate = particle.options.rotate;
+            if (!rotate) {
+                return false;
+            }
+            return !particle.destroyed && !particle.spawning && (!!rotate.value || rotate.animation.enable || rotate.path);
         }
-        reset() {
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "rotate", Rotate, ...sources);
         }
-        #getLinkColor(p1, p2) {
-            const container = this.container, linksOptions = p1.options.links;
-            if (!linksOptions) {
+        update(particle, delta) {
+            if (!this.isEnabled(particle)) {
                 return;
             }
-            const linkColor = linksOptions.id !== undefined
-                ? container.particles.linksColors.get(linksOptions.id)
-                : container.particles.linksColor;
-            return getLinkColor(p1, p2, linkColor);
-        }
-        #setColor(p1) {
-            if (!p1.options.links) {
-                return;
-            }
-            const container = this.container, linksOptions = p1.options.links;
-            let linkColor = linksOptions.id === undefined
-                ? container.particles.linksColor
-                : container.particles.linksColors.get(linksOptions.id);
-            if (linkColor) {
-                return;
-            }
-            linkColor = getLinkRandomColor(this.#pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
-            if (linksOptions.id === undefined) {
-                container.particles.linksColor = linkColor;
-            }
-            else {
-                container.particles.linksColors.set(linksOptions.id, linkColor);
-            }
-        }
-    }
-
-    class LinksPlugin {
-        id = "links";
-        #pluginManager;
-        constructor(pluginManager) {
-            this.#pluginManager = pluginManager;
-        }
-        async getPlugin(container) {
-            const { LinkInstance } = await Promise.resolve().then(function () { return LinkInstance$1; });
-            return new LinkInstance(this.#pluginManager, container);
-        }
-        loadOptions() {
-        }
-        needsPlugin() {
-            return true;
-        }
-    }
-
-    async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register((e) => {
-            const pluginManager = e.pluginManager;
-            ensureInteractivityPluginLoaded(e);
-            pluginManager.addPlugin(new LinksPlugin(pluginManager));
-            pluginManager.addInteractor?.("particlesLinks", container => {
-                return Promise.resolve(new Linker(pluginManager, container));
-            });
-        });
-    }
-
-    const polygonCache = new Map(), noOffset = 0;
-    function getUnitPolygon(sides) {
-        const cached = polygonCache.get(sides);
-        if (cached) {
-            return cached;
-        }
-        const step = doublePI / sides, isOdd = !!(sides % double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * half$2, verts = [];
-        for (let i = 0; i < sides; i++) {
-            const angle = baseAngle + i * step;
-            verts[i] = {
-                x: Math.cos(angle),
-                y: Math.sin(angle),
-            };
-        }
-        polygonCache.set(sides, verts);
-        return verts;
-    }
-    function drawPolygon(data, side) {
-        const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);
-        context.beginPath();
-        for (let i = 0; i < verts.length; i++) {
-            const vert = verts[i];
-            if (!vert) {
-                continue;
-            }
-            const x = vert.x * radius, y = vert.y * radius;
-            if (i) {
-                context.lineTo(x, y);
-            }
-            else {
-                context.moveTo(x, y);
-            }
-        }
-        context.closePath();
-    }
-
-    const defaultSides$3 = 5;
-    class PolygonDrawerBase {
-        draw(data) {
-            const { particle, radius } = data, side = this.getSidesData(particle, radius);
-            drawPolygon(data, side);
-        }
-        getSidesCount(particle) {
-            const polygon = particle.shapeData;
-            return Math.round(getRangeValue(polygon?.sides ?? defaultSides$3));
-        }
-    }
-
-    const yFactor$1 = 2.66, sidesFactor$1 = 3;
-    class PolygonDrawer extends PolygonDrawerBase {
-        getSidesData(particle, radius) {
-            const { sides } = particle;
-            return {
-                count: {
-                    denominator: 1,
-                    numerator: sides,
-                },
-                length: (radius * yFactor$1) / (sides / sidesFactor$1),
-            };
-        }
-    }
-
-    const sides$1 = 3, yFactor = 2.66, sidesFactor = 3;
-    class TriangleDrawer extends PolygonDrawerBase {
-        getSidesCount() {
-            return sides$1;
-        }
-        getSidesData(_particle, radius) {
-            return {
-                count: {
-                    denominator: 1,
-                    numerator: sides$1,
-                },
-                length: (radius * yFactor) / (sides$1 / sidesFactor),
-            };
-        }
-    }
-
-    async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
-        });
-    }
-    async function loadTriangleShape(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
-        });
-    }
-    async function loadPolygonShape(engine) {
-        engine.checkVersion("4.2.1");
-        await Promise.all([
-            loadGenericPolygonShape(engine),
-            loadTriangleShape(engine),
-        ]);
-    }
-
-    class RotateAnimation {
-        decay = 0;
-        enable = false;
-        speed = 0;
-        sync = false;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            loadProperty(this, "enable", data.enable);
-            loadRangeProperty(this, "speed", data.speed);
-            loadRangeProperty(this, "decay", data.decay);
-            loadProperty(this, "sync", data.sync);
-        }
-    }
-
-    class Rotate extends ValueWithRandom {
-        animation = new RotateAnimation();
-        direction = exports.RotateDirection.clockwise;
-        path = false;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            loadProperty(this, "direction", data.direction);
-            this.animation.load(data.animation);
-            loadProperty(this, "path", data.path);
-        }
-    }
-
-    const doublePIDeg = 360;
-    class RotateUpdater {
-        #container;
-        constructor(container) {
-            this.#container = container;
-        }
-        init(particle) {
-            const rotateOptions = particle.options.rotate;
-            if (!rotateOptions) {
-                return;
-            }
-            particle.rotate = {
-                enable: rotateOptions.animation.enable,
-                value: degToRad(getRangeValue(rotateOptions.value)),
-                min: 0,
-                max: doublePI,
-            };
-            particle.pathRotation = rotateOptions.path;
-            let rotateDirection = rotateOptions.direction;
-            if (rotateDirection === exports.RotateDirection.random) {
-                const index = Math.floor(getRandom() * double), minIndex = 0;
-                rotateDirection = index > minIndex ? exports.RotateDirection.counterClockwise : exports.RotateDirection.clockwise;
-            }
-            switch (rotateDirection) {
-                case exports.RotateDirection.counterClockwise:
-                case "counterClockwise":
-                    particle.rotate.status = exports.AnimationStatus.decreasing;
-                    break;
-                case exports.RotateDirection.clockwise:
-                    particle.rotate.status = exports.AnimationStatus.increasing;
-                    break;
-            }
-            const rotateAnimation = rotateOptions.animation;
-            if (rotateAnimation.enable) {
-                particle.rotate.decay = identity$3 - getRangeValue(rotateAnimation.decay);
-                particle.rotate.velocity =
-                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.#container.retina.reduceFactor;
-                if (!rotateAnimation.sync) {
-                    particle.rotate.velocity *= getRandom();
-                }
-            }
-            particle.rotation = particle.rotate.value;
-        }
-        isEnabled(particle) {
-            const rotate = particle.options.rotate;
-            if (!rotate) {
-                return false;
-            }
-            return !particle.destroyed && !particle.spawning && (!!rotate.value || rotate.animation.enable || rotate.path);
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "rotate", Rotate, ...sources);
-        }
-        update(particle, delta) {
-            if (!this.isEnabled(particle)) {
-                return;
-            }
-            particle.isRotating = !!particle.rotate;
-            if (!particle.rotate) {
+            particle.isRotating = !!particle.rotate;
+            if (!particle.rotate) {
                 return;
             }
             updateAnimation(particle, particle.rotate, false, exports.DestroyType.none, delta);
@@ -14973,7 +14579,7 @@
     }
 
     const validTypes = ["text", "character", "char", "multiline-text"];
-    const firstIndex$2 = 0, minLength$2 = 0;
+    const firstIndex$3 = 0, minLength$2 = 0;
     function drawText(data) {
         const { context, particle, fill, stroke, radius, opacity } = data, character = particle.shapeData;
         if (!character) {
@@ -14983,7 +14589,7 @@
         particle.textLines ??= itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
         particle.maxTextLength ??= particle.textLines.length
             ? Math.max(...particle.textLines.map(t => t.length))
-            : (particle.textLines[firstIndex$2]?.length ?? minLength$2);
+            : (particle.textLines[firstIndex$3]?.length ?? minLength$2);
         if (!particle.textLines.length || !particle.maxTextLength) {
             return;
         }
@@ -15013,7 +14619,7 @@
         }
     }
 
-    const firstIndex$1 = 0, minLength$1 = 0;
+    const firstIndex$2 = 0, minLength$1 = 0;
     class TextDrawer {
         draw(data) {
             drawText(data);
@@ -15045,7 +14651,7 @@
             particle.textLines = itemFromSingleOrMultiple(textData, particle.randomIndexData)?.split("\n") ?? [];
             particle.maxTextLength = particle.textLines.length
                 ? Math.max(...particle.textLines.map(t => t.length))
-                : (particle.textLines[firstIndex$1]?.length ?? minLength$1);
+                : (particle.textLines[firstIndex$2]?.length ?? minLength$1);
         }
     }
 
@@ -15143,263 +14749,792 @@
                 }
             }
         }
-        isEnabled(particle) {
-            const tiltAnimation = particle.options.tilt?.animation;
-            return !particle.destroyed && !particle.spawning && !!tiltAnimation?.enable;
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "tilt", Tilt, ...sources);
-        }
-        update(particle, delta) {
-            if (!this.isEnabled(particle) || !particle.tilt) {
-                return;
-            }
-            updateAnimation(particle, particle.tilt, false, exports.DestroyType.none, delta);
-        }
-    }
-
-    async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("tilt", container => {
-                return Promise.resolve(new TiltUpdater(container));
-            });
-        });
+        isEnabled(particle) {
+            const tiltAnimation = particle.options.tilt?.animation;
+            return !particle.destroyed && !particle.spawning && !!tiltAnimation?.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "tilt", Tilt, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle) || !particle.tilt) {
+                return;
+            }
+            updateAnimation(particle, particle.tilt, false, exports.DestroyType.none, delta);
+        }
+    }
+
+    async function loadTiltUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("tilt", container => {
+                return Promise.resolve(new TiltUpdater(container));
+            });
+        });
+    }
+
+    class TwinkleLinksValues {
+        color;
+        enable = false;
+        frequency = 0.05;
+        opacity = 1;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = OptionsColor.create(this.color, data.color);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadRangeProperty(this, "opacity", data.opacity);
+        }
+    }
+
+    class TwinkleParticlesValues {
+        enable = false;
+        fillColor;
+        frequency = 0.05;
+        opacity = 1;
+        strokeColor;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            if (data.fillColor !== undefined) {
+                this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
+            }
+            if (data.strokeColor !== undefined) {
+                this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
+            }
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "frequency", data.frequency);
+            loadRangeProperty(this, "opacity", data.opacity);
+        }
+    }
+
+    class Twinkle {
+        links = new TwinkleLinksValues();
+        particles = new TwinkleParticlesValues();
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            this.links.load(data.links);
+            this.particles.load(data.particles);
+        }
+    }
+
+    class TwinkleUpdater {
+        #container;
+        #pluginManager;
+        constructor(pluginManager, container) {
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+        }
+        getColorStyles(particle, _context, _radius, opacity) {
+            const pOptions = particle.options, container = this.#container, twinkleOptions = pOptions["twinkle"];
+            if (!twinkleOptions) {
+                return {};
+            }
+            const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this.#pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this.#pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
+                if (!twinkleFillRgb) {
+                    return undefined;
+                }
+                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
+            }, getTwinkleStrokeStyle = () => {
+                if (!twinkleStrokeRgb) {
+                    return undefined;
+                }
+                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
+            }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
+            res.fill = needsTwinkle ? twinkleFillStyle : undefined;
+            res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
+            return res;
+        }
+        init() {
+        }
+        isEnabled(particle) {
+            const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
+            if (!twinkleOptions) {
+                return false;
+            }
+            return twinkleOptions.particles.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "twinkle", Twinkle, ...sources);
+        }
+        update() {
+        }
+    }
+
+    async function loadTwinkleUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("twinkle", container => {
+                return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
+            });
+        });
+    }
+
+    class WobbleSpeed {
+        angle = 50;
+        move = 10;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadRangeProperty(this, "angle", data.angle);
+            loadRangeProperty(this, "move", data.move);
+        }
+    }
+
+    class Wobble {
+        distance = 5;
+        enable = false;
+        speed = new WobbleSpeed();
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadRangeProperty(this, "distance", data.distance);
+            loadProperty(this, "enable", data.enable);
+            if (data.speed !== undefined) {
+                if (isNumber(data.speed)) {
+                    this.speed.load({ angle: data.speed });
+                }
+                else {
+                    const rangeSpeed = data.speed;
+                    if ("min" in rangeSpeed) {
+                        this.speed.load({ angle: rangeSpeed });
+                    }
+                    else {
+                        this.speed.load(data.speed);
+                    }
+                }
+            }
+        }
+    }
+
+    const defaultDistance$1 = 0, distanceFactor = 60;
+    function updateWobble(container, particle, delta) {
+        const { wobble: wobbleOptions } = particle.options, { wobble } = particle;
+        if (!wobbleOptions?.enable || !wobble) {
+            return;
+        }
+        const reduceFactor = container.retina.reduceFactor, angleSpeed = wobble.angleSpeed * delta.factor * reduceFactor, moveSpeed = wobble.moveSpeed * delta.factor * reduceFactor, distance = (moveSpeed * (particle.retina.wobbleDistance ?? defaultDistance$1)) / (millisecondsToSeconds$1 / distanceFactor), max = doublePI, { position } = particle;
+        wobble.angle += angleSpeed;
+        if (wobble.angle > max) {
+            wobble.angle -= max;
+        }
+        position.x += distance * Math.cos(wobble.angle);
+        position.y += distance * Math.abs(Math.sin(wobble.angle));
+    }
+
+    const maxAngle$1 = 360, moveSpeedFactor$1 = 10, defaultDistance = 0;
+    class WobbleUpdater {
+        #container;
+        constructor(container) {
+            this.#container = container;
+        }
+        init(particle) {
+            const wobbleOpt = particle.options.wobble;
+            if (wobbleOpt?.enable) {
+                particle.wobble = {
+                    angle: getRandom() * doublePI,
+                    angleSpeed: getRangeValue(wobbleOpt.speed.angle) / maxAngle$1,
+                    moveSpeed: getRangeValue(wobbleOpt.speed.move) / moveSpeedFactor$1,
+                };
+            }
+            else {
+                particle.wobble = {
+                    angle: 0,
+                    angleSpeed: 0,
+                    moveSpeed: 0,
+                };
+            }
+            particle.retina.wobbleDistance =
+                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this.#container.retina.pixelRatio;
+        }
+        isEnabled(particle) {
+            return !particle.destroyed && !particle.spawning && !!particle.options.wobble?.enable;
+        }
+        loadOptions(options, ...sources) {
+            loadOptionProperty(options, "wobble", Wobble, ...sources);
+        }
+        update(particle, delta) {
+            if (!this.isEnabled(particle)) {
+                return;
+            }
+            updateWobble(this.#container, particle, delta);
+        }
+    }
+
+    async function loadWobbleUpdater(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addParticleUpdater("wobble", container => {
+                return Promise.resolve(new WobbleUpdater(container));
+            });
+        });
+    }
+
+    async function loadFull(engine) {
+        engine.checkVersion("4.2.1");
+        await engine.pluginManager.register(async (e) => {
+            const loadEmittersPluginBundle = async (e) => {
+                await loadEmittersPlugin(e);
+                await Promise.all([
+                    loadEmittersShapeCircle(e),
+                    loadEmittersShapeSquare(e),
+                ]);
+            }, loadInteractivityForFull = async (e) => {
+                await loadSlim(e);
+                await Promise.all([
+                    loadExternalDragInteraction(e),
+                    loadExternalTrailInteraction(e),
+                    loadAbsorbersPlugin(e),
+                    loadEmittersPluginBundle(e),
+                ]);
+            };
+            await Promise.all([
+                loadInteractivityForFull(e),
+                loadDestroyUpdater(e),
+                loadRollUpdater(e),
+                loadTiltUpdater(e),
+                loadTwinkleUpdater(e),
+                loadWobbleUpdater(e),
+                loadTextShape(e),
+            ]);
+        });
+    }
+
+    const InterlaceOffsets = [0, 4, 2, 1];
+    const InterlaceSteps = [8, 8, 4, 2];
+
+    class ByteStream {
+        data;
+        pos;
+        constructor(bytes) {
+            this.pos = 0;
+            this.data = new Uint8ClampedArray(bytes);
+        }
+        getString(count) {
+            const slice = this.data.slice(this.pos, this.pos + count);
+            this.pos += slice.length;
+            return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
+        }
+        nextByte() {
+            return this.data[this.pos++];
+        }
+        nextTwoBytes() {
+            const increment = 2, previous = 1, shift = 8;
+            this.pos += increment;
+            return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
+        }
+        readSubBlocks() {
+            let blockString = "", size;
+            const minCount = 0, emptySize = 0;
+            do {
+                size = this.data[this.pos++];
+                for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
+                }
+            } while (size !== emptySize);
+            return blockString;
+        }
+        readSubBlocksBin() {
+            let size = this.data[this.pos], len = 0;
+            const emptySize = 0, increment = 1;
+            for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
+                len += size;
+            }
+            const blockData = new Uint8Array(len);
+            size = this.data[this.pos++];
+            for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+                for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
+                }
+            }
+            return blockData;
+        }
+        skipSubBlocks() {
+            for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
+            }
+            this.pos++;
+        }
+    }
+
+    var DisposalMethod;
+    (function (DisposalMethod) {
+        DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
+        DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
+        DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
+        DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
+        DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
+        DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
+        DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
+        DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
+    })(DisposalMethod || (DisposalMethod = {}));
+
+    var GIFDataHeaders;
+    (function (GIFDataHeaders) {
+        GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
+        GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
+        GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
+        GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
+        GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
+        GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
+        GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
+    })(GIFDataHeaders || (GIFDataHeaders = {}));
+
+    const defaultFrame = 0, initialTime = 0, firstIndex$1 = 0, defaultLoopCount = 0;
+    function parseColorTable(byteStream, count) {
+        const colors = [];
+        for (let i = 0; i < count; i++) {
+            colors.push({
+                r: byteStream.data[byteStream.pos],
+                g: byteStream.data[byteStream.pos + 1],
+                b: byteStream.data[byteStream.pos + 2],
+            });
+            byteStream.pos += 3;
+        }
+        return colors;
+    }
+    function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.GraphicsControlExtension: {
+                const frame = gif.frames[getFrameIndex(false)];
+                byteStream.pos++;
+                const packedByte = byteStream.nextByte();
+                frame.GCreserved = (packedByte & 0xe0) >>> 5;
+                frame.disposalMethod = (packedByte & 0x1c) >>> 2;
+                frame.userInputDelayFlag = (packedByte & 2) === 2;
+                const transparencyFlag = (packedByte & 1) === 1;
+                frame.delayTime = byteStream.nextTwoBytes() * 0xa;
+                const transparencyIndex = byteStream.nextByte();
+                if (transparencyFlag) {
+                    getTransparencyIndex(transparencyIndex);
+                }
+                byteStream.pos++;
+                break;
+            }
+            case GIFDataHeaders.ApplicationExtension: {
+                byteStream.pos++;
+                const applicationExtension = {
+                    identifier: byteStream.getString(8),
+                    authenticationCode: byteStream.getString(3),
+                    data: byteStream.readSubBlocksBin(),
+                };
+                gif.applicationExtensions.push(applicationExtension);
+                break;
+            }
+            case GIFDataHeaders.CommentExtension: {
+                gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
+                break;
+            }
+            case GIFDataHeaders.PlainTextExtension: {
+                if (gif.globalColorTable.length === 0) {
+                    throw new EvalError("plain text extension without global color table");
+                }
+                byteStream.pos++;
+                gif.frames[getFrameIndex(false)].plainTextData = {
+                    left: byteStream.nextTwoBytes(),
+                    top: byteStream.nextTwoBytes(),
+                    width: byteStream.nextTwoBytes(),
+                    height: byteStream.nextTwoBytes(),
+                    charSize: {
+                        width: byteStream.nextTwoBytes(),
+                        height: byteStream.nextTwoBytes(),
+                    },
+                    foregroundColor: byteStream.nextByte(),
+                    backgroundColor: byteStream.nextByte(),
+                    text: byteStream.readSubBlocks(),
+                };
+                break;
+            }
+            default:
+                byteStream.skipSubBlocks();
+                break;
+        }
+    }
+    function readBits(imageData, pos, len) {
+        const bytePos = pos >>> 3, bitPos = pos & 7;
+        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
+            (((1 << len) - 1) << bitPos)) >>>
+            bitPos);
+    }
+    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        const frame = gif.frames[getFrameIndex(true)];
+        frame.left = byteStream.nextTwoBytes();
+        frame.top = byteStream.nextTwoBytes();
+        frame.width = byteStream.nextTwoBytes();
+        frame.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
+        frame.sortFlag = (packedByte & 0x20) === 0x20;
+        frame.reserved = (packedByte & 0x18) >>> 3;
+        const localColorCount = 1 << ((packedByte & 7) + 1);
+        if (localColorTableFlag) {
+            frame.localColorTable = parseColorTable(byteStream, localColorCount);
+        }
+        const getColor = (index) => {
+            const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
+            if (index !== getTransparencyIndex(null)) {
+                return { r, g, b, a: 255 };
+            }
+            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
+        }, image = (() => {
+            try {
+                return new ImageData(frame.width, frame.height, canvasSettings);
+            }
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (image == null) {
+            throw new EvalError("GIF frame size is to large");
+        }
+        const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
+        if (interlacedFlag) {
+            for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
+                if (InterlaceOffsets[pass] < frame.height) {
+                    let pixelPos = 0, lineIndex = 0, exit = false;
+                    while (!exit) {
+                        const last = code;
+                        code = readBits(imageData, pos, size);
+                        pos += size + 1;
+                        if (code === clearCode) {
+                            size = minCodeSize + 1;
+                            dic.length = clearCode + 2;
+                            for (let i = 0; i < dic.length; i++) {
+                                dic[i] = i < clearCode ? [i] : [];
+                            }
+                        }
+                        else {
+                            if (code >= dic.length) {
+                                dic.push(dic[last].concat(dic[last][0]));
+                            }
+                            else if (last !== clearCode) {
+                                dic.push(dic[last].concat(dic[code][0]));
+                            }
+                            for (const item of dic[code]) {
+                                const { r, g, b, a } = getColor(item);
+                                image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
+                                    InterlaceSteps[pass] * lineIndex +
+                                    (pixelPos % (frame.width * 4)));
+                                pixelPos += 4;
+                            }
+                            if (dic.length === 1 << size && size < 0xc) {
+                                size++;
+                            }
+                        }
+                        if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
+                            lineIndex++;
+                            if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
+                                exit = true;
+                            }
+                        }
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
+        else {
+            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
+            const dic = [[0]];
+            for (;;) {
+                const last = code;
+                code = readBits(imageData, pos, size);
+                pos += size;
+                if (code === clearCode) {
+                    size = minCodeSize + 1;
+                    dic.length = clearCode + 2;
+                    for (let i = 0; i < dic.length; i++) {
+                        dic[i] = i < clearCode ? [i] : [];
+                    }
+                }
+                else {
+                    if (code === clearCode + 1) {
+                        break;
+                    }
+                    if (code >= dic.length) {
+                        dic.push(dic[last].concat(dic[last][0]));
+                    }
+                    else if (last !== clearCode) {
+                        dic.push(dic[last].concat(dic[code][0]));
+                    }
+                    for (const item of dic[code]) {
+                        const { r, g, b, a } = getColor(item);
+                        pixelPos += 4;
+                        image.data.set([r, g, b, a], pixelPos);
+                    }
+                    if (dic.length >= 1 << size && size < 0xc) {
+                        size++;
+                    }
+                }
+            }
+            frame.image = image;
+            frame.bitmap = await createImageBitmap(image);
+        }
     }
-
-    class TwinkleLinksValues {
-        color;
-        enable = false;
-        frequency = 0.05;
-        opacity = 1;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.color !== undefined) {
-                this.color = OptionsColor.create(this.color, data.color);
-            }
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadRangeProperty(this, "opacity", data.opacity);
+    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
+        switch (byteStream.nextByte()) {
+            case GIFDataHeaders.EndOfFile:
+                return true;
+            case GIFDataHeaders.Image:
+                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings);
+                break;
+            case GIFDataHeaders.Extension:
+                parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+                break;
+            default:
+                throw new EvalError("undefined block found");
         }
+        return false;
     }
-
-    class TwinkleParticlesValues {
-        enable = false;
-        fillColor;
-        frequency = 0.05;
-        opacity = 1;
-        strokeColor;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.fillColor !== undefined) {
-                this.fillColor = OptionsColor.create(this.fillColor, data.fillColor);
-            }
-            if (data.strokeColor !== undefined) {
-                this.strokeColor = OptionsColor.create(this.strokeColor, data.strokeColor);
+    function getGIFLoopAmount(gif) {
+        for (const extension of gif.applicationExtensions) {
+            if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
+                continue;
             }
-            loadProperty(this, "enable", data.enable);
-            loadProperty(this, "frequency", data.frequency);
-            loadRangeProperty(this, "opacity", data.opacity);
+            return extension.data[1] + (extension.data[2] << 8);
         }
+        return Number.NaN;
     }
-
-    class Twinkle {
-        links = new TwinkleLinksValues();
-        particles = new TwinkleParticlesValues();
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            this.links.load(data.links);
-            this.particles.load(data.particles);
+    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
+        avgAlpha ??= false;
+        const res = await fetch(gifURL);
+        if (!res.ok && res.status === 404) {
+            throw new EvalError("file not found");
         }
-    }
-
-    class TwinkleUpdater {
-        #container;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            this.#pluginManager = pluginManager;
-            this.#container = container;
+        const buffer = await res.arrayBuffer(), gif = {
+            width: 0,
+            height: 0,
+            totalTime: 0,
+            colorRes: 0,
+            pixelAspectRatio: 0,
+            frames: [],
+            sortFlag: false,
+            globalColorTable: [],
+            backgroundImage: new ImageData(1, 1, canvasSettings),
+            comments: [],
+            applicationExtensions: [],
+        }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
+        if (byteStream.getString(6) !== "GIF89a") {
+            throw new Error("not a supported GIF file");
         }
-        getColorStyles(particle, _context, _radius, opacity) {
-            const pOptions = particle.options, container = this.#container, twinkleOptions = pOptions["twinkle"];
-            if (!twinkleOptions) {
-                return {};
-            }
-            const twinkle = twinkleOptions.particles, twinkling = twinkle.enable && getRandom() < twinkle.frequency, zIndexOptions = particle.options.zIndex, zOffset = 1, zOpacityFactor = (zOffset - particle.zIndexFactor) ** zIndexOptions.opacityRate, twinklingOpacity = twinkling ? getRangeValue(twinkle.opacity) * zOpacityFactor : opacity, twinkleFillRgb = rangeColorToHsl(this.#pluginManager, twinkle.fillColor), twinkleStrokeRgb = rangeColorToHsl(this.#pluginManager, twinkle.strokeColor), getTwinkleFillStyle = () => {
-                if (!twinkleFillRgb) {
-                    return undefined;
-                }
-                return getStyleFromHsl(twinkleFillRgb, container.hdr, twinklingOpacity);
-            }, getTwinkleStrokeStyle = () => {
-                if (!twinkleStrokeRgb) {
-                    return undefined;
-                }
-                return getStyleFromHsl(twinkleStrokeRgb, container.hdr, twinklingOpacity);
-            }, twinkleFillStyle = getTwinkleFillStyle(), twinkleStrokeStyle = getTwinkleStrokeStyle(), res = {}, needsTwinkle = twinkling && (!!twinkleFillStyle || !!twinkleStrokeStyle);
-            res.fill = needsTwinkle ? twinkleFillStyle : undefined;
-            res.stroke = needsTwinkle ? twinkleStrokeStyle : undefined;
-            return res;
+        gif.width = byteStream.nextTwoBytes();
+        gif.height = byteStream.nextTwoBytes();
+        const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
+        gif.colorRes = (packedByte & 0x70) >>> 4;
+        gif.sortFlag = (packedByte & 8) === 8;
+        const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
+        gif.pixelAspectRatio = byteStream.nextByte();
+        if (gif.pixelAspectRatio !== 0) {
+            gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
         }
-        init() {
+        if (globalColorTableFlag) {
+            gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
         }
-        isEnabled(particle) {
-            const pOptions = particle.options, twinkleOptions = pOptions.twinkle;
-            if (!twinkleOptions) {
-                return false;
+        const backgroundImage = (() => {
+            try {
+                return new ImageData(gif.width, gif.height, canvasSettings);
             }
-            return twinkleOptions.particles.enable;
-        }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "twinkle", Twinkle, ...sources);
+            catch (error) {
+                if (error instanceof DOMException && error.name === "IndexSizeError") {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (backgroundImage == null) {
+            throw new Error("GIF frame size is to large");
         }
-        update() {
+        const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
+        backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
+        for (let i = 4; i < backgroundImage.data.length; i *= 2) {
+            backgroundImage.data.copyWithin(i, 0, i);
         }
-    }
-
-    async function loadTwinkleUpdater(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("twinkle", container => {
-                return Promise.resolve(new TwinkleUpdater(e.pluginManager, container));
-            });
-        });
-    }
-
-    class WobbleSpeed {
-        angle = 50;
-        move = 10;
-        load(data) {
-            if (isNull(data)) {
-                return;
+        gif.backgroundImage = backgroundImage;
+        let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
+        const getframeIndex = (increment) => {
+            if (increment) {
+                incrementFrameIndex = true;
             }
-            loadRangeProperty(this, "angle", data.angle);
-            loadRangeProperty(this, "move", data.move);
-        }
-    }
-
-    class Wobble {
-        distance = 5;
-        enable = false;
-        speed = new WobbleSpeed();
-        load(data) {
-            if (isNull(data)) {
-                return;
+            return frameIndex;
+        }, getTransparencyIndex = (newValue) => {
+            if (newValue != null) {
+                transparencyIndex = newValue;
             }
-            loadRangeProperty(this, "distance", data.distance);
-            loadProperty(this, "enable", data.enable);
-            if (data.speed !== undefined) {
-                if (isNumber(data.speed)) {
-                    this.speed.load({ angle: data.speed });
+            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;
                 }
-                else {
-                    const rangeSpeed = data.speed;
-                    if ("min" in rangeSpeed) {
-                        this.speed.load({ angle: rangeSpeed });
-                    }
-                    else {
-                        this.speed.load(data.speed);
-                    }
+            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
+            gif.frames.length--;
+            for (const frame of gif.frames) {
+                if (frame.userInputDelayFlag && frame.delayTime === 0) {
+                    gif.totalTime = Infinity;
+                    break;
                 }
+                gif.totalTime += frame.delayTime;
+            }
+            return gif;
+        }
+        catch (error) {
+            if (error instanceof EvalError) {
+                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
             }
+            throw error;
         }
     }
-
-    const defaultDistance$1 = 0, distanceFactor = 60;
-    function updateWobble(container, particle, delta) {
-        const { wobble: wobbleOptions } = particle.options, { wobble } = particle;
-        if (!wobbleOptions?.enable || !wobble) {
+    function drawGif(data, canvasSettings) {
+        const { context, radius, particle, delta } = data, gifData = particle.gifData;
+        if (!gifData) {
             return;
         }
-        const reduceFactor = container.retina.reduceFactor, angleSpeed = wobble.angleSpeed * delta.factor * reduceFactor, moveSpeed = wobble.moveSpeed * delta.factor * reduceFactor, distance = (moveSpeed * (particle.retina.wobbleDistance ?? defaultDistance$1)) / (millisecondsToSeconds$1 / distanceFactor), max = doublePI, { position } = particle;
-        wobble.angle += angleSpeed;
-        if (wobble.angle > max) {
-            wobble.angle -= max;
+        const offscreenCanvas = new OffscreenCanvas(gifData.width, gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
+        if (!offscreenContext) {
+            throw new Error("could not create offscreen canvas context");
         }
-        position.x += distance * Math.cos(wobble.angle);
-        position.y += distance * Math.abs(Math.sin(wobble.angle));
+        offscreenContext.imageSmoothingQuality = "low";
+        offscreenContext.imageSmoothingEnabled = false;
+        offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+        let frameIndex = particle.gifFrame ?? defaultFrame;
+        const pos = { x: -gifData.width * half$2, y: -gifData.height * half$2 }, frame = gifData.frames[frameIndex];
+        particle.gifTime ??= initialTime;
+        if (!frame.bitmap) {
+            return;
+        }
+        context.scale(radius / gifData.width, radius / gifData.height);
+        switch (frame.disposalMethod) {
+            case DisposalMethod.UndefinedA:
+            case DisposalMethod.UndefinedB:
+            case DisposalMethod.UndefinedC:
+            case DisposalMethod.UndefinedD:
+            case DisposalMethod.Replace:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                break;
+            case DisposalMethod.Combine:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                break;
+            case DisposalMethod.RestoreBackground:
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                if (!gifData.globalColorTable.length) {
+                    offscreenContext.putImageData(gifData.frames[firstIndex$1].image, pos.x + frame.left, pos.y + frame.top);
+                }
+                else {
+                    offscreenContext.putImageData(gifData.backgroundImage, pos.x, pos.y);
+                }
+                break;
+            case DisposalMethod.RestorePrevious:
+                {
+                    const previousImageData = offscreenContext.getImageData(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                    context.drawImage(offscreenCanvas, pos.x, pos.y);
+                    offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.putImageData(previousImageData, originPoint.x, originPoint.y);
+                }
+                break;
+        }
+        particle.gifTime += delta.value;
+        if (particle.gifTime > frame.delayTime) {
+            particle.gifTime -= frame.delayTime;
+            if (++frameIndex >= gifData.frames.length) {
+                if (particle.gifLoopCount == null || --particle.gifLoopCount <= defaultLoopCount) {
+                    return;
+                }
+                frameIndex = firstIndex$1;
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+            }
+            particle.gifFrame = frameIndex;
+        }
+        context.scale(gifData.width / radius, gifData.height / radius);
     }
 
-    const maxAngle$1 = 360, moveSpeedFactor$1 = 10, defaultDistance = 0;
-    class WobbleUpdater {
+    class GifDrawer {
         #container;
+        #gifCache;
         constructor(container) {
             this.#container = container;
+            this.#gifCache = new Map();
         }
-        init(particle) {
-            const wobbleOpt = particle.options.wobble;
-            if (wobbleOpt?.enable) {
-                particle.wobble = {
-                    angle: getRandom() * doublePI,
-                    angleSpeed: getRangeValue(wobbleOpt.speed.angle) / maxAngle$1,
-                    moveSpeed: getRangeValue(wobbleOpt.speed.move) / moveSpeedFactor$1,
-                };
-            }
-            else {
-                particle.wobble = {
-                    angle: 0,
-                    angleSpeed: 0,
-                    moveSpeed: 0,
-                };
-            }
-            particle.retina.wobbleDistance =
-                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this.#container.retina.pixelRatio;
+        destroy() {
+            this.#gifCache.clear();
         }
-        isEnabled(particle) {
-            return !particle.destroyed && !particle.spawning && !!particle.options.wobble?.enable;
+        draw(data) {
+            const { context, opacity } = data;
+            if (!data.particle.gifData)
+                return;
+            context.globalAlpha = opacity;
+            drawGif(data, this.#container.canvas.render.settings);
+            context.globalAlpha = 1;
         }
-        loadOptions(options, ...sources) {
-            loadOptionProperty(options, "wobble", Wobble, ...sources);
+        loadShape(particle) {
+            const shapeData = particle.shapeData;
+            if (!shapeData?.src)
+                return;
+            if (this.#gifCache.has(shapeData.src))
+                return;
+            void decodeGIF(shapeData.src, { colorSpace: "srgb" }).then(gifData => {
+                this.#gifCache.set(shapeData.src, gifData);
+            });
         }
-        update(particle, delta) {
-            if (!this.isEnabled(particle)) {
+        particleInit(container, particle) {
+            const shapeData = particle.shapeData;
+            if (!shapeData?.src)
+                return;
+            const gifData = this.#gifCache.get(shapeData.src);
+            if (!gifData) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
                 return;
             }
-            updateWobble(this.#container, particle, delta);
+            particle.gifData = gifData;
+            particle.gifFrame = 0;
+            particle.gifTime = 0;
+            particle.gifLoopCount = getGIFLoopAmount(gifData);
+            if (particle.gifLoopCount === 0) {
+                particle.gifLoopCount = Number.POSITIVE_INFINITY;
+            }
+            if (shapeData.loopCount !== undefined) {
+                particle.gifLoopCount = shapeData.loopCount;
+            }
         }
     }
 
-    async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.2.1");
+    async function loadGifShape(engine) {
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(e => {
-            e.pluginManager.addParticleUpdater("wobble", container => {
-                return Promise.resolve(new WobbleUpdater(container));
-            });
-        });
-    }
-
-    async function loadFull(engine) {
-        engine.checkVersion("4.2.1");
-        await engine.pluginManager.register(async (e) => {
-            const loadEmittersPluginBundle = async (e) => {
-                await loadEmittersPlugin(e);
-                await Promise.all([
-                    loadEmittersShapeCircle(e),
-                    loadEmittersShapeSquare(e),
-                ]);
-            }, loadInteractivityForFull = async (e) => {
-                await loadSlim(e);
-                await Promise.all([
-                    loadExternalDragInteraction(e),
-                    loadExternalTrailInteraction(e),
-                    loadAbsorbersPlugin(e),
-                    loadEmittersPluginBundle(e),
-                ]);
-            };
-            await Promise.all([
-                loadInteractivityForFull(e),
-                loadDestroyUpdater(e),
-                loadRollUpdater(e),
-                loadTiltUpdater(e),
-                loadTwinkleUpdater(e),
-                loadWobbleUpdater(e),
-                loadTextShape(e),
-            ]);
+            e.pluginManager.addShape(["gif", "gifs"], container => Promise.resolve(new GifDrawer(container)));
         });
     }
 
@@ -15513,14 +15648,14 @@
         }
     }
 
-    function updateGradient(particle, delta) {
+    function updateGradient(particle, delta, hdr) {
         const { gradient } = particle;
         if (!gradient) {
             return;
         }
         updateAnimation(particle, gradient.angle, false, exports.DestroyType.none, delta);
         for (const color of gradient.colors) {
-            updateColor(color.value, delta);
+            updateColor(color.value, delta, hdr);
             if (color.opacity) {
                 updateAnimation(particle, color.opacity, true, exports.DestroyType.none, delta);
             }
@@ -15652,7 +15787,7 @@
             }
         }
         update(particle, delta) {
-            updateGradient(particle, delta);
+            updateGradient(particle, delta, this.#container.hdr);
         }
     }
 
@@ -20050,7 +20185,7 @@
     }
 
     async function loadAll(engine) {
-        engine.checkVersion("4.2.1");
+        engine.checkVersion("4.3.0");
         await engine.pluginManager.register(async (e) => {
             const loadInteractionsForAll = async (e) => {
                 await loadFull(e);
@@ -20126,6 +20261,7 @@
                 loadArrowShape(e),
                 loadCardsShape(e),
                 loadCogShape(e),
+                loadGifShape(e),
                 loadHeartShape(e),
                 loadInfinityShape(e),
                 loadMatrixShape(e),
@@ -20151,10 +20287,10 @@
         }
     }
     class RenderManager {
+        #backgroundElement;
+        #backgroundWarnings;
         #canvasClearPlugins;
         #canvasManager;
-        #canvasPaintPlugins;
-        #clearDrawPlugins;
         #colorPlugins;
         #container;
         #context;
@@ -20162,9 +20298,7 @@
         #drawParticlePlugins;
         #drawParticlesCleanupPlugins;
         #drawParticlesSetupPlugins;
-        #drawPlugins;
-        #drawSettingsCleanupPlugins;
-        #drawSettingsSetupPlugins;
+        #layers;
         #pluginManager;
         #postDrawUpdaters;
         #preDrawUpdaters;
@@ -20176,18 +20310,25 @@
             this.#container = container;
             this.#canvasManager = canvasManager;
             this.#context = null;
+            this.#backgroundElement = null;
+            this.#backgroundWarnings = new Set();
             this.#preDrawUpdaters = [];
             this.#postDrawUpdaters = [];
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesCleanupPlugins = [];
             this.#drawParticlesSetupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            this.#layers = {
+                0: [],
+                1: [],
+                2: [],
+                3: [],
+                4: [],
+                5: [],
+                6: [],
+                7: [],
+            };
         }
         get settings() {
             return this.#contextSettings;
@@ -20201,32 +20342,38 @@
             });
         }
         clear() {
-            let pluginHandled = false;
             for (const plugin of this.#canvasClearPlugins) {
-                pluginHandled = plugin.canvasClear?.() ?? false;
-                if (pluginHandled) {
-                    break;
+                if (plugin.canvasClear?.() ?? false) {
+                    return;
                 }
             }
-            if (pluginHandled) {
-                return;
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    for (const plugin of this.#getLayerPlugins(layer)) {
+                        if (plugin.canvasClear?.() ?? false) {
+                            return;
+                        }
+                    }
+                }
             }
             this.canvasClear();
         }
         destroy() {
             this.stop();
+            this.#backgroundElement = null;
+            this.#backgroundWarnings.clear();
             this.#preDrawUpdaters = [];
             this.#postDrawUpdaters = [];
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesCleanupPlugins = [];
             this.#drawParticlesSetupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
+                }
+            }
         }
         draw(cb) {
             const ctx = this.#context;
@@ -20283,21 +20430,40 @@
             });
         }
         drawParticles(delta) {
-            const { particles } = this.#container;
+            const { particles, actualOptions } = this.#container;
             this.clear();
             particles.update(delta);
             this.draw(ctx => {
-                for (const plugin of this.#drawSettingsSetupPlugins) {
+                const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
+                if (this.#backgroundElement) {
+                    try {
+                        ctx.drawImage(this.#backgroundElement, originPoint.x, originPoint.y, width, height);
+                    }
+                    catch {
+                        this.#warnOnce("background-element-draw-error", "Error drawing background element onto canvas");
+                    }
+                }
+                const background = actualOptions.background;
+                if (background.draw) {
+                    try {
+                        background.draw(ctx, delta);
+                    }
+                    catch {
+                        this.#warnOnce("background-draw-error", "Error in background.draw callback");
+                    }
+                }
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
+                    plugin.canvasPaint?.();
+                }
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
                 }
-                for (const plugin of this.#drawPlugins) {
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.PluginContent)) {
                     plugin.draw?.(ctx, delta);
                 }
                 particles.drawParticles(delta);
-                for (const plugin of this.#clearDrawPlugins) {
+                for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasCleanup)) {
                     plugin.clearDraw?.(ctx, delta);
-                }
-                for (const plugin of this.#drawSettingsCleanupPlugins) {
                     plugin.drawSettingsCleanup?.(ctx, delta);
                 }
             });
@@ -20305,29 +20471,24 @@
         init() {
             this.initUpdaters();
             this.initPlugins();
+            this.#resolveBackgroundElement();
             this.paint();
         }
         initPlugins() {
-            this.#colorPlugins = [];
             this.#canvasClearPlugins = [];
-            this.#canvasPaintPlugins = [];
-            this.#clearDrawPlugins = [];
+            this.#colorPlugins = [];
             this.#drawParticlePlugins = [];
             this.#drawParticlesSetupPlugins = [];
             this.#drawParticlesCleanupPlugins = [];
-            this.#drawPlugins = [];
-            this.#drawSettingsSetupPlugins = [];
-            this.#drawSettingsCleanupPlugins = [];
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
+                }
+            }
             for (const plugin of this.#container.plugins) {
                 if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                     this.#colorPlugins.push(plugin);
                 }
-                if (plugin.canvasClear) {
-                    this.#canvasClearPlugins.push(plugin);
-                }
-                if (plugin.canvasPaint) {
-                    this.#canvasPaintPlugins.push(plugin);
-                }
                 if (plugin.drawParticle) {
                     this.#drawParticlePlugins.push(plugin);
                 }
@@ -20337,17 +20498,20 @@
                 if (plugin.drawParticleCleanup) {
                     this.#drawParticlesCleanupPlugins.push(plugin);
                 }
-                if (plugin.draw) {
-                    this.#drawPlugins.push(plugin);
+                if (plugin.canvasClear) {
+                    this.#canvasClearPlugins.push(plugin);
+                }
+                if (plugin.canvasPaint) {
+                    this.#getLayerPlugins(exports.DrawLayer.BackgroundMask).push(plugin);
                 }
                 if (plugin.drawSettingsSetup) {
-                    this.#drawSettingsSetupPlugins.push(plugin);
+                    this.#getLayerPlugins(exports.DrawLayer.CanvasSetup).push(plugin);
                 }
-                if (plugin.drawSettingsCleanup) {
-                    this.#drawSettingsCleanupPlugins.push(plugin);
+                if (plugin.draw) {
+                    this.#getLayerPlugins(exports.DrawLayer.PluginContent).push(plugin);
                 }
-                if (plugin.clearDraw) {
-                    this.#clearDrawPlugins.push(plugin);
+                if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
+                    this.#getLayerPlugins(exports.DrawLayer.CanvasCleanup).push(plugin);
                 }
             }
         }
@@ -20365,7 +20529,7 @@
         }
         paint() {
             let handled = false;
-            for (const plugin of this.#canvasPaintPlugins) {
+            for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
                 handled = plugin.canvasPaint?.() ?? false;
                 if (handled) {
                     break;
@@ -20538,6 +20702,9 @@
             }
             drawer.beforeDraw(data);
         }
+        #getLayerPlugins(layer) {
+            return this.#layers[layer];
+        }
         #getPluginParticleColors(particle) {
             let fColor, sColor;
             for (const plugin of this.#colorPlugins) {
@@ -20555,6 +20722,39 @@
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
         }
+        #resolveBackgroundElement() {
+            const background = this.#container.actualOptions.background;
+            this.#backgroundElement = null;
+            if (!background.element) {
+                return;
+            }
+            if (typeof background.element === "string") {
+                if (typeof document !== "undefined") {
+                    const node = document.querySelector(background.element);
+                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                        this.#backgroundElement = node;
+                    }
+                    else if (node) {
+                        this.#warnOnce("background-element-not-supported", `Background element "${background.element}" is not a supported drawable element (canvas, video, or img)`);
+                    }
+                    else {
+                        this.#warnOnce("background-element-not-found", `Background element selector "${background.element}" not found`);
+                    }
+                }
+            }
+            else if (background.element instanceof HTMLCanvasElement ||
+                background.element instanceof OffscreenCanvas ||
+                background.element instanceof HTMLVideoElement ||
+                background.element instanceof HTMLImageElement) {
+                this.#backgroundElement = background.element;
+            }
+        }
+        #warnOnce(key, message) {
+            if (!this.#backgroundWarnings.has(key)) {
+                this.#backgroundWarnings.add(key);
+                getLogger().warning(message);
+            }
+        }
     }
 
     const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -21131,7 +21331,6 @@
     }
     class Particle {
         backColor;
-        bubble;
         destroyed;
         direction;
         effect;
@@ -21165,7 +21364,6 @@
         shapeData;
         sides;
         size;
-        slow;
         spawning;
         strokeColor;
         strokeOpacity;
@@ -21187,18 +21385,25 @@
             d: 1,
         };
         #container;
+        #modifiers = [];
         #pluginManager;
         constructor(pluginManager, container) {
             this.#pluginManager = pluginManager;
             this.#container = container;
         }
+        addModifier(modifier) {
+            this.#modifiers.push(modifier);
+            this.#modifiers.sort((a, b) => a.priority - b.priority);
+        }
+        clearModifiers() {
+            this.#modifiers.length = 0;
+        }
         destroy(override) {
             if (this.unbreakable || this.destroyed) {
                 return;
             }
             this.destroyed = true;
-            this.bubble.inRange = false;
-            this.slow.inRange = false;
+            this.clearModifiers();
             const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
             for (const plugin of container.particleDestroyedPlugins) {
@@ -21220,13 +21425,16 @@
             return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle$1);
         }
         getFillColor() {
-            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
+            return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.fillColor), m => m.fillColor));
         }
         getMass() {
             return this.getRadius() ** squareExp * Math.PI * half$2;
         }
+        getModifier(id) {
+            return this.#modifiers.find(m => m.id === id);
+        }
         getOpacity() {
-            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity$3), fillOpacity = this.fillOpacity ?? defaultOpacity$3, strokeOpacity = this.strokeOpacity ?? defaultOpacity$3;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$3), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$3, strokeOpacity = this.strokeOpacity ?? defaultOpacity$3;
             this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
             this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
@@ -21239,7 +21447,7 @@
             return this.#cachedPosition;
         }
         getRadius() {
-            return this.bubble.radius ?? this.size.value;
+            return this.#applyModifiers(this.size.value, m => m.radius);
         }
         getRotateData() {
             const angle = this.getAngle();
@@ -21248,7 +21456,7 @@
             return this.#cachedRotateData;
         }
         getStrokeColor() {
-            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
+            return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.strokeColor), m => m.strokeColor));
         }
         getTransformData(externalTransform) {
             const rotateData = this.getRotateData(), rotating = this.isRotating;
@@ -21268,13 +21476,6 @@
             this.options = resolveParticleOptions(this, container, this.#pluginManager, overrideOptions);
             container.retina.initParticle(this);
             runUpdaterPreInit(container.particleUpdaters, this);
-            this.bubble = {
-                inRange: false,
-            };
-            this.slow = {
-                inRange: false,
-                factor: 1,
-            };
             this.#initPosition(position);
             this.initialVelocity = this.#calculateVelocity();
             this.velocity = this.initialVelocity.copy();
@@ -21314,11 +21515,29 @@
         isVisible() {
             return !this.destroyed && !this.spawning && this.isInsideCanvas();
         }
+        removeModifier(id) {
+            const idx = this.#modifiers.findIndex(m => m.id === id);
+            if (idx >= defaultAngle$1) {
+                this.#modifiers.splice(idx, identity$3);
+            }
+        }
         reset() {
             for (const updater of this.#container.particleUpdaters) {
                 updater.reset?.(this);
             }
         }
+        #applyModifiers(base, getter) {
+            let value = base;
+            for (const mod of this.#modifiers) {
+                if (mod.enabled) {
+                    const override = getter(mod);
+                    if (override !== undefined) {
+                        value = override;
+                    }
+                }
+            }
+            return value;
+        }
         #calcPosition(position, zIndex) {
             let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
             const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size;
@@ -22420,10 +22639,13 @@
     });
 
     class BackgroundMaskPluginInstance {
+        layer = exports.DrawLayer.BackgroundMask;
         #container;
         #coverColorStyle;
         #coverImage;
         #defaultCompositeValue;
+        #maskElement;
+        #maskWarnings = new Set();
         #pluginManager;
         constructor(pluginManager, container) {
             this.#pluginManager = pluginManager;
@@ -22437,19 +22659,52 @@
             return this.canvasPaint();
         }
         canvasPaint() {
-            if (!this.#container.actualOptions.backgroundMask?.enable) {
+            const { backgroundMask } = this.#container.actualOptions;
+            if (!backgroundMask?.enable) {
                 return false;
             }
             const canvas = this.#container.canvas;
             canvas.render.canvasClear();
-            if (this.#coverImage) {
-                canvas.render.paintImage(this.#coverImage.image, this.#coverImage.opacity);
+            const cover = backgroundMask.cover;
+            let dynamicUsed = false;
+            const maskElement = this.#maskElement;
+            if (maskElement) {
+                dynamicUsed = true;
+                canvas.render.draw(ctx => {
+                    try {
+                        ctx.drawImage(maskElement, originPoint.x, originPoint.y, canvas.size.width, canvas.size.height);
+                    }
+                    catch {
+                        this.#maskWarnOnce("mask-element-draw-error", "Error drawing background mask cover element onto canvas");
+                    }
+                });
             }
-            else {
-                canvas.render.paintBase(this.#coverColorStyle);
+            if (cover.draw) {
+                dynamicUsed = true;
+                const drawFn = cover.draw;
+                canvas.render.draw(ctx => {
+                    try {
+                        drawFn(ctx, { value: 0, factor: 1 });
+                    }
+                    catch {
+                        this.#maskWarnOnce("mask-draw-error", "Error in mask cover.draw callback");
+                    }
+                });
+            }
+            if (!dynamicUsed) {
+                if (this.#coverImage) {
+                    canvas.render.paintImage(this.#coverImage.image, this.#coverImage.opacity);
+                }
+                else {
+                    canvas.render.paintBase(this.#coverColorStyle);
+                }
             }
             return true;
         }
+        destroy() {
+            this.#maskElement = null;
+            this.#maskWarnings.clear();
+        }
         drawSettingsCleanup(context) {
             if (!this.#defaultCompositeValue) {
                 return;
@@ -22462,7 +22717,9 @@
             context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
         }
         async init() {
+            this.#maskWarnings.clear();
             await this.#initCover();
+            this.#resolveMaskElement();
         }
         #initCover = async () => {
             const options = this.#container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
@@ -22476,11 +22733,9 @@
                     this.#coverColorStyle = getStyleFromRgb(coverColor, this.#container.hdr, coverColor.a);
                 }
             }
-            else {
+            else if (cover?.image) {
+                const coverImage = cover.image;
                 await new Promise((resolve, reject) => {
-                    if (!cover?.image) {
-                        return;
-                    }
                     const img = safeDocument().createElement("img");
                     img.addEventListener("load", () => {
                         this.#coverImage = {
@@ -22492,10 +22747,44 @@
                     img.addEventListener("error", () => {
                         reject(new Error("Error loading image"));
                     });
-                    img.src = cover.image;
+                    img.src = coverImage;
                 });
             }
         };
+        #maskWarnOnce = (key, message) => {
+            if (this.#maskWarnings.has(key)) {
+                return;
+            }
+            this.#maskWarnings.add(key);
+            getLogger().warning(`[tsParticles BackgroundMask] ${message}`);
+        };
+        #resolveMaskElement = () => {
+            const cover = this.#container.actualOptions.backgroundMask?.cover;
+            this.#maskElement = null;
+            if (!cover?.element) {
+                return;
+            }
+            if (typeof cover.element === "string") {
+                if (typeof document !== "undefined") {
+                    const node = document.querySelector(cover.element);
+                    if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                        this.#maskElement = node;
+                    }
+                    else if (node) {
+                        this.#maskWarnOnce("mask-element-not-supported", `Mask cover element "${cover.element}" matched a non-drawable element (expected canvas, video, or img)`);
+                    }
+                    else {
+                        this.#maskWarnOnce("mask-element-not-found", `Mask cover element selector "${cover.element}" not found in the DOM`);
+                    }
+                }
+            }
+            else if (cover.element instanceof HTMLCanvasElement ||
+                cover.element instanceof OffscreenCanvas ||
+                cover.element instanceof HTMLVideoElement ||
+                cover.element instanceof HTMLImageElement) {
+                this.#maskElement = cover.element;
+            }
+        };
     }
 
     var BackgroundMaskPluginInstance$1 = /*#__PURE__*/Object.freeze({
@@ -22611,7 +22900,8 @@
         particle.lastPathTime -= pathDelay;
     }
     function getProximitySpeedFactor(particle) {
-        return particle.slow.inRange ? particle.slow.factor : identity$3;
+        const mod = particle.getModifier("slow");
+        return mod?.enabled ? (mod.speedFactor ?? identity$3) : identity$3;
     }
     function initSpin(container, particle) {
         const options = particle.options, spinOptions = options.move.spin;
@@ -23775,6 +24065,7 @@
     });
 
     class BlendPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #defaultCompositeValue;
         constructor(container) {
@@ -26880,6 +27171,7 @@
 
     const minimumLength = 0;
     class TrailPluginInstance {
+        layer = exports.DrawLayer.PluginContent;
         #container;
         #pluginManager;
         #trailFill;
@@ -27133,6 +27425,7 @@
     }
 
     class ZoomPluginInstance {
+        layer = exports.DrawLayer.CanvasSetup;
         #container;
         #listeners;
         constructor(container) {
@@ -28044,6 +28337,7 @@
     exports.hPhase = hPhase;
     exports.half = half$2;
     exports.hslToRgb = hslToRgb;
+    exports.hslToRgbFloat = hslToRgbFloat;
     exports.hslaToRgba = hslaToRgba;
     exports.identity = identity$3;
     exports.inverseFactorNumerator = inverseFactorNumerator;