@tsparticles/ribbons 4.1.3 → 4.2.1

package/tsparticles.ribbons.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.1.3 */
+/* tsParticles v4.2.1 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -15,7 +15,7 @@
         b: 0,
         c: 0,
         d: 1,
-    }, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha$1 = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half$1 + quarter, minVelocity$5 = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$1 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle$1 = 0, identity$3 = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
+    }, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha$1 = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half$1 + quarter, minVelocity = 0, minDistance = 0, minRadius$2 = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$1 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle$1 = 0, identity$2 = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, maxNits = 400, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
 
     exports.MoveDirection = void 0;
     (function (MoveDirection) {
@@ -82,11 +82,6 @@
         div(n) {
             return Vector3d.create(this.x / n, this.y / n, this.z / n);
         }
-        divTo(n) {
-            this.x /= n;
-            this.y /= n;
-            this.z /= n;
-        }
         getLengthSq() {
             return this.x ** squareExp + this.y ** squareExp;
         }
@@ -176,6 +171,9 @@
     function setRandom(rnd = Math.random) {
         _random = rnd;
     }
+    function getRandomFn() {
+        return _random;
+    }
     function getRandom() {
         const min = 0, max = 1;
         return clamp(_random(), min, max - Number.EPSILON);
@@ -311,13 +309,6 @@
             y: position?.y ?? getRandom() * size.height,
         };
     }
-    function calcExactPositionOrRandomFromSizeRanged(data) {
-        const position = {
-            x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
-            y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
-        };
-        return calcExactPositionOrRandomFromSize({ size: data.size, position });
-    }
     function parseAlpha(input) {
         const defaultAlpha = 1;
         if (!input) {
@@ -326,27 +317,6 @@
         return input.endsWith("%") ? parseFloat(input) / percentDenominator : parseFloat(input);
     }
 
-    exports.AnimationMode = void 0;
-    (function (AnimationMode) {
-        AnimationMode["auto"] = "auto";
-        AnimationMode["increase"] = "increase";
-        AnimationMode["decrease"] = "decrease";
-        AnimationMode["random"] = "random";
-    })(exports.AnimationMode || (exports.AnimationMode = {}));
-
-    exports.AnimationStatus = void 0;
-    (function (AnimationStatus) {
-        AnimationStatus["increasing"] = "increasing";
-        AnimationStatus["decreasing"] = "decreasing";
-    })(exports.AnimationStatus || (exports.AnimationStatus = {}));
-
-    exports.DestroyType = void 0;
-    (function (DestroyType) {
-        DestroyType["none"] = "none";
-        DestroyType["max"] = "max";
-        DestroyType["min"] = "min";
-    })(exports.DestroyType || (exports.DestroyType = {}));
-
     exports.OutModeDirection = void 0;
     (function (OutModeDirection) {
         OutModeDirection["bottom"] = "bottom";
@@ -361,80 +331,7 @@
         PixelMode["percent"] = "percent";
     })(exports.PixelMode || (exports.PixelMode = {}));
 
-    exports.StartValueType = void 0;
-    (function (StartValueType) {
-        StartValueType["max"] = "max";
-        StartValueType["min"] = "min";
-        StartValueType["random"] = "random";
-    })(exports.StartValueType || (exports.StartValueType = {}));
-
-    const minRadius$1 = 0, minMemoizeSize = 0;
-    function memoize(fn, options) {
-        const cache = new Map(), maxSize = options?.maxSize, ttlMs = options?.ttlMs, keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
-            if (obj === null) {
-                return "null";
-            }
-            const t = typeof obj;
-            if (t === "undefined") {
-                return "undefined";
-            }
-            if (t === "number" || t === "boolean" || t === "string") {
-                return JSON.stringify(obj);
-            }
-            if (t === "function") {
-                try {
-                    const fn = obj;
-                    return fn.toString();
-                }
-                catch {
-                    return '"[Function]"';
-                }
-            }
-            if (t === "symbol") {
-                try {
-                    return obj.toString();
-                }
-                catch {
-                    return '"[Symbol]"';
-                }
-            }
-            if (Array.isArray(obj)) {
-                return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
-            }
-            if (seen.has(obj)) {
-                return '"[Circular]"';
-            }
-            seen.add(obj);
-            const keys = Object.keys(obj).sort();
-            return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
-        }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args)), ensureBounds = () => {
-            if (typeof maxSize === "number" && maxSize >= minMemoizeSize) {
-                while (cache.size > maxSize) {
-                    const firstKey = cache.keys().next().value;
-                    if (firstKey === undefined)
-                        break;
-                    cache.delete(firstKey);
-                }
-            }
-        };
-        return (...args) => {
-            const key = makeKey(args), now = Date.now(), entry = cache.get(key);
-            if (entry !== undefined) {
-                if (ttlMs && now - entry.ts > ttlMs) {
-                    cache.delete(key);
-                }
-                else {
-                    cache.delete(key);
-                    cache.set(key, { value: entry.value, ts: entry.ts });
-                    return entry.value;
-                }
-            }
-            const result = fn(...args);
-            cache.set(key, { value: result, ts: now });
-            ensureBounds();
-            return result;
-        };
-    }
+    const minRadius$1 = 0;
     function hasMatchMedia() {
         return typeof matchMedia !== "undefined";
     }
@@ -447,12 +344,6 @@
         }
         return matchMedia(query);
     }
-    function safeIntersectionObserver(callback) {
-        if (typeof IntersectionObserver === "undefined") {
-            return;
-        }
-        return new IntersectionObserver(callback);
-    }
     function safeMutationObserver(callback) {
         if (typeof MutationObserver === "undefined") {
             return;
@@ -462,11 +353,8 @@
     function isInArray(value, array) {
         return value === array || (isArray(array) && array.includes(value));
     }
-    function arrayRandomIndex(array) {
-        return Math.floor(getRandom() * array.length);
-    }
     function itemFromArray(array, index, useIndex = true) {
-        return array[index !== undefined && useIndex ? index % array.length : arrayRandomIndex(array)];
+        return array[index !== undefined && useIndex ? index % array.length : Math.floor(getRandom() * array.length)];
     }
     function isPointInside(point, size, offset, radius, direction) {
         return areBoundsInside(calculateBounds(point, radius ?? minRadius$1), size, offset, direction);
@@ -570,63 +458,6 @@
     function itemFromSingleOrMultiple(obj, index, useIndex) {
         return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
     }
-    function findItemFromSingleOrMultiple(obj, callback) {
-        if (isArray(obj)) {
-            return obj.find((t, index) => callback(t, index));
-        }
-        const defaultIndex = 0;
-        return callback(obj, defaultIndex) ? obj : undefined;
-    }
-    function initParticleNumericAnimationValue(options, pxRatio) {
-        const valueRange = options.value, animationOptions = options.animation, res = {
-            delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds$1,
-            enable: animationOptions.enable,
-            value: getRangeValue(options.value) * pxRatio,
-            max: getRangeMax(valueRange) * pxRatio,
-            min: getRangeMin(valueRange) * pxRatio,
-            loops: 0,
-            maxLoops: getRangeValue(animationOptions.count),
-            time: 0,
-        }, decayOffset = 1;
-        if (animationOptions.enable) {
-            res.decay = decayOffset - getRangeValue(animationOptions.decay);
-            switch (animationOptions.mode) {
-                case exports.AnimationMode.increase:
-                    res.status = exports.AnimationStatus.increasing;
-                    break;
-                case exports.AnimationMode.decrease:
-                    res.status = exports.AnimationStatus.decreasing;
-                    break;
-                case exports.AnimationMode.random:
-                    res.status = getRandom() >= half$1 ? exports.AnimationStatus.increasing : exports.AnimationStatus.decreasing;
-                    break;
-            }
-            const autoStatus = animationOptions.mode === exports.AnimationMode.auto;
-            switch (animationOptions.startValue) {
-                case exports.StartValueType.min:
-                    res.value = res.min;
-                    if (autoStatus) {
-                        res.status = exports.AnimationStatus.increasing;
-                    }
-                    break;
-                case exports.StartValueType.max:
-                    res.value = res.max;
-                    if (autoStatus) {
-                        res.status = exports.AnimationStatus.decreasing;
-                    }
-                    break;
-                case exports.StartValueType.random:
-                default:
-                    res.value = randomInRangeValue(res);
-                    if (autoStatus) {
-                        res.status = getRandom() >= half$1 ? exports.AnimationStatus.increasing : exports.AnimationStatus.decreasing;
-                    }
-                    break;
-            }
-        }
-        res.initialValue = res.value;
-        return res;
-    }
     function getPositionOrSize(positionOrSize, canvasSize) {
         const isPercent = positionOrSize.mode === exports.PixelMode.percent;
         if (!isPercent) {
@@ -650,80 +481,6 @@
     function getPosition(position, canvasSize) {
         return getPositionOrSize(position, canvasSize);
     }
-    function getSize(size, canvasSize) {
-        return getPositionOrSize(size, canvasSize);
-    }
-    function checkDestroy(particle, destroyType, value, minValue, maxValue) {
-        switch (destroyType) {
-            case exports.DestroyType.max:
-                if (value >= maxValue) {
-                    particle.destroy();
-                }
-                break;
-            case exports.DestroyType.min:
-                if (value <= minValue) {
-                    particle.destroy();
-                }
-                break;
-        }
-    }
-    function updateAnimation(particle, data, changeDirection, destroyType, delta) {
-        const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minDecay = 1;
-        if (particle.destroyed ||
-            !data.enable ||
-            ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
-            return;
-        }
-        const velocity = (data.velocity ?? minVelocity) * delta.factor, minValue = data.min, maxValue = data.max, decay = data.decay ?? minDecay;
-        data.time ??= 0;
-        if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
-            data.time += delta.value;
-        }
-        if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
-            return;
-        }
-        switch (data.status) {
-            case exports.AnimationStatus.increasing:
-                data.value += velocity;
-                break;
-            case exports.AnimationStatus.decreasing:
-                data.value -= velocity;
-                break;
-        }
-        if (data.velocity && decay !== identity) {
-            data.velocity *= decay;
-        }
-        switch (data.status) {
-            case exports.AnimationStatus.increasing:
-                if (data.value >= maxValue) {
-                    if (changeDirection) {
-                        data.status = exports.AnimationStatus.decreasing;
-                    }
-                    else {
-                        data.value -= maxValue;
-                    }
-                    data.loops ??= minLoops;
-                    data.loops++;
-                }
-                break;
-            case exports.AnimationStatus.decreasing:
-                if (data.value <= minValue) {
-                    if (changeDirection) {
-                        data.status = exports.AnimationStatus.increasing;
-                    }
-                    else {
-                        data.value += maxValue;
-                    }
-                    data.loops ??= minLoops;
-                    data.loops++;
-                }
-                break;
-        }
-        checkDestroy(particle, destroyType, data.value, minValue, maxValue);
-        if (!particle.destroyed) {
-            data.value = clamp(data.value, minValue, maxValue);
-        }
-    }
     function cloneStyle(style) {
         const clonedStyle = safeDocument().createElement("div").style;
         for (const key in style) {
@@ -745,30 +502,34 @@
         }
         return clonedStyle;
     }
-    function computeFullScreenStyle(zIndex) {
-        const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
-            width: "100%",
-            height: "100%",
-            margin: "0",
-            padding: "0",
-            borderWidth: "0",
-            position: "fixed",
-            zIndex: zIndex.toString(radix),
-            "z-index": zIndex.toString(radix),
-            top: "0",
-            left: "0",
-            "pointer-events": "none",
-        };
-        for (const key in style) {
-            const value = style[key];
-            if (value === undefined) {
-                continue;
+    let _cachedZIndex, _cachedStyle;
+    function getFullScreenStyle(zIndex) {
+        if (_cachedZIndex !== zIndex || !_cachedStyle) {
+            _cachedZIndex = zIndex;
+            const fullScreenStyle = safeDocument().createElement("div").style, radix = 10, style = {
+                width: "100%",
+                height: "100%",
+                margin: "0",
+                padding: "0",
+                borderWidth: "0",
+                position: "fixed",
+                zIndex: zIndex.toString(radix),
+                "z-index": zIndex.toString(radix),
+                top: "0",
+                left: "0",
+                "pointer-events": "none",
+            };
+            for (const key in style) {
+                const value = style[key];
+                if (value === undefined) {
+                    continue;
+                }
+                fullScreenStyle.setProperty(key, value);
             }
-            fullScreenStyle.setProperty(key, value);
+            _cachedStyle = fullScreenStyle;
         }
-        return fullScreenStyle;
+        return _cachedStyle;
     }
-    const getFullScreenStyle = memoize(computeFullScreenStyle);
     function manageListener(element, event, handler, add, options) {
         if (add) {
             let addOptions = { passive: true };
@@ -1118,7 +879,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.1.3";
+            return "4.2.1";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -1288,6 +1049,14 @@
         RotateDirection["random"] = "random";
     })(exports.RotateDirection || (exports.RotateDirection = {}));
 
+    exports.AnimationMode = void 0;
+    (function (AnimationMode) {
+        AnimationMode["auto"] = "auto";
+        AnimationMode["increase"] = "increase";
+        AnimationMode["decrease"] = "decrease";
+        AnimationMode["random"] = "random";
+    })(exports.AnimationMode || (exports.AnimationMode = {}));
+
     exports.LimitMode = void 0;
     (function (LimitMode) {
         LimitMode["delete"] = "delete";
@@ -1309,6 +1078,13 @@
         AlterType["enlighten"] = "enlighten";
     })(exports.AlterType || (exports.AlterType = {}));
 
+    exports.DestroyType = void 0;
+    (function (DestroyType) {
+        DestroyType["none"] = "none";
+        DestroyType["max"] = "max";
+        DestroyType["min"] = "min";
+    })(exports.DestroyType || (exports.DestroyType = {}));
+
     exports.GradientType = void 0;
     (function (GradientType) {
         GradientType["linear"] = "linear";
@@ -1323,160 +1099,126 @@
         ParticleOutType["outside"] = "outside";
     })(exports.ParticleOutType || (exports.ParticleOutType = {}));
 
-    exports.EasingType = void 0;
-    (function (EasingType) {
-        EasingType["easeInBack"] = "ease-in-back";
-        EasingType["easeInBounce"] = "ease-in-bounce";
-        EasingType["easeInCirc"] = "ease-in-circ";
-        EasingType["easeInCubic"] = "ease-in-cubic";
-        EasingType["easeInElastic"] = "ease-in-elastic";
-        EasingType["easeInExpo"] = "ease-in-expo";
-        EasingType["easeInGaussian"] = "ease-in-gaussian";
-        EasingType["easeInLinear"] = "ease-in-linear";
-        EasingType["easeInQuad"] = "ease-in-quad";
-        EasingType["easeInQuart"] = "ease-in-quart";
-        EasingType["easeInQuint"] = "ease-in-quint";
-        EasingType["easeInSigmoid"] = "ease-in-sigmoid";
-        EasingType["easeInSine"] = "ease-in-sine";
-        EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
-        EasingType["easeOutBack"] = "ease-out-back";
-        EasingType["easeOutBounce"] = "ease-out-bounce";
-        EasingType["easeOutCirc"] = "ease-out-circ";
-        EasingType["easeOutCubic"] = "ease-out-cubic";
-        EasingType["easeOutElastic"] = "ease-out-elastic";
-        EasingType["easeOutExpo"] = "ease-out-expo";
-        EasingType["easeOutGaussian"] = "ease-out-gaussian";
-        EasingType["easeOutLinear"] = "ease-out-linear";
-        EasingType["easeOutQuad"] = "ease-out-quad";
-        EasingType["easeOutQuart"] = "ease-out-quart";
-        EasingType["easeOutQuint"] = "ease-out-quint";
-        EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
-        EasingType["easeOutSine"] = "ease-out-sine";
-        EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
-        EasingType["easeInOutBack"] = "ease-in-out-back";
-        EasingType["easeInOutBounce"] = "ease-in-out-bounce";
-        EasingType["easeInOutCirc"] = "ease-in-out-circ";
-        EasingType["easeInOutCubic"] = "ease-in-out-cubic";
-        EasingType["easeInOutElastic"] = "ease-in-out-elastic";
-        EasingType["easeInOutExpo"] = "ease-in-out-expo";
-        EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
-        EasingType["easeInOutLinear"] = "ease-in-out-linear";
-        EasingType["easeInOutQuad"] = "ease-in-out-quad";
-        EasingType["easeInOutQuart"] = "ease-in-out-quart";
-        EasingType["easeInOutQuint"] = "ease-in-out-quint";
-        EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
-        EasingType["easeInOutSine"] = "ease-in-out-sine";
-        EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
-    })(exports.EasingType || (exports.EasingType = {}));
-
-    class AnimationOptions {
-        count;
-        decay;
-        delay;
-        enable;
-        speed;
-        sync;
-        constructor() {
-            this.count = 0;
-            this.enable = false;
-            this.speed = 1;
-            this.decay = 0;
-            this.delay = 0;
-            this.sync = false;
-        }
+    exports.StartValueType = void 0;
+    (function (StartValueType) {
+        StartValueType["max"] = "max";
+        StartValueType["min"] = "min";
+        StartValueType["random"] = "random";
+    })(exports.StartValueType || (exports.StartValueType = {}));
+
+    exports.AnimationStatus = void 0;
+    (function (AnimationStatus) {
+        AnimationStatus["increasing"] = "increasing";
+        AnimationStatus["decreasing"] = "decreasing";
+    })(exports.AnimationStatus || (exports.AnimationStatus = {}));
+
+    class OptionLoader {
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = setRangeValue(data.count);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.speed !== undefined) {
-                this.speed = setRangeValue(data.speed);
-            }
-            if (data.decay !== undefined) {
-                this.decay = setRangeValue(data.decay);
-            }
-            if (data.delay !== undefined) {
-                this.delay = setRangeValue(data.delay);
-            }
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
+            this.doLoad(data);
         }
     }
-    class RangedAnimationOptions extends AnimationOptions {
-        mode;
-        startValue;
-        constructor() {
-            super();
-            this.mode = exports.AnimationMode.auto;
-            this.startValue = exports.StartValueType.random;
-        }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            if (data.mode !== undefined) {
-                this.mode = data.mode;
-            }
-            if (data.startValue !== undefined) {
-                this.startValue = data.startValue;
-            }
+    function loadOptions(options, ...sourceOptionsArr) {
+        for (const sourceOptions of sourceOptionsArr) {
+            options.load(sourceOptions);
         }
     }
 
-    class ColorAnimation extends AnimationOptions {
-        max;
-        min;
-        offset;
-        constructor(min, max) {
-            super();
-            this.min = min;
-            this.max = max;
-            this.offset = 0;
-            this.sync = true;
+    function loadProperty(obj, key, value) {
+        if (value !== undefined) {
+            obj[key] = value;
         }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            if (data.max !== undefined) {
-                this.max = data.max;
-            }
-            if (data.min !== undefined) {
-                this.min = data.min;
-            }
-            if (data.offset !== undefined) {
-                this.offset = setRangeValue(data.offset);
-            }
+    }
+    function loadRangeProperty(obj, key, value) {
+        if (value !== undefined) {
+            obj[key] = setRangeValue(value);
+        }
+    }
+    function loadNestedProperty(obj, key, value) {
+        if (value !== undefined) {
+            obj[key].load(value);
+        }
+    }
+    function loadLazyProperty(obj, key, value, factory) {
+        if (value !== undefined) {
+            const objRecord = obj;
+            objRecord[key] ??= factory();
+            objRecord[key].load(value);
+        }
+    }
+    function loadExtendProperty(obj, key, value) {
+        if (value !== undefined) {
+            obj[key] = deepExtend(obj[key] ?? {}, value);
+        }
+    }
+    function loadOptionProperty(obj, key, optionClass, ...sources) {
+        const objRecord = obj;
+        objRecord[key] ??= new optionClass();
+        const target = objRecord[key];
+        for (const source of sources) {
+            target.load(source?.[key]);
+        }
+    }
+
+    class AnimationOptions extends OptionLoader {
+        count = 0;
+        decay = 0;
+        delay = 0;
+        enable = false;
+        speed = 1;
+        sync = false;
+        doLoad(data) {
+            loadRangeProperty(this, "count", data.count);
+            loadProperty(this, "enable", data.enable);
+            loadRangeProperty(this, "speed", data.speed);
+            loadRangeProperty(this, "decay", data.decay);
+            loadRangeProperty(this, "delay", data.delay);
+            loadProperty(this, "sync", data.sync);
+        }
+    }
+    class RangedAnimationOptions extends AnimationOptions {
+        mode = exports.AnimationMode.auto;
+        startValue = exports.StartValueType.random;
+        doLoad(data) {
+            super.doLoad(data);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "startValue", data.startValue);
+        }
+    }
+
+    class ColorAnimation extends AnimationOptions {
+        max;
+        min;
+        offset = 0;
+        sync = true;
+        constructor(min, max) {
+            super();
+            this.min = min;
+            this.max = max;
+        }
+        doLoad(data) {
+            super.doLoad(data);
+            loadProperty(this, "max", data.max);
+            loadProperty(this, "min", data.min);
+            loadRangeProperty(this, "offset", data.offset);
         }
     }
 
-    class HslAnimation {
+    class HslAnimation extends OptionLoader {
         h = new ColorAnimation(hMin, hMax);
         l = new ColorAnimation(lMin, lMax);
         s = new ColorAnimation(sMin, sMax);
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             this.h.load(data.h);
             this.s.load(data.s);
             this.l.load(data.l);
         }
     }
 
-    class OptionsColor {
-        value;
-        constructor() {
-            this.value = "";
-        }
+    class OptionsColor extends OptionLoader {
+        value = "";
         static create(source, data) {
             const color = new OptionsColor();
             color.load(source);
@@ -1490,10 +1232,7 @@
             }
             return color;
         }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (!isNull(data.value)) {
                 this.value = data.value;
             }
@@ -1501,11 +1240,7 @@
     }
 
     class AnimatableColor extends OptionsColor {
-        animation;
-        constructor() {
-            super();
-            this.animation = new HslAnimation();
-        }
+        animation = new HslAnimation();
         static create(source, data) {
             const color = new AnimatableColor();
             color.load(source);
@@ -1519,11 +1254,8 @@
             }
             return color;
         }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
+            super.doLoad(data);
             const colorAnimation = data.animation;
             if (colorAnimation !== undefined) {
                 if (colorAnimation.enable === undefined) {
@@ -1536,100 +1268,53 @@
         }
     }
 
-    class Background {
+    class Background extends OptionLoader {
         color;
-        image;
-        opacity;
-        position;
-        repeat;
-        size;
+        image = "";
+        opacity = 1;
+        position = "";
+        repeat = "";
+        size = "";
         constructor() {
+            super();
             this.color = new OptionsColor();
             this.color.value = "";
-            this.image = "";
-            this.position = "";
-            this.repeat = "";
-            this.size = "";
-            this.opacity = 1;
         }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (data.color !== undefined) {
                 this.color = OptionsColor.create(this.color, data.color);
             }
-            if (data.image !== undefined) {
-                this.image = data.image;
-            }
-            if (data.position !== undefined) {
-                this.position = data.position;
-            }
-            if (data.repeat !== undefined) {
-                this.repeat = data.repeat;
-            }
-            if (data.size !== undefined) {
-                this.size = data.size;
-            }
-            if (data.opacity !== undefined) {
-                this.opacity = data.opacity;
-            }
+            loadProperty(this, "image", data.image);
+            loadProperty(this, "position", data.position);
+            loadProperty(this, "repeat", data.repeat);
+            loadProperty(this, "size", data.size);
+            loadProperty(this, "opacity", data.opacity);
         }
     }
 
-    class FullScreen {
-        enable;
-        zIndex;
-        constructor() {
-            this.enable = true;
-            this.zIndex = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.zIndex !== undefined) {
-                this.zIndex = data.zIndex;
-            }
+    class FullScreen extends OptionLoader {
+        enable = true;
+        zIndex = 0;
+        doLoad(data) {
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "zIndex", data.zIndex);
         }
     }
 
-    class ResizeEvent {
-        delay;
-        enable;
-        constructor() {
-            this.delay = 0.5;
-            this.enable = true;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.delay !== undefined) {
-                this.delay = data.delay;
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
+    class ResizeEvent extends OptionLoader {
+        delay = 0.5;
+        enable = true;
+        doLoad(data) {
+            loadProperty(this, "delay", data.delay);
+            loadProperty(this, "enable", data.enable);
         }
     }
 
-    class Effect {
-        close;
-        options;
-        type;
-        constructor() {
-            this.close = true;
-            this.options = {};
-            this.type = [];
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class Effect extends OptionLoader {
+        close = true;
+        options = {};
+        type = [];
+        doLoad(data) {
             const options = data.options;
             if (options !== undefined) {
                 for (const effect in options) {
@@ -1639,128 +1324,62 @@
                     }
                 }
             }
-            if (data.close !== undefined) {
-                this.close = data.close;
-            }
-            if (data.type !== undefined) {
-                this.type = data.type;
-            }
+            loadProperty(this, "close", data.close);
+            loadProperty(this, "type", data.type);
         }
     }
 
-    class Fill {
+    class Fill extends OptionLoader {
         color;
-        enable;
-        opacity;
-        constructor() {
-            this.enable = true;
-            this.opacity = 1;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        enable = true;
+        opacity = 1;
+        doLoad(data) {
             if (data.color !== undefined) {
                 this.color = AnimatableColor.create(this.color, data.color);
             }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.opacity !== undefined) {
-                this.opacity = setRangeValue(data.opacity);
-            }
+            loadProperty(this, "enable", data.enable);
+            loadRangeProperty(this, "opacity", data.opacity);
         }
     }
 
-    class MoveAngle {
-        offset;
-        value;
-        constructor() {
-            this.offset = 0;
-            this.value = 90;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.offset !== undefined) {
-                this.offset = setRangeValue(data.offset);
-            }
-            if (data.value !== undefined) {
-                this.value = setRangeValue(data.value);
-            }
+    class MoveAngle extends OptionLoader {
+        offset = 0;
+        value = 90;
+        doLoad(data) {
+            loadRangeProperty(this, "offset", data.offset);
+            loadRangeProperty(this, "value", data.value);
         }
     }
 
-    class MoveCenter {
-        mode;
-        radius;
-        x;
-        y;
-        constructor() {
-            this.x = 50;
-            this.y = 50;
-            this.mode = exports.PixelMode.percent;
-            this.radius = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.x !== undefined) {
-                this.x = data.x;
-            }
-            if (data.y !== undefined) {
-                this.y = data.y;
-            }
-            if (data.mode !== undefined) {
-                this.mode = data.mode;
-            }
-            if (data.radius !== undefined) {
-                this.radius = data.radius;
-            }
+    class MoveCenter extends OptionLoader {
+        mode = exports.PixelMode.percent;
+        radius = 0;
+        x = 50;
+        y = 50;
+        doLoad(data) {
+            loadProperty(this, "x", data.x);
+            loadProperty(this, "y", data.y);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "radius", data.radius);
         }
     }
 
-    class MoveGravity {
-        acceleration;
-        enable;
-        inverse;
-        maxSpeed;
-        constructor() {
-            this.acceleration = 9.81;
-            this.enable = false;
-            this.inverse = false;
-            this.maxSpeed = 50;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.acceleration !== undefined) {
-                this.acceleration = setRangeValue(data.acceleration);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.inverse !== undefined) {
-                this.inverse = data.inverse;
-            }
-            if (data.maxSpeed !== undefined) {
-                this.maxSpeed = setRangeValue(data.maxSpeed);
-            }
+    class MoveGravity extends OptionLoader {
+        acceleration = 9.81;
+        enable = false;
+        inverse = false;
+        maxSpeed = 50;
+        doLoad(data) {
+            loadRangeProperty(this, "acceleration", data.acceleration);
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "inverse", data.inverse);
+            loadRangeProperty(this, "maxSpeed", data.maxSpeed);
         }
     }
 
-    class ValueWithRandom {
-        value;
-        constructor() {
-            this.value = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class ValueWithRandom extends OptionLoader {
+        value = 0;
+        doLoad(data) {
             if (!isNull(data.value)) {
                 this.value = setRangeValue(data.value);
             }
@@ -1768,51 +1387,25 @@
     }
     class AnimationValueWithRandom extends ValueWithRandom {
         animation = new AnimationOptions();
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            const animation = data.animation;
-            if (animation !== undefined) {
-                this.animation.load(animation);
-            }
+        doLoad(data) {
+            super.doLoad(data);
+            loadNestedProperty(this, "animation", data.animation);
         }
     }
     class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
-        animation;
-        constructor() {
-            super();
-            this.animation = new RangedAnimationOptions();
-        }
-        load(data) {
-            super.load(data);
-        }
+        animation = new RangedAnimationOptions();
     }
 
-    class MovePath {
-        clamp;
-        delay;
-        enable;
+    class MovePath extends OptionLoader {
+        clamp = true;
+        delay = new ValueWithRandom();
+        enable = false;
         generator;
-        options;
-        constructor() {
-            this.clamp = true;
-            this.delay = new ValueWithRandom();
-            this.enable = false;
-            this.options = {};
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.clamp !== undefined) {
-                this.clamp = data.clamp;
-            }
+        options = {};
+        doLoad(data) {
+            loadProperty(this, "clamp", data.clamp);
             this.delay.load(data.delay);
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
+            loadProperty(this, "enable", data.enable);
             this.generator = data.generator;
             if (data.options) {
                 this.options = deepExtend(this.options, data.options);
@@ -1820,19 +1413,13 @@
         }
     }
 
-    class OutModes {
+    class OutModes extends OptionLoader {
         bottom;
-        default;
+        default = exports.OutMode.out;
         left;
         right;
         top;
-        constructor() {
-            this.default = exports.OutMode.out;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (data.default !== undefined) {
                 this.default = data.default;
             }
@@ -1843,79 +1430,42 @@
         }
     }
 
-    class Spin {
-        acceleration;
-        enable;
+    class Spin extends OptionLoader {
+        acceleration = 0;
+        enable = false;
         position;
-        constructor() {
-            this.acceleration = 0;
-            this.enable = false;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.acceleration !== undefined) {
-                this.acceleration = setRangeValue(data.acceleration);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
+        doLoad(data) {
+            loadRangeProperty(this, "acceleration", data.acceleration);
+            loadProperty(this, "enable", data.enable);
             if (data.position) {
                 this.position = deepExtend({}, data.position);
             }
         }
     }
 
-    class Move {
-        angle;
-        center;
-        decay;
-        direction;
-        distance;
-        drift;
-        enable;
-        gravity;
-        outModes;
-        path;
-        random;
-        size;
-        speed;
-        spin;
-        straight;
-        vibrate;
-        warp;
-        constructor() {
-            this.angle = new MoveAngle();
-            this.center = new MoveCenter();
-            this.decay = 0;
-            this.distance = {};
-            this.direction = exports.MoveDirection.none;
-            this.drift = 0;
-            this.enable = false;
-            this.gravity = new MoveGravity();
-            this.path = new MovePath();
-            this.outModes = new OutModes();
-            this.random = false;
-            this.size = false;
-            this.speed = 2;
-            this.spin = new Spin();
-            this.straight = false;
-            this.vibrate = false;
-            this.warp = false;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class Move extends OptionLoader {
+        angle = new MoveAngle();
+        center = new MoveCenter();
+        decay = 0;
+        direction = exports.MoveDirection.none;
+        distance = {};
+        drift = 0;
+        enable = false;
+        gravity = new MoveGravity();
+        outModes = new OutModes();
+        path = new MovePath();
+        random = false;
+        size = false;
+        speed = 2;
+        spin = new Spin();
+        straight = false;
+        vibrate = false;
+        warp = false;
+        doLoad(data) {
             this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);
             this.center.load(data.center);
-            if (data.decay !== undefined) {
-                this.decay = setRangeValue(data.decay);
-            }
-            if (data.direction !== undefined) {
-                this.direction = data.direction;
-            }
+            loadRangeProperty(this, "decay", data.decay);
+            loadProperty(this, "direction", data.direction);
             if (data.distance !== undefined) {
                 this.distance = isNumber(data.distance)
                     ? {
@@ -1924,12 +1474,8 @@
                     }
                     : { ...data.distance };
             }
-            if (data.drift !== undefined) {
-                this.drift = setRangeValue(data.drift);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
+            loadRangeProperty(this, "drift", data.drift);
+            loadProperty(this, "enable", data.enable);
             this.gravity.load(data.gravity);
             const outModes = data.outModes;
             if (outModes !== undefined) {
@@ -1943,177 +1489,91 @@
                 }
             }
             this.path.load(data.path);
-            if (data.random !== undefined) {
-                this.random = data.random;
-            }
-            if (data.size !== undefined) {
-                this.size = data.size;
-            }
-            if (data.speed !== undefined) {
-                this.speed = setRangeValue(data.speed);
-            }
+            loadProperty(this, "random", data.random);
+            loadProperty(this, "size", data.size);
+            loadRangeProperty(this, "speed", data.speed);
             this.spin.load(data.spin);
-            if (data.straight !== undefined) {
-                this.straight = data.straight;
-            }
-            if (data.vibrate !== undefined) {
-                this.vibrate = data.vibrate;
-            }
-            if (data.warp !== undefined) {
-                this.warp = data.warp;
-            }
+            loadProperty(this, "straight", data.straight);
+            loadProperty(this, "vibrate", data.vibrate);
+            loadProperty(this, "warp", data.warp);
         }
     }
 
-    class Stroke {
+    class Stroke extends OptionLoader {
         color;
         opacity;
-        width;
-        constructor() {
-            this.width = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        width = 0;
+        doLoad(data) {
             if (data.color !== undefined) {
                 this.color = AnimatableColor.create(this.color, data.color);
             }
-            if (data.width !== undefined) {
-                this.width = setRangeValue(data.width);
-            }
-            if (data.opacity !== undefined) {
-                this.opacity = setRangeValue(data.opacity);
-            }
+            loadRangeProperty(this, "width", data.width);
+            loadRangeProperty(this, "opacity", data.opacity);
         }
     }
 
-    class Paint {
+    class Paint extends OptionLoader {
         color;
         fill;
         stroke;
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (data.color !== undefined) {
                 this.color = AnimatableColor.create(this.color, data.color);
             }
-            if (data.fill !== undefined) {
-                this.fill ??= new Fill();
-                this.fill.load(data.fill);
-            }
-            if (data.stroke !== undefined) {
-                this.stroke ??= new Stroke();
-                this.stroke.load(data.stroke);
-            }
+            loadLazyProperty(this, "fill", data.fill, () => new Fill());
+            loadLazyProperty(this, "stroke", data.stroke, () => new Stroke());
         }
     }
 
     class ParticlesBounceFactor extends ValueWithRandom {
-        constructor() {
-            super();
-            this.value = 1;
-        }
+        value = 1;
     }
 
-    class ParticlesBounce {
-        horizontal;
-        vertical;
-        constructor() {
-            this.horizontal = new ParticlesBounceFactor();
-            this.vertical = new ParticlesBounceFactor();
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class ParticlesBounce extends OptionLoader {
+        horizontal = new ParticlesBounceFactor();
+        vertical = new ParticlesBounceFactor();
+        doLoad(data) {
             this.horizontal.load(data.horizontal);
             this.vertical.load(data.vertical);
         }
     }
 
-    class ParticlesDensity {
-        enable;
-        height;
-        width;
-        constructor() {
-            this.enable = false;
-            this.width = 1920;
-            this.height = 1080;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            const width = data.width;
-            if (width !== undefined) {
-                this.width = width;
-            }
-            const height = data.height;
-            if (height !== undefined) {
-                this.height = height;
-            }
+    class ParticlesDensity extends OptionLoader {
+        enable = false;
+        height = 1080;
+        width = 1920;
+        doLoad(data) {
+            loadProperty(this, "enable", data.enable);
+            loadProperty(this, "width", data.width);
+            loadProperty(this, "height", data.height);
         }
     }
 
-    class ParticlesNumberLimit {
-        mode;
-        value;
-        constructor() {
-            this.mode = exports.LimitMode.delete;
-            this.value = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            if (data.mode !== undefined) {
-                this.mode = data.mode;
-            }
-            if (data.value !== undefined) {
-                this.value = data.value;
-            }
+    class ParticlesNumberLimit extends OptionLoader {
+        mode = exports.LimitMode.delete;
+        value = 0;
+        doLoad(data) {
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "value", data.value);
         }
     }
 
-    class ParticlesNumber {
-        density;
-        limit;
-        value;
-        constructor() {
-            this.density = new ParticlesDensity();
-            this.limit = new ParticlesNumberLimit();
-            this.value = 0;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class ParticlesNumber extends OptionLoader {
+        density = new ParticlesDensity();
+        limit = new ParticlesNumberLimit();
+        value = 0;
+        doLoad(data) {
             this.density.load(data.density);
             this.limit.load(data.limit);
-            if (data.value !== undefined) {
-                this.value = data.value;
-            }
+            loadProperty(this, "value", data.value);
         }
     }
 
-    class Shape {
-        close;
-        options;
-        type;
-        constructor() {
-            this.close = true;
-            this.options = {};
-            this.type = "circle";
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+    class Shape extends OptionLoader {
+        close = true;
+        options = {};
+        type = "circle";
+        doLoad(data) {
             const options = data.options;
             if (options !== undefined) {
                 for (const shape in options) {
@@ -2123,76 +1583,47 @@
                     }
                 }
             }
-            if (data.close !== undefined) {
-                this.close = data.close;
-            }
-            if (data.type !== undefined) {
-                this.type = data.type;
-            }
+            loadProperty(this, "close", data.close);
+            loadProperty(this, "type", data.type);
         }
     }
 
     class ZIndex extends ValueWithRandom {
-        opacityRate;
-        sizeRate;
-        velocityRate;
-        constructor() {
-            super();
-            this.opacityRate = 1;
-            this.sizeRate = 1;
-            this.velocityRate = 1;
-        }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            if (data.opacityRate !== undefined) {
-                this.opacityRate = data.opacityRate;
-            }
-            if (data.sizeRate !== undefined) {
-                this.sizeRate = data.sizeRate;
-            }
-            if (data.velocityRate !== undefined) {
-                this.velocityRate = data.velocityRate;
-            }
-        }
-    }
-
-    class ParticlesOptions {
-        bounce;
-        effect;
-        groups;
-        move;
-        number;
+        opacityRate = 1;
+        sizeRate = 1;
+        velocityRate = 1;
+        doLoad(data) {
+            super.doLoad(data);
+            loadProperty(this, "opacityRate", data.opacityRate);
+            loadProperty(this, "sizeRate", data.sizeRate);
+            loadProperty(this, "velocityRate", data.velocityRate);
+        }
+    }
+
+    class ParticlesOptions extends OptionLoader {
+        bounce = new ParticlesBounce();
+        effect = new Effect();
+        groups = {};
+        move = new Move();
+        number = new ParticlesNumber();
         paint;
         palette;
-        reduceDuplicates;
-        shape;
-        zIndex;
+        reduceDuplicates = false;
+        shape = new Shape();
+        zIndex = new ZIndex();
         #container;
         #pluginManager;
         constructor(pluginManager, container) {
+            super();
             this.#pluginManager = pluginManager;
             this.#container = container;
-            this.bounce = new ParticlesBounce();
-            this.effect = new Effect();
-            this.groups = {};
-            this.move = new Move();
-            this.number = new ParticlesNumber();
             this.paint = new Paint();
             this.paint.color = new AnimatableColor();
             this.paint.color.value = "#fff";
             this.paint.fill = new Fill();
             this.paint.fill.enable = true;
-            this.reduceDuplicates = false;
-            this.shape = new Shape();
-            this.zIndex = new ZIndex();
         }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (data.palette) {
                 this.palette = data.palette;
                 this.#importPalette(this.palette);
@@ -2250,7 +1681,7 @@
                 }
             }
         }
-        #importPalette = (palette) => {
+        #importPalette(palette) {
             const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
@@ -2294,69 +1725,49 @@
                     mode: paletteData.blendMode,
                 },
             });
-        };
-    }
-
-    function loadOptions(options, ...sourceOptionsArr) {
-        for (const sourceOptions of sourceOptionsArr) {
-            options.load(sourceOptions);
         }
     }
+
     function loadParticlesOptions(pluginManager, container, ...sourceOptionsArr) {
         const options = new ParticlesOptions(pluginManager, container);
         loadOptions(options, ...sourceOptionsArr);
         return options;
     }
 
-    class Options {
-        autoPlay;
+    class Options extends OptionLoader {
+        autoPlay = true;
         background;
-        clear;
-        defaultThemes;
-        delay;
-        detectRetina;
-        duration;
-        fpsLimit;
+        clear = true;
+        defaultThemes = {};
+        delay = 0;
+        detectRetina = true;
+        duration = 0;
+        fpsLimit = 120;
         fullScreen;
-        hdr;
+        hdr = true;
         key;
         name;
         palette;
         particles;
-        pauseOnBlur;
-        pauseOnOutsideViewport;
+        pauseOnBlur = true;
+        pauseOnOutsideViewport = true;
         preset;
         resize;
-        smooth;
-        style;
-        zLayers;
+        smooth = false;
+        style = {};
+        zLayers = 100;
         #container;
         #pluginManager;
         constructor(pluginManager, container) {
+            super();
             this.#pluginManager = pluginManager;
             this.#container = container;
-            this.autoPlay = true;
             this.background = new Background();
-            this.clear = true;
-            this.defaultThemes = {};
-            this.delay = 0;
             this.fullScreen = new FullScreen();
-            this.detectRetina = true;
-            this.duration = 0;
-            this.fpsLimit = 120;
-            this.hdr = true;
             this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
-            this.pauseOnBlur = true;
-            this.pauseOnOutsideViewport = true;
             this.resize = new ResizeEvent();
-            this.smooth = false;
-            this.style = {};
-            this.zLayers = 100;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        }
+        doLoad(data) {
             if (data.preset !== undefined) {
                 this.preset = data.preset;
                 executeOnSingleOrMultiple(this.preset, preset => {
@@ -2367,44 +1778,18 @@
                 this.palette = data.palette;
                 this.#importPalette(this.palette);
             }
-            if (data.autoPlay !== undefined) {
-                this.autoPlay = data.autoPlay;
-            }
-            if (data.clear !== undefined) {
-                this.clear = data.clear;
-            }
-            if (data.key !== undefined) {
-                this.key = data.key;
-            }
-            if (data.name !== undefined) {
-                this.name = data.name;
-            }
-            if (data.delay !== undefined) {
-                this.delay = setRangeValue(data.delay);
-            }
-            const detectRetina = data.detectRetina;
-            if (detectRetina !== undefined) {
-                this.detectRetina = detectRetina;
-            }
-            if (data.duration !== undefined) {
-                this.duration = setRangeValue(data.duration);
-            }
-            const fpsLimit = data.fpsLimit;
-            if (fpsLimit !== undefined) {
-                this.fpsLimit = fpsLimit;
-            }
-            if (data.hdr !== undefined) {
-                this.hdr = data.hdr;
-            }
-            if (data.pauseOnBlur !== undefined) {
-                this.pauseOnBlur = data.pauseOnBlur;
-            }
-            if (data.pauseOnOutsideViewport !== undefined) {
-                this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
-            }
-            if (data.zLayers !== undefined) {
-                this.zLayers = data.zLayers;
-            }
+            loadProperty(this, "autoPlay", data.autoPlay);
+            loadProperty(this, "clear", data.clear);
+            loadProperty(this, "key", data.key);
+            loadProperty(this, "name", data.name);
+            loadRangeProperty(this, "delay", data.delay);
+            loadProperty(this, "detectRetina", data.detectRetina);
+            loadRangeProperty(this, "duration", data.duration);
+            loadProperty(this, "fpsLimit", data.fpsLimit);
+            loadProperty(this, "hdr", data.hdr);
+            loadProperty(this, "pauseOnBlur", data.pauseOnBlur);
+            loadProperty(this, "pauseOnOutsideViewport", data.pauseOnOutsideViewport);
+            loadProperty(this, "zLayers", data.zLayers);
             this.background.load(data.background);
             const fullScreen = data.fullScreen;
             if (isBoolean(fullScreen)) {
@@ -2416,14 +1801,12 @@
             this.particles.load(data.particles);
             this.resize.load(data.resize);
             this.style = deepExtend(this.style, data.style);
-            if (data.smooth !== undefined) {
-                this.smooth = data.smooth;
-            }
+            loadProperty(this, "smooth", data.smooth);
             this.#pluginManager.plugins.forEach(plugin => {
                 plugin.loadOptions(this.#container, this, data);
             });
         }
-        #importPalette = palette => {
+        #importPalette(palette) {
             const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
@@ -2440,143 +1823,19 @@
                     palette,
                 },
             });
-        };
-        #importPreset = preset => {
-            this.load(this.#pluginManager.getPreset(preset));
-        };
-    }
-
-    function paintBase(context, dimension, baseColor) {
-        context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-        context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
-    }
-    function paintImage(context, dimension, image, opacity) {
-        if (!image) {
-            return;
-        }
-        const prevAlpha = context.globalAlpha;
-        context.globalAlpha = opacity;
-        context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
-        context.globalAlpha = prevAlpha;
-    }
-    function clear(context, dimension) {
-        context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
-    }
-    function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
-            x: pos.x,
-            y: pos.y,
-        };
-        context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-        if (colorStyles.fill) {
-            context.fillStyle = colorStyles.fill;
-        }
-        const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
-        context.lineWidth = strokeWidth;
-        if (colorStyles.stroke) {
-            context.strokeStyle = colorStyles.stroke;
-        }
-        const drawData = {
-            context,
-            particle,
-            radius,
-            drawRadius: radius * drawScale,
-            opacity,
-            delta,
-            pixelRatio: container.retina.pixelRatio,
-            fill: fillEnabled,
-            stroke: strokeWidth > minStrokeWidth,
-            transformData,
-            position: { ...pos },
-            drawPosition,
-            drawScale,
-        };
-        for (const plugin of container.plugins) {
-            plugin.drawParticleTransform?.(drawData);
-        }
-        const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
-        drawBeforeEffect(effect, drawData);
-        drawShapeBeforeDraw(shape, drawData);
-        drawShape(shape, drawData);
-        drawShapeAfterDraw(shape, drawData);
-        drawAfterEffect(effect, drawData);
-        context.resetTransform();
-    }
-    function drawAfterEffect(drawer, data) {
-        if (!drawer?.drawAfter) {
-            return;
-        }
-        const { particle } = data;
-        if (!particle.effect) {
-            return;
-        }
-        drawer.drawAfter(data);
-    }
-    function drawBeforeEffect(drawer, data) {
-        if (!drawer?.drawBefore) {
-            return;
-        }
-        const { particle } = data;
-        if (!particle.effect) {
-            return;
-        }
-        drawer.drawBefore(data);
-    }
-    function drawShape(drawer, data) {
-        if (!drawer) {
-            return;
-        }
-        const { context, fill, particle, stroke } = data;
-        if (!particle.shape) {
-            return;
-        }
-        context.beginPath();
-        drawer.draw(data);
-        if (particle.shapeClose) {
-            context.closePath();
-        }
-        if (fill) {
-            context.fill();
-        }
-        if (stroke) {
-            context.stroke();
-        }
-    }
-    function drawShapeAfterDraw(drawer, data) {
-        if (!drawer?.afterDraw) {
-            return;
-        }
-        const { particle } = data;
-        if (!particle.shape) {
-            return;
-        }
-        drawer.afterDraw(data);
-    }
-    function drawShapeBeforeDraw(drawer, data) {
-        if (!drawer?.beforeDraw) {
-            return;
-        }
-        const { particle } = data;
-        if (!particle.shape) {
-            return;
         }
-        drawer.beforeDraw(data);
-    }
-    function drawParticlePlugin(context, plugin, particle, delta) {
-        if (!plugin.drawParticle) {
-            return;
+        #importPreset(preset) {
+            this.load(this.#pluginManager.getPreset(preset));
         }
-        plugin.drawParticle(context, particle, delta);
     }
 
-    const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
+    const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, sdrReferenceWhiteNits = 203;
     function getCachedStyle(key, generator) {
         let cached = styleCache.get(key);
         if (!cached) {
             cached = generator();
-            if (styleCache.size >= maxCacheSize) {
-                const keysToDelete = [...styleCache.keys()].slice(firstIndex, maxCacheSize * half$1);
-                keysToDelete.forEach(k => styleCache.delete(k));
+            if (styleCache.size > maxStyleCacheSize) {
+                styleCache.clear();
             }
             styleCache.set(key, cached);
         }
@@ -2643,10 +1902,6 @@
         }
         return undefined;
     }
-    function colorToHsl(pluginManager, color, index, useIndex = true) {
-        const rgb = colorToRgb(pluginManager, color, index, useIndex);
-        return rgb ? rgbToHsl(rgb) : undefined;
-    }
     function rangeColorToHsl(pluginManager, color, index, useIndex = true) {
         const rgb = rangeColorToRgb(pluginManager, color, index, useIndex);
         return rgb ? rgbToHsl(rgb) : undefined;
@@ -2686,34 +1941,35 @@
     function stringToRgb(pluginManager, input) {
         return stringToRgba(pluginManager, input);
     }
+    function hslChannel(temp1, temp2, temp3) {
+        const temp3Min = 0, temp3Max = 1;
+        if (temp3 < temp3Min) {
+            temp3++;
+        }
+        if (temp3 > temp3Max) {
+            temp3--;
+        }
+        if (temp3 * sextuple < temp3Max) {
+            return temp1 + (temp2 - temp1) * sextuple * temp3;
+        }
+        if (temp3 * double < temp3Max) {
+            return temp2;
+        }
+        if (temp3 * triple < temp3Max * double) {
+            const temp3Offset = double / triple;
+            return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
+        }
+        return temp1;
+    }
     function hslToRgb(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 = Math.round(lNormalized * rgbMax);
             return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
         }
-        const channel = (temp1, temp2, temp3) => {
-            const temp3Min = 0, temp3Max = 1;
-            if (temp3 < temp3Min) {
-                temp3++;
-            }
-            if (temp3 > temp3Max) {
-                temp3--;
-            }
-            if (temp3 * sextuple < temp3Max) {
-                return temp1 + (temp2 - temp1) * sextuple * temp3;
-            }
-            if (temp3 * double < temp3Max) {
-                return temp2;
-            }
-            if (temp3 * triple < temp3Max * double) {
-                const temp3Offset = double / triple;
-                return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
-            }
-            return temp1;
-        }, temp1 = lNormalized < half$1
+        const temp1 = lNormalized < half$1
             ? lNormalized * (sNormalizedOffset + sNormalized)
-            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized - phaseThird));
+            : 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 hslaToRgba(hsla) {
@@ -2726,7 +1982,7 @@
         };
     }
     function getRandomRgbColor(min) {
-        const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity$3, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
+        const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity$2, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
         return {
             b: getRgbInRangeValue(),
             g: getRgbInRangeValue(),
@@ -2737,21 +1993,18 @@
         const op = opacity ?? defaultOpacity$1, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
         return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
     }
-    function getHdrStyleFromRgb(color, opacity) {
-        return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
+    function getHdrStyleFromRgb(color, opacity, peakNits = maxNits) {
+        const headroom = peakNits / sdrReferenceWhiteNits;
+        return `color(display-p3 ${((color.r / rgbMax) * headroom).toString()} ${((color.g / rgbMax) * headroom).toString()} ${((color.b / rgbMax) * headroom).toString()} / ${(opacity ?? defaultOpacity$1).toString()})`;
     }
     function getSdrStyleFromRgb(color, opacity) {
         return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity$1).toString()})`;
     }
     function getStyleFromHsl(color, hdr, opacity) {
         const op = opacity ?? defaultOpacity$1, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
-        return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
-    }
-    function getHdrStyleFromHsl(color, opacity) {
-        return getHdrStyleFromRgb(hslToRgb(color), opacity);
-    }
-    function getSdrStyleFromHsl(color, opacity) {
-        return `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${(opacity ?? defaultOpacity$1).toString()})`;
+        return getCachedStyle(key, () => hdr
+            ? getStyleFromRgb(hslToRgb(color), true, opacity)
+            : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
     }
     function colorMix(color1, color2, size1, size2) {
         let rgb1 = color1, rgb2 = color2;
@@ -2930,22 +2183,14 @@
     const tsParticles = initEngine();
 
     class Blend {
-        enable;
-        mode;
-        constructor() {
-            this.mode = "destination-out";
-            this.enable = false;
-        }
+        enable = false;
+        mode = "destination-out";
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.mode !== undefined) {
-                this.mode = data.mode;
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "enable", data.enable);
         }
     }
 
@@ -2975,7 +2220,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -3012,7 +2257,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -3060,7 +2305,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3113,7 +2358,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -3137,7 +2382,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3155,31 +2400,137 @@
         });
     }
 
-    class OpacityAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = exports.DestroyType.none;
-            this.speed = 2;
+    function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+        switch (destroyType) {
+            case exports.DestroyType.max:
+                if (value >= maxValue) {
+                    particle.destroy();
+                }
+                break;
+            case exports.DestroyType.min:
+                if (value <= minValue) {
+                    particle.destroy();
+                }
+                break;
+        }
+    }
+    function initParticleNumericAnimationValue(options, pxRatio) {
+        const valueRange = options.value, animationOptions = options.animation, res = {
+            delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds$1,
+            enable: animationOptions.enable,
+            value: getRangeValue(options.value) * pxRatio,
+            max: getRangeMax(valueRange) * pxRatio,
+            min: getRangeMin(valueRange) * pxRatio,
+            loops: 0,
+            maxLoops: getRangeValue(animationOptions.count),
+            time: 0,
+        }, decayOffset = 1;
+        if (animationOptions.enable) {
+            res.decay = decayOffset - getRangeValue(animationOptions.decay);
+            switch (animationOptions.mode) {
+                case exports.AnimationMode.increase:
+                    res.status = exports.AnimationStatus.increasing;
+                    break;
+                case exports.AnimationMode.decrease:
+                    res.status = exports.AnimationStatus.decreasing;
+                    break;
+                case exports.AnimationMode.random:
+                    res.status = getRandom() >= half$1 ? exports.AnimationStatus.increasing : exports.AnimationStatus.decreasing;
+                    break;
+            }
+            const autoStatus = animationOptions.mode === exports.AnimationMode.auto;
+            switch (animationOptions.startValue) {
+                case exports.StartValueType.min:
+                    res.value = res.min;
+                    if (autoStatus) {
+                        res.status = exports.AnimationStatus.increasing;
+                    }
+                    break;
+                case exports.StartValueType.max:
+                    res.value = res.max;
+                    if (autoStatus) {
+                        res.status = exports.AnimationStatus.decreasing;
+                    }
+                    break;
+                case exports.StartValueType.random:
+                default:
+                    res.value = randomInRangeValue(res);
+                    if (autoStatus) {
+                        res.status = getRandom() >= half$1 ? exports.AnimationStatus.increasing : exports.AnimationStatus.decreasing;
+                    }
+                    break;
+            }
+        }
+        res.initialValue = res.value;
+        return res;
+    }
+    function updateAnimation(particle, data, changeDirection, destroyType, delta) {
+        const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minDecay = 1;
+        if (particle.destroyed ||
+            !data.enable ||
+            ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
+            return;
+        }
+        const velocity = (data.velocity ?? minVelocity) * delta.factor, minValue = data.min, maxValue = data.max, decay = data.decay ?? minDecay;
+        data.time ??= 0;
+        const delayTime = data.delayTime ?? minDelay;
+        if (delayTime > minDelay && data.time < delayTime) {
+            data.time += delta.value;
+            if (data.time < delayTime) {
+                return;
+            }
+        }
+        switch (data.status) {
+            case exports.AnimationStatus.increasing:
+                data.value += velocity;
+                break;
+            case exports.AnimationStatus.decreasing:
+                data.value -= velocity;
+                break;
+        }
+        if (data.velocity && decay !== identity) {
+            data.velocity *= decay;
+        }
+        switch (data.status) {
+            case exports.AnimationStatus.increasing:
+                if (data.value >= maxValue) {
+                    {
+                        data.status = exports.AnimationStatus.decreasing;
+                    }
+                    data.loops ??= minLoops;
+                    data.loops++;
+                }
+                break;
+            case exports.AnimationStatus.decreasing:
+                if (data.value <= minValue) {
+                    {
+                        data.status = exports.AnimationStatus.increasing;
+                    }
+                    data.loops ??= minLoops;
+                    data.loops++;
+                }
+                break;
+        }
+        checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+        if (!particle.destroyed) {
+            data.value = clamp(data.value, minValue, maxValue);
         }
+    }
+
+    class OpacityAnimation extends RangedAnimationOptions {
+        destroy = exports.DestroyType.none;
         load(data) {
             super.load(data);
             if (isNull(data)) {
                 return;
             }
-            if (data.destroy !== undefined) {
-                this.destroy = data.destroy;
-            }
+            loadProperty(this, "destroy", data.destroy);
         }
     }
 
     class Opacity extends RangedAnimationValueWithRandom {
-        animation;
-        constructor() {
-            super();
-            this.animation = new OpacityAnimation();
-            this.value = 1;
-        }
+        animation = new OpacityAnimation();
+        value = 1;
         load(data) {
             if (isNull(data)) {
                 return;
@@ -3223,10 +2574,7 @@
                         (particle.opacity.loops ?? none) < (particle.opacity.maxLoops ?? none))));
         }
         loadOptions(options, ...sources) {
-            options.opacity ??= new Opacity();
-            for (const source of sources) {
-                options.opacity.load(source?.opacity);
-            }
+            loadOptionProperty(options, "opacity", Opacity, ...sources);
         }
         reset(particle) {
             if (!particle.opacity) {
@@ -3244,7 +2592,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3252,7 +2600,7 @@
         });
     }
 
-    const minVelocity$4 = 0, boundsMin = 0;
+    const boundsMin = 0;
     function bounceHorizontal(data) {
         if ((data.outMode !== exports.OutMode.bounce && data.outMode !== exports.OutMode.split) ||
             (data.direction !== exports.OutModeDirection.left && data.direction !== exports.OutModeDirection.right)) {
@@ -3267,8 +2615,8 @@
         const velocity = data.particle.velocity.x;
         let bounced = false;
         if (data.outOfCanvas &&
-            ((data.direction === exports.OutModeDirection.right && velocity > minVelocity$4) ||
-                (data.direction === exports.OutModeDirection.left && velocity < minVelocity$4))) {
+            ((data.direction === exports.OutModeDirection.right && velocity > minVelocity) ||
+                (data.direction === exports.OutModeDirection.left && velocity < minVelocity))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
             data.particle.velocity.x *= -newVelocity;
             bounced = true;
@@ -3301,8 +2649,8 @@
         const velocity = data.particle.velocity.y;
         let bounced = false;
         if (data.outOfCanvas &&
-            ((data.direction === exports.OutModeDirection.bottom && velocity > minVelocity$4) ||
-                (data.direction === exports.OutModeDirection.top && velocity < minVelocity$4))) {
+            ((data.direction === exports.OutModeDirection.bottom && velocity > minVelocity) ||
+                (data.direction === exports.OutModeDirection.top && velocity < minVelocity))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
             data.particle.velocity.y *= -newVelocity;
             bounced = true;
@@ -3355,7 +2703,6 @@
         }
     }
 
-    const minVelocity$3 = 0;
     class DestroyOutMode {
         modes;
         constructor(_container) {
@@ -3374,10 +2721,10 @@
                     break;
                 case exports.ParticleOutType.inside: {
                     const { dx, dy } = getDistances(particle.position, particle.moveCenter), { x: vx, y: vy } = particle.velocity;
-                    if ((vx < minVelocity$3 && dx > particle.moveCenter.radius) ||
-                        (vy < minVelocity$3 && dy > particle.moveCenter.radius) ||
-                        (vx >= minVelocity$3 && dx < -particle.moveCenter.radius) ||
-                        (vy >= minVelocity$3 && dy < -particle.moveCenter.radius)) {
+                    if ((vx < minVelocity && dx > particle.moveCenter.radius) ||
+                        (vy < minVelocity && dy > particle.moveCenter.radius) ||
+                        (vx >= minVelocity && dx < -particle.moveCenter.radius) ||
+                        (vy >= minVelocity && dy < -particle.moveCenter.radius)) {
                         return;
                     }
                     break;
@@ -3387,7 +2734,6 @@
         }
     }
 
-    const minVelocity$2 = 0;
     class NoneOutMode {
         modes;
         #container;
@@ -3407,10 +2753,10 @@
             }
             const gravityOptions = particle.options.move.gravity, container = this.#container, canvasSize = container.canvas.size, pRadius = particle.getRadius();
             if (!gravityOptions.enable) {
-                if ((particle.velocity.y > minVelocity$2 && particle.position.y <= canvasSize.height + pRadius) ||
-                    (particle.velocity.y < minVelocity$2 && particle.position.y >= -pRadius) ||
-                    (particle.velocity.x > minVelocity$2 && particle.position.x <= canvasSize.width + pRadius) ||
-                    (particle.velocity.x < minVelocity$2 && particle.position.x >= -pRadius)) {
+                if ((particle.velocity.y > minVelocity && particle.position.y <= canvasSize.height + pRadius) ||
+                    (particle.velocity.y < minVelocity && particle.position.y >= -pRadius) ||
+                    (particle.velocity.x > minVelocity && particle.position.x <= canvasSize.width + pRadius) ||
+                    (particle.velocity.x < minVelocity && particle.position.x >= -pRadius)) {
                     return;
                 }
                 if (!isPointInside(particle.position, container.canvas.size, originPoint, pRadius, direction)) {
@@ -3429,7 +2775,7 @@
         }
     }
 
-    const minVelocity$1 = 0, minDistance = 0, updateVector = Vector.origin;
+    const updateVector = Vector.origin;
     class OutOutMode {
         modes;
         #container;
@@ -3450,10 +2796,10 @@
                     updateVector.angle = particle.velocity.angle + Math.PI;
                     updateVector.addTo(particle.moveCenter);
                     const { dx, dy } = getDistances(particle.position, updateVector);
-                    if ((vx <= minVelocity$1 && dx >= minDistance) ||
-                        (vy <= minVelocity$1 && dy >= minDistance) ||
-                        (vx >= minVelocity$1 && dx <= minDistance) ||
-                        (vy >= minVelocity$1 && dy <= minDistance)) {
+                    if ((vx <= minVelocity && dx >= minDistance) ||
+                        (vy <= minVelocity && dy >= minDistance) ||
+                        (vx >= minVelocity && dx <= minDistance) ||
+                        (vy >= minVelocity && dy <= minDistance)) {
                         return;
                     }
                     particle.position.x = Math.floor(randomInRangeValue({
@@ -3577,21 +2923,21 @@
             this.#updateOutMode(particle, delta, outModes.right ?? outModes.default, exports.OutModeDirection.right);
             this.#updateOutMode(particle, delta, outModes.top ?? outModes.default, exports.OutModeDirection.top);
         }
-        #addUpdaterIfMissing = (particle, outMode, getUpdater) => {
+        #addUpdaterIfMissing(particle, outMode, getUpdater) {
             const outModes = particle.options.move.outModes;
             if (!this.updaters.has(outMode) && checkOutMode(outModes, outMode)) {
                 this.updaters.set(outMode, getUpdater(this.#container));
             }
-        };
-        #updateOutMode = (particle, delta, outMode, direction) => {
+        }
+        #updateOutMode(particle, delta, outMode, direction) {
             for (const updater of this.updaters.values()) {
                 updater.update(particle, direction, delta, outMode);
             }
-        };
+        }
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3662,7 +3008,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3717,37 +3063,26 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
     }
 
     class SizeAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = exports.DestroyType.none;
-            this.speed = 5;
-        }
+        destroy = exports.DestroyType.none;
         load(data) {
             super.load(data);
             if (isNull(data)) {
                 return;
             }
-            if (data.destroy !== undefined) {
-                this.destroy = data.destroy;
-            }
+            loadProperty(this, "destroy", data.destroy);
         }
     }
 
     class Size extends RangedAnimationValueWithRandom {
-        animation;
-        constructor() {
-            super();
-            this.animation = new SizeAnimation();
-            this.value = 3;
-        }
+        animation = new SizeAnimation();
+        value = 3;
         load(data) {
             super.load(data);
             if (isNull(data)) {
@@ -3790,10 +3125,7 @@
                         (particle.size.loops ?? minLoops) < (particle.size.maxLoops ?? minLoops))));
         }
         loadOptions(options, ...sources) {
-            options.size ??= new Size();
-            for (const source of sources) {
-                options.size.load(source?.size);
-            }
+            loadOptionProperty(options, "size", Size, ...sources);
         }
         preInit(particle) {
             const pxRatio = this.#container.retina.pixelRatio, options = particle.options, sizeOptions = options.size;
@@ -3816,7 +3148,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3825,7 +3157,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3846,78 +3178,46 @@
         count;
         delay;
         duration;
-        wait;
-        constructor() {
-            this.wait = false;
-        }
+        wait = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = data.count;
-            }
-            if (data.delay !== undefined) {
-                this.delay = setRangeValue(data.delay);
-            }
-            if (data.duration !== undefined) {
-                this.duration = setRangeValue(data.duration);
-            }
-            if (data.wait !== undefined) {
-                this.wait = data.wait;
-            }
+            loadProperty(this, "count", data.count);
+            loadRangeProperty(this, "delay", data.delay);
+            loadRangeProperty(this, "duration", data.duration);
+            loadProperty(this, "wait", data.wait);
         }
     }
 
     class EmitterRate {
-        delay;
-        quantity;
-        constructor() {
-            this.quantity = 1;
-            this.delay = 0.1;
-        }
+        delay = 0.1;
+        quantity = 1;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.quantity !== undefined) {
-                this.quantity = setRangeValue(data.quantity);
-            }
-            if (data.delay !== undefined) {
-                this.delay = setRangeValue(data.delay);
-            }
+            loadRangeProperty(this, "quantity", data.quantity);
+            loadRangeProperty(this, "delay", data.delay);
         }
     }
 
     class EmitterShapeReplace {
-        color;
-        opacity;
-        constructor() {
-            this.color = false;
-            this.opacity = false;
-        }
+        color = false;
+        opacity = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.color !== undefined) {
-                this.color = data.color;
-            }
-            if (data.opacity !== undefined) {
-                this.opacity = data.opacity;
-            }
+            loadProperty(this, "color", data.color);
+            loadProperty(this, "opacity", data.opacity);
         }
     }
 
     class EmitterShape {
-        options;
-        replace;
-        type;
-        constructor() {
-            this.options = {};
-            this.replace = new EmitterShapeReplace();
-            this.type = "square";
-        }
+        options = {};
+        replace = new EmitterShapeReplace();
+        type = "square";
         load(data) {
             if (isNull(data)) {
                 return;
@@ -3926,34 +3226,21 @@
                 this.options = deepExtend({}, data.options ?? {});
             }
             this.replace.load(data.replace);
-            if (data.type !== undefined) {
-                this.type = data.type;
-            }
+            loadProperty(this, "type", data.type);
         }
     }
 
     class EmitterSize {
-        height;
-        mode;
-        width;
-        constructor() {
-            this.mode = exports.PixelMode.percent;
-            this.height = 0;
-            this.width = 0;
-        }
+        height = 0;
+        mode = exports.PixelMode.percent;
+        width = 0;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.mode !== undefined) {
-                this.mode = data.mode;
-            }
-            if (data.height !== undefined) {
-                this.height = data.height;
-            }
-            if (data.width !== undefined) {
-                this.width = data.width;
-            }
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "height", data.height);
+            loadProperty(this, "width", data.width);
         }
     }
 
@@ -3976,50 +3263,35 @@
     }
 
     class Emitter {
-        autoPlay;
+        autoPlay = true;
         direction;
         domId;
-        fill;
-        life;
+        fill = true;
+        life = new EmitterLife();
         name;
         particles;
         position;
-        rate;
-        shape;
+        rate = new EmitterRate();
+        shape = new EmitterShape();
         size;
-        spawn;
+        spawn = new EmitterSpawn();
         spawnFillColor;
         spawnStrokeColor;
-        startCount;
-        constructor() {
-            this.autoPlay = true;
-            this.fill = true;
-            this.life = new EmitterLife();
-            this.rate = new EmitterRate();
-            this.shape = new EmitterShape();
-            this.spawn = new EmitterSpawn();
-            this.startCount = 0;
-        }
+        startCount = 0;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.autoPlay !== undefined) {
-                this.autoPlay = data.autoPlay;
-            }
+            loadProperty(this, "autoPlay", data.autoPlay);
             if (data.size !== undefined) {
                 this.size ??= new EmitterSize();
                 this.size.load(data.size);
             }
-            if (data.direction !== undefined) {
-                this.direction = data.direction;
-            }
-            this.domId = data.domId;
-            if (data.fill !== undefined) {
-                this.fill = data.fill;
-            }
+            loadProperty(this, "direction", data.direction);
+            loadProperty(this, "domId", data.domId);
+            loadProperty(this, "fill", data.fill);
             this.life.load(data.life);
-            this.name = data.name;
+            loadProperty(this, "name", data.name);
             this.particles = executeOnSingleOrMultiple(data.particles, particles => {
                 return deepExtend({}, particles);
             });
@@ -4043,9 +3315,7 @@
                 this.spawnStrokeColor ??= new AnimatableColor();
                 this.spawnStrokeColor.load(data.spawnStrokeColor);
             }
-            if (data.startCount !== undefined) {
-                this.startCount = data.startCount;
-            }
+            loadProperty(this, "startCount", data.startCount);
         }
     }
 
@@ -4127,7 +3397,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -4215,7 +3485,7 @@
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -4223,55 +3493,36 @@
     }
 
     class LifeDelay extends ValueWithRandom {
-        sync;
-        constructor() {
-            super();
-            this.sync = false;
-        }
+        sync = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
             super.load(data);
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
+            loadProperty(this, "sync", data.sync);
         }
     }
 
     class LifeDuration extends ValueWithRandom {
-        sync;
-        constructor() {
-            super();
-            this.sync = false;
-        }
+        sync = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
             super.load(data);
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
+            loadProperty(this, "sync", data.sync);
         }
     }
 
     class Life {
-        count;
-        delay;
-        duration;
-        constructor() {
-            this.count = 0;
-            this.delay = new LifeDelay();
-            this.duration = new LifeDuration();
-        }
+        count = 0;
+        delay = new LifeDelay();
+        duration = new LifeDuration();
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = data.count;
-            }
+            loadProperty(this, "count", data.count);
             this.delay.load(data.delay);
             this.duration.load(data.duration);
         }
@@ -4330,7 +3581,7 @@
         }
     }
 
-    const noTime = 0, identity$2 = 1, infiniteValue = -1;
+    const noTime = 0, identity$1 = 1, infiniteValue = -1;
     class LifeUpdater {
         #container;
         constructor(container) {
@@ -4341,7 +3592,7 @@
             if (!lifeOptions) {
                 return;
             }
-            const delayFactor = lifeOptions.delay.sync ? identity$2 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$2 : getRandom();
+            const delayFactor = lifeOptions.delay.sync ? identity$1 : getRandom(), durationFactor = lifeOptions.duration.sync ? identity$1 : getRandom();
             particle.life = {
                 delay: container.retina.reduceFactor
                     ? ((getRangeValue(lifeOptions.delay.value) * delayFactor) / container.retina.reduceFactor) *
@@ -4367,10 +3618,7 @@
             return !particle.destroyed;
         }
         loadOptions(options, ...sources) {
-            options.life ??= new Life();
-            for (const source of sources) {
-                options.life.load(source?.life);
-            }
+            loadOptionProperty(options, "life", Life, ...sources);
         }
         update(particle, delta) {
             if (!this.isEnabled(particle) || !particle.life) {
@@ -4381,7 +3629,7 @@
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -4390,39 +3638,25 @@
     }
 
     class MotionReduce {
-        factor;
-        value;
-        constructor() {
-            this.factor = 4;
-            this.value = true;
-        }
+        factor = 4;
+        value = true;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.factor !== undefined) {
-                this.factor = data.factor;
-            }
-            if (data.value !== undefined) {
-                this.value = data.value;
-            }
+            loadProperty(this, "factor", data.factor);
+            loadProperty(this, "value", data.value);
         }
     }
 
     class Motion {
-        disable;
-        reduce;
-        constructor() {
-            this.disable = true;
-            this.reduce = new MotionReduce();
-        }
+        disable = true;
+        reduce = new MotionReduce();
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.disable !== undefined) {
-                this.disable = data.disable;
-            }
+            loadProperty(this, "disable", data.disable);
             this.reduce.load(data.reduce);
         }
     }
@@ -4449,7 +3683,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -4847,39 +4081,28 @@
     }
 
     async function loadRibbonShape(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["ribbon"], (container) => Promise.resolve(new RibbonDrawer(container)));
         });
     }
 
     class RibbonsOptions {
-        angle;
         colors;
         count;
         disableForReducedMotion;
-        drift;
         emitterSize;
-        position;
+        positionX;
         ribbonOptions;
         scalar;
-        spread;
-        ticks;
         zIndex;
         constructor() {
-            this.angle = 90;
             this.count = 5;
-            this.spread = 0;
-            this.drift = 0;
             this.emitterSize = {
                 width: 100,
                 height: 0,
             };
-            this.ticks = 200;
-            this.position = {
-                x: 50,
-                y: 0,
-            };
+            this.positionX = 50;
             this.colors = ["#FF0055", "#00D1FF", "#FFD23F", "#61FF7E", "#B284FF"];
             this.ribbonOptions = {
                 angle: 45,
@@ -4910,13 +4133,12 @@
         }
         get origin() {
             return {
-                x: this.position.x / percentDenominator,
-                y: this.position.y / percentDenominator,
+                x: this.positionX / percentDenominator,
+                y: 0,
             };
         }
         set origin(value) {
-            this.position.x = value.x * percentDenominator;
-            this.position.y = value.y * percentDenominator;
+            this.positionX = value.x * percentDenominator;
         }
         get particleCount() {
             return this.count;
@@ -4924,26 +4146,23 @@
         set particleCount(value) {
             this.count = value;
         }
+        get position() {
+            return {
+                x: this.positionX,
+                y: 0,
+            };
+        }
+        set position(value) {
+            this.positionX = value.x;
+        }
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.angle !== undefined) {
-                this.angle = data.angle;
-            }
             const count = data.count ?? data.particleCount;
             if (count !== undefined) {
                 this.count = count;
             }
-            if (data.spread !== undefined) {
-                this.spread = data.spread;
-            }
-            if (data.drift !== undefined) {
-                this.drift = data.drift;
-            }
-            if (data.ticks !== undefined) {
-                this.ticks = data.ticks;
-            }
             if (data.emitterSize) {
                 if (data.emitterSize.width !== undefined) {
                     this.emitterSize.width = data.emitterSize.width;
@@ -4952,20 +4171,20 @@
                     this.emitterSize.height = data.emitterSize.height;
                 }
             }
-            const origin = data.origin;
-            if (origin && !data.position) {
-                data.position = {
-                    x: origin.x === undefined ? undefined : origin.x * percentDenominator,
-                    y: origin.y === undefined ? undefined : origin.y * percentDenominator,
-                };
-            }
-            const position = data.position;
-            if (position) {
-                if (position.x !== undefined) {
-                    this.position.x = position.x;
+            loadProperty(this, "positionX", data.positionX);
+            if (data.positionX === undefined) {
+                const origin = data.origin;
+                if (origin && !data.position) {
+                    data.position = {
+                        x: origin.x === undefined ? undefined : origin.x * percentDenominator,
+                        y: 0,
+                    };
                 }
-                if (position.y !== undefined) {
-                    this.position.y = position.y;
+                const position = data.position;
+                if (position) {
+                    if (position.x !== undefined) {
+                        this.positionX = position.x;
+                    }
                 }
             }
             if (data.colors !== undefined) {
@@ -4979,15 +4198,9 @@
             if (data.ribbonOptions !== undefined) {
                 this.ribbonOptions = deepExtend({}, data.ribbonOptions);
             }
-            if (data.scalar !== undefined) {
-                this.scalar = data.scalar;
-            }
-            if (data.zIndex !== undefined) {
-                this.zIndex = data.zIndex;
-            }
-            if (data.disableForReducedMotion !== undefined) {
-                this.disableForReducedMotion = data.disableForReducedMotion;
-            }
+            loadProperty(this, "scalar", data.scalar);
+            loadProperty(this, "zIndex", data.zIndex);
+            loadProperty(this, "disableForReducedMotion", data.disableForReducedMotion);
         }
     }
 
@@ -4996,7 +4209,7 @@
         await container.addEmitter?.({
             startCount: actualOptions.count,
             position: {
-                x: actualOptions.position.x,
+                x: actualOptions.positionX,
                 y: emitterTop,
             },
             shape: {
@@ -5136,7 +4349,7 @@
                 name: "ribbons",
                 startCount: actualOptions.count,
                 position: {
-                    x: actualOptions.position.x,
+                    x: actualOptions.positionX,
                     y: emitterTop,
                 },
                 shape: {
@@ -5188,7 +4401,7 @@
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(async (e) => {
             const emittersRegister = async (engine) => {
                 await loadEmittersPluginSimple(engine);
@@ -5255,7 +4468,7 @@
     ribbons.init = async () => {
         await initPlugins(tsParticles);
     };
-    ribbons.version = "4.1.3";
+    ribbons.version = "4.2.1";
     globalThis.ribbons = ribbons;
 
     const globalObject = globalThis;
@@ -5316,7 +4529,7 @@
                 return;
             }
             this.draw(ctx => {
-                clear(ctx, this.#canvasManager.size);
+                ctx.clearRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
             });
         }
         clear() {
@@ -5378,7 +4591,7 @@
                     plugin.drawParticleSetup?.(context, particle, delta);
                 }
                 this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
-                drawParticle({
+                this.#drawParticle({
                     container,
                     context,
                     particle,
@@ -5397,7 +4610,7 @@
         drawParticlePlugins(particle, delta) {
             this.draw(ctx => {
                 for (const plugin of this.#drawParticlePlugins) {
-                    drawParticlePlugin(ctx, plugin, particle, delta);
+                    this.#drawParticlePlugin(ctx, plugin, particle, delta);
                 }
             });
         }
@@ -5497,12 +4710,19 @@
         }
         paintBase(baseColor) {
             this.draw(ctx => {
-                paintBase(ctx, this.#canvasManager.size, baseColor);
+                ctx.fillStyle = baseColor ?? "rgba(0,0,0,0)";
+                ctx.fillRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
             });
         }
         paintImage(image, opacity) {
             this.draw(ctx => {
-                paintImage(ctx, this.#canvasManager.size, image, opacity);
+                if (!image) {
+                    return;
+                }
+                const prevAlpha = ctx.globalAlpha;
+                ctx.globalAlpha = opacity;
+                ctx.drawImage(image, originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
+                ctx.globalAlpha = prevAlpha;
             });
         }
         setContext(context) {
@@ -5516,15 +4736,15 @@
         }
         stop() {
             this.draw(ctx => {
-                clear(ctx, this.#canvasManager.size);
+                ctx.clearRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
             });
         }
-        #applyPostDrawUpdaters = particle => {
+        #applyPostDrawUpdaters(particle) {
             for (const updater of this.#postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
-        };
-        #applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
+        }
+        #applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform) {
             for (const updater of this.#preDrawUpdaters) {
                 if (updater.getColorStyles) {
                     const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
@@ -5543,8 +4763,114 @@
                 }
                 updater.beforeDraw?.(particle);
             }
-        };
-        #getPluginParticleColors = particle => {
+        }
+        #drawAfterEffect(drawer, data) {
+            if (!drawer?.drawAfter) {
+                return;
+            }
+            const { particle } = data;
+            if (!particle.effect) {
+                return;
+            }
+            drawer.drawAfter(data);
+        }
+        #drawBeforeEffect(drawer, data) {
+            if (!drawer?.drawBefore) {
+                return;
+            }
+            const { particle } = data;
+            if (!particle.effect) {
+                return;
+            }
+            drawer.drawBefore(data);
+        }
+        #drawParticle(data) {
+            const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+                x: pos.x,
+                y: pos.y,
+            };
+            context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
+            if (colorStyles.fill) {
+                context.fillStyle = colorStyles.fill;
+            }
+            const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+            context.lineWidth = strokeWidth;
+            if (colorStyles.stroke) {
+                context.strokeStyle = colorStyles.stroke;
+            }
+            const drawData = {
+                context,
+                particle,
+                radius,
+                drawRadius: radius * drawScale,
+                opacity,
+                delta,
+                pixelRatio: container.retina.pixelRatio,
+                fill: fillEnabled,
+                stroke: strokeWidth > minStrokeWidth,
+                transformData,
+                position: { ...pos },
+                drawPosition,
+                drawScale,
+            };
+            for (const plugin of container.plugins) {
+                plugin.drawParticleTransform?.(drawData);
+            }
+            const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
+            this.#drawBeforeEffect(effect, drawData);
+            this.#drawShapeBeforeDraw(shape, drawData);
+            this.#drawShape(shape, drawData);
+            this.#drawShapeAfterDraw(shape, drawData);
+            this.#drawAfterEffect(effect, drawData);
+            context.resetTransform();
+        }
+        #drawParticlePlugin(context, plugin, particle, delta) {
+            if (!plugin.drawParticle) {
+                return;
+            }
+            plugin.drawParticle(context, particle, delta);
+        }
+        #drawShape(drawer, data) {
+            if (!drawer) {
+                return;
+            }
+            const { context, fill, particle, stroke } = data;
+            if (!particle.shape) {
+                return;
+            }
+            context.beginPath();
+            drawer.draw(data);
+            if (particle.shapeClose) {
+                context.closePath();
+            }
+            if (fill) {
+                context.fill();
+            }
+            if (stroke) {
+                context.stroke();
+            }
+        }
+        #drawShapeAfterDraw(drawer, data) {
+            if (!drawer?.afterDraw) {
+                return;
+            }
+            const { particle } = data;
+            if (!particle.shape) {
+                return;
+            }
+            drawer.afterDraw(data);
+        }
+        #drawShapeBeforeDraw(drawer, data) {
+            if (!drawer?.beforeDraw) {
+                return;
+            }
+            const { particle } = data;
+            if (!particle.shape) {
+                return;
+            }
+            drawer.beforeDraw(data);
+        }
+        #getPluginParticleColors(particle) {
             let fColor, sColor;
             for (const plugin of this.#colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
@@ -5560,7 +4886,7 @@
             this.#reusablePluginColors[fColorIndex] = fColor;
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
-        };
+        }
     }
 
     const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -5692,6 +5018,7 @@
                 obs.observe(element, { attributes: true });
             });
             this.initPlugins();
+            this.#initContext();
             this.render.init();
         }
         initBackground() {
@@ -5701,7 +5028,7 @@
             }
             const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
             if (color) {
-                elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity);
+                elementStyle.backgroundColor = getStyleFromRgb(color, container.actualOptions.hdr, background.opacity);
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -5723,7 +5050,7 @@
             if (this.#generated && this.domElement) {
                 this.domElement.remove();
             }
-            const container = this.#container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+            const domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
             this.domElement = domCanvas;
             this.#generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
             this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
@@ -5744,26 +5071,6 @@
             const pxRatio = this.#container.retina.pixelRatio, retinaSize = this.size;
             renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
             renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
-            const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
-            this.render.setContextSettings({
-                alpha: true,
-                colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
-                desynchronized: true,
-                willReadFrequently: false,
-            });
-            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
-            this.#safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            container.retina.init();
-            this.initBackground();
-            this.#safeMutationObserver(obs => {
-                const element = this.domElement;
-                if (!element || !(element instanceof Node)) {
-                    return;
-                }
-                obs.observe(element, { attributes: true });
-            });
         }
         resize() {
             const element = this.domElement;
@@ -5831,12 +5138,30 @@
                 await container.refresh();
             }
         }
-        #applyResizePlugins = () => {
+        #applyResizePlugins() {
             for (const plugin of this.#resizePlugins) {
                 plugin.resize?.();
             }
-        };
-        #initStyle = () => {
+        }
+        #initContext() {
+            const container = this.#container, canSupportHdr = container.actualOptions.hdr &&
+                safeMatchMedia("(color-gamut: p3)")?.matches &&
+                safeMatchMedia("(dynamic-range: high)")?.matches;
+            this.render.setContextSettings({
+                alpha: true,
+                desynchronized: true,
+                willReadFrequently: false,
+                ...(canSupportHdr
+                    ? { colorSpace: "display-p3", colorType: "float16" }
+                    : { colorSpace: "srgb" }),
+            });
+            const renderCanvas = this.renderCanvas;
+            if (!renderCanvas) {
+                return;
+            }
+            this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
+        }
+        #initStyle() {
             const element = this.domElement, options = this.#container.actualOptions;
             if (!element) {
                 return;
@@ -5857,8 +5182,8 @@
                 }
                 element.style.setProperty(key, value, "important");
             }
-        };
-        #repairStyle = () => {
+        }
+        #repairStyle() {
             const element = this.domElement;
             if (!element) {
                 return;
@@ -5877,27 +5202,27 @@
                 }
                 observer.observe(element, { attributes: true });
             });
-        };
-        #resetOriginalStyle = () => {
+        }
+        #resetOriginalStyle() {
             const element = this.domElement, originalStyle = this.#originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
             setStyle(element, originalStyle, true);
-        };
-        #safeMutationObserver = callback => {
+        }
+        #safeMutationObserver(callback) {
             if (!this.#mutationObserver) {
                 return;
             }
             callback(this.#mutationObserver);
-        };
-        #setFullScreenStyle = () => {
+        }
+        #setFullScreenStyle() {
             const element = this.domElement;
             if (!element) {
                 return;
             }
             setStyle(element, getFullScreenStyle(this.#container.actualOptions.fullScreen.zIndex), true);
-        };
+        }
     }
 
     class EventListeners {
@@ -5922,7 +5247,7 @@
         removeListeners() {
             this.#manageListeners(false);
         }
-        #handleVisibilityChange = () => {
+        #handleVisibilityChange() {
             const container = this.#container, options = container.actualOptions;
             if (!options.pauseOnBlur) {
                 return;
@@ -5940,8 +5265,8 @@
                     container.draw(true);
                 }
             }
-        };
-        #handleWindowResize = () => {
+        }
+        #handleWindowResize() {
             if (this.#resizeTimeout) {
                 clearTimeout(this.#resizeTimeout);
                 this.#resizeTimeout = undefined;
@@ -5951,13 +5276,13 @@
                 await canvas.windowResize();
             };
             this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds$1);
-        };
-        #manageListeners = add => {
+        }
+        #manageListeners(add) {
             const handlers = this.#handlers;
             this.#manageResize(add);
             manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
-        };
-        #manageResize = add => {
+        }
+        #manageResize(add) {
             const handlers = this.#handlers, container = this.#container, options = container.actualOptions;
             if (!options.resize.enable) {
                 return;
@@ -5984,7 +5309,7 @@
                 });
                 this.#resizeObserver.observe(canvasEl);
             }
-        };
+        }
     }
 
     function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
@@ -6011,6 +5336,131 @@
             data.setCb(data.radius);
         }
     }
+    function normalizeAngle(angle, modulus) {
+        const normalized = angle % modulus;
+        return normalized < defaultAngle$1 ? normalized + modulus : normalized;
+    }
+    function initParticleState(particle, id, group) {
+        particle.id = id;
+        particle.group = group;
+        particle.justWarped = false;
+        particle.effectClose = true;
+        particle.shapeClose = true;
+        particle.pathRotation = false;
+        particle.lastPathTime = 0;
+        particle.destroyed = false;
+        particle.unbreakable = false;
+        particle.isRotating = false;
+        particle.rotation = 0;
+        particle.misplaced = false;
+        particle.retina = {
+            maxDistance: {},
+            maxSpeed: 0,
+            moveDrift: 0,
+            moveSpeed: 0,
+            sizeAnimationSpeed: 0,
+        };
+        particle.size = {
+            value: 1,
+            max: 1,
+            min: 1,
+            enable: false,
+        };
+        particle.outType = exports.ParticleOutType.normal;
+        particle.ignoresResizeRatio = true;
+    }
+    function resolveParticleOptions(particle, container, pluginManager, overrideOptions) {
+        const mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates;
+        particle.effect = itemFromSingleOrMultiple(particlesOptions.effect.type, particle.id, reduceDuplicates);
+        particle.shape = itemFromSingleOrMultiple(particlesOptions.shape.type, particle.id, reduceDuplicates);
+        const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
+        if (overrideOptions) {
+            if (overrideOptions.effect) {
+                const overrideEffectType = overrideOptions.effect.type;
+                if (overrideEffectType && overrideEffectType !== particle.effect) {
+                    const effect = itemFromSingleOrMultiple(overrideEffectType, particle.id, reduceDuplicates);
+                    if (effect) {
+                        particle.effect = effect;
+                    }
+                }
+                effectOptions.load(overrideOptions.effect);
+            }
+            if (overrideOptions.shape) {
+                const overrideShapeType = overrideOptions.shape.type;
+                if (overrideShapeType && overrideShapeType !== particle.shape) {
+                    const shape = itemFromSingleOrMultiple(overrideShapeType, particle.id, reduceDuplicates);
+                    if (shape) {
+                        particle.shape = shape;
+                    }
+                }
+                shapeOptions.load(overrideOptions.shape);
+            }
+        }
+        if (particle.effect === randomColorValue) {
+            const availableEffects = [...container.effectDrawers.keys()];
+            particle.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
+        }
+        if (particle.shape === randomColorValue) {
+            const availableShapes = [...container.shapeDrawers.keys()];
+            particle.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
+        }
+        particle.effectData = particle.effect
+            ? loadEffectData(particle.effect, effectOptions, particle.id, reduceDuplicates)
+            : undefined;
+        particle.shapeData = particle.shape
+            ? loadShapeData(particle.shape, shapeOptions, particle.id, reduceDuplicates)
+            : undefined;
+        particlesOptions.load(overrideOptions);
+        const effectData = particle.effectData, shapeData = particle.shapeData;
+        if (effectData) {
+            particlesOptions.load(effectData.particles);
+        }
+        if (shapeData) {
+            particlesOptions.load(shapeData.particles);
+        }
+        particle.effectClose = effectData?.close ?? particlesOptions.effect.close;
+        particle.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
+        return particlesOptions;
+    }
+    function initParticleDrawers(particle, container) {
+        let effectDrawer, shapeDrawer;
+        if (particle.effect) {
+            effectDrawer = container.effectDrawers.get(particle.effect);
+        }
+        if (effectDrawer?.loadEffect) {
+            effectDrawer.loadEffect(particle);
+        }
+        if (particle.shape) {
+            shapeDrawer = container.shapeDrawers.get(particle.shape);
+        }
+        if (shapeDrawer?.loadShape) {
+            shapeDrawer.loadShape(particle);
+        }
+        const sideCountFunc = shapeDrawer?.getSidesCount;
+        if (sideCountFunc) {
+            particle.sides = sideCountFunc(particle);
+        }
+    }
+    function runUpdaterPreInit(updaters, particle) {
+        for (const updater of updaters) {
+            updater.preInit?.(particle);
+        }
+    }
+    function runUpdaterInit(updaters, particle) {
+        for (const updater of updaters) {
+            updater.init(particle);
+        }
+    }
+    function runDrawerInit(container, particle) {
+        const shapeDrawer = particle.shape ? container.shapeDrawers.get(particle.shape) : undefined, effectDrawer = particle.effect ? container.effectDrawers.get(particle.effect) : undefined;
+        effectDrawer?.particleInit?.(container, particle);
+        shapeDrawer?.particleInit?.(container, particle);
+    }
+    function runParticleCreatedPlugins(container, particle) {
+        for (const plugin of container.particleCreatedPlugins) {
+            plugin.particleCreated?.(particle);
+        }
+    }
     class Particle {
         backColor;
         bubble;
@@ -6136,94 +5586,20 @@
             const rotateData = this.getRotateData(), rotating = this.isRotating;
             this.#cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
             this.#cachedTransform.b = rotating
-                ? rotateData.sin * (externalTransform.b ?? identity$3)
+                ? rotateData.sin * (externalTransform.b ?? identity$2)
                 : (externalTransform.b ?? defaultTransform.b);
             this.#cachedTransform.c = rotating
-                ? -rotateData.sin * (externalTransform.c ?? identity$3)
+                ? -rotateData.sin * (externalTransform.c ?? identity$2)
                 : (externalTransform.c ?? defaultTransform.c);
             this.#cachedTransform.d = rotateData.cos * (externalTransform.d ?? defaultTransform.d);
             return this.#cachedTransform;
         }
         init(id, position, overrideOptions, group) {
             const container = this.#container;
-            this.id = id;
-            this.group = group;
-            this.justWarped = false;
-            this.effectClose = true;
-            this.shapeClose = true;
-            this.pathRotation = false;
-            this.lastPathTime = 0;
-            this.destroyed = false;
-            this.unbreakable = false;
-            this.isRotating = false;
-            this.rotation = 0;
-            this.misplaced = false;
-            this.retina = {
-                maxDistance: {},
-                maxSpeed: 0,
-                moveDrift: 0,
-                moveSpeed: 0,
-                sizeAnimationSpeed: 0,
-            };
-            this.size = {
-                value: 1,
-                max: 1,
-                min: 1,
-                enable: false,
-            };
-            this.outType = exports.ParticleOutType.normal;
-            this.ignoresResizeRatio = true;
-            const mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this.#pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
-            this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
-            this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
-            const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
-            if (overrideOptions) {
-                if (overrideOptions.effect) {
-                    const overrideEffectType = overrideOptions.effect.type;
-                    if (overrideEffectType && overrideEffectType !== this.effect) {
-                        const effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
-                        if (effect) {
-                            this.effect = effect;
-                        }
-                    }
-                    effectOptions.load(overrideOptions.effect);
-                }
-                if (overrideOptions.shape) {
-                    const overrideShapeType = overrideOptions.shape.type;
-                    if (overrideShapeType && overrideShapeType !== this.shape) {
-                        const shape = itemFromSingleOrMultiple(overrideShapeType, this.id, reduceDuplicates);
-                        if (shape) {
-                            this.shape = shape;
-                        }
-                    }
-                    shapeOptions.load(overrideOptions.shape);
-                }
-            }
-            if (this.effect === randomColorValue) {
-                const availableEffects = [...this.#container.effectDrawers.keys()];
-                this.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
-            }
-            if (this.shape === randomColorValue) {
-                const availableShapes = [...this.#container.shapeDrawers.keys()];
-                this.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
-            }
-            this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
-            this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
-            particlesOptions.load(overrideOptions);
-            const effectData = this.effectData, shapeData = this.shapeData;
-            if (effectData) {
-                particlesOptions.load(effectData.particles);
-            }
-            if (shapeData) {
-                particlesOptions.load(shapeData.particles);
-            }
-            this.effectClose = effectData?.close ?? particlesOptions.effect.close;
-            this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
-            this.options = particlesOptions;
+            initParticleState(this, id, group);
+            this.options = resolveParticleOptions(this, container, this.#pluginManager, overrideOptions);
             container.retina.initParticle(this);
-            for (const updater of container.particleUpdaters) {
-                updater.preInit?.(this);
-            }
+            runUpdaterPreInit(container.particleUpdaters, this);
             this.bubble = {
                 inRange: false,
             };
@@ -6236,32 +5612,11 @@
             this.velocity = this.initialVelocity.copy();
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
-            let effectDrawer, shapeDrawer;
-            if (this.effect) {
-                effectDrawer = container.effectDrawers.get(this.effect);
-            }
-            if (effectDrawer?.loadEffect) {
-                effectDrawer.loadEffect(this);
-            }
-            if (this.shape) {
-                shapeDrawer = container.shapeDrawers.get(this.shape);
-            }
-            if (shapeDrawer?.loadShape) {
-                shapeDrawer.loadShape(this);
-            }
-            const sideCountFunc = shapeDrawer?.getSidesCount;
-            if (sideCountFunc) {
-                this.sides = sideCountFunc(this);
-            }
+            initParticleDrawers(this, container);
             this.spawning = false;
-            for (const updater of container.particleUpdaters) {
-                updater.init(this);
-            }
-            effectDrawer?.particleInit?.(container, this);
-            shapeDrawer?.particleInit?.(container, this);
-            for (const plugin of container.particleCreatedPlugins) {
-                plugin.particleCreated?.(this);
-            }
+            runUpdaterInit(container.particleUpdaters, this);
+            runDrawerInit(container, this);
+            runParticleCreatedPlugins(container, this);
         }
         isInsideCanvas(direction) {
             return this.#getInsideCanvasResult({ direction }).inside;
@@ -6275,15 +5630,15 @@
             }
             const angle = this.roll.angle;
             if (this.roll.horizontal && this.roll.vertical) {
-                const normalizedAngle = angle % doublePI, adjustedAngle = normalizedAngle < defaultAngle$1 ? normalizedAngle + doublePI : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle, doublePI);
                 return adjustedAngle >= Math.PI * half$1 && adjustedAngle < Math.PI * triple * half$1;
             }
             if (this.roll.horizontal) {
-                const normalizedAngle = (angle + Math.PI * half$1) % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle$1 ? normalizedAngle + Math.PI * double : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle + Math.PI * half$1, doublePI);
                 return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
             }
             if (this.roll.vertical) {
-                const normalizedAngle = angle % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle$1 ? normalizedAngle + Math.PI * double : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle, doublePI);
                 return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
             }
             return false;
@@ -6296,10 +5651,10 @@
                 updater.reset?.(this);
             }
         }
-        #calcPosition = (position, zIndex) => {
+        #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, abortController = new AbortController(), { signal } = abortController;
-            while (!signal.aborted) {
+            const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size;
+            for (;;) {
                 for (const plugin of plugins) {
                     const pluginPos = plugin.particlePosition?.(posVec, this);
                     if (pluginPos) {
@@ -6327,9 +5682,8 @@
                 tryCount += tryCountIncrement;
                 posVec = undefined;
             }
-            return posVec;
-        };
-        #calculateVelocity = () => {
+        }
+        #calculateVelocity() {
             const moveOptions = this.options.move, baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy();
             if (moveOptions.direction === exports.MoveDirection.inside || moveOptions.direction === exports.MoveDirection.outside) {
                 return res;
@@ -6345,8 +5699,8 @@
                 res.length *= getRandom();
             }
             return res;
-        };
-        #fixHorizontal = (pos, radius, outMode) => {
+        }
+        #fixHorizontal(pos, radius, outMode) {
             fixOutMode({
                 outMode,
                 checkModes: [exports.OutMode.bounce],
@@ -6355,8 +5709,8 @@
                 setCb: (value) => (pos.x += value),
                 radius,
             });
-        };
-        #fixVertical = (pos, radius, outMode) => {
+        }
+        #fixVertical(pos, radius, outMode) {
             fixOutMode({
                 outMode,
                 checkModes: [exports.OutMode.bounce],
@@ -6365,8 +5719,8 @@
                 setCb: (value) => (pos.y += value),
                 radius,
             });
-        };
-        #getDefaultInsideCanvasResult = (direction, outMode) => {
+        }
+        #getDefaultInsideCanvasResult(direction, outMode) {
             const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce;
             if (direction === exports.OutModeDirection.bottom) {
                 return {
@@ -6399,8 +5753,8 @@
                     position.x <= canvasSize.width + radius,
                 reason: "default",
             };
-        };
-        #getInsideCanvasCallbackData = (direction, outMode) => {
+        }
+        #getInsideCanvasCallbackData(direction, outMode) {
             return {
                 canvasSize: this.#container.canvas.size,
                 direction,
@@ -6408,8 +5762,8 @@
                 particle: this,
                 radius: this.getRadius(),
             };
-        };
-        #getInsideCanvasResult = (data) => {
+        }
+        #getInsideCanvasResult(data) {
             const defaultResult = this.#getDefaultInsideCanvasResult(data.direction, data.outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined, shapeCheck = shapeDrawer?.isInsideCanvas, effectCheck = effectDrawer?.isInsideCanvas;
             if (!shapeCheck && !effectCheck) {
                 return defaultResult;
@@ -6424,8 +5778,8 @@
                 };
             }
             return shapeResult ?? effectResult ?? defaultResult;
-        };
-        #getRollColor = color => {
+        }
+        #getRollColor(color) {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
@@ -6439,8 +5793,8 @@
                 return alterHsl(color, this.roll.alter.type, this.roll.alter.value);
             }
             return color;
-        };
-        #initPosition = position => {
+        }
+        #initPosition(position) {
             const container = this.#container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this.#calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
             if (!initialPosition) {
                 throw new Error("a valid position cannot be found for particle");
@@ -6463,8 +5817,8 @@
                     break;
             }
             this.offset = Vector.origin;
-        };
-        #normalizeInsideCanvasResult = (result, reason) => {
+        }
+        #normalizeInsideCanvasResult(result, reason) {
             if (typeof result === "boolean") {
                 return {
                     inside: result,
@@ -6476,7 +5830,7 @@
                 margin: result.margin,
                 reason: result.reason ?? reason,
             };
-        };
+        }
     }
 
     class SpatialHashGrid {
@@ -6829,10 +6183,10 @@
             }
             this.#resizeFactor = undefined;
         }
-        #addToPool = (...particles) => {
+        #addToPool(...particles) {
             this.#pool.push(...particles);
-        };
-        #applyDensity = (options, pluginsCount, group, groupOptions) => {
+        }
+        #applyDensity(options, pluginsCount, group, groupOptions) {
             const numberOptions = options.number;
             if (!numberOptions.density.enable) {
                 if (group === undefined) {
@@ -6856,36 +6210,19 @@
             else if (particlesCount > particlesNumber) {
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
-        };
-        #createBuckets = (zLayers) => {
+        }
+        #createBuckets(zLayers) {
             const bucketCount = Math.max(Math.floor(zLayers), one);
             return Array.from({ length: bucketCount }, () => []);
-        };
-        #getBucketIndex = (zIndex) => {
+        }
+        #getBucketIndex(zIndex) {
             const maxBucketIndex = this.#zBuckets.length - one;
             if (maxBucketIndex <= minIndex) {
                 return minIndex;
             }
             return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
-        };
-        #getParticleInsertIndex = (bucket, particleId) => {
-            let start = minIndex, end = bucket.length;
-            while (start < end) {
-                const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
-                if (!middleParticle) {
-                    end = middle;
-                    continue;
-                }
-                if (middleParticle.id < particleId) {
-                    start = middle + one;
-                }
-                else {
-                    end = middle;
-                }
-            }
-            return start;
-        };
-        #initDensityFactor = densityOptions => {
+        }
+        #initDensityFactor(densityOptions) {
             const container = this.#container;
             if (!densityOptions.enable) {
                 return defaultDensityFactor;
@@ -6895,16 +6232,16 @@
                 return defaultDensityFactor;
             }
             return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
-        };
-        #insertParticleIntoBucket = (particle) => {
+        }
+        #insertParticleIntoBucket(particle) {
             const bucketIndex = this.#getBucketIndex(particle.position.z), bucket = this.#zBuckets[bucketIndex];
             if (!bucket) {
                 return;
             }
-            bucket.splice(this.#getParticleInsertIndex(bucket, particle.id), empty, particle);
+            bucket.push(particle);
             this.#particleBuckets.set(particle.id, bucketIndex);
-        };
-        #removeParticle = (index, group, override) => {
+        }
+        #removeParticle(index, group, override) {
             const particle = this.#array[index];
             if (!particle) {
                 return false;
@@ -6920,22 +6257,20 @@
             });
             this.#addToPool(particle);
             return true;
-        };
-        #removeParticleFromBucket = (particle) => {
+        }
+        #removeParticleFromBucket(particle) {
             const bucketIndex = this.#particleBuckets.get(particle.id) ?? this.#getBucketIndex(particle.position.z), bucket = this.#zBuckets[bucketIndex];
             if (!bucket) {
                 this.#particleBuckets.delete(particle.id);
                 return;
             }
-            const particleIndex = this.#getParticleInsertIndex(bucket, particle.id);
-            if (bucket[particleIndex]?.id !== particle.id) {
-                this.#particleBuckets.delete(particle.id);
-                return;
+            const idx = bucket.findIndex(p => p.id === particle.id);
+            if (idx >= minIndex) {
+                bucket.splice(idx, deleteCount);
             }
-            bucket.splice(particleIndex, deleteCount);
             this.#particleBuckets.delete(particle.id);
-        };
-        #resetBuckets = (zLayers) => {
+        }
+        #resetBuckets(zLayers) {
             const bucketCount = Math.max(Math.floor(zLayers), one);
             if (this.#zBuckets.length !== bucketCount) {
                 this.#zBuckets = this.#createBuckets(bucketCount);
@@ -6944,8 +6279,8 @@
             for (const bucket of this.#zBuckets) {
                 bucket.length = minIndex;
             }
-        };
-        #updateParticleBucket = (particle) => {
+        }
+        #updateParticleBucket(particle) {
             const newBucketIndex = this.#getBucketIndex(particle.position.z), currentBucketIndex = this.#particleBuckets.get(particle.id);
             if (currentBucketIndex === undefined) {
                 this.#insertParticleIntoBucket(particle);
@@ -6956,9 +6291,9 @@
             }
             const currentBucket = this.#zBuckets[currentBucketIndex];
             if (currentBucket) {
-                const particleIndex = this.#getParticleInsertIndex(currentBucket, particle.id);
-                if (currentBucket[particleIndex]?.id === particle.id) {
-                    currentBucket.splice(particleIndex, deleteCount);
+                const idx = currentBucket.findIndex(p => p.id === particle.id);
+                if (idx >= minIndex) {
+                    currentBucket.splice(idx, deleteCount);
                 }
             }
             const newBucket = this.#zBuckets[newBucketIndex];
@@ -6966,10 +6301,16 @@
                 this.#particleBuckets.set(particle.id, newBucketIndex);
                 return;
             }
-            newBucket.splice(this.#getParticleInsertIndex(newBucket, particle.id), empty, particle);
+            newBucket.push(particle);
+            if (newBucket.length >= double) {
+                const prev = newBucket[newBucket.length - double];
+                if (prev && particle.id < prev.id) {
+                    newBucket.sort((a, b) => a.id - b.id);
+                }
+            }
             this.#particleBuckets.set(particle.id, newBucketIndex);
-        };
-        #updateParticlesPhase1 = (delta) => {
+        }
+        #updateParticlesPhase1(delta) {
             const particlesToDelete = new Set(), resizeFactor = this.#resizeFactor;
             for (const particle of this.#array) {
                 if (resizeFactor && !particle.ignoresResizeRatio) {
@@ -6995,8 +6336,8 @@
                 this.grid.insert(particle);
             }
             return particlesToDelete;
-        };
-        #updateParticlesPhase2 = (delta, particlesToDelete) => {
+        }
+        #updateParticlesPhase2(delta, particlesToDelete) {
             for (const particle of this.#array) {
                 if (particle.destroyed) {
                     particlesToDelete.add(particle);
@@ -7012,7 +6353,7 @@
                 }
                 this.#updateParticleBucket(particle);
             }
-        };
+        }
     }
 
     class Retina {
@@ -7374,7 +6715,7 @@
             }
             return refresh;
         }
-        #nextFrame = (timestamp) => {
+        #nextFrame(timestamp) {
             try {
                 if (!this.#smooth &&
                     this.#lastFrameTime !== undefined &&
@@ -7402,7 +6743,7 @@
             catch (e) {
                 getLogger().error("error in animation loop", e);
             }
-        };
+        }
     }
 
     var Container$1 = /*#__PURE__*/Object.freeze({
@@ -7448,7 +6789,7 @@
         BlendPluginInstance: BlendPluginInstance
     });
 
-    const minVelocity = 0, identity$1 = 1, moveSpeedFactor = 60, minSpinRadius = 0, spinFactor = 0.01, defaultPathDelay = 0, noDecay = 1;
+    const moveSpeedFactor = 60, minSpinRadius = 0, spinFactor = 0.01, defaultPathDelay = 0, noDecay = 1;
     function applyDistance(particle) {
         const initialPosition = particle.initialPosition, { dx, dy } = getDistances(initialPosition, particle.position), dxFixed = Math.abs(dx), dyFixed = Math.abs(dy), { maxDistance } = particle.retina, hDistance = maxDistance.horizontal, vDistance = maxDistance.vertical;
         if (!hDistance && !vDistance) {
@@ -7481,7 +6822,7 @@
     }
     function move(particle, moveOptions, moveSpeed, maxSpeed, moveDrift, reduceFactor, delta) {
         applyPath(particle, delta);
-        const gravityOptions = particle.gravity, gravityFactor = gravityOptions?.enable && gravityOptions.inverse ? -identity$1 : identity$1;
+        const gravityOptions = particle.gravity, gravityFactor = gravityOptions?.enable && gravityOptions.inverse ? -identity$2 : identity$2;
         if (moveDrift && moveSpeed) {
             particle.velocity.x += (moveDrift * delta.factor) / (moveSpeedFactor * moveSpeed);
         }
@@ -7501,7 +6842,7 @@
                 particle.velocity.y = velocity.y / moveSpeed;
             }
         }
-        const zIndexOptions = particle.options.zIndex, zVelocityFactor = (identity$1 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
+        const zIndexOptions = particle.options.zIndex, zVelocityFactor = (identity$2 - particle.zIndexFactor) ** zIndexOptions.velocityRate;
         velocity.multTo(zVelocityFactor);
         velocity.multTo(reduceFactor);
         const { position } = particle;
@@ -7527,13 +6868,13 @@
         const maxCanvasSize = Math.max(container.canvas.size.width, container.canvas.size.height), halfMaxSize = maxCanvasSize * half$1;
         if (particle.spin.radius > halfMaxSize) {
             particle.spin.radius = halfMaxSize;
-            particle.spin.acceleration *= -identity$1;
+            particle.spin.acceleration *= -identity$2;
         }
         else if (particle.spin.radius < minSpinRadius) {
             particle.spin.radius = minSpinRadius;
-            particle.spin.acceleration *= -identity$1;
+            particle.spin.acceleration *= -identity$2;
         }
-        particle.spin.angle += moveSpeed * spinFactor * (identity$1 - particle.spin.radius / maxCanvasSize);
+        particle.spin.angle += moveSpeed * spinFactor * (identity$2 - particle.spin.radius / maxCanvasSize);
     }
     function applyPath(particle, delta) {
         const particlesOptions = particle.options, pathOptions = particlesOptions.move.path, pathEnabled = pathOptions.enable;
@@ -7550,13 +6891,13 @@
             particle.velocity.addTo(path);
         }
         if (pathOptions.clamp) {
-            particle.velocity.x = clamp(particle.velocity.x, -identity$1, identity$1);
-            particle.velocity.y = clamp(particle.velocity.y, -identity$1, identity$1);
+            particle.velocity.x = clamp(particle.velocity.x, -identity$2, identity$2);
+            particle.velocity.y = clamp(particle.velocity.y, -identity$2, identity$2);
         }
         particle.lastPathTime -= pathDelay;
     }
     function getProximitySpeedFactor(particle) {
-        return particle.slow.inRange ? particle.slow.factor : identity$1;
+        return particle.slow.inRange ? particle.slow.factor : identity$2;
     }
     function initSpin(container, particle) {
         const options = particle.options, spinOptions = options.move.spin;
@@ -7840,7 +7181,7 @@
             mediaQuery.addEventListener("change", handleChange);
             await Promise.resolve();
         }
-        #handleMotionChange = mediaQuery => {
+        #handleMotionChange(mediaQuery) {
             const container = this.#container, motion = container.actualOptions.motion;
             if (!motion) {
                 return;
@@ -7856,7 +7197,7 @@
             else {
                 container.retina.reduceFactor = defaultReduce;
             }
-        };
+        }
     }
 
     var MotionPluginInstance$1 = /*#__PURE__*/Object.freeze({
@@ -7949,7 +7290,13 @@
             this.#paused = !this.options.autoPlay;
             this.#particlesOptions = particlesOptions;
             this.#size = this.#calcSize();
-            this.size = getSize(this.#size, this.#container.canvas.size);
+            this.size =
+                this.#size.mode === exports.PixelMode.percent
+                    ? {
+                        width: (this.#size.width / percentDenominator) * this.#container.canvas.size.width,
+                        height: (this.#size.height / percentDenominator) * this.#container.canvas.size.height,
+                    }
+                    : { width: this.#size.width, height: this.#size.height };
             this.#lifeCount = this.options.life.count ?? defaultLifeCount;
             this.#immortal = this.#lifeCount <= minLifeCount;
             if (this.options.domId) {
@@ -8020,7 +7367,13 @@
                     ? initialPosition
                     : this.#calcPosition();
             this.#size = this.#calcSize();
-            this.size = getSize(this.#size, container.canvas.size);
+            this.size =
+                this.#size.mode === exports.PixelMode.percent
+                    ? {
+                        width: (this.#size.width / percentDenominator) * container.canvas.size.width,
+                        height: (this.#size.height / percentDenominator) * container.canvas.size.height,
+                    }
+                    : { width: this.#size.width, height: this.#size.height };
             this.#shape?.resize(this.position, this.size);
         }
         update(delta) {
@@ -8120,7 +7473,7 @@
                     return size;
                 })());
         }
-        #destroy = () => {
+        #destroy() {
             this.#mutationObserver?.disconnect();
             this.#mutationObserver = undefined;
             this.#resizeObserver?.disconnect();
@@ -8129,7 +7482,7 @@
             this.#container.dispatchEvent("emitterDestroyed", {
                 emitter: this,
             });
-        };
+        }
         #emit() {
             if (this.#paused) {
                 return;
@@ -8189,7 +7542,7 @@
                 }
             }
         }
-        #prepareToDie = () => {
+        #prepareToDie() {
             if (this.#paused) {
                 return;
             }
@@ -8197,8 +7550,8 @@
             if ((this.#lifeCount > minLifeCount || this.#immortal) && duration !== undefined && duration > minDuration) {
                 this.#duration = duration * millisecondsToSeconds$1;
             }
-        };
-        #setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+        }
+        #setColorAnimation(animation, initValue, maxValue, factor = defaultColorAnimationFactor) {
             const container = this.#container;
             if (!animation.enable) {
                 return initValue;
@@ -8207,7 +7560,7 @@
                 ? (delay * millisecondsToSeconds$1) / container.retina.reduceFactor
                 : Infinity, colorSpeed = getRangeValue(animation.speed);
             return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
-        };
+        }
     }
 
     var EmitterInstance$1 = /*#__PURE__*/Object.freeze({
@@ -8230,6 +7583,7 @@
     exports.MoveCenter = MoveCenter;
     exports.MoveGravity = MoveGravity;
     exports.MovePath = MovePath;
+    exports.OptionLoader = OptionLoader;
     exports.Options = Options;
     exports.OptionsColor = OptionsColor;
     exports.OutModes = OutModes;
@@ -8254,9 +7608,7 @@
     exports.alterHsl = alterHsl;
     exports.animate = animate;
     exports.areBoundsInside = areBoundsInside;
-    exports.arrayRandomIndex = arrayRandomIndex;
     exports.calcExactPositionOrRandomFromSize = calcExactPositionOrRandomFromSize;
-    exports.calcExactPositionOrRandomFromSizeRanged = calcExactPositionOrRandomFromSizeRanged;
     exports.calcPositionFromSize = calcPositionFromSize;
     exports.calcPositionOrRandomFromSize = calcPositionOrRandomFromSize;
     exports.calcPositionOrRandomFromSizeRanged = calcPositionOrRandomFromSizeRanged;
@@ -8268,11 +7620,9 @@
     exports.circleBounce = circleBounce;
     exports.circleBounceDataFromParticle = circleBounceDataFromParticle;
     exports.clamp = clamp;
-    exports.clear = clear;
     exports.cloneStyle = cloneStyle;
     exports.collisionVelocity = collisionVelocity;
     exports.colorMix = colorMix;
-    exports.colorToHsl = colorToHsl;
     exports.colorToRgb = colorToRgb;
     exports.countOffset = countOffset;
     exports.decayOffset = decayOffset;
@@ -8299,16 +7649,8 @@
     exports.deleteCount = deleteCount;
     exports.double = double;
     exports.doublePI = doublePI;
-    exports.drawAfterEffect = drawAfterEffect;
-    exports.drawBeforeEffect = drawBeforeEffect;
-    exports.drawParticle = drawParticle;
-    exports.drawParticlePlugin = drawParticlePlugin;
-    exports.drawShape = drawShape;
-    exports.drawShapeAfterDraw = drawShapeAfterDraw;
-    exports.drawShapeBeforeDraw = drawShapeBeforeDraw;
     exports.empty = empty;
     exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
-    exports.findItemFromSingleOrMultiple = findItemFromSingleOrMultiple;
     exports.generatedAttribute = generatedAttribute;
     exports.generatedFalse = generatedFalse;
     exports.generatedTrue = generatedTrue;
@@ -8327,23 +7669,21 @@
     exports.getParticleDirectionAngle = getParticleDirectionAngle;
     exports.getPosition = getPosition;
     exports.getRandom = getRandom;
+    exports.getRandomFn = getRandomFn;
     exports.getRandomInRange = getRandomInRange;
     exports.getRandomRgbColor = getRandomRgbColor;
     exports.getRangeMax = getRangeMax;
     exports.getRangeMin = getRangeMin;
     exports.getRangeValue = getRangeValue;
-    exports.getSize = getSize;
     exports.getStyleFromHsl = getStyleFromHsl;
     exports.getStyleFromRgb = getStyleFromRgb;
     exports.hMax = hMax;
     exports.hMin = hMin;
     exports.hPhase = hPhase;
     exports.half = half$1;
-    exports.hasMatchMedia = hasMatchMedia;
     exports.hslToRgb = hslToRgb;
     exports.hslaToRgba = hslaToRgba;
-    exports.identity = identity$3;
-    exports.initParticleNumericAnimationValue = initParticleNumericAnimationValue;
+    exports.identity = identity$2;
     exports.inverseFactorNumerator = inverseFactorNumerator;
     exports.isArray = isArray;
     exports.isBoolean = isBoolean;
@@ -8360,28 +7700,34 @@
     exports.lMax = lMax;
     exports.lMin = lMin;
     exports.lengthOffset = lengthOffset;
+    exports.loadExtendProperty = loadExtendProperty;
+    exports.loadLazyProperty = loadLazyProperty;
     exports.loadMinIndex = loadMinIndex;
+    exports.loadNestedProperty = loadNestedProperty;
+    exports.loadOptionProperty = loadOptionProperty;
     exports.loadOptions = loadOptions;
     exports.loadParticlesOptions = loadParticlesOptions;
+    exports.loadProperty = loadProperty;
     exports.loadRandomFactor = loadRandomFactor;
+    exports.loadRangeProperty = loadRangeProperty;
     exports.manageListener = manageListener;
-    exports.memoize = memoize;
+    exports.maxNits = maxNits;
     exports.midColorValue = midColorValue;
     exports.millisecondsToSeconds = millisecondsToSeconds$1;
     exports.minCount = minCount;
+    exports.minDistance = minDistance;
     exports.minFpsLimit = minFpsLimit;
     exports.minIndex = minIndex;
     exports.minLimit = minLimit;
+    exports.minRadius = minRadius$2;
     exports.minStrokeWidth = minStrokeWidth;
-    exports.minVelocity = minVelocity$5;
+    exports.minVelocity = minVelocity;
     exports.minZ = minZ;
     exports.minimumSize = minimumSize;
     exports.mix = mix;
     exports.none = none;
     exports.one = one;
     exports.originPoint = originPoint;
-    exports.paintBase = paintBase;
-    exports.paintImage = paintImage;
     exports.parseAlpha = parseAlpha;
     exports.percentDenominator = percentDenominator;
     exports.phaseNumerator = phaseNumerator;
@@ -8400,7 +7746,6 @@
     exports.sMin = sMin;
     exports.sNormalizedOffset = sNormalizedOffset;
     exports.safeDocument = safeDocument;
-    exports.safeIntersectionObserver = safeIntersectionObserver;
     exports.safeMatchMedia = safeMatchMedia;
     exports.safeMutationObserver = safeMutationObserver;
     exports.setAnimationFunctions = setAnimationFunctions;
@@ -8416,14 +7761,13 @@
     exports.triple = triple;
     exports.tryCountIncrement = tryCountIncrement;
     exports.tsParticles = tsParticles;
-    exports.updateAnimation = updateAnimation;
     exports.updateColor = updateColor;
     exports.updateColorValue = updateColorValue;
     exports.visibilityChangeEvent = visibilityChangeEvent;
     exports.zIndexFactorOffset = zIndexFactorOffset;
 
 }));
-Object.assign(globalThis.window || globalThis, { loadMinIndex: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadMinIndex, loadOptions: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadOptions, loadParticlesOptions: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadParticlesOptions, loadRandomFactor: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadRandomFactor, tsParticles: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).tsParticles });
+Object.assign(globalThis.window || globalThis, { loadExtendProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadExtendProperty, loadLazyProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadLazyProperty, loadMinIndex: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadMinIndex, loadNestedProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadNestedProperty, loadOptionProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadOptionProperty, loadOptions: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadOptions, loadParticlesOptions: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadParticlesOptions, loadProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadProperty, loadRandomFactor: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadRandomFactor, loadRangeProperty: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).loadRangeProperty, tsParticles: (globalThis.__tsParticlesInternals.bundles.ribbons || {}).tsParticles });
 globalThis.__tsParticlesInternals = globalThis.__tsParticlesInternals || {};
 if (!globalThis.__tsParticlesInternals.engine || !globalThis.__tsParticlesInternals.engine.tsParticles) {
   globalThis.__tsParticlesInternals.engine = globalThis.__tsParticlesInternals.bundles.ribbons || {};