@tsparticles/preset-squares 4.1.2 → 4.2.0

package/tsparticles.preset.squares.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);
-/* Preset v4.1.2 */
+/* Preset v4.2.0 */
 (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", double = 2, doublePI = Math.PI * double, defaultFps = 60, 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 + quarter, 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, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 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", double = 2, doublePI = Math.PI * double, defaultFps = 60, 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 + quarter, 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, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 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;
 
     var MoveDirection;
     (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;
         }
@@ -281,27 +276,6 @@
         };
     }
 
-    var AnimationMode;
-    (function (AnimationMode) {
-        AnimationMode["auto"] = "auto";
-        AnimationMode["increase"] = "increase";
-        AnimationMode["decrease"] = "decrease";
-        AnimationMode["random"] = "random";
-    })(AnimationMode || (AnimationMode = {}));
-
-    var AnimationStatus;
-    (function (AnimationStatus) {
-        AnimationStatus["increasing"] = "increasing";
-        AnimationStatus["decreasing"] = "decreasing";
-    })(AnimationStatus || (AnimationStatus = {}));
-
-    var DestroyType;
-    (function (DestroyType) {
-        DestroyType["none"] = "none";
-        DestroyType["max"] = "max";
-        DestroyType["min"] = "min";
-    })(DestroyType || (DestroyType = {}));
-
     var OutModeDirection;
     (function (OutModeDirection) {
         OutModeDirection["bottom"] = "bottom";
@@ -316,67 +290,7 @@
         PixelMode["percent"] = "percent";
     })(PixelMode || (PixelMode = {}));
 
-    var StartValueType;
-    (function (StartValueType) {
-        StartValueType["max"] = "max";
-        StartValueType["min"] = "min";
-        StartValueType["random"] = "random";
-    })(StartValueType || (StartValueType = {}));
-
     const minRadius = 0;
-    function memoize(fn, options) {
-        const cache = new Map(), 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) => (defaultKeyer(args));
-        return (...args) => {
-            const key = makeKey(args), now = Date.now(), entry = cache.get(key);
-            if (entry !== undefined) {
-                {
-                    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 });
-            return result;
-        };
-    }
     function hasMatchMedia() {
         return typeof matchMedia !== "undefined";
     }
@@ -398,11 +312,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, minRadius), size, offset);
@@ -486,56 +397,6 @@
     function itemFromSingleOrMultiple(obj, index, useIndex) {
         return isArray(obj) ? itemFromArray(obj, index, useIndex) : obj;
     }
-    function initParticleNumericAnimationValue(options, pxRatio) {
-        const valueRange = options.value, animationOptions = options.animation, res = {
-            delayTime: getRangeValue(animationOptions.delay) * millisecondsToSeconds,
-            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 AnimationMode.increase:
-                    res.status = AnimationStatus.increasing;
-                    break;
-                case AnimationMode.decrease:
-                    res.status = AnimationStatus.decreasing;
-                    break;
-                case AnimationMode.random:
-                    res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                    break;
-            }
-            const autoStatus = animationOptions.mode === AnimationMode.auto;
-            switch (animationOptions.startValue) {
-                case StartValueType.min:
-                    res.value = res.min;
-                    if (autoStatus) {
-                        res.status = AnimationStatus.increasing;
-                    }
-                    break;
-                case StartValueType.max:
-                    res.value = res.max;
-                    if (autoStatus) {
-                        res.status = AnimationStatus.decreasing;
-                    }
-                    break;
-                case StartValueType.random:
-                default:
-                    res.value = randomInRangeValue(res);
-                    if (autoStatus) {
-                        res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
-                    }
-                    break;
-            }
-        }
-        res.initialValue = res.value;
-        return res;
-    }
     function getPositionOrSize(positionOrSize, canvasSize) {
         const isPercent = positionOrSize.mode === PixelMode.percent;
         if (!isPercent) {
@@ -559,80 +420,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 DestroyType.max:
-                if (value >= maxValue) {
-                    particle.destroy();
-                }
-                break;
-            case 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 AnimationStatus.increasing:
-                data.value += velocity;
-                break;
-            case AnimationStatus.decreasing:
-                data.value -= velocity;
-                break;
-        }
-        if (data.velocity && decay !== identity) {
-            data.velocity *= decay;
-        }
-        switch (data.status) {
-            case AnimationStatus.increasing:
-                if (data.value >= maxValue) {
-                    if (changeDirection) {
-                        data.status = AnimationStatus.decreasing;
-                    }
-                    else {
-                        data.value -= maxValue;
-                    }
-                    data.loops ??= minLoops;
-                    data.loops++;
-                }
-                break;
-            case AnimationStatus.decreasing:
-                if (data.value <= minValue) {
-                    if (changeDirection) {
-                        data.status = 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) {
@@ -654,30 +441,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 };
@@ -1004,7 +795,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.1.2";
+            return "4.2.0";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -1174,6 +965,14 @@
         RotateDirection["random"] = "random";
     })(RotateDirection || (RotateDirection = {}));
 
+    var AnimationMode;
+    (function (AnimationMode) {
+        AnimationMode["auto"] = "auto";
+        AnimationMode["increase"] = "increase";
+        AnimationMode["decrease"] = "decrease";
+        AnimationMode["random"] = "random";
+    })(AnimationMode || (AnimationMode = {}));
+
     var LimitMode;
     (function (LimitMode) {
         LimitMode["delete"] = "delete";
@@ -1195,6 +994,13 @@
         AlterType["enlighten"] = "enlighten";
     })(AlterType || (AlterType = {}));
 
+    var DestroyType;
+    (function (DestroyType) {
+        DestroyType["none"] = "none";
+        DestroyType["max"] = "max";
+        DestroyType["min"] = "min";
+    })(DestroyType || (DestroyType = {}));
+
     var GradientType;
     (function (GradientType) {
         GradientType["linear"] = "linear";
@@ -1209,160 +1015,121 @@
         ParticleOutType["outside"] = "outside";
     })(ParticleOutType || (ParticleOutType = {}));
 
-    var EasingType;
-    (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";
-    })(EasingType || (EasingType = {}));
+    var StartValueType;
+    (function (StartValueType) {
+        StartValueType["max"] = "max";
+        StartValueType["min"] = "min";
+        StartValueType["random"] = "random";
+    })(StartValueType || (StartValueType = {}));
+
+    var AnimationStatus;
+    (function (AnimationStatus) {
+        AnimationStatus["increasing"] = "increasing";
+        AnimationStatus["decreasing"] = "decreasing";
+    })(AnimationStatus || (AnimationStatus = {}));
 
-    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;
-        }
+    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 = AnimationMode.auto;
-            this.startValue = StartValueType.random;
+    function loadOptions(options, ...sourceOptionsArr) {
+        for (const sourceOptions of sourceOptionsArr) {
+            options.load(sourceOptions);
         }
-        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 loadProperty(obj, key, value) {
+        if (value !== undefined) {
+            obj[key] = value;
+        }
+    }
+    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 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 = AnimationMode.auto;
+        startValue = StartValueType.random;
+        doLoad(data) {
+            super.doLoad(data);
+            loadProperty(this, "mode", data.mode);
+            loadProperty(this, "startValue", data.startValue);
         }
     }
 
     class ColorAnimation extends AnimationOptions {
         max;
         min;
-        offset;
+        offset = 0;
+        sync = true;
         constructor(min, max) {
             super();
             this.min = min;
             this.max = max;
-            this.offset = 0;
-            this.sync = true;
         }
-        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);
-            }
+        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);
@@ -1376,10 +1143,7 @@
             }
             return color;
         }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (!isNull(data.value)) {
                 this.value = data.value;
             }
@@ -1387,11 +1151,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);
@@ -1405,11 +1165,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) {
@@ -1422,100 +1179,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) {
@@ -1525,128 +1235,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 = 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 = 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);
             }
@@ -1654,51 +1298,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);
@@ -1706,19 +1324,13 @@
         }
     }
 
-    class OutModes {
+    class OutModes extends OptionLoader {
         bottom;
-        default;
+        default = OutMode.out;
         left;
         right;
         top;
-        constructor() {
-            this.default = OutMode.out;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
+        doLoad(data) {
             if (data.default !== undefined) {
                 this.default = data.default;
             }
@@ -1729,79 +1341,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 = 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 = 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)
                     ? {
@@ -1810,12 +1385,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) {
@@ -1829,177 +1400,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 = 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 = 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) {
@@ -2009,76 +1494,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;
-            }
+        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 {
-        bounce;
-        effect;
-        groups;
-        move;
-        number;
+    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);
@@ -2136,7 +1592,7 @@
                 }
             }
         }
-        #importPalette = (palette) => {
+        #importPalette(palette) {
             const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
@@ -2180,69 +1636,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 => {
@@ -2253,44 +1689,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)) {
@@ -2302,14 +1712,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;
@@ -2326,143 +1734,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);
-                keysToDelete.forEach(k => styleCache.delete(k));
+            if (styleCache.size > maxStyleCacheSize) {
+                styleCache.clear();
             }
             styleCache.set(key, cached);
         }
@@ -2565,34 +1849,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
+        const temp1 = lNormalized < half
             ? 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 getRandomRgbColor(min) {
@@ -2607,21 +1892,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 getHslFromAnimation(animation) {
         return animation === undefined
@@ -2746,78 +2028,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;
@@ -2826,34 +2076,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 = PixelMode.percent;
-            this.height = 0;
-            this.width = 0;
-        }
+        height = 0;
+        mode = 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);
         }
     }
 
@@ -2876,50 +2113,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);
             });
@@ -2943,9 +2165,7 @@
                 this.spawnStrokeColor ??= new AnimatableColor();
                 this.spawnStrokeColor.load(data.spawnStrokeColor);
             }
-            if (data.startCount !== undefined) {
-                this.startCount = data.startCount;
-            }
+            loadProperty(this, "startCount", data.startCount);
         }
     }
 
@@ -3010,7 +2230,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3058,7 +2278,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3127,7 +2347,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3136,58 +2356,156 @@
     }
 
     class RotateAnimation {
-        decay;
-        enable;
-        speed;
-        sync;
-        constructor() {
-            this.enable = false;
-            this.speed = 0;
-            this.decay = 0;
-            this.sync = false;
-        }
+        decay = 0;
+        enable = false;
+        speed = 0;
+        sync = false;
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.speed !== undefined) {
-                this.speed = setRangeValue(data.speed);
+            loadProperty(this, "enable", data.enable);
+            loadRangeProperty(this, "speed", data.speed);
+            loadRangeProperty(this, "decay", data.decay);
+            loadProperty(this, "sync", data.sync);
+        }
+    }
+
+    class Rotate extends ValueWithRandom {
+        animation = new RotateAnimation();
+        direction = RotateDirection.clockwise;
+        path = false;
+        load(data) {
+            if (isNull(data)) {
+                return;
             }
-            if (data.decay !== undefined) {
-                this.decay = setRangeValue(data.decay);
+            super.load(data);
+            loadProperty(this, "direction", data.direction);
+            this.animation.load(data.animation);
+            loadProperty(this, "path", data.path);
+        }
+    }
+
+    function checkDestroy(particle, destroyType, value, minValue, maxValue) {
+        switch (destroyType) {
+            case DestroyType.max:
+                if (value >= maxValue) {
+                    particle.destroy();
+                }
+                break;
+            case 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,
+            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 AnimationMode.increase:
+                    res.status = AnimationStatus.increasing;
+                    break;
+                case AnimationMode.decrease:
+                    res.status = AnimationStatus.decreasing;
+                    break;
+                case AnimationMode.random:
+                    res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
+                    break;
             }
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
+            const autoStatus = animationOptions.mode === AnimationMode.auto;
+            switch (animationOptions.startValue) {
+                case StartValueType.min:
+                    res.value = res.min;
+                    if (autoStatus) {
+                        res.status = AnimationStatus.increasing;
+                    }
+                    break;
+                case StartValueType.max:
+                    res.value = res.max;
+                    if (autoStatus) {
+                        res.status = AnimationStatus.decreasing;
+                    }
+                    break;
+                case StartValueType.random:
+                default:
+                    res.value = randomInRangeValue(res);
+                    if (autoStatus) {
+                        res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
+                    }
+                    break;
             }
         }
+        res.initialValue = res.value;
+        return res;
     }
-
-    class Rotate extends ValueWithRandom {
-        animation;
-        direction;
-        path;
-        constructor() {
-            super();
-            this.animation = new RotateAnimation();
-            this.direction = RotateDirection.clockwise;
-            this.path = false;
-            this.value = 0;
+    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 AnimationStatus.increasing:
+                data.value += velocity;
+                break;
+            case AnimationStatus.decreasing:
+                data.value -= velocity;
+                break;
+        }
+        if (data.velocity && decay !== identity) {
+            data.velocity *= decay;
+        }
+        switch (data.status) {
+            case AnimationStatus.increasing:
+                if (data.value >= maxValue) {
+                    if (changeDirection) {
+                        data.status = AnimationStatus.decreasing;
+                    }
+                    else {
+                        data.value -= maxValue;
+                    }
+                    data.loops ??= minLoops;
+                    data.loops++;
+                }
+                break;
+            case AnimationStatus.decreasing:
+                if (data.value <= minValue) {
+                    if (changeDirection) {
+                        data.status = AnimationStatus.increasing;
+                    }
+                    else {
+                        data.value += maxValue;
+                    }
+                    data.loops ??= minLoops;
+                    data.loops++;
+                }
+                break;
         }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            if (data.direction !== undefined) {
-                this.direction = data.direction;
-            }
-            this.animation.load(data.animation);
-            if (data.path !== undefined) {
-                this.path = data.path;
-            }
+        checkDestroy(particle, destroyType, data.value, minValue, maxValue);
+        if (!particle.destroyed) {
+            data.value = clamp(data.value, minValue, maxValue);
         }
     }
 
@@ -3242,10 +2560,7 @@
             return !particle.destroyed && !particle.spawning && (!!rotate.value || rotate.animation.enable || rotate.path);
         }
         loadOptions(options, ...sources) {
-            options.rotate ??= new Rotate();
-            for (const source of sources) {
-                options.rotate.load(source?.rotate);
-            }
+            loadOptionProperty(options, "rotate", Rotate, ...sources);
         }
         update(particle, delta) {
             if (!this.isEnabled(particle)) {
@@ -3261,7 +2576,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -3270,30 +2585,19 @@
     }
 
     class SizeAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = DestroyType.none;
-            this.speed = 5;
-        }
+        destroy = 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)) {
@@ -3336,10 +2640,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;
@@ -3362,7 +2663,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3386,7 +2687,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.1.2");
+        engine.checkVersion("4.2.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -3516,7 +2817,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() {
@@ -3578,7 +2879,7 @@
                     plugin.drawParticleSetup?.(context, particle, delta);
                 }
                 this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
-                drawParticle({
+                this.#drawParticle({
                     container,
                     context,
                     particle,
@@ -3597,7 +2898,7 @@
         drawParticlePlugins(particle, delta) {
             this.draw(ctx => {
                 for (const plugin of this.#drawParticlePlugins) {
-                    drawParticlePlugin(ctx, plugin, particle, delta);
+                    this.#drawParticlePlugin(ctx, plugin, particle, delta);
                 }
             });
         }
@@ -3697,12 +2998,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) {
@@ -3716,15 +3024,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);
@@ -3743,8 +3051,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) {
@@ -3760,7 +3174,7 @@
             this.#reusablePluginColors[fColorIndex] = fColor;
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
-        };
+        }
     }
 
     const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -3892,6 +3306,7 @@
                 obs.observe(element, { attributes: true });
             });
             this.initPlugins();
+            this.#initContext();
             this.render.init();
         }
         initBackground() {
@@ -3901,7 +3316,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 = "";
@@ -3923,7 +3338,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;
@@ -3944,26 +3359,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;
@@ -4031,12 +3426,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;
@@ -4057,8 +3470,8 @@
                 }
                 element.style.setProperty(key, value, "important");
             }
-        };
-        #repairStyle = () => {
+        }
+        #repairStyle() {
             const element = this.domElement;
             if (!element) {
                 return;
@@ -4077,27 +3490,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 {
@@ -4122,7 +3535,7 @@
         removeListeners() {
             this.#manageListeners(false);
         }
-        #handleVisibilityChange = () => {
+        #handleVisibilityChange() {
             const container = this.#container, options = container.actualOptions;
             if (!options.pauseOnBlur) {
                 return;
@@ -4140,8 +3553,8 @@
                     container.draw(true);
                 }
             }
-        };
-        #handleWindowResize = () => {
+        }
+        #handleWindowResize() {
             if (this.#resizeTimeout) {
                 clearTimeout(this.#resizeTimeout);
                 this.#resizeTimeout = undefined;
@@ -4151,13 +3564,13 @@
                 await canvas.windowResize();
             };
             this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds);
-        };
-        #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;
@@ -4184,7 +3597,7 @@
                 });
                 this.#resizeObserver.observe(canvasEl);
             }
-        };
+        }
     }
 
     function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
@@ -4211,6 +3624,131 @@
             data.setCb(data.radius);
         }
     }
+    function normalizeAngle(angle, modulus) {
+        const normalized = angle % modulus;
+        return normalized < defaultAngle ? 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 = 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;
@@ -4346,78 +3884,10 @@
         }
         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 = 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?.type && overrideOptions.effect.type !== this.effect) {
-                    const overrideEffectType = overrideOptions.effect.type, effect = itemFromSingleOrMultiple(overrideEffectType, this.id, reduceDuplicates);
-                    if (effect) {
-                        this.effect = effect;
-                        effectOptions.load(overrideOptions.effect);
-                    }
-                }
-                if (overrideOptions.shape?.type && overrideOptions.shape.type !== this.shape) {
-                    const overrideShapeType = overrideOptions.shape.type, 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,
             };
@@ -4430,32 +3900,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;
@@ -4469,15 +3918,15 @@
             }
             const angle = this.roll.angle;
             if (this.roll.horizontal && this.roll.vertical) {
-                const normalizedAngle = angle % doublePI, adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + doublePI : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle, doublePI);
                 return adjustedAngle >= Math.PI * half && adjustedAngle < Math.PI * triple * half;
             }
             if (this.roll.horizontal) {
-                const normalizedAngle = (angle + Math.PI * half) % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle + Math.PI * half, doublePI);
                 return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
             }
             if (this.roll.vertical) {
-                const normalizedAngle = angle % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+                const adjustedAngle = normalizeAngle(angle, doublePI);
                 return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
             }
             return false;
@@ -4490,10 +3939,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) {
@@ -4521,9 +3970,8 @@
                 tryCount += tryCountIncrement;
                 posVec = undefined;
             }
-            return posVec;
-        };
-        #calculateVelocity = () => {
+        }
+        #calculateVelocity() {
             const moveOptions = this.options.move, baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy();
             if (moveOptions.direction === MoveDirection.inside || moveOptions.direction === MoveDirection.outside) {
                 return res;
@@ -4539,8 +3987,8 @@
                 res.length *= getRandom();
             }
             return res;
-        };
-        #fixHorizontal = (pos, radius, outMode) => {
+        }
+        #fixHorizontal(pos, radius, outMode) {
             fixOutMode({
                 outMode,
                 checkModes: [OutMode.bounce],
@@ -4549,8 +3997,8 @@
                 setCb: (value) => (pos.x += value),
                 radius,
             });
-        };
-        #fixVertical = (pos, radius, outMode) => {
+        }
+        #fixVertical(pos, radius, outMode) {
             fixOutMode({
                 outMode,
                 checkModes: [OutMode.bounce],
@@ -4559,8 +4007,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 === OutMode.bounce;
             if (direction === OutModeDirection.bottom) {
                 return {
@@ -4593,8 +4041,8 @@
                     position.x <= canvasSize.width + radius,
                 reason: "default",
             };
-        };
-        #getInsideCanvasCallbackData = (direction, outMode) => {
+        }
+        #getInsideCanvasCallbackData(direction, outMode) {
             return {
                 canvasSize: this.#container.canvas.size,
                 direction,
@@ -4602,8 +4050,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;
@@ -4618,8 +4066,8 @@
                 };
             }
             return shapeResult ?? effectResult ?? defaultResult;
-        };
-        #getRollColor = color => {
+        }
+        #getRollColor(color) {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
@@ -4633,8 +4081,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");
@@ -4657,8 +4105,8 @@
                     break;
             }
             this.offset = Vector.origin;
-        };
-        #normalizeInsideCanvasResult = (result, reason) => {
+        }
+        #normalizeInsideCanvasResult(result, reason) {
             if (typeof result === "boolean") {
                 return {
                     inside: result,
@@ -4670,7 +4118,7 @@
                 margin: result.margin,
                 reason: result.reason ?? reason,
             };
-        };
+        }
     }
 
     class SpatialHashGrid {
@@ -5023,10 +4471,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) {
@@ -5050,36 +4498,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;
@@ -5089,16 +4520,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;
@@ -5114,22 +4545,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);
@@ -5138,8 +4567,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);
@@ -5150,9 +4579,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];
@@ -5160,10 +4589,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) {
@@ -5189,8 +4624,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);
@@ -5206,7 +4641,7 @@
                 }
                 this.#updateParticleBucket(particle);
             }
-        };
+        }
     }
 
     class Retina {
@@ -5568,7 +5003,7 @@
             }
             return refresh;
         }
-        #nextFrame = (timestamp) => {
+        #nextFrame(timestamp) {
             try {
                 if (!this.#smooth &&
                     this.#lastFrameTime !== undefined &&
@@ -5596,7 +5031,7 @@
             catch (e) {
                 getLogger().error("error in animation loop", e);
             }
-        };
+        }
     }
 
     var Container$1 = /*#__PURE__*/Object.freeze({
@@ -5833,7 +5268,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 === 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) {
@@ -5904,7 +5345,13 @@
                     ? initialPosition
                     : this.#calcPosition();
             this.#size = this.#calcSize();
-            this.size = getSize(this.#size, container.canvas.size);
+            this.size =
+                this.#size.mode === 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) {
@@ -6004,7 +5451,7 @@
                     return size;
                 })());
         }
-        #destroy = () => {
+        #destroy() {
             this.#mutationObserver?.disconnect();
             this.#mutationObserver = undefined;
             this.#resizeObserver?.disconnect();
@@ -6013,7 +5460,7 @@
             this.#container.dispatchEvent("emitterDestroyed", {
                 emitter: this,
             });
-        };
+        }
         #emit() {
             if (this.#paused) {
                 return;
@@ -6073,7 +5520,7 @@
                 }
             }
         }
-        #prepareToDie = () => {
+        #prepareToDie() {
             if (this.#paused) {
                 return;
             }
@@ -6081,8 +5528,8 @@
             if ((this.#lifeCount > minLifeCount || this.#immortal) && duration !== undefined && duration > minDuration) {
                 this.#duration = duration * millisecondsToSeconds;
             }
-        };
-        #setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+        }
+        #setColorAnimation(animation, initValue, maxValue, factor = defaultColorAnimationFactor) {
             const container = this.#container;
             if (!animation.enable) {
                 return initValue;
@@ -6091,7 +5538,7 @@
                 ? (delay * millisecondsToSeconds) / container.retina.reduceFactor
                 : Infinity, colorSpeed = getRangeValue(animation.speed);
             return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
-        };
+        }
     }
 
     var EmitterInstance$1 = /*#__PURE__*/Object.freeze({