@tsparticles/stencil 4.1.2 → 4.2.0

package/dist/esm/{Container-C5hHCYio.js → Container-BWWTh10Z.js}

@@ -1,4 +1,4 @@
-import { R as RangeType, c as checkDistance, s as squareExp, a as isNull, b as setRangeValue, h as hMin, d as hMax, l as lMin, e as lMax, f as sMin, g as sMax, j as isString, k as isArray, m as deepExtend, P as PixelMode, O as OutMode, M as MoveDirection, n as isNumber, o as isObject, L as LimitMode, p as executeOnSingleOrMultiple, q as isBoolean, r as originPoint, u as minStrokeWidth, v as defaultZoom, w as itemFromArray, x as defaultOpacity, y as randomColorValue, z as half, A as AlterType, B as lFactor, C as double, D as hPhase, E as rgbMax, F as getRandomInRange, G as identity, H as defaultRgbMin, I as sextuple, J as triple, K as phaseNumerator, N as sNormalizedOffset, Q as minimumSize, S as defaultCompositeValue, T as defaultTransformValue, U as zIndexFactorOffset, V as safeMutationObserver, W as generatedAttribute, X as cloneStyle, Y as safeMatchMedia, Z as getFullScreenStyle, _ as safeDocument, $ as millisecondsToSeconds, a0 as manageListener, a1 as visibilityChangeEvent, a2 as resizeEvent, a3 as Vector3d, a4 as EventType, a5 as defaultAngle, a6 as defaultTransform, a7 as ParticleOutType, a8 as itemFromSingleOrMultiple, a9 as getRandom, aa as defaultRetryCount, ab as tryCountIncrement, ac as getParticleBaseVelocity, ad as randomInRangeValue, ae as OutModeDirection, af as clamp, ag as minZ, ah as getPosition, ai as getParticleDirectionAngle, aj as Vector, ak as getRangeValue, al as doublePI, am as calcExactPositionOrRandomFromSize, an as isInArray, ao as degToRad, ap as spatialHashGridCellSize, aq as minLimit, ar as minCount, as as getLogger, at as minIndex, au as defaultRemoveQuantity, av as defaultDensityFactor, aw as empty, ax as deleteCount, ay as countOffset, az as one, aA as defaultRatio, aB as defaultReduceFactor, aC as animate, aD as defaultFpsLimit, aE as minFpsLimit, aF as cancelAnimation, aG as defaultFps } from './index-DYnEUqIm.js';
+import { R as RangeType, c as checkDistance, s as squareExp, a as isNull, b as setRangeValue, h as hMin, d as hMax, l as lMin, e as lMax, f as sMin, g as sMax, j as isString, k as isArray, m as deepExtend, P as PixelMode, O as OutMode, M as MoveDirection, n as isNumber, o as isObject, L as LimitMode, p as executeOnSingleOrMultiple, q as isBoolean, r as itemFromArray, u as defaultOpacity, v as randomColorValue, A as AlterType, w as lFactor, x as half, y as double, z as hPhase, B as rgbMax, C as getRandomInRange, D as identity, E as defaultRgbMin, F as maxNits, G as sextuple, H as triple, I as phaseNumerator, J as sNormalizedOffset, K as originPoint, N as minimumSize, Q as defaultCompositeValue, S as minStrokeWidth, T as defaultZoom, U as zIndexFactorOffset, V as defaultTransformValue, W as safeMutationObserver, X as generatedAttribute, Y as cloneStyle, Z as safeMatchMedia, _ as getFullScreenStyle, $ as safeDocument, a0 as millisecondsToSeconds, a1 as manageListener, a2 as visibilityChangeEvent, a3 as resizeEvent, a4 as Vector3d, a5 as EventType, a6 as defaultAngle, a7 as defaultTransform, a8 as defaultRetryCount, a9 as tryCountIncrement, aa as getParticleBaseVelocity, ab as randomInRangeValue, ac as getRandom, ad as OutModeDirection, ae as clamp, af as minZ, ag as getPosition, ah as getParticleDirectionAngle, ai as ParticleOutType, aj as Vector, ak as getRangeValue, al as calcExactPositionOrRandomFromSize, am as itemFromSingleOrMultiple, an as isInArray, ao as doublePI, ap as degToRad, aq as spatialHashGridCellSize, ar as minLimit, as as minCount, at as getLogger, au as minIndex, av as defaultRemoveQuantity, aw as defaultDensityFactor, ax as deleteCount, ay as countOffset, az as one, aA as defaultRatio, aB as defaultReduceFactor, aC as animate, aD as defaultFpsLimit, aE as minFpsLimit, aF as cancelAnimation, aG as defaultFps } from './index-aPxdqzSw.js';
 
 class BaseRange {
     position;
@@ -73,93 +73,86 @@ class Rectangle extends BaseRange {
     }
 }
 
-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);
+    }
+}
+function loadOptions(options, ...sourceOptionsArr) {
+    for (const sourceOptions of sourceOptionsArr) {
+        options.load(sourceOptions);
+    }
+}
+
+function loadProperty(obj, key, value) {
+    if (value !== undefined) {
+        obj[key] = value;
+    }
+}
+function loadRangeProperty(obj, key, value) {
+    if (value !== undefined) {
+        obj[key] = setRangeValue(value);
+    }
+}
+function loadLazyProperty(obj, key, value, factory) {
+    if (value !== undefined) {
+        const objRecord = obj;
+        objRecord[key] ??= factory();
+        objRecord[key].load(value);
+    }
+}
+
+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 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);
@@ -173,10 +166,7 @@ class OptionsColor {
         }
         return color;
     }
-    load(data) {
-        if (isNull(data)) {
-            return;
-        }
+    doLoad(data) {
         if (!isNull(data.value)) {
             this.value = data.value;
         }
@@ -184,11 +174,7 @@ class OptionsColor {
 }
 
 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);
@@ -202,11 +188,8 @@ class AnimatableColor extends OptionsColor {
         }
         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) {
@@ -219,100 +202,53 @@ class AnimatableColor extends OptionsColor {
     }
 }
 
-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) {
@@ -322,157 +258,78 @@ class Effect {
                 }
             }
         }
-        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);
         }
     }
 }
 
-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);
@@ -480,19 +337,13 @@ class MovePath {
     }
 }
 
-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;
         }
@@ -503,79 +354,42 @@ class OutModes {
     }
 }
 
-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)
                 ? {
@@ -584,12 +398,8 @@ class Move {
                 }
                 : { ...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) {
@@ -603,177 +413,91 @@ class Move {
             }
         }
         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) {
@@ -783,76 +507,47 @@ class Shape {
                 }
             }
         }
-        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);
@@ -910,7 +605,7 @@ class ParticlesOptions {
             }
         }
     }
-    #importPalette = (palette) => {
+    #importPalette(palette) {
         const paletteData = this.#pluginManager.getPalette(palette);
         if (!paletteData) {
             return;
@@ -954,289 +649,117 @@ class ParticlesOptions {
                 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 => {
                 this.#importPreset(preset);
             });
         }
-        if (data.palette !== undefined) {
-            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;
-        }
-        this.background.load(data.background);
-        const fullScreen = data.fullScreen;
-        if (isBoolean(fullScreen)) {
-            this.fullScreen.enable = fullScreen;
-        }
-        else {
-            this.fullScreen.load(fullScreen);
-        }
-        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;
-        }
-        this.#pluginManager.plugins.forEach(plugin => {
-            plugin.loadOptions(this.#container, this, data);
-        });
-    }
-    #importPalette = palette => {
-        const paletteData = this.#pluginManager.getPalette(palette);
-        if (!paletteData) {
-            return;
-        }
-        this.load({
-            background: {
-                color: paletteData.background,
-            },
-            blend: {
-                enable: true,
-                mode: paletteData.blendMode,
-            },
-            particles: {
-                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;
+        if (data.palette !== undefined) {
+            this.palette = data.palette;
+            this.#importPalette(this.palette);
+        }
+        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)) {
+            this.fullScreen.enable = fullScreen;
+        }
+        else {
+            this.fullScreen.load(fullScreen);
+        }
+        this.particles.load(data.particles);
+        this.resize.load(data.resize);
+        this.style = deepExtend(this.style, data.style);
+        loadProperty(this, "smooth", data.smooth);
+        this.#pluginManager.plugins.forEach(plugin => {
+            plugin.loadOptions(this.#container, this, data);
+        });
     }
-    const { particle } = data;
-    if (!particle.shape) {
-        return;
+    #importPalette(palette) {
+        const paletteData = this.#pluginManager.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        this.load({
+            background: {
+                color: paletteData.background,
+            },
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+            particles: {
+                palette,
+            },
+        });
     }
-    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);
     }
@@ -1339,34 +862,35 @@ function rgbToHsl(color) {
 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) {
@@ -1381,21 +905,18 @@ function getStyleFromRgb(color, hdr, opacity) {
     const op = opacity ?? defaultOpacity, 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).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).toString()})`;
 }
 function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
 function getStyleFromHsl(color, hdr, opacity) {
     const op = opacity ?? defaultOpacity, 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).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
@@ -1468,7 +989,7 @@ class RenderManager {
             return;
         }
         this.draw(ctx => {
-            clear(ctx, this.#canvasManager.size);
+            ctx.clearRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
         });
     }
     clear() {
@@ -1530,7 +1051,7 @@ class RenderManager {
                 plugin.drawParticleSetup?.(context, particle, delta);
             }
             this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
-            drawParticle({
+            this.#drawParticle({
                 container,
                 context,
                 particle,
@@ -1549,7 +1070,7 @@ class RenderManager {
     drawParticlePlugins(particle, delta) {
         this.draw(ctx => {
             for (const plugin of this.#drawParticlePlugins) {
-                drawParticlePlugin(ctx, plugin, particle, delta);
+                this.#drawParticlePlugin(ctx, plugin, particle, delta);
             }
         });
     }
@@ -1649,12 +1170,19 @@ class RenderManager {
     }
     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) {
@@ -1668,15 +1196,15 @@ class RenderManager {
     }
     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);
@@ -1695,8 +1223,114 @@ class RenderManager {
             }
             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) {
@@ -1712,7 +1346,7 @@ class RenderManager {
         this.#reusablePluginColors[fColorIndex] = fColor;
         this.#reusablePluginColors[sColorIndex] = sColor;
         return this.#reusablePluginColors;
-    };
+    }
 }
 
 const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -1844,6 +1478,7 @@ class CanvasManager {
             obs.observe(element, { attributes: true });
         });
         this.initPlugins();
+        this.#initContext();
         this.render.init();
     }
     initBackground() {
@@ -1853,7 +1488,7 @@ class CanvasManager {
         }
         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 = "";
@@ -1875,7 +1510,7 @@ class CanvasManager {
         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;
@@ -1896,26 +1531,6 @@ class CanvasManager {
         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;
@@ -1983,12 +1598,30 @@ class CanvasManager {
             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;
@@ -2009,8 +1642,8 @@ class CanvasManager {
             }
             element.style.setProperty(key, value, "important");
         }
-    };
-    #repairStyle = () => {
+    }
+    #repairStyle() {
         const element = this.domElement;
         if (!element) {
             return;
@@ -2029,27 +1662,27 @@ class CanvasManager {
             }
             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 {
@@ -2074,7 +1707,7 @@ class EventListeners {
     removeListeners() {
         this.#manageListeners(false);
     }
-    #handleVisibilityChange = () => {
+    #handleVisibilityChange() {
         const container = this.#container, options = container.actualOptions;
         if (!options.pauseOnBlur) {
             return;
@@ -2092,8 +1725,8 @@ class EventListeners {
                 container.draw(true);
             }
         }
-    };
-    #handleWindowResize = () => {
+    }
+    #handleWindowResize() {
         if (this.#resizeTimeout) {
             clearTimeout(this.#resizeTimeout);
             this.#resizeTimeout = undefined;
@@ -2103,13 +1736,13 @@ class EventListeners {
             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;
@@ -2136,7 +1769,7 @@ class EventListeners {
             });
             this.#resizeObserver.observe(canvasEl);
         }
-    };
+    }
 }
 
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
@@ -2163,6 +1796,131 @@ function fixOutMode(data) {
         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;
@@ -2298,78 +2056,10 @@ class Particle {
     }
     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,
         };
@@ -2382,32 +2072,11 @@ class Particle {
         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;
@@ -2421,15 +2090,15 @@ class Particle {
         }
         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;
@@ -2442,10 +2111,10 @@ class Particle {
             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) {
@@ -2473,9 +2142,8 @@ class Particle {
             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;
@@ -2491,8 +2159,8 @@ class Particle {
             res.length *= getRandom();
         }
         return res;
-    };
-    #fixHorizontal = (pos, radius, outMode) => {
+    }
+    #fixHorizontal(pos, radius, outMode) {
         fixOutMode({
             outMode,
             checkModes: [OutMode.bounce],
@@ -2501,8 +2169,8 @@ class Particle {
             setCb: (value) => (pos.x += value),
             radius,
         });
-    };
-    #fixVertical = (pos, radius, outMode) => {
+    }
+    #fixVertical(pos, radius, outMode) {
         fixOutMode({
             outMode,
             checkModes: [OutMode.bounce],
@@ -2511,8 +2179,8 @@ class Particle {
             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 {
@@ -2545,8 +2213,8 @@ class Particle {
                 position.x <= canvasSize.width + radius,
             reason: "default",
         };
-    };
-    #getInsideCanvasCallbackData = (direction, outMode) => {
+    }
+    #getInsideCanvasCallbackData(direction, outMode) {
         return {
             canvasSize: this.#container.canvas.size,
             direction,
@@ -2554,8 +2222,8 @@ class Particle {
             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;
@@ -2570,8 +2238,8 @@ class Particle {
             };
         }
         return shapeResult ?? effectResult ?? defaultResult;
-    };
-    #getRollColor = color => {
+    }
+    #getRollColor(color) {
         if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
             return color;
         }
@@ -2585,8 +2253,8 @@ class Particle {
             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");
@@ -2609,8 +2277,8 @@ class Particle {
                 break;
         }
         this.offset = Vector.origin;
-    };
-    #normalizeInsideCanvasResult = (result, reason) => {
+    }
+    #normalizeInsideCanvasResult(result, reason) {
         if (typeof result === "boolean") {
             return {
                 inside: result,
@@ -2622,7 +2290,7 @@ class Particle {
             margin: result.margin,
             reason: result.reason ?? reason,
         };
-    };
+    }
 }
 
 class SpatialHashGrid {
@@ -2975,10 +2643,10 @@ class ParticlesManager {
         }
         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) {
@@ -3002,36 +2670,19 @@ class ParticlesManager {
         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;
@@ -3041,16 +2692,16 @@ class ParticlesManager {
             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;
@@ -3066,22 +2717,20 @@ class ParticlesManager {
         });
         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);
@@ -3090,8 +2739,8 @@ class ParticlesManager {
         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);
@@ -3102,9 +2751,9 @@ class ParticlesManager {
         }
         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];
@@ -3112,10 +2761,16 @@ class ParticlesManager {
             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) {
@@ -3141,8 +2796,8 @@ class ParticlesManager {
             this.grid.insert(particle);
         }
         return particlesToDelete;
-    };
-    #updateParticlesPhase2 = (delta, particlesToDelete) => {
+    }
+    #updateParticlesPhase2(delta, particlesToDelete) {
         for (const particle of this.#array) {
             if (particle.destroyed) {
                 particlesToDelete.add(particle);
@@ -3158,7 +2813,7 @@ class ParticlesManager {
             }
             this.#updateParticleBucket(particle);
         }
-    };
+    }
 }
 
 class Retina {
@@ -3520,7 +3175,7 @@ class Container {
         }
         return refresh;
     }
-    #nextFrame = (timestamp) => {
+    #nextFrame(timestamp) {
         try {
             if (!this.#smooth &&
                 this.#lastFrameTime !== undefined &&
@@ -3548,7 +3203,7 @@ class Container {
         catch (e) {
             getLogger().error("error in animation loop", e);
         }
-    };
+    }
 }
 
 export { Container };