@tsparticles/preset-squares 4.0.4 → 4.1.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.0.4 */
+/* Preset v4.1.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -51,13 +51,13 @@
             return Math.atan2(this.y, this.x);
         }
         set angle(angle) {
-            this._updateFromAngle(angle, this.length);
+            this.#updateFromAngle(angle, this.length);
         }
         get length() {
             return Math.sqrt(this.getLengthSq());
         }
         set length(length) {
-            this._updateFromAngle(this.angle, length);
+            this.#updateFromAngle(this.angle, length);
         }
         static clone(source) {
             return Vector3d.create(source.x, source.y, getZ(source));
@@ -120,7 +120,7 @@
             this.y -= v.y;
             this.z -= getZ(v);
         }
-        _updateFromAngle(angle, length) {
+        #updateFromAngle(angle, length) {
             this.x = Math.cos(angle) * length;
             this.y = Math.sin(angle) * length;
         }
@@ -713,38 +713,38 @@
     }
 
     class EventDispatcher {
-        _listeners;
+        #listeners;
         constructor() {
-            this._listeners = new Map();
+            this.#listeners = new Map();
         }
         addEventListener(type, listener) {
             this.removeEventListener(type, listener);
-            let arr = this._listeners.get(type);
+            let arr = this.#listeners.get(type);
             if (!arr) {
                 arr = [];
-                this._listeners.set(type, arr);
+                this.#listeners.set(type, arr);
             }
             arr.push(listener);
         }
         dispatchEvent(type, args) {
-            const listeners = this._listeners.get(type);
+            const listeners = this.#listeners.get(type);
             listeners?.forEach(handler => {
                 handler(args);
             });
         }
         hasEventListener(type) {
-            return !!this._listeners.get(type);
+            return !!this.#listeners.get(type);
         }
         removeAllEventListeners(type) {
             if (!type) {
-                this._listeners = new Map();
+                this.#listeners = new Map();
             }
             else {
-                this._listeners.delete(type);
+                this.#listeners.delete(type);
             }
         }
         removeEventListener(type, listener) {
-            const arr = this._listeners.get(type);
+            const arr = this.#listeners.get(type);
             if (!arr) {
                 return;
             }
@@ -753,7 +753,7 @@
                 return;
             }
             if (length === deleteCount) {
-                this._listeners.delete(type);
+                this.#listeners.delete(type);
             }
             else {
                 arr.splice(idx, deleteCount);
@@ -791,19 +791,19 @@
         presets = new Map();
         shapeDrawers = new Map();
         updaters = new Map();
-        _allLoadersSet = new Set();
-        _configs = new Map();
-        _engine;
-        _executedSet = new Set();
-        _initialized = false;
-        _isRunningLoaders = false;
-        _loadPromises = new Set();
+        #allLoadersSet = new Set();
+        #configs = new Map();
+        #engine;
+        #executedSet = new Set();
+        #initialized = false;
+        #isRunningLoaders = false;
+        #loadPromises = new Set();
         constructor(engine) {
-            this._engine = engine;
+            this.#engine = engine;
         }
         get configs() {
             const res = {};
-            for (const [name, config] of this._configs) {
+            for (const [name, config] of this.#configs) {
                 res[name] = config;
             }
             return res;
@@ -813,8 +813,8 @@
         }
         addConfig(config) {
             const key = config.key ?? config.name ?? "default";
-            this._configs.set(key, config);
-            this._engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
+            this.#configs.set(key, config);
+            this.#engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
         }
         addEasing(name, easing) {
             if (this.easingFunctions.get(name)) {
@@ -875,21 +875,21 @@
             return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
         }
         async init() {
-            if (this._initialized || this._isRunningLoaders) {
+            if (this.#initialized || this.#isRunningLoaders) {
                 return;
             }
-            this._isRunningLoaders = true;
-            this._executedSet = new Set();
-            this._allLoadersSet = new Set(this._loadPromises);
+            this.#isRunningLoaders = true;
+            this.#executedSet = new Set();
+            this.#allLoadersSet = new Set(this.#loadPromises);
             try {
-                for (const loader of this._allLoadersSet) {
-                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                for (const loader of this.#allLoadersSet) {
+                    await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
                 }
             }
             finally {
-                this._loadPromises.clear();
-                this._isRunningLoaders = false;
-                this._initialized = true;
+                this.#loadPromises.clear();
+                this.#isRunningLoaders = false;
+                this.#initialized = true;
             }
         }
         loadParticlesOptions(container, options, ...sourceOptions) {
@@ -900,24 +900,24 @@
             updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
         }
         async register(...loaders) {
-            if (this._initialized) {
+            if (this.#initialized) {
                 throw new Error("Register plugins can only be done before calling tsParticles.load()");
             }
             for (const loader of loaders) {
-                if (this._isRunningLoaders) {
-                    await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+                if (this.#isRunningLoaders) {
+                    await this.#runLoader(loader, this.#executedSet, this.#allLoadersSet);
                 }
                 else {
-                    this._loadPromises.add(loader);
+                    this.#loadPromises.add(loader);
                 }
             }
         }
-        async _runLoader(loader, executed, allLoaders) {
+        async #runLoader(loader, executed, allLoaders) {
             if (executed.has(loader))
                 return;
             executed.add(loader);
             allLoaders.add(loader);
-            await loader(this._engine);
+            await loader(this.#engine);
         }
     }
 
@@ -997,17 +997,17 @@
     };
     class Engine {
         pluginManager = new PluginManager(this);
-        _domArray = [];
-        _eventDispatcher = new EventDispatcher();
-        _initialized = false;
+        #domArray = [];
+        #eventDispatcher = new EventDispatcher();
+        #initialized = false;
         get items() {
-            return this._domArray;
+            return this.#domArray;
         }
         get version() {
-            return "4.0.4";
+            return "4.1.0";
         }
         addEventListener(type, listener) {
-            this._eventDispatcher.addEventListener(type, listener);
+            this.#eventDispatcher.addEventListener(type, listener);
         }
         checkVersion(pluginVersion) {
             if (this.version === pluginVersion) {
@@ -1016,17 +1016,17 @@
             throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
         }
         dispatchEvent(type, args) {
-            this._eventDispatcher.dispatchEvent(type, args);
+            this.#eventDispatcher.dispatchEvent(type, args);
         }
         async init() {
-            if (this._initialized) {
+            if (this.#initialized) {
                 return;
             }
             await this.pluginManager.init();
-            this._initialized = true;
+            this.#initialized = true;
         }
         item(index) {
-            const { items } = this, item = items[index];
+            const items = this.items, item = items[index];
             if (item?.destroyed) {
                 items.splice(index, removeDeleteCount);
                 return;
@@ -1080,7 +1080,7 @@
             await Promise.all(this.items.map(t => t.refresh()));
         }
         removeEventListener(type, listener) {
-            this._eventDispatcher.removeEventListener(type, listener);
+            this.#eventDispatcher.removeEventListener(type, listener);
         }
     }
 
@@ -1851,43 +1851,6 @@
         }
     }
 
-    class OpacityAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = DestroyType.none;
-            this.speed = 2;
-        }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            if (data.destroy !== undefined) {
-                this.destroy = data.destroy;
-            }
-        }
-    }
-
-    class Opacity extends RangedAnimationValueWithRandom {
-        animation;
-        constructor() {
-            super();
-            this.animation = new OpacityAnimation();
-            this.value = 1;
-        }
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            super.load(data);
-            const animation = data.animation;
-            if (animation !== undefined) {
-                this.animation.load(animation);
-            }
-        }
-    }
-
     class Stroke {
         color;
         opacity;
@@ -2055,43 +2018,6 @@
         }
     }
 
-    class SizeAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = DestroyType.none;
-            this.speed = 5;
-        }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            if (data.destroy !== undefined) {
-                this.destroy = data.destroy;
-            }
-        }
-    }
-
-    class Size extends RangedAnimationValueWithRandom {
-        animation;
-        constructor() {
-            super();
-            this.animation = new SizeAnimation();
-            this.value = 3;
-        }
-        load(data) {
-            super.load(data);
-            if (isNull(data)) {
-                return;
-            }
-            const animation = data.animation;
-            if (animation !== undefined) {
-                this.animation.load(animation);
-            }
-        }
-    }
-
     class ZIndex extends ValueWithRandom {
         opacityRate;
         sizeRate;
@@ -2125,24 +2051,21 @@
         groups;
         move;
         number;
-        opacity;
         paint;
         palette;
         reduceDuplicates;
         shape;
-        size;
         zIndex;
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            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.opacity = new Opacity();
             this.paint = new Paint();
             this.paint.color = new AnimatableColor();
             this.paint.color.value = "#fff";
@@ -2150,7 +2073,6 @@
             this.paint.fill.enable = true;
             this.reduceDuplicates = false;
             this.shape = new Shape();
-            this.size = new Size();
             this.zIndex = new ZIndex();
         }
         load(data) {
@@ -2159,7 +2081,7 @@
             }
             if (data.palette) {
                 this.palette = data.palette;
-                this._importPalette(this.palette);
+                this.#importPalette(this.palette);
             }
             if (data.groups !== undefined) {
                 for (const group of Object.keys(data.groups)) {
@@ -2179,7 +2101,6 @@
             this.effect.load(data.effect);
             this.move.load(data.move);
             this.number.load(data.number);
-            this.opacity.load(data.opacity);
             const paintToLoad = data.paint;
             if (paintToLoad) {
                 if (isArray(paintToLoad)) {
@@ -2198,15 +2119,14 @@
                 }
             }
             this.shape.load(data.shape);
-            this.size.load(data.size);
             this.zIndex.load(data.zIndex);
-            if (this._container) {
-                for (const plugin of this._pluginManager.plugins) {
+            if (this.#container) {
+                for (const plugin of this.#pluginManager.plugins) {
                     if (plugin.loadParticlesOptions) {
-                        plugin.loadParticlesOptions(this._container, this, data);
+                        plugin.loadParticlesOptions(this.#container, this, data);
                     }
                 }
-                const updaters = this._pluginManager.updaters.get(this._container);
+                const updaters = this.#pluginManager.updaters.get(this.#container);
                 if (updaters) {
                     for (const updater of updaters) {
                         if (updater.loadOptions) {
@@ -2216,8 +2136,8 @@
                 }
             }
         }
-        _importPalette = (palette) => {
-            const paletteData = this._pluginManager.getPalette(palette);
+        #importPalette = (palette) => {
+            const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -2296,11 +2216,11 @@
         smooth;
         style;
         zLayers;
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
             this.autoPlay = true;
             this.background = new Background();
             this.clear = true;
@@ -2311,7 +2231,7 @@
             this.duration = 0;
             this.fpsLimit = 120;
             this.hdr = true;
-            this.particles = loadParticlesOptions(this._pluginManager, this._container);
+            this.particles = loadParticlesOptions(this.#pluginManager, this.#container);
             this.pauseOnBlur = true;
             this.pauseOnOutsideViewport = true;
             this.resize = new ResizeEvent();
@@ -2326,12 +2246,12 @@
             if (data.preset !== undefined) {
                 this.preset = data.preset;
                 executeOnSingleOrMultiple(this.preset, preset => {
-                    this._importPreset(preset);
+                    this.#importPreset(preset);
                 });
             }
             if (data.palette !== undefined) {
                 this.palette = data.palette;
-                this._importPalette(this.palette);
+                this.#importPalette(this.palette);
             }
             if (data.autoPlay !== undefined) {
                 this.autoPlay = data.autoPlay;
@@ -2385,12 +2305,12 @@
             if (data.smooth !== undefined) {
                 this.smooth = data.smooth;
             }
-            this._pluginManager.plugins.forEach(plugin => {
-                plugin.loadOptions(this._container, this, data);
+            this.#pluginManager.plugins.forEach(plugin => {
+                plugin.loadOptions(this.#container, this, data);
             });
         }
-        _importPalette = palette => {
-            const paletteData = this._pluginManager.getPalette(palette);
+        #importPalette = palette => {
+            const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -2407,8 +2327,8 @@
                 },
             });
         };
-        _importPreset = preset => {
-            this.load(this._pluginManager.getPreset(preset));
+        #importPreset = preset => {
+            this.load(this.#pluginManager.getPreset(preset));
         };
     }
 
@@ -3031,13 +2951,13 @@
 
     class EmittersPlugin {
         id = "emitters";
-        _instancesManager;
+        #instancesManager;
         constructor(instancesManager) {
-            this._instancesManager = instancesManager;
+            this.#instancesManager = instancesManager;
         }
         async getPlugin(container) {
             const { EmittersPluginInstance } = await Promise.resolve().then(function () { return EmittersPluginInstance$1; });
-            return new EmittersPluginInstance(this._instancesManager, container);
+            return new EmittersPluginInstance(this.#instancesManager, container);
         }
         loadOptions(_container, options, source) {
             if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -3090,7 +3010,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -3111,15 +3031,15 @@
             return input.startsWith("#");
         }
         handleColor(color) {
-            return this._parseString(color.value);
+            return this.#parseString(color.value);
         }
         handleRangeColor(color) {
-            return this._parseString(color.value);
+            return this.#parseString(color.value);
         }
         parseString(input) {
-            return this._parseString(input);
+            return this.#parseString(input);
         }
-        _parseString(hexColor) {
+        #parseString(hexColor) {
             if (typeof hexColor !== "string" || !this.accepts(hexColor)) {
                 return;
             }
@@ -3138,7 +3058,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3146,20 +3066,20 @@
 
     const defaultOpacity = 1;
     class PaintUpdater {
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._container = container;
-            this._pluginManager = pluginManager;
+            this.#container = container;
+            this.#pluginManager = pluginManager;
         }
         init(particle) {
-            const container = this._container, options = particle.options, paint = itemFromSingleOrMultiple(options.paint, particle.id, options.reduceDuplicates), color = paint?.color, paintColor = color ?? undefined, fill = paint?.fill, stroke = paint?.stroke;
+            const container = this.#container, options = particle.options, paint = itemFromSingleOrMultiple(options.paint, particle.id, options.reduceDuplicates), color = paint?.color, paintColor = color ?? undefined, fill = paint?.fill, stroke = paint?.stroke;
             if (fill) {
                 const fillColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), fill.color);
                 particle.fillEnabled = fill.enable;
                 particle.fillOpacity = getRangeValue(fill.opacity);
                 particle.fillAnimation = fillColor.animation;
-                const fillHslColor = rangeColorToHsl(this._pluginManager, fillColor);
+                const fillHslColor = rangeColorToHsl(this.#pluginManager, fillColor);
                 if (fillHslColor) {
                     particle.fillColor = getHslAnimationFromHsl(fillHslColor, particle.fillAnimation, container.retina.reduceFactor);
                 }
@@ -3175,7 +3095,7 @@
                 particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
                 particle.strokeOpacity = getRangeValue(stroke.opacity ?? defaultOpacity);
                 particle.strokeAnimation = strokeColor.animation;
-                const strokeHslColor = rangeColorToHsl(this._pluginManager, strokeColor) ?? particle.getFillColor();
+                const strokeHslColor = rangeColorToHsl(this.#pluginManager, strokeColor) ?? particle.getFillColor();
                 if (strokeHslColor) {
                     particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
                 }
@@ -3207,7 +3127,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3273,9 +3193,9 @@
 
     const doublePIDeg = 360;
     class RotateUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         init(particle) {
             const rotateOptions = particle.options.rotate;
@@ -3307,7 +3227,7 @@
             if (rotateAnimation.enable) {
                 particle.rotate.decay = identity - getRangeValue(rotateAnimation.decay);
                 particle.rotate.velocity =
-                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.container.retina.reduceFactor;
+                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.#container.retina.reduceFactor;
                 if (!rotateAnimation.sync) {
                     particle.rotate.velocity *= getRandom();
                 }
@@ -3341,7 +3261,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -3349,21 +3269,63 @@
         });
     }
 
+    class SizeAnimation extends RangedAnimationOptions {
+        destroy;
+        constructor() {
+            super();
+            this.destroy = DestroyType.none;
+            this.speed = 5;
+        }
+        load(data) {
+            super.load(data);
+            if (isNull(data)) {
+                return;
+            }
+            if (data.destroy !== undefined) {
+                this.destroy = data.destroy;
+            }
+        }
+    }
+
+    class Size extends RangedAnimationValueWithRandom {
+        animation;
+        constructor() {
+            super();
+            this.animation = new SizeAnimation();
+            this.value = 3;
+        }
+        load(data) {
+            super.load(data);
+            if (isNull(data)) {
+                return;
+            }
+            const animation = data.animation;
+            if (animation !== undefined) {
+                this.animation.load(animation);
+            }
+        }
+    }
+
     const minLoops = 0;
     class SizeUpdater {
-        _container;
+        #container;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         init(particle) {
-            const container = this._container, sizeOptions = particle.options.size, sizeAnimation = sizeOptions.animation;
-            if (sizeAnimation.enable) {
-                particle.size.velocity =
-                    (particle.retina.sizeAnimationSpeed / percentDenominator) * container.retina.reduceFactor;
-                if (!sizeAnimation.sync) {
-                    particle.size.velocity *= getRandom();
-                }
+            const container = this.#container, sizeOptions = particle.options.size;
+            if (!sizeOptions) {
+                return;
+            }
+            const sizeAnimation = sizeOptions.animation;
+            if (!sizeAnimation.enable) {
+                return;
+            }
+            particle.size.velocity = (particle.retina.sizeAnimationSpeed / percentDenominator) * container.retina.reduceFactor;
+            if (sizeAnimation.sync) {
+                return;
             }
+            particle.size.velocity *= getRandom();
         }
         isEnabled(particle) {
             return (!particle.destroyed &&
@@ -3373,12 +3335,26 @@
                     ((particle.size.maxLoops ?? minLoops) > minLoops &&
                         (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);
+            }
+        }
+        preInit(particle) {
+            const pxRatio = this.#container.retina.pixelRatio, options = particle.options, sizeOptions = options.size;
+            if (!sizeOptions) {
+                return;
+            }
+            particle.size = initParticleNumericAnimationValue(sizeOptions, pxRatio);
+            particle.retina.sizeAnimationSpeed = getRangeValue(sizeOptions.animation.speed) * pxRatio;
+        }
         reset(particle) {
             particle.size.time = 0;
             particle.size.loops = 0;
         }
         update(particle, delta) {
-            if (!this.isEnabled(particle)) {
+            if (!this.isEnabled(particle) || !particle.options.size) {
                 return;
             }
             updateAnimation(particle, particle.size, true, particle.options.size.animation.destroy, delta);
@@ -3386,7 +3362,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3410,7 +3386,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -3494,58 +3470,58 @@
         }
     }
     class RenderManager {
-        _canvasClearPlugins;
-        _canvasManager;
-        _canvasPaintPlugins;
-        _clearDrawPlugins;
-        _colorPlugins;
-        _container;
-        _context;
-        _contextSettings;
-        _drawParticlePlugins;
-        _drawParticlesCleanupPlugins;
-        _drawParticlesSetupPlugins;
-        _drawPlugins;
-        _drawSettingsCleanupPlugins;
-        _drawSettingsSetupPlugins;
-        _pluginManager;
-        _postDrawUpdaters;
-        _preDrawUpdaters;
-        _reusableColorStyles = {};
-        _reusablePluginColors = [undefined, undefined];
-        _reusableTransform = {};
+        #canvasClearPlugins;
+        #canvasManager;
+        #canvasPaintPlugins;
+        #clearDrawPlugins;
+        #colorPlugins;
+        #container;
+        #context;
+        #contextSettings;
+        #drawParticlePlugins;
+        #drawParticlesCleanupPlugins;
+        #drawParticlesSetupPlugins;
+        #drawPlugins;
+        #drawSettingsCleanupPlugins;
+        #drawSettingsSetupPlugins;
+        #pluginManager;
+        #postDrawUpdaters;
+        #preDrawUpdaters;
+        #reusableColorStyles = {};
+        #reusablePluginColors = [undefined, undefined];
+        #reusableTransform = {};
         constructor(pluginManager, container, canvasManager) {
-            this._pluginManager = pluginManager;
-            this._container = container;
-            this._canvasManager = canvasManager;
-            this._context = null;
-            this._preDrawUpdaters = [];
-            this._postDrawUpdaters = [];
-            this._colorPlugins = [];
-            this._canvasClearPlugins = [];
-            this._canvasPaintPlugins = [];
-            this._clearDrawPlugins = [];
-            this._drawParticlePlugins = [];
-            this._drawParticlesCleanupPlugins = [];
-            this._drawParticlesSetupPlugins = [];
-            this._drawPlugins = [];
-            this._drawSettingsSetupPlugins = [];
-            this._drawSettingsCleanupPlugins = [];
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+            this.#canvasManager = canvasManager;
+            this.#context = null;
+            this.#preDrawUpdaters = [];
+            this.#postDrawUpdaters = [];
+            this.#colorPlugins = [];
+            this.#canvasClearPlugins = [];
+            this.#canvasPaintPlugins = [];
+            this.#clearDrawPlugins = [];
+            this.#drawParticlePlugins = [];
+            this.#drawParticlesCleanupPlugins = [];
+            this.#drawParticlesSetupPlugins = [];
+            this.#drawPlugins = [];
+            this.#drawSettingsSetupPlugins = [];
+            this.#drawSettingsCleanupPlugins = [];
         }
         get settings() {
-            return this._contextSettings;
+            return this.#contextSettings;
         }
         canvasClear() {
-            if (!this._container.actualOptions.clear) {
+            if (!this.#container.actualOptions.clear) {
                 return;
             }
             this.draw(ctx => {
-                clear(ctx, this._canvasManager.size);
+                clear(ctx, this.#canvasManager.size);
             });
         }
         clear() {
             let pluginHandled = false;
-            for (const plugin of this._canvasClearPlugins) {
+            for (const plugin of this.#canvasClearPlugins) {
                 pluginHandled = plugin.canvasClear?.() ?? false;
                 if (pluginHandled) {
                     break;
@@ -3558,21 +3534,21 @@
         }
         destroy() {
             this.stop();
-            this._preDrawUpdaters = [];
-            this._postDrawUpdaters = [];
-            this._colorPlugins = [];
-            this._canvasClearPlugins = [];
-            this._canvasPaintPlugins = [];
-            this._clearDrawPlugins = [];
-            this._drawParticlePlugins = [];
-            this._drawParticlesCleanupPlugins = [];
-            this._drawParticlesSetupPlugins = [];
-            this._drawPlugins = [];
-            this._drawSettingsSetupPlugins = [];
-            this._drawSettingsCleanupPlugins = [];
+            this.#preDrawUpdaters = [];
+            this.#postDrawUpdaters = [];
+            this.#colorPlugins = [];
+            this.#canvasClearPlugins = [];
+            this.#canvasPaintPlugins = [];
+            this.#clearDrawPlugins = [];
+            this.#drawParticlePlugins = [];
+            this.#drawParticlesCleanupPlugins = [];
+            this.#drawParticlesSetupPlugins = [];
+            this.#drawPlugins = [];
+            this.#drawSettingsSetupPlugins = [];
+            this.#drawSettingsCleanupPlugins = [];
         }
         draw(cb) {
-            const ctx = this._context;
+            const ctx = this.#context;
             if (!ctx) {
                 return;
             }
@@ -3587,21 +3563,21 @@
                 return;
             }
             const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
-            let [fColor, sColor] = this._getPluginParticleColors(particle);
+            let [fColor, sColor] = this.#getPluginParticleColors(particle);
             fColor ??= pfColor;
             sColor ??= psColor;
             if (!fColor && !sColor) {
                 return;
             }
-            const container = this._container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
+            const container = this.#container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this.#reusableTransform, colorStyles = this.#reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
             transform.a = transform.b = transform.c = transform.d = undefined;
             colorStyles.fill = fill;
             colorStyles.stroke = stroke;
             this.draw((context) => {
-                for (const plugin of this._drawParticlesSetupPlugins) {
+                for (const plugin of this.#drawParticlesSetupPlugins) {
                     plugin.drawParticleSetup?.(context, particle, delta);
                 }
-                this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
+                this.#applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
                 drawParticle({
                     container,
                     context,
@@ -3612,35 +3588,35 @@
                     opacity: opacity,
                     transform,
                 });
-                this._applyPostDrawUpdaters(particle);
-                for (const plugin of this._drawParticlesCleanupPlugins) {
+                this.#applyPostDrawUpdaters(particle);
+                for (const plugin of this.#drawParticlesCleanupPlugins) {
                     plugin.drawParticleCleanup?.(context, particle, delta);
                 }
             });
         }
         drawParticlePlugins(particle, delta) {
             this.draw(ctx => {
-                for (const plugin of this._drawParticlePlugins) {
+                for (const plugin of this.#drawParticlePlugins) {
                     drawParticlePlugin(ctx, plugin, particle, delta);
                 }
             });
         }
         drawParticles(delta) {
-            const { particles } = this._container;
+            const { particles } = this.#container;
             this.clear();
             particles.update(delta);
             this.draw(ctx => {
-                for (const plugin of this._drawSettingsSetupPlugins) {
+                for (const plugin of this.#drawSettingsSetupPlugins) {
                     plugin.drawSettingsSetup?.(ctx, delta);
                 }
-                for (const plugin of this._drawPlugins) {
+                for (const plugin of this.#drawPlugins) {
                     plugin.draw?.(ctx, delta);
                 }
                 particles.drawParticles(delta);
-                for (const plugin of this._clearDrawPlugins) {
+                for (const plugin of this.#clearDrawPlugins) {
                     plugin.clearDraw?.(ctx, delta);
                 }
-                for (const plugin of this._drawSettingsCleanupPlugins) {
+                for (const plugin of this.#drawSettingsCleanupPlugins) {
                     plugin.drawSettingsCleanup?.(ctx, delta);
                 }
             });
@@ -3651,64 +3627,64 @@
             this.paint();
         }
         initPlugins() {
-            this._colorPlugins = [];
-            this._canvasClearPlugins = [];
-            this._canvasPaintPlugins = [];
-            this._clearDrawPlugins = [];
-            this._drawParticlePlugins = [];
-            this._drawParticlesSetupPlugins = [];
-            this._drawParticlesCleanupPlugins = [];
-            this._drawPlugins = [];
-            this._drawSettingsSetupPlugins = [];
-            this._drawSettingsCleanupPlugins = [];
-            for (const plugin of this._container.plugins) {
+            this.#colorPlugins = [];
+            this.#canvasClearPlugins = [];
+            this.#canvasPaintPlugins = [];
+            this.#clearDrawPlugins = [];
+            this.#drawParticlePlugins = [];
+            this.#drawParticlesSetupPlugins = [];
+            this.#drawParticlesCleanupPlugins = [];
+            this.#drawPlugins = [];
+            this.#drawSettingsSetupPlugins = [];
+            this.#drawSettingsCleanupPlugins = [];
+            for (const plugin of this.#container.plugins) {
                 if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
-                    this._colorPlugins.push(plugin);
+                    this.#colorPlugins.push(plugin);
                 }
                 if (plugin.canvasClear) {
-                    this._canvasClearPlugins.push(plugin);
+                    this.#canvasClearPlugins.push(plugin);
                 }
                 if (plugin.canvasPaint) {
-                    this._canvasPaintPlugins.push(plugin);
+                    this.#canvasPaintPlugins.push(plugin);
                 }
                 if (plugin.drawParticle) {
-                    this._drawParticlePlugins.push(plugin);
+                    this.#drawParticlePlugins.push(plugin);
                 }
                 if (plugin.drawParticleSetup) {
-                    this._drawParticlesSetupPlugins.push(plugin);
+                    this.#drawParticlesSetupPlugins.push(plugin);
                 }
                 if (plugin.drawParticleCleanup) {
-                    this._drawParticlesCleanupPlugins.push(plugin);
+                    this.#drawParticlesCleanupPlugins.push(plugin);
                 }
                 if (plugin.draw) {
-                    this._drawPlugins.push(plugin);
+                    this.#drawPlugins.push(plugin);
                 }
                 if (plugin.drawSettingsSetup) {
-                    this._drawSettingsSetupPlugins.push(plugin);
+                    this.#drawSettingsSetupPlugins.push(plugin);
                 }
                 if (plugin.drawSettingsCleanup) {
-                    this._drawSettingsCleanupPlugins.push(plugin);
+                    this.#drawSettingsCleanupPlugins.push(plugin);
                 }
                 if (plugin.clearDraw) {
-                    this._clearDrawPlugins.push(plugin);
+                    this.#clearDrawPlugins.push(plugin);
                 }
             }
         }
         initUpdaters() {
-            this._preDrawUpdaters = [];
-            this._postDrawUpdaters = [];
-            for (const updater of this._container.particleUpdaters) {
+            this.#preDrawUpdaters = [];
+            this.#postDrawUpdaters = [];
+            for (const updater of this.#container.particleUpdaters) {
                 if (updater.afterDraw) {
-                    this._postDrawUpdaters.push(updater);
+                    this.#postDrawUpdaters.push(updater);
                 }
                 if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
-                    this._preDrawUpdaters.push(updater);
+                    this.#preDrawUpdaters.push(updater);
                 }
             }
         }
         paint() {
             let handled = false;
-            for (const plugin of this._canvasPaintPlugins) {
+            for (const plugin of this.#canvasPaintPlugins) {
                 handled = plugin.canvasPaint?.() ?? false;
                 if (handled) {
                     break;
@@ -3721,35 +3697,35 @@
         }
         paintBase(baseColor) {
             this.draw(ctx => {
-                paintBase(ctx, this._canvasManager.size, baseColor);
+                paintBase(ctx, this.#canvasManager.size, baseColor);
             });
         }
         paintImage(image, opacity) {
             this.draw(ctx => {
-                paintImage(ctx, this._canvasManager.size, image, opacity);
+                paintImage(ctx, this.#canvasManager.size, image, opacity);
             });
         }
         setContext(context) {
-            this._context = context;
-            if (this._context) {
-                this._context.globalCompositeOperation = defaultCompositeValue;
+            this.#context = context;
+            if (this.#context) {
+                this.#context.globalCompositeOperation = defaultCompositeValue;
             }
         }
         setContextSettings(settings) {
-            this._contextSettings = settings;
+            this.#contextSettings = settings;
         }
         stop() {
             this.draw(ctx => {
-                clear(ctx, this._canvasManager.size);
+                clear(ctx, this.#canvasManager.size);
             });
         }
-        _applyPostDrawUpdaters = particle => {
-            for (const updater of this._postDrawUpdaters) {
+        #applyPostDrawUpdaters = particle => {
+            for (const updater of this.#postDrawUpdaters) {
                 updater.afterDraw?.(particle);
             }
         };
-        _applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
-            for (const updater of this._preDrawUpdaters) {
+        #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);
                     if (fill) {
@@ -3768,22 +3744,22 @@
                 updater.beforeDraw?.(particle);
             }
         };
-        _getPluginParticleColors = particle => {
+        #getPluginParticleColors = particle => {
             let fColor, sColor;
-            for (const plugin of this._colorPlugins) {
+            for (const plugin of this.#colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
-                    fColor = rangeColorToHsl(this._pluginManager, plugin.particleFillColor(particle));
+                    fColor = rangeColorToHsl(this.#pluginManager, plugin.particleFillColor(particle));
                 }
                 if (!sColor && plugin.particleStrokeColor) {
-                    sColor = rangeColorToHsl(this._pluginManager, plugin.particleStrokeColor(particle));
+                    sColor = rangeColorToHsl(this.#pluginManager, plugin.particleStrokeColor(particle));
                 }
                 if (fColor && sColor) {
                     break;
                 }
             }
-            this._reusablePluginColors[fColorIndex] = fColor;
-            this._reusablePluginColors[sColorIndex] = sColor;
-            return this._reusablePluginColors;
+            this.#reusablePluginColors[fColorIndex] = fColor;
+            this.#reusablePluginColors[sColorIndex] = sColor;
+            return this.#reusablePluginColors;
         };
     }
 
@@ -3841,53 +3817,53 @@
         renderCanvas;
         size;
         zoom = defaultZoom;
-        _container;
-        _generated;
-        _mutationObserver;
-        _originalStyle;
-        _pluginManager;
-        _pointerEvents;
-        _resizePlugins;
-        _standardSize;
-        _zoomCenter;
+        #container;
+        #generated;
+        #mutationObserver;
+        #originalStyle;
+        #pluginManager;
+        #pointerEvents;
+        #resizePlugins;
+        #standardSize;
+        #zoomCenter;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
             this.render = new RenderManager(pluginManager, container, this);
-            this._standardSize = {
+            this.#standardSize = {
                 height: 0,
                 width: 0,
             };
-            const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+            const pxRatio = container.retina.pixelRatio, stdSize = this.#standardSize;
             this.size = {
                 height: stdSize.height * pxRatio,
                 width: stdSize.width * pxRatio,
             };
-            this._generated = false;
-            this._resizePlugins = [];
-            this._pointerEvents = "none";
+            this.#generated = false;
+            this.#resizePlugins = [];
+            this.#pointerEvents = "none";
         }
-        get _fullScreen() {
-            return this._container.actualOptions.fullScreen.enable;
+        get #fullScreen() {
+            return this.#container.actualOptions.fullScreen.enable;
         }
         destroy() {
             this.stop();
-            if (this._generated) {
+            if (this.#generated) {
                 const element = this.domElement;
                 element?.remove();
                 this.domElement = undefined;
                 this.renderCanvas = undefined;
             }
             else {
-                this._resetOriginalStyle();
+                this.#resetOriginalStyle();
             }
             this.render.destroy();
-            this._resizePlugins = [];
+            this.#resizePlugins = [];
         }
         getZoomCenter() {
-            const pxRatio = this._container.retina.pixelRatio, { width, height } = this.size;
-            if (this._zoomCenter) {
-                return this._zoomCenter;
+            const pxRatio = this.#container.retina.pixelRatio, { width, height } = this.size;
+            if (this.#zoomCenter) {
+                return this.#zoomCenter;
             }
             return {
                 x: (width * half) / pxRatio,
@@ -3895,20 +3871,20 @@
             };
         }
         init() {
-            this._safeMutationObserver(obs => {
+            this.#safeMutationObserver(obs => {
                 obs.disconnect();
             });
-            this._mutationObserver = safeMutationObserver(records => {
+            this.#mutationObserver = safeMutationObserver(records => {
                 for (const record of records) {
                     if (record.type === "attributes" && record.attributeName === "style") {
-                        this._repairStyle();
+                        this.#repairStyle();
                     }
                 }
             });
             this.resize();
-            this._initStyle();
+            this.#initStyle();
             this.initBackground();
-            this._safeMutationObserver(obs => {
+            this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
                     return;
@@ -3919,13 +3895,13 @@
             this.render.init();
         }
         initBackground() {
-            const { _container } = this, options = _container.actualOptions, background = options.background, element = this.domElement;
+            const container = this.#container, options = container.actualOptions, background = options.background, element = this.domElement;
             if (!element) {
                 return;
             }
-            const elementStyle = element.style, color = rangeColorToRgb(this._pluginManager, background.color);
+            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.hdr, background.opacity);
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -3936,27 +3912,27 @@
             elementStyle.backgroundSize = background.size || "";
         }
         initPlugins() {
-            this._resizePlugins = [];
-            for (const plugin of this._container.plugins) {
+            this.#resizePlugins = [];
+            for (const plugin of this.#container.plugins) {
                 if (plugin.resize) {
-                    this._resizePlugins.push(plugin);
+                    this.#resizePlugins.push(plugin);
                 }
             }
         }
         loadCanvas(canvas) {
-            if (this._generated && this.domElement) {
+            if (this.#generated && this.domElement) {
                 this.domElement.remove();
             }
-            const container = this._container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+            const container = this.#container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
             this.domElement = domCanvas;
-            this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
+            this.#generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
             this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
             const domElement = this.domElement;
             if (domElement) {
                 domElement.ariaHidden = "true";
-                this._originalStyle = cloneStyle(domElement.style);
+                this.#originalStyle = cloneStyle(domElement.style);
             }
-            const standardSize = this._standardSize, renderCanvas = this.renderCanvas;
+            const standardSize = this.#standardSize, renderCanvas = this.renderCanvas;
             if (domElement) {
                 standardSize.height = domElement.offsetHeight;
                 standardSize.width = domElement.offsetWidth;
@@ -3965,7 +3941,7 @@
                 standardSize.height = renderCanvas.height;
                 standardSize.width = renderCanvas.width;
             }
-            const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
+            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)");
@@ -3976,12 +3952,12 @@
                 willReadFrequently: false,
             });
             this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
-            this._safeMutationObserver(obs => {
+            this.#safeMutationObserver(obs => {
                 obs.disconnect();
             });
             container.retina.init();
             this.initBackground();
-            this._safeMutationObserver(obs => {
+            this.#safeMutationObserver(obs => {
                 const element = this.domElement;
                 if (!element || !(element instanceof Node)) {
                     return;
@@ -3994,11 +3970,11 @@
             if (!element) {
                 return false;
             }
-            const container = this._container, renderCanvas = this.renderCanvas;
+            const container = this.#container, renderCanvas = this.renderCanvas;
             if (renderCanvas === undefined) {
                 return false;
             }
-            const currentSize = container.canvas._standardSize, newSize = {
+            const currentSize = container.canvas.#standardSize, newSize = {
                 width: element.offsetWidth,
                 height: element.offsetHeight,
             }, pxRatio = container.retina.pixelRatio, retinaSize = {
@@ -4017,7 +3993,7 @@
             const canvasSize = this.size;
             renderCanvas.width = canvasSize.width = retinaSize.width;
             renderCanvas.height = canvasSize.height = retinaSize.height;
-            if (this._container.started) {
+            if (this.#container.started) {
                 container.particles.setResizeFactor({
                     width: currentSize.width / oldSize.width,
                     height: currentSize.height / oldSize.height,
@@ -4030,46 +4006,46 @@
             if (!element) {
                 return;
             }
-            this._pointerEvents = type;
-            this._repairStyle();
+            this.#pointerEvents = type;
+            this.#repairStyle();
         }
         setZoom(zoomLevel, center) {
             this.zoom = zoomLevel;
-            this._zoomCenter = center;
+            this.#zoomCenter = center;
         }
         stop() {
-            this._safeMutationObserver(obs => {
+            this.#safeMutationObserver(obs => {
                 obs.disconnect();
             });
-            this._mutationObserver = undefined;
+            this.#mutationObserver = undefined;
             this.render.stop();
         }
         async windowResize() {
             if (!this.domElement || !this.resize()) {
                 return;
             }
-            const container = this._container, needsRefresh = container.updateActualOptions();
+            const container = this.#container, needsRefresh = container.updateActualOptions();
             container.particles.setDensity();
-            this._applyResizePlugins();
+            this.#applyResizePlugins();
             if (needsRefresh) {
                 await container.refresh();
             }
         }
-        _applyResizePlugins = () => {
-            for (const plugin of this._resizePlugins) {
+        #applyResizePlugins = () => {
+            for (const plugin of this.#resizePlugins) {
                 plugin.resize?.();
             }
         };
-        _initStyle = () => {
-            const element = this.domElement, options = this._container.actualOptions;
+        #initStyle = () => {
+            const element = this.domElement, options = this.#container.actualOptions;
             if (!element) {
                 return;
             }
-            if (this._fullScreen) {
-                this._setFullScreenStyle();
+            if (this.#fullScreen) {
+                this.#setFullScreenStyle();
             }
             else {
-                this._resetOriginalStyle();
+                this.#resetOriginalStyle();
             }
             for (const key in options.style) {
                 if (!key || !(key in options.style)) {
@@ -4082,72 +4058,72 @@
                 element.style.setProperty(key, value, "important");
             }
         };
-        _repairStyle = () => {
+        #repairStyle = () => {
             const element = this.domElement;
             if (!element) {
                 return;
             }
-            this._safeMutationObserver(observer => {
+            this.#safeMutationObserver(observer => {
                 observer.disconnect();
             });
-            this._initStyle();
+            this.#initStyle();
             this.initBackground();
-            const pointerEvents = this._pointerEvents;
+            const pointerEvents = this.#pointerEvents;
             element.style.pointerEvents = pointerEvents;
             element.style.setProperty("pointer-events", pointerEvents);
-            this._safeMutationObserver(observer => {
+            this.#safeMutationObserver(observer => {
                 if (!(element instanceof Node)) {
                     return;
                 }
                 observer.observe(element, { attributes: true });
             });
         };
-        _resetOriginalStyle = () => {
-            const element = this.domElement, originalStyle = this._originalStyle;
+        #resetOriginalStyle = () => {
+            const element = this.domElement, originalStyle = this.#originalStyle;
             if (!element || !originalStyle) {
                 return;
             }
             setStyle(element, originalStyle, true);
         };
-        _safeMutationObserver = callback => {
-            if (!this._mutationObserver) {
+        #safeMutationObserver = callback => {
+            if (!this.#mutationObserver) {
                 return;
             }
-            callback(this._mutationObserver);
+            callback(this.#mutationObserver);
         };
-        _setFullScreenStyle = () => {
+        #setFullScreenStyle = () => {
             const element = this.domElement;
             if (!element) {
                 return;
             }
-            setStyle(element, getFullScreenStyle(this._container.actualOptions.fullScreen.zIndex), true);
+            setStyle(element, getFullScreenStyle(this.#container.actualOptions.fullScreen.zIndex), true);
         };
     }
 
     class EventListeners {
-        container;
-        _handlers;
-        _resizeObserver;
-        _resizeTimeout;
+        #container;
+        #handlers;
+        #resizeObserver;
+        #resizeTimeout;
         constructor(container) {
-            this.container = container;
-            this._handlers = {
+            this.#container = container;
+            this.#handlers = {
                 visibilityChange: () => {
-                    this._handleVisibilityChange();
+                    this.#handleVisibilityChange();
                 },
                 resize: () => {
-                    this._handleWindowResize();
+                    this.#handleWindowResize();
                 },
             };
         }
         addListeners() {
-            this._manageListeners(true);
+            this.#manageListeners(true);
         }
         removeListeners() {
-            this._manageListeners(false);
+            this.#manageListeners(false);
         }
-        _handleVisibilityChange = () => {
-            const container = this.container, options = container.actualOptions;
+        #handleVisibilityChange = () => {
+            const container = this.#container, options = container.actualOptions;
             if (!options.pauseOnBlur) {
                 return;
             }
@@ -4165,24 +4141,24 @@
                 }
             }
         };
-        _handleWindowResize = () => {
-            if (this._resizeTimeout) {
-                clearTimeout(this._resizeTimeout);
-                delete this._resizeTimeout;
+        #handleWindowResize = () => {
+            if (this.#resizeTimeout) {
+                clearTimeout(this.#resizeTimeout);
+                this.#resizeTimeout = undefined;
             }
             const handleResize = async () => {
-                const canvas = this.container.canvas;
+                const canvas = this.#container.canvas;
                 await canvas.windowResize();
             };
-            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
+            this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds);
         };
-        _manageListeners = add => {
-            const handlers = this._handlers;
-            this._manageResize(add);
+        #manageListeners = add => {
+            const handlers = this.#handlers;
+            this.#manageResize(add);
             manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
         };
-        _manageResize = add => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions;
+        #manageResize = add => {
+            const handlers = this.#handlers, container = this.#container, options = container.actualOptions;
             if (!options.resize.enable) {
                 return;
             }
@@ -4191,22 +4167,22 @@
                 return;
             }
             const canvasEl = container.canvas.domElement;
-            if (this._resizeObserver && !add) {
+            if (this.#resizeObserver && !add) {
                 if (canvasEl) {
-                    this._resizeObserver.unobserve(canvasEl);
+                    this.#resizeObserver.unobserve(canvasEl);
                 }
-                this._resizeObserver.disconnect();
-                delete this._resizeObserver;
+                this.#resizeObserver.disconnect();
+                this.#resizeObserver = undefined;
             }
-            else if (!this._resizeObserver && add && canvasEl) {
-                this._resizeObserver = new ResizeObserver((entries) => {
+            else if (!this.#resizeObserver && add && canvasEl) {
+                this.#resizeObserver = new ResizeObserver((entries) => {
                     const entry = entries.find(e => e.target === canvasEl);
                     if (!entry) {
                         return;
                     }
-                    this._handleWindowResize();
+                    this.#handleWindowResize();
                 });
-                this._resizeObserver.observe(canvasEl);
+                this.#resizeObserver.observe(canvasEl);
             }
         };
     }
@@ -4279,24 +4255,24 @@
         unbreakable;
         velocity;
         zIndexFactor;
-        _cachedOpacityData = {
+        #cachedOpacityData = {
             fillOpacity: defaultOpacity$1,
             opacity: defaultOpacity$1,
             strokeOpacity: defaultOpacity$1,
         };
-        _cachedPosition = Vector3d.origin;
-        _cachedRotateData = { sin: 0, cos: 0 };
-        _cachedTransform = {
+        #cachedPosition = Vector3d.origin;
+        #cachedRotateData = { sin: 0, cos: 0 };
+        #cachedTransform = {
             a: 1,
             b: 0,
             c: 0,
             d: 1,
         };
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
         }
         destroy(override) {
             if (this.unbreakable || this.destroyed) {
@@ -4305,7 +4281,7 @@
             this.destroyed = true;
             this.bubble.inRange = false;
             this.slow.inRange = false;
-            const container = this._container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
+            const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
             shapeDrawer?.particleDestroy?.(this);
             for (const plugin of container.particleDestroyedPlugins) {
                 plugin.particleDestroyed?.(this, override);
@@ -4313,12 +4289,12 @@
             for (const updater of container.particleUpdaters) {
                 updater.particleDestroyed?.(this, override);
             }
-            this._container.dispatchEvent(EventType.particleDestroyed, {
+            this.#container.dispatchEvent(EventType.particleDestroyed, {
                 particle: this,
             });
         }
         draw(delta) {
-            const container = this._container, render = container.canvas.render;
+            const container = this.#container, render = container.canvas.render;
             render.drawParticlePlugins(this, delta);
             render.drawParticle(this, delta);
         }
@@ -4326,50 +4302,50 @@
             return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
         }
         getFillColor() {
-            return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
+            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
         }
         getMass() {
             return this.getRadius() ** squareExp * Math.PI * half;
         }
         getOpacity() {
             const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? getRangeValue(this.opacity?.value ?? defaultOpacity$1), fillOpacity = this.fillOpacity ?? defaultOpacity$1, strokeOpacity = this.strokeOpacity ?? defaultOpacity$1;
-            this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
-            this._cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
-            return this._cachedOpacityData;
+            this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
+            this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
+            this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
+            return this.#cachedOpacityData;
         }
         getPosition() {
-            this._cachedPosition.x = this.position.x + this.offset.x;
-            this._cachedPosition.y = this.position.y + this.offset.y;
-            this._cachedPosition.z = this.position.z;
-            return this._cachedPosition;
+            this.#cachedPosition.x = this.position.x + this.offset.x;
+            this.#cachedPosition.y = this.position.y + this.offset.y;
+            this.#cachedPosition.z = this.position.z;
+            return this.#cachedPosition;
         }
         getRadius() {
             return this.bubble.radius ?? this.size.value;
         }
         getRotateData() {
             const angle = this.getAngle();
-            this._cachedRotateData.sin = Math.sin(angle);
-            this._cachedRotateData.cos = Math.cos(angle);
-            return this._cachedRotateData;
+            this.#cachedRotateData.sin = Math.sin(angle);
+            this.#cachedRotateData.cos = Math.cos(angle);
+            return this.#cachedRotateData;
         }
         getStrokeColor() {
-            return this._getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
+            return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
         }
         getTransformData(externalTransform) {
             const rotateData = this.getRotateData(), rotating = this.isRotating;
-            this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
-            this._cachedTransform.b = rotating
+            this.#cachedTransform.a = rotateData.cos * (externalTransform.a ?? defaultTransform.a);
+            this.#cachedTransform.b = rotating
                 ? rotateData.sin * (externalTransform.b ?? identity)
                 : (externalTransform.b ?? defaultTransform.b);
-            this._cachedTransform.c = rotating
+            this.#cachedTransform.c = rotating
                 ? -rotateData.sin * (externalTransform.c ?? identity)
                 : (externalTransform.c ?? defaultTransform.c);
-            this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? defaultTransform.d);
-            return this._cachedTransform;
+            this.#cachedTransform.d = rotateData.cos * (externalTransform.d ?? defaultTransform.d);
+            return this.#cachedTransform;
         }
         init(id, position, overrideOptions, group) {
-            const container = this._container;
+            const container = this.#container;
             this.id = id;
             this.group = group;
             this.justWarped = false;
@@ -4389,21 +4365,27 @@
                 moveSpeed: 0,
                 sizeAnimationSpeed: 0,
             };
+            this.size = {
+                value: 1,
+                max: 1,
+                min: 1,
+                enable: false,
+            };
             this.outType = ParticleOutType.normal;
             this.ignoresResizeRatio = true;
-            const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
+            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) {
+                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) {
+                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;
@@ -4412,21 +4394,20 @@
                 }
             }
             if (this.effect === randomColorValue) {
-                const availableEffects = [...this._container.effectDrawers.keys()];
+                const availableEffects = [...this.#container.effectDrawers.keys()];
                 this.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
             }
             if (this.shape === randomColorValue) {
-                const availableShapes = [...this._container.shapeDrawers.keys()];
+                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;
+            const effectData = this.effectData, shapeData = this.shapeData;
             if (effectData) {
                 particlesOptions.load(effectData.particles);
             }
-            const shapeData = this.shapeData;
             if (shapeData) {
                 particlesOptions.load(shapeData.particles);
             }
@@ -4434,7 +4415,9 @@
             this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
             container.retina.initParticle(this);
-            this.size = initParticleNumericAnimationValue(this.options.size, pxRatio);
+            for (const updater of container.particleUpdaters) {
+                updater.preInit?.(this);
+            }
             this.bubble = {
                 inRange: false,
             };
@@ -4442,8 +4425,8 @@
                 inRange: false,
                 factor: 1,
             };
-            this._initPosition(position);
-            this.initialVelocity = this._calculateVelocity();
+            this.#initPosition(position);
+            this.initialVelocity = this.#calculateVelocity();
             this.velocity = this.initialVelocity.copy();
             this.zIndexFactor = this.position.z / container.zLayers;
             this.sides = 24;
@@ -4474,12 +4457,11 @@
                 plugin.particleCreated?.(this);
             }
         }
-        isInsideCanvas() {
-            const radius = this.getRadius(), canvasSize = this._container.canvas.size, position = this.position;
-            return (position.x >= -radius &&
-                position.y >= -radius &&
-                position.y <= canvasSize.height + radius &&
-                position.x <= canvasSize.width + radius);
+        isInsideCanvas(direction) {
+            return this.#getInsideCanvasResult({ direction }).inside;
+        }
+        isInsideCanvasForOutMode(outMode, direction) {
+            return this.#getInsideCanvasResult({ direction, outMode }).inside;
         }
         isShowingBack() {
             if (!this.roll) {
@@ -4504,13 +4486,13 @@
             return !this.destroyed && !this.spawning && this.isInsideCanvas();
         }
         reset() {
-            for (const updater of this._container.particleUpdaters) {
+            for (const updater of this.#container.particleUpdaters) {
                 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;
+            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) {
                 for (const plugin of plugins) {
                     const pluginPos = plugin.particlePosition?.(posVec, this);
@@ -4522,10 +4504,10 @@
                     size: canvasSize,
                     position: posVec,
                 }), pos = Vector3d.create(exactPosition.x, exactPosition.y, zIndex);
-                this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);
-                this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);
-                this._fixVertical(pos, radius, outModes.top ?? outModes.default);
-                this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);
+                this.#fixHorizontal(pos, radius, outModes.left ?? outModes.default);
+                this.#fixHorizontal(pos, radius, outModes.right ?? outModes.default);
+                this.#fixVertical(pos, radius, outModes.top ?? outModes.default);
+                this.#fixVertical(pos, radius, outModes.bottom ?? outModes.default);
                 let isValidPosition = true;
                 for (const plugin of container.particles.checkParticlePositionPlugins) {
                     isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;
@@ -4541,8 +4523,8 @@
             }
             return posVec;
         };
-        _calculateVelocity = () => {
-            const baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
+        #calculateVelocity = () => {
+            const moveOptions = this.options.move, baseVelocity = getParticleBaseVelocity(this.direction), res = baseVelocity.copy();
             if (moveOptions.direction === MoveDirection.inside || moveOptions.direction === MoveDirection.outside) {
                 return res;
             }
@@ -4558,27 +4540,86 @@
             }
             return res;
         };
-        _fixHorizontal = (pos, radius, outMode) => {
+        #fixHorizontal = (pos, radius, outMode) => {
             fixOutMode({
                 outMode,
                 checkModes: [OutMode.bounce],
                 coord: pos.x,
-                maxCoord: this._container.canvas.size.width,
+                maxCoord: this.#container.canvas.size.width,
                 setCb: (value) => (pos.x += value),
                 radius,
             });
         };
-        _fixVertical = (pos, radius, outMode) => {
+        #fixVertical = (pos, radius, outMode) => {
             fixOutMode({
                 outMode,
                 checkModes: [OutMode.bounce],
                 coord: pos.y,
-                maxCoord: this._container.canvas.size.height,
+                maxCoord: this.#container.canvas.size.height,
                 setCb: (value) => (pos.y += value),
                 radius,
             });
         };
-        _getRollColor = color => {
+        #getDefaultInsideCanvasResult = (direction, outMode) => {
+            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === OutMode.bounce;
+            if (direction === OutModeDirection.bottom) {
+                return {
+                    inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
+                    reason: "default",
+                };
+            }
+            if (direction === OutModeDirection.left) {
+                return {
+                    inside: isBounce ? position.x - radius > defaultAngle : position.x + radius > defaultAngle,
+                    reason: "default",
+                };
+            }
+            if (direction === OutModeDirection.right) {
+                return {
+                    inside: isBounce ? position.x + radius < canvasSize.width : position.x - radius < canvasSize.width,
+                    reason: "default",
+                };
+            }
+            if (direction === OutModeDirection.top) {
+                return {
+                    inside: isBounce ? position.y - radius > defaultAngle : position.y + radius > defaultAngle,
+                    reason: "default",
+                };
+            }
+            return {
+                inside: position.x >= -radius &&
+                    position.y >= -radius &&
+                    position.y <= canvasSize.height + radius &&
+                    position.x <= canvasSize.width + radius,
+                reason: "default",
+            };
+        };
+        #getInsideCanvasCallbackData = (direction, outMode) => {
+            return {
+                canvasSize: this.#container.canvas.size,
+                direction,
+                outMode,
+                particle: this,
+                radius: this.getRadius(),
+            };
+        };
+        #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;
+            }
+            const callbackData = this.#getInsideCanvasCallbackData(data.direction, data.outMode), shapeResult = shapeCheck ? this.#normalizeInsideCanvasResult(shapeCheck(callbackData), "shape") : undefined, effectResult = effectCheck ? this.#normalizeInsideCanvasResult(effectCheck(callbackData), "effect") : undefined;
+            if (shapeResult && effectResult) {
+                const margin = Math.max(shapeResult.margin ?? defaultAngle, effectResult.margin ?? defaultAngle);
+                return {
+                    inside: shapeResult.inside && effectResult.inside,
+                    margin: margin > defaultAngle ? margin : undefined,
+                    reason: "combined",
+                };
+            }
+            return shapeResult ?? effectResult ?? defaultResult;
+        };
+        #getRollColor = color => {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
@@ -4593,8 +4634,8 @@
             }
             return color;
         };
-        _initPosition = position => {
-            const container = this._container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+        #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");
             }
@@ -4617,45 +4658,58 @@
             }
             this.offset = Vector.origin;
         };
+        #normalizeInsideCanvasResult = (result, reason) => {
+            if (typeof result === "boolean") {
+                return {
+                    inside: result,
+                    reason,
+                };
+            }
+            return {
+                inside: result.inside,
+                margin: result.margin,
+                reason: result.reason ?? reason,
+            };
+        };
     }
 
     class SpatialHashGrid {
-        _cellSize;
-        _cells = new Map();
-        _circlePool = [];
-        _circlePoolIdx;
-        _pendingCellSize;
-        _rectanglePool = [];
-        _rectanglePoolIdx;
+        #cellSize;
+        #cells = new Map();
+        #circlePool = [];
+        #circlePoolIdx;
+        #pendingCellSize;
+        #rectanglePool = [];
+        #rectanglePoolIdx;
         constructor(cellSize) {
-            this._cellSize = cellSize;
-            this._circlePoolIdx = 0;
-            this._rectanglePoolIdx = 0;
+            this.#cellSize = cellSize;
+            this.#circlePoolIdx = 0;
+            this.#rectanglePoolIdx = 0;
         }
         clear() {
-            this._cells.clear();
-            const pendingCellSize = this._pendingCellSize;
+            this.#cells.clear();
+            const pendingCellSize = this.#pendingCellSize;
             if (pendingCellSize) {
-                this._cellSize = pendingCellSize;
+                this.#cellSize = pendingCellSize;
             }
-            this._pendingCellSize = undefined;
+            this.#pendingCellSize = undefined;
         }
         insert(particle) {
-            const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
-            if (!this._cells.has(key)) {
-                this._cells.set(key, []);
+            const { x, y } = particle.getPosition(), key = this.#cellKeyFromCoords(x, y);
+            if (!this.#cells.has(key)) {
+                this.#cells.set(key, []);
             }
-            this._cells.get(key)?.push(particle);
+            this.#cells.get(key)?.push(particle);
         }
         query(range, check, out = []) {
-            const bounds = this._getRangeBounds(range);
+            const bounds = this.#getRangeBounds(range);
             if (!bounds) {
                 return out;
             }
-            const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+            const minCellX = Math.floor(bounds.minX / this.#cellSize), maxCellX = Math.floor(bounds.maxX / this.#cellSize), minCellY = Math.floor(bounds.minY / this.#cellSize), maxCellY = Math.floor(bounds.maxY / this.#cellSize);
             for (let cx = minCellX; cx <= maxCellX; cx++) {
                 for (let cy = minCellY; cy <= maxCellY; cy++) {
-                    const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                    const key = `${cx}_${cy}`, cellParticles = this.#cells.get(key);
                     if (!cellParticles) {
                         continue;
                     }
@@ -4672,29 +4726,29 @@
             return out;
         }
         queryCircle(position, radius, check, out = []) {
-            const circle = this._acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
-            this._releaseShapes();
+            const circle = this.#acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
+            this.#releaseShapes();
             return result;
         }
         queryRectangle(position, size, check, out = []) {
-            const rect = this._acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
-            this._releaseShapes();
+            const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
+            this.#releaseShapes();
             return result;
         }
         setCellSize(cellSize) {
-            this._pendingCellSize = cellSize;
+            this.#pendingCellSize = cellSize;
         }
-        _acquireCircle(x, y, r) {
-            return (this._circlePool[this._circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
+        #acquireCircle(x, y, r) {
+            return (this.#circlePool[this.#circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
         }
-        _acquireRectangle(x, y, w, h) {
-            return (this._rectanglePool[this._rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
+        #acquireRectangle(x, y, w, h) {
+            return (this.#rectanglePool[this.#rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
         }
-        _cellKeyFromCoords(x, y) {
-            const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+        #cellKeyFromCoords(x, y) {
+            const cellX = Math.floor(x / this.#cellSize), cellY = Math.floor(y / this.#cellSize);
             return `${cellX}_${cellY}`;
         }
-        _getRangeBounds(range) {
+        #getRangeBounds(range) {
             if (range instanceof Circle) {
                 const r = range.radius, { x, y } = range.position;
                 return {
@@ -4715,53 +4769,53 @@
             }
             return null;
         }
-        _releaseShapes() {
-            this._circlePoolIdx = 0;
-            this._rectanglePoolIdx = 0;
+        #releaseShapes() {
+            this.#circlePoolIdx = 0;
+            this.#rectanglePoolIdx = 0;
         }
     }
 
     class ParticlesManager {
         checkParticlePositionPlugins;
         grid;
-        _array;
-        _container;
-        _groupLimits;
-        _limit;
-        _nextId;
-        _particleBuckets;
-        _particleResetPlugins;
-        _particleUpdatePlugins;
-        _pluginManager;
-        _pool;
-        _postParticleUpdatePlugins;
-        _postUpdatePlugins;
-        _resizeFactor;
-        _updatePlugins;
-        _zBuckets;
+        #array;
+        #container;
+        #groupLimits;
+        #limit;
+        #nextId;
+        #particleBuckets;
+        #particleResetPlugins;
+        #particleUpdatePlugins;
+        #pluginManager;
+        #pool;
+        #postParticleUpdatePlugins;
+        #postUpdatePlugins;
+        #resizeFactor;
+        #updatePlugins;
+        #zBuckets;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
-            this._nextId = 0;
-            this._array = [];
-            this._pool = [];
-            this._limit = 0;
-            this._groupLimits = new Map();
-            this._particleBuckets = new Map();
-            this._zBuckets = this._createBuckets(this._container.zLayers);
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+            this.#nextId = 0;
+            this.#array = [];
+            this.#pool = [];
+            this.#limit = 0;
+            this.#groupLimits = new Map();
+            this.#particleBuckets = new Map();
+            this.#zBuckets = this.#createBuckets(this.#container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize);
             this.checkParticlePositionPlugins = [];
-            this._particleResetPlugins = [];
-            this._particleUpdatePlugins = [];
-            this._postUpdatePlugins = [];
-            this._postParticleUpdatePlugins = [];
-            this._updatePlugins = [];
+            this.#particleResetPlugins = [];
+            this.#particleUpdatePlugins = [];
+            this.#postUpdatePlugins = [];
+            this.#postParticleUpdatePlugins = [];
+            this.#updatePlugins = [];
         }
         get count() {
-            return this._array.length;
+            return this.#array.length;
         }
         addParticle(position, overrideOptions, group, initializer) {
-            const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
+            const limitMode = this.#container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this.#limit : (this.#groupLimits.get(group) ?? this.#limit), currentCount = this.count;
             if (limit > minLimit) {
                 switch (limitMode) {
                     case LimitMode.delete: {
@@ -4779,20 +4833,20 @@
                 }
             }
             try {
-                const particle = this._pool.pop() ?? new Particle(this._pluginManager, this._container);
-                particle.init(this._nextId, position, overrideOptions, group);
+                const particle = this.#pool.pop() ?? new Particle(this.#pluginManager, this.#container);
+                particle.init(this.#nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
                     canAdd = initializer(particle);
                 }
                 if (!canAdd) {
-                    this._pool.push(particle);
+                    this.#pool.push(particle);
                     return;
                 }
-                this._array.push(particle);
-                this._insertParticleIntoBucket(particle);
-                this._nextId++;
-                this._container.dispatchEvent(EventType.particleAdded, {
+                this.#array.push(particle);
+                this.#insertParticleIntoBucket(particle);
+                this.#nextId++;
+                this.#container.dispatchEvent(EventType.particleAdded, {
                     particle,
                 });
                 return particle;
@@ -4803,25 +4857,25 @@
             return undefined;
         }
         clear() {
-            this._array = [];
-            this._particleBuckets.clear();
-            this._resetBuckets(this._container.zLayers);
+            this.#array = [];
+            this.#particleBuckets.clear();
+            this.#resetBuckets(this.#container.zLayers);
         }
         destroy() {
-            this._array = [];
-            this._pool.length = 0;
-            this._particleBuckets.clear();
-            this._zBuckets = [];
+            this.#array = [];
+            this.#pool.length = 0;
+            this.#particleBuckets.clear();
+            this.#zBuckets = [];
             this.checkParticlePositionPlugins = [];
-            this._particleResetPlugins = [];
-            this._particleUpdatePlugins = [];
-            this._postUpdatePlugins = [];
-            this._postParticleUpdatePlugins = [];
-            this._updatePlugins = [];
+            this.#particleResetPlugins = [];
+            this.#particleUpdatePlugins = [];
+            this.#postUpdatePlugins = [];
+            this.#postParticleUpdatePlugins = [];
+            this.#updatePlugins = [];
         }
         drawParticles(delta) {
-            for (let i = this._zBuckets.length - one; i >= minIndex; i--) {
-                const bucket = this._zBuckets[i];
+            for (let i = this.#zBuckets.length - one; i >= minIndex; i--) {
+                const bucket = this.#zBuckets[i];
                 if (!bucket) {
                     continue;
                 }
@@ -4831,24 +4885,24 @@
             }
         }
         filter(condition) {
-            return this._array.filter(condition);
+            return this.#array.filter(condition);
         }
         find(condition) {
-            return this._array.find(condition);
+            return this.#array.find(condition);
         }
         get(index) {
-            return this._array[index];
+            return this.#array[index];
         }
         async init() {
-            const container = this._container, options = container.actualOptions;
+            const container = this.#container, options = container.actualOptions;
             this.checkParticlePositionPlugins = [];
-            this._updatePlugins = [];
-            this._particleUpdatePlugins = [];
-            this._postUpdatePlugins = [];
-            this._particleResetPlugins = [];
-            this._postParticleUpdatePlugins = [];
-            this._particleBuckets.clear();
-            this._resetBuckets(container.zLayers);
+            this.#updatePlugins = [];
+            this.#particleUpdatePlugins = [];
+            this.#postUpdatePlugins = [];
+            this.#particleResetPlugins = [];
+            this.#postParticleUpdatePlugins = [];
+            this.#particleBuckets.clear();
+            this.#resetBuckets(container.zLayers);
             this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
             for (const plugin of container.plugins) {
                 if (plugin.redrawInit) {
@@ -4858,26 +4912,26 @@
                     this.checkParticlePositionPlugins.push(plugin);
                 }
                 if (plugin.update) {
-                    this._updatePlugins.push(plugin);
+                    this.#updatePlugins.push(plugin);
                 }
                 if (plugin.particleUpdate) {
-                    this._particleUpdatePlugins.push(plugin);
+                    this.#particleUpdatePlugins.push(plugin);
                 }
                 if (plugin.postUpdate) {
-                    this._postUpdatePlugins.push(plugin);
+                    this.#postUpdatePlugins.push(plugin);
                 }
                 if (plugin.particleReset) {
-                    this._particleResetPlugins.push(plugin);
+                    this.#particleResetPlugins.push(plugin);
                 }
                 if (plugin.postParticleUpdate) {
-                    this._postParticleUpdatePlugins.push(plugin);
+                    this.#postParticleUpdatePlugins.push(plugin);
                 }
             }
-            await this._container.initDrawersAndUpdaters();
-            for (const drawer of this._container.effectDrawers.values()) {
+            await this.#container.initDrawersAndUpdaters();
+            for (const drawer of this.#container.effectDrawers.values()) {
                 await drawer.init?.(container);
             }
-            for (const drawer of this._container.shapeDrawers.values()) {
+            for (const drawer of this.#container.shapeDrawers.values()) {
                 await drawer.init?.(container);
             }
             let handled = false;
@@ -4911,10 +4965,10 @@
         async redraw() {
             this.clear();
             await this.init();
-            this._container.canvas.render.drawParticles({ value: 0, factor: 0 });
+            this.#container.canvas.render.drawParticles({ value: 0, factor: 0 });
         }
         remove(particle, group, override) {
-            this.removeAt(this._array.indexOf(particle), undefined, group, override);
+            this.removeAt(this.#array.indexOf(particle), undefined, group, override);
         }
         removeAt(index, quantity = defaultRemoveQuantity, group, override) {
             if (index < minIndex || index > this.count) {
@@ -4922,7 +4976,7 @@
             }
             let deleted = 0;
             for (let i = index; deleted < quantity && i < this.count; i++) {
-                if (this._removeParticle(i, group, override)) {
+                if (this.#removeParticle(i, group, override)) {
                     i--;
                     deleted++;
                 }
@@ -4932,9 +4986,9 @@
             this.removeAt(minIndex, quantity, group);
         }
         setDensity() {
-            const options = this._container.actualOptions, groups = options.particles.groups;
+            const options = this.#container.actualOptions, groups = options.particles.groups;
             let pluginsCount = 0;
-            for (const plugin of this._container.plugins) {
+            for (const plugin of this.#container.plugins) {
                 if (plugin.particlesDensityCount) {
                     pluginsCount += plugin.particlesDensityCount();
                 }
@@ -4944,51 +4998,51 @@
                 if (!groupData) {
                     continue;
                 }
-                const groupDataOptions = loadParticlesOptions(this._pluginManager, this._container, groupData);
-                this._applyDensity(groupDataOptions, pluginsCount, group);
+                const groupDataOptions = loadParticlesOptions(this.#pluginManager, this.#container, groupData);
+                this.#applyDensity(groupDataOptions, pluginsCount, group);
             }
-            this._applyDensity(options.particles, pluginsCount);
+            this.#applyDensity(options.particles, pluginsCount);
         }
         setResizeFactor(factor) {
-            this._resizeFactor = factor;
+            this.#resizeFactor = factor;
         }
         update(delta) {
             this.grid.clear();
-            for (const plugin of this._updatePlugins) {
+            for (const plugin of this.#updatePlugins) {
                 plugin.update?.(delta);
             }
-            const particlesToDelete = this._updateParticlesPhase1(delta);
-            for (const plugin of this._postUpdatePlugins) {
+            const particlesToDelete = this.#updateParticlesPhase1(delta);
+            for (const plugin of this.#postUpdatePlugins) {
                 plugin.postUpdate?.(delta);
             }
-            this._updateParticlesPhase2(delta, particlesToDelete);
+            this.#updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
                     this.remove(particle);
                 }
             }
-            delete this._resizeFactor;
+            this.#resizeFactor = undefined;
         }
-        _addToPool = (...particles) => {
-            this._pool.push(...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) {
-                    this._limit = numberOptions.limit.value;
+                    this.#limit = numberOptions.limit.value;
                 }
                 else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
-                    this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
+                    this.#groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            const densityFactor = this.#initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
-                this._limit = numberOptions.limit.value * densityFactor;
+                this.#limit = numberOptions.limit.value * densityFactor;
             }
             else {
-                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
+                this.#groupLimits.set(group, numberOptions.limit.value * densityFactor);
             }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
@@ -4997,18 +5051,18 @@
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         };
-        _createBuckets = (zLayers) => {
+        #createBuckets = (zLayers) => {
             const bucketCount = Math.max(Math.floor(zLayers), one);
             return Array.from({ length: bucketCount }, () => []);
         };
-        _getBucketIndex = (zIndex) => {
-            const maxBucketIndex = this._zBuckets.length - one;
+        #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) => {
+        #getParticleInsertIndex = (bucket, particleId) => {
             let start = minIndex, end = bucket.length;
             while (start < end) {
                 const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
@@ -5025,8 +5079,8 @@
             }
             return start;
         };
-        _initDensityFactor = densityOptions => {
-            const container = this._container;
+        #initDensityFactor = densityOptions => {
+            const container = this.#container;
             if (!densityOptions.enable) {
                 return defaultDensityFactor;
             }
@@ -5036,82 +5090,82 @@
             }
             return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
         };
-        _insertParticleIntoBucket = (particle) => {
-            const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        #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);
-            this._particleBuckets.set(particle.id, bucketIndex);
+            bucket.splice(this.#getParticleInsertIndex(bucket, particle.id), empty, particle);
+            this.#particleBuckets.set(particle.id, bucketIndex);
         };
-        _removeParticle = (index, group, override) => {
-            const particle = this._array[index];
+        #removeParticle = (index, group, override) => {
+            const particle = this.#array[index];
             if (!particle) {
                 return false;
             }
             if (particle.group !== group) {
                 return false;
             }
-            this._array.splice(index, deleteCount);
-            this._removeParticleFromBucket(particle);
+            this.#array.splice(index, deleteCount);
+            this.#removeParticleFromBucket(particle);
             particle.destroy(override);
-            this._container.dispatchEvent(EventType.particleRemoved, {
+            this.#container.dispatchEvent(EventType.particleRemoved, {
                 particle,
             });
-            this._addToPool(particle);
+            this.#addToPool(particle);
             return true;
         };
-        _removeParticleFromBucket = (particle) => {
-            const bucketIndex = this._particleBuckets.get(particle.id) ?? this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        #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);
+                this.#particleBuckets.delete(particle.id);
                 return;
             }
-            const particleIndex = this._getParticleInsertIndex(bucket, particle.id);
+            const particleIndex = this.#getParticleInsertIndex(bucket, particle.id);
             if (bucket[particleIndex]?.id !== particle.id) {
-                this._particleBuckets.delete(particle.id);
+                this.#particleBuckets.delete(particle.id);
                 return;
             }
             bucket.splice(particleIndex, deleteCount);
-            this._particleBuckets.delete(particle.id);
+            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);
+            if (this.#zBuckets.length !== bucketCount) {
+                this.#zBuckets = this.#createBuckets(bucketCount);
                 return;
             }
-            for (const bucket of this._zBuckets) {
+            for (const bucket of this.#zBuckets) {
                 bucket.length = minIndex;
             }
         };
-        _updateParticleBucket = (particle) => {
-            const newBucketIndex = this._getBucketIndex(particle.position.z), currentBucketIndex = this._particleBuckets.get(particle.id);
+        #updateParticleBucket = (particle) => {
+            const newBucketIndex = this.#getBucketIndex(particle.position.z), currentBucketIndex = this.#particleBuckets.get(particle.id);
             if (currentBucketIndex === undefined) {
-                this._insertParticleIntoBucket(particle);
+                this.#insertParticleIntoBucket(particle);
                 return;
             }
             if (currentBucketIndex === newBucketIndex) {
                 return;
             }
-            const currentBucket = this._zBuckets[currentBucketIndex];
+            const currentBucket = this.#zBuckets[currentBucketIndex];
             if (currentBucket) {
-                const particleIndex = this._getParticleInsertIndex(currentBucket, particle.id);
+                const particleIndex = this.#getParticleInsertIndex(currentBucket, particle.id);
                 if (currentBucket[particleIndex]?.id === particle.id) {
                     currentBucket.splice(particleIndex, deleteCount);
                 }
             }
-            const newBucket = this._zBuckets[newBucketIndex];
+            const newBucket = this.#zBuckets[newBucketIndex];
             if (!newBucket) {
-                this._particleBuckets.set(particle.id, newBucketIndex);
+                this.#particleBuckets.set(particle.id, newBucketIndex);
                 return;
             }
-            newBucket.splice(this._getParticleInsertIndex(newBucket, particle.id), empty, particle);
-            this._particleBuckets.set(particle.id, newBucketIndex);
+            newBucket.splice(this.#getParticleInsertIndex(newBucket, particle.id), empty, particle);
+            this.#particleBuckets.set(particle.id, newBucketIndex);
         };
-        _updateParticlesPhase1 = (delta) => {
-            const particlesToDelete = new Set(), resizeFactor = this._resizeFactor;
-            for (const particle of this._array) {
+        #updateParticlesPhase1 = (delta) => {
+            const particlesToDelete = new Set(), resizeFactor = this.#resizeFactor;
+            for (const particle of this.#array) {
                 if (resizeFactor && !particle.ignoresResizeRatio) {
                     particle.position.x *= resizeFactor.width;
                     particle.position.y *= resizeFactor.height;
@@ -5119,10 +5173,10 @@
                     particle.initialPosition.y *= resizeFactor.height;
                 }
                 particle.ignoresResizeRatio = false;
-                for (const plugin of this._particleResetPlugins) {
+                for (const plugin of this.#particleResetPlugins) {
                     plugin.particleReset?.(particle);
                 }
-                for (const plugin of this._particleUpdatePlugins) {
+                for (const plugin of this.#particleUpdatePlugins) {
                     if (particle.destroyed) {
                         break;
                     }
@@ -5136,36 +5190,36 @@
             }
             return particlesToDelete;
         };
-        _updateParticlesPhase2 = (delta, particlesToDelete) => {
-            for (const particle of this._array) {
+        #updateParticlesPhase2 = (delta, particlesToDelete) => {
+            for (const particle of this.#array) {
                 if (particle.destroyed) {
                     particlesToDelete.add(particle);
                     continue;
                 }
-                for (const updater of this._container.particleUpdaters) {
+                for (const updater of this.#container.particleUpdaters) {
                     updater.update(particle, delta);
                 }
                 if (!particle.spawning) {
-                    for (const plugin of this._postParticleUpdatePlugins) {
+                    for (const plugin of this.#postParticleUpdatePlugins) {
                         plugin.postParticleUpdate?.(particle, delta);
                     }
                 }
-                this._updateParticleBucket(particle);
+                this.#updateParticleBucket(particle);
             }
         };
     }
 
     class Retina {
-        container;
         pixelRatio;
         reduceFactor;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.pixelRatio = defaultRatio;
             this.reduceFactor = defaultReduceFactor;
         }
         init() {
-            const container = this.container, options = container.actualOptions;
+            const container = this.#container, options = container.actualOptions;
             this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
             this.reduceFactor = defaultReduceFactor;
             const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
@@ -5179,7 +5233,6 @@
             props.maxSpeed = getRangeValue(moveOptions.gravity.maxSpeed) * ratio;
             props.moveDrift = getRangeValue(moveOptions.drift) * ratio;
             props.moveSpeed = getRangeValue(moveOptions.speed) * ratio;
-            props.sizeAnimationSpeed = getRangeValue(options.size.animation.speed) * ratio;
             const maxDistance = props.maxDistance;
             maxDistance.horizontal = moveDistance.horizontal === undefined ? undefined : moveDistance.horizontal * ratio;
             maxDistance.vertical = moveDistance.vertical === undefined ? undefined : moveDistance.vertical * ratio;
@@ -5217,73 +5270,73 @@
         shapeDrawers;
         started;
         zLayers;
-        _delay;
-        _delayTimeout;
-        _delta = { value: 0, factor: 0 };
-        _dispatchCallback;
-        _drawAnimationFrame;
-        _duration;
-        _eventListeners;
-        _firstStart;
-        _initialSourceOptions;
-        _lastFrameTime;
-        _lifeTime;
-        _onDestroy;
-        _options;
-        _paused;
-        _pluginManager;
-        _smooth;
-        _sourceOptions;
+        #delay;
+        #delayTimeout;
+        #delta = { value: 0, factor: 0 };
+        #dispatchCallback;
+        #drawAnimationFrame;
+        #duration;
+        #eventListeners;
+        #firstStart;
+        #initialSourceOptions;
+        #lastFrameTime;
+        #lifeTime;
+        #onDestroy;
+        #options;
+        #paused;
+        #pluginManager;
+        #smooth;
+        #sourceOptions;
         constructor(params) {
             const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
-            this._pluginManager = pluginManager;
-            this._dispatchCallback = dispatchCallback;
-            this._onDestroy = onDestroy;
+            this.#pluginManager = pluginManager;
+            this.#dispatchCallback = dispatchCallback;
+            this.#onDestroy = onDestroy;
             this.id = Symbol(id);
             this.fpsLimit = 120;
             this.hdr = false;
-            this._smooth = false;
-            this._delay = 0;
-            this._duration = 0;
-            this._lifeTime = 0;
-            this._firstStart = true;
+            this.#smooth = false;
+            this.#delay = 0;
+            this.#duration = 0;
+            this.#lifeTime = 0;
+            this.#firstStart = true;
             this.started = false;
             this.destroyed = false;
-            this._paused = true;
-            this._lastFrameTime = 0;
+            this.#paused = true;
+            this.#lastFrameTime = 0;
             this.zLayers = 100;
             this.pageHidden = false;
-            this._sourceOptions = sourceOptions;
-            this._initialSourceOptions = sourceOptions;
+            this.#sourceOptions = sourceOptions;
+            this.#initialSourceOptions = sourceOptions;
             this.effectDrawers = new Map();
             this.shapeDrawers = new Map();
             this.particleUpdaters = [];
             this.retina = new Retina(this);
-            this.canvas = new CanvasManager(this._pluginManager, this);
-            this.particles = new ParticlesManager(this._pluginManager, this);
+            this.canvas = new CanvasManager(this.#pluginManager, this);
+            this.particles = new ParticlesManager(this.#pluginManager, this);
             this.plugins = [];
             this.particleDestroyedPlugins = [];
             this.particleCreatedPlugins = [];
             this.particlePositionPlugins = [];
-            this._options = loadContainerOptions(this._pluginManager, this);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this);
-            this._eventListeners = new EventListeners(this);
+            this.#options = loadContainerOptions(this.#pluginManager, this);
+            this.actualOptions = loadContainerOptions(this.#pluginManager, this);
+            this.#eventListeners = new EventListeners(this);
             this.dispatchEvent(EventType.containerBuilt);
         }
         get animationStatus() {
-            return !this._paused && !this.pageHidden && guardCheck(this);
+            return !this.#paused && !this.pageHidden && guardCheck(this);
         }
         get options() {
-            return this._options;
+            return this.#options;
         }
         get sourceOptions() {
-            return this._sourceOptions;
+            return this.#sourceOptions;
         }
         addLifeTime(value) {
-            this._lifeTime += value;
+            this.#lifeTime += value;
         }
         alive() {
-            return !this._duration || this._lifeTime <= this._duration;
+            return !this.#duration || this.#lifeTime <= this.#duration;
         }
         destroy(remove = true) {
             if (!guardCheck(this)) {
@@ -5305,13 +5358,13 @@
             this.shapeDrawers = new Map();
             this.particleUpdaters = [];
             this.plugins.length = 0;
-            this._pluginManager.clearPlugins(this);
+            this.#pluginManager.clearPlugins(this);
             this.destroyed = true;
-            this._onDestroy(remove);
+            this.#onDestroy(remove);
             this.dispatchEvent(EventType.containerDestroyed);
         }
         dispatchEvent(type, data) {
-            this._dispatchCallback(type, {
+            this.#dispatchCallback(type, {
                 container: this,
                 data,
             });
@@ -5321,12 +5374,12 @@
                 return;
             }
             let refreshTime = force;
-            this._drawAnimationFrame = animate((timestamp) => {
+            this.#drawAnimationFrame = animate((timestamp) => {
                 if (refreshTime) {
-                    this._lastFrameTime = undefined;
+                    this.#lastFrameTime = undefined;
                     refreshTime = false;
                 }
-                this._nextFrame(timestamp);
+                this.#nextFrame(timestamp);
             });
         }
         async export(type, options = {}) {
@@ -5348,7 +5401,7 @@
                 return;
             }
             const allContainerPlugins = new Map();
-            for (const plugin of this._pluginManager.plugins) {
+            for (const plugin of this.#pluginManager.plugins) {
                 const containerPlugin = await plugin.getPlugin(this);
                 if (containerPlugin.preInit) {
                     await containerPlugin.preInit();
@@ -5356,8 +5409,8 @@
                 allContainerPlugins.set(plugin, containerPlugin);
             }
             await this.initDrawersAndUpdaters();
-            this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
+            this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
+            this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
             this.plugins.length = 0;
             this.particleDestroyedPlugins.length = 0;
             this.particleCreatedPlugins.length = 0;
@@ -5384,11 +5437,11 @@
             const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
             this.hdr = hdr;
             this.zLayers = zLayers;
-            this._duration = getRangeValue(duration) * millisecondsToSeconds;
-            this._delay = getRangeValue(delay) * millisecondsToSeconds;
-            this._lifeTime = 0;
+            this.#duration = getRangeValue(duration) * millisecondsToSeconds;
+            this.#delay = getRangeValue(delay) * millisecondsToSeconds;
+            this.#lifeTime = 0;
             this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
-            this._smooth = smooth;
+            this.#smooth = smooth;
             for (const plugin of this.plugins) {
                 await plugin.init?.();
             }
@@ -5401,7 +5454,7 @@
             this.dispatchEvent(EventType.particlesSetup);
         }
         async initDrawersAndUpdaters() {
-            const pluginManager = this._pluginManager;
+            const pluginManager = this.#pluginManager;
             this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
             this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
             this.particleUpdaters = await pluginManager.getUpdaters(this, true);
@@ -5410,18 +5463,18 @@
             if (!guardCheck(this)) {
                 return;
             }
-            if (this._drawAnimationFrame !== undefined) {
-                cancelAnimation(this._drawAnimationFrame);
-                delete this._drawAnimationFrame;
+            if (this.#drawAnimationFrame !== undefined) {
+                cancelAnimation(this.#drawAnimationFrame);
+                this.#drawAnimationFrame = undefined;
             }
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
             for (const plugin of this.plugins) {
                 plugin.pause?.();
             }
             if (!this.pageHidden) {
-                this._paused = true;
+                this.#paused = true;
             }
             this.dispatchEvent(EventType.containerPaused);
         }
@@ -5429,13 +5482,13 @@
             if (!guardCheck(this)) {
                 return;
             }
-            const needsUpdate = this._paused || force;
-            if (this._firstStart && !this.actualOptions.autoPlay) {
-                this._firstStart = false;
+            const needsUpdate = this.#paused || force;
+            if (this.#firstStart && !this.actualOptions.autoPlay) {
+                this.#firstStart = false;
                 return;
             }
-            if (this._paused) {
-                this._paused = false;
+            if (this.#paused) {
+                this.#paused = false;
             }
             if (needsUpdate) {
                 for (const plugin of this.plugins) {
@@ -5458,10 +5511,10 @@
             if (!guardCheck(this)) {
                 return;
             }
-            this._initialSourceOptions = sourceOptions;
-            this._sourceOptions = sourceOptions;
-            this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
-            this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
+            this.#initialSourceOptions = sourceOptions;
+            this.#sourceOptions = sourceOptions;
+            this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
+            this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
             return this.refresh();
         }
         async start() {
@@ -5472,7 +5525,7 @@
             this.started = true;
             await new Promise(resolve => {
                 const start = async () => {
-                    this._eventListeners.addListeners();
+                    this.#eventListeners.addListeners();
                     for (const plugin of this.plugins) {
                         await plugin.start?.();
                     }
@@ -5480,20 +5533,20 @@
                     this.play();
                     resolve();
                 };
-                this._delayTimeout = setTimeout(() => void start(), this._delay);
+                this.#delayTimeout = setTimeout(() => void start(), this.#delay);
             });
         }
         stop() {
             if (!guardCheck(this) || !this.started) {
                 return;
             }
-            if (this._delayTimeout) {
-                clearTimeout(this._delayTimeout);
-                delete this._delayTimeout;
+            if (this.#delayTimeout) {
+                clearTimeout(this.#delayTimeout);
+                this.#delayTimeout = undefined;
             }
-            this._firstStart = true;
+            this.#firstStart = true;
             this.started = false;
-            this._eventListeners.removeListeners();
+            this.#eventListeners.removeListeners();
             this.pause();
             this.particles.clear();
             this.canvas.stop();
@@ -5503,7 +5556,7 @@
             this.particleCreatedPlugins.length = 0;
             this.particleDestroyedPlugins.length = 0;
             this.particlePositionPlugins.length = 0;
-            this._sourceOptions = this._options;
+            this.#sourceOptions = this.#options;
             this.dispatchEvent(EventType.containerStopped);
         }
         updateActualOptions() {
@@ -5515,23 +5568,23 @@
             }
             return refresh;
         }
-        _nextFrame = (timestamp) => {
+        #nextFrame = (timestamp) => {
             try {
-                if (!this._smooth &&
-                    this._lastFrameTime !== undefined &&
-                    timestamp < this._lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
+                if (!this.#smooth &&
+                    this.#lastFrameTime !== undefined &&
+                    timestamp < this.#lastFrameTime + millisecondsToSeconds / this.fpsLimit) {
                     this.draw(false);
                     return;
                 }
-                this._lastFrameTime ??= timestamp;
-                updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);
-                this.addLifeTime(this._delta.value);
-                this._lastFrameTime = timestamp;
-                if (this._delta.value > millisecondsToSeconds) {
+                this.#lastFrameTime ??= timestamp;
+                updateDelta(this.#delta, timestamp - this.#lastFrameTime, this.fpsLimit, this.#smooth);
+                this.addLifeTime(this.#delta.value);
+                this.#lastFrameTime = timestamp;
+                if (this.#delta.value > millisecondsToSeconds) {
                     this.draw(false);
                     return;
                 }
-                this.canvas.render.drawParticles(this._delta);
+                this.canvas.render.drawParticles(this.#delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;
@@ -5552,44 +5605,44 @@
     });
 
     class EmittersPluginInstance {
-        container;
-        _instancesManager;
+        #container;
+        #instancesManager;
         constructor(instancesManager, container) {
-            this.container = container;
-            this._instancesManager = instancesManager;
-            this._instancesManager.initContainer(container);
+            this.#instancesManager = instancesManager;
+            this.#container = container;
+            this.#instancesManager.initContainer(container);
         }
         async init() {
-            const emittersOptions = this.container.actualOptions.emitters;
+            const emittersOptions = this.#container.actualOptions.emitters;
             if (isArray(emittersOptions)) {
                 for (const emitterOptions of emittersOptions) {
-                    await this._instancesManager.addEmitter(this.container, emitterOptions);
+                    await this.#instancesManager.addEmitter(this.#container, emitterOptions);
                 }
             }
             else {
-                await this._instancesManager.addEmitter(this.container, emittersOptions);
+                await this.#instancesManager.addEmitter(this.#container, emittersOptions);
             }
         }
         pause() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.pause();
             }
         }
         play() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.play();
             }
         }
         resize() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.resize();
             }
         }
         stop() {
-            this._instancesManager.clear(this.container);
+            this.#instancesManager.clear(this.#container);
         }
         update(delta) {
-            this._instancesManager.getArray(this.container).forEach(emitter => {
+            this.#instancesManager.getArray(this.#container).forEach(emitter => {
                 emitter.update(delta);
             });
         }
@@ -5622,16 +5675,16 @@
 
     const defaultIndex = 0;
     class EmittersInstancesManager {
-        _containerArrays;
-        _pluginManager;
+        #containerArrays;
+        #pluginManager;
         constructor(pluginManager) {
-            this._containerArrays = new Map();
-            this._pluginManager = pluginManager;
+            this.#containerArrays = new Map();
+            this.#pluginManager = pluginManager;
         }
         async addEmitter(container, options, position) {
             const emitterOptions = new Emitter();
             emitterOptions.load(options);
-            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this._pluginManager, container, (emitter) => {
+            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this.#pluginManager, container, (emitter) => {
                 this.removeEmitter(container, emitter);
             }, emitterOptions, position);
             await emitter.init();
@@ -5640,22 +5693,22 @@
         }
         clear(container) {
             this.initContainer(container);
-            this._containerArrays.set(container, []);
+            this.#containerArrays.set(container, []);
         }
         getArray(container) {
             this.initContainer(container);
-            let array = this._containerArrays.get(container);
+            let array = this.#containerArrays.get(container);
             if (!array) {
                 array = [];
-                this._containerArrays.set(container, array);
+                this.#containerArrays.set(container, array);
             }
             return array;
         }
         initContainer(container) {
-            if (this._containerArrays.has(container)) {
+            if (this.#containerArrays.has(container)) {
                 return;
             }
-            this._containerArrays.set(container, []);
+            this.#containerArrays.set(container, []);
             container.getEmitter = (idxOrName) => {
                 const array = this.getArray(container);
                 return idxOrName === undefined || isNumber(idxOrName)
@@ -5724,34 +5777,34 @@
         spawnStrokeColor;
         spawnStrokeOpacity;
         spawnStrokeWidth;
-        _container;
-        _currentDuration;
-        _currentEmitDelay;
-        _currentSpawnDelay;
-        _duration;
-        _emitDelay;
-        _firstSpawn;
-        _immortal;
-        _initialPosition;
-        _lifeCount;
-        _mutationObserver;
-        _particlesOptions;
-        _paused;
-        _pluginManager;
-        _removeCallback;
-        _resizeObserver;
-        _shape;
-        _size;
-        _spawnDelay;
-        _startParticlesAdded;
+        #container;
+        #currentDuration;
+        #currentEmitDelay;
+        #currentSpawnDelay;
+        #duration;
+        #emitDelay;
+        #firstSpawn;
+        #immortal;
+        #initialPosition;
+        #lifeCount;
+        #mutationObserver;
+        #particlesOptions;
+        #paused;
+        #pluginManager;
+        #removeCallback;
+        #resizeObserver;
+        #shape;
+        #size;
+        #spawnDelay;
+        #startParticlesAdded;
         constructor(pluginManager, container, removeCallback, options, position) {
-            this._pluginManager = pluginManager;
-            this._container = container;
-            this._removeCallback = removeCallback;
-            this._currentDuration = 0;
-            this._currentEmitDelay = 0;
-            this._currentSpawnDelay = 0;
-            this._initialPosition = position;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+            this.#removeCallback = removeCallback;
+            this.#currentDuration = 0;
+            this.#currentEmitDelay = 0;
+            this.#currentSpawnDelay = 0;
+            this.#initialPosition = position;
             if (options instanceof Emitter) {
                 this.options = options;
             }
@@ -5759,159 +5812,159 @@
                 this.options = new Emitter();
                 this.options.load(options);
             }
-            this._spawnDelay = container.retina.reduceFactor
+            this.#spawnDelay = container.retina.reduceFactor
                 ? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
                     container.retina.reduceFactor
                 : Infinity;
-            this.position = this._initialPosition ?? this._calcPosition();
+            this.position = this.#initialPosition ?? this.#calcPosition();
             this.name = this.options.name;
             this.fill = this.options.fill;
-            this._firstSpawn = !this.options.life.wait;
-            this._startParticlesAdded = false;
+            this.#firstSpawn = !this.options.life.wait;
+            this.#startParticlesAdded = false;
             const particlesOptions = deepExtend({}, this.options.particles);
             particlesOptions.move ??= {};
             particlesOptions.move.direction ??= this.options.direction;
             if (this.options.spawn.fill?.color) {
-                this.spawnFillColor = rangeColorToHsl(this._pluginManager, this.options.spawn.fill.color);
+                this.spawnFillColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.fill.color);
             }
             if (this.options.spawn.stroke?.color) {
-                this.spawnStrokeColor = rangeColorToHsl(this._pluginManager, this.options.spawn.stroke.color);
-            }
-            this._paused = !this.options.autoPlay;
-            this._particlesOptions = particlesOptions;
-            this._size = this._calcSize();
-            this.size = getSize(this._size, this._container.canvas.size);
-            this._lifeCount = this.options.life.count ?? defaultLifeCount;
-            this._immortal = this._lifeCount <= minLifeCount;
+                this.spawnStrokeColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.stroke.color);
+            }
+            this.#paused = !this.options.autoPlay;
+            this.#particlesOptions = particlesOptions;
+            this.#size = this.#calcSize();
+            this.size = getSize(this.#size, this.#container.canvas.size);
+            this.#lifeCount = this.options.life.count ?? defaultLifeCount;
+            this.#immortal = this.#lifeCount <= minLifeCount;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
-                    this._mutationObserver = new MutationObserver(() => {
+                    this.#mutationObserver = new MutationObserver(() => {
                         this.resize();
                     });
-                    this._resizeObserver = new ResizeObserver(() => {
+                    this.#resizeObserver = new ResizeObserver(() => {
                         this.resize();
                     });
-                    this._mutationObserver.observe(element, {
+                    this.#mutationObserver.observe(element, {
                         attributes: true,
                         attributeFilter: ["style", "width", "height"],
                     });
-                    this._resizeObserver.observe(element);
+                    this.#resizeObserver.observe(element);
                 }
             }
-            const shapeOptions = this.options.shape, shapeGenerator = this._pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
+            const shapeOptions = this.options.shape, shapeGenerator = this.#pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
             if (shapeGenerator) {
-                this._shape = shapeGenerator.generate(this._container, this.position, this.size, this.fill, shapeOptions.options);
+                this.#shape = shapeGenerator.generate(this.#container, this.position, this.size, this.fill, shapeOptions.options);
             }
-            this._container.dispatchEvent("emitterCreated", {
+            this.#container.dispatchEvent("emitterCreated", {
                 emitter: this,
             });
             this.play();
         }
         externalPause() {
-            this._paused = true;
+            this.#paused = true;
             this.pause();
         }
         externalPlay() {
-            this._paused = false;
+            this.#paused = false;
             this.play();
         }
         async init() {
-            await this._shape?.init();
+            await this.#shape?.init();
         }
         pause() {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            delete this._emitDelay;
+            this.#emitDelay = undefined;
         }
         play() {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            if (!((this._lifeCount > minLifeCount || this._immortal || !this.options.life.count) &&
-                (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? defaultSpawnDelay)))) {
+            if (!((this.#lifeCount > minLifeCount || this.#immortal || !this.options.life.count) &&
+                (this.#firstSpawn || this.#currentSpawnDelay >= (this.#spawnDelay ?? defaultSpawnDelay)))) {
                 return;
             }
-            const container = this._container;
-            if (this._emitDelay === undefined) {
+            const container = this.#container;
+            if (this.#emitDelay === undefined) {
                 const delay = getRangeValue(this.options.rate.delay);
-                this._emitDelay = container.retina.reduceFactor
+                this.#emitDelay = container.retina.reduceFactor
                     ? (delay * millisecondsToSeconds) / container.retina.reduceFactor
                     : Infinity;
             }
-            if (this._lifeCount > minLifeCount || this._immortal) {
-                this._prepareToDie();
+            if (this.#lifeCount > minLifeCount || this.#immortal) {
+                this.#prepareToDie();
             }
         }
         resize() {
-            const initialPosition = this._initialPosition, container = this._container;
+            const initialPosition = this.#initialPosition, container = this.#container;
             this.position =
                 initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
                     ? initialPosition
-                    : this._calcPosition();
-            this._size = this._calcSize();
-            this.size = getSize(this._size, container.canvas.size);
-            this._shape?.resize(this.position, this.size);
+                    : this.#calcPosition();
+            this.#size = this.#calcSize();
+            this.size = getSize(this.#size, container.canvas.size);
+            this.#shape?.resize(this.position, this.size);
         }
         update(delta) {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            const container = this._container;
-            if (this._firstSpawn) {
-                this._firstSpawn = false;
-                this._currentSpawnDelay = this._spawnDelay ?? defaultSpawnDelay;
-                this._currentEmitDelay = this._emitDelay ?? defaultEmitDelay;
+            const container = this.#container;
+            if (this.#firstSpawn) {
+                this.#firstSpawn = false;
+                this.#currentSpawnDelay = this.#spawnDelay ?? defaultSpawnDelay;
+                this.#currentEmitDelay = this.#emitDelay ?? defaultEmitDelay;
             }
-            if (!this._startParticlesAdded) {
-                this._startParticlesAdded = true;
-                this._emitParticles(this.options.startCount);
+            if (!this.#startParticlesAdded) {
+                this.#startParticlesAdded = true;
+                this.#emitParticles(this.options.startCount);
             }
-            if (this._duration !== undefined) {
-                this._currentDuration += delta.value;
-                if (this._currentDuration >= this._duration) {
+            if (this.#duration !== undefined) {
+                this.#currentDuration += delta.value;
+                if (this.#currentDuration >= this.#duration) {
                     this.pause();
-                    if (this._spawnDelay !== undefined) {
-                        delete this._spawnDelay;
+                    if (this.#spawnDelay !== undefined) {
+                        this.#spawnDelay = undefined;
                     }
-                    if (!this._immortal) {
-                        this._lifeCount--;
+                    if (!this.#immortal) {
+                        this.#lifeCount--;
                     }
-                    if (this._lifeCount > minLifeCount || this._immortal) {
-                        this.position = this._calcPosition();
-                        this._shape?.resize(this.position, this.size);
-                        this._spawnDelay = container.retina.reduceFactor
+                    if (this.#lifeCount > minLifeCount || this.#immortal) {
+                        this.position = this.#calcPosition();
+                        this.#shape?.resize(this.position, this.size);
+                        this.#spawnDelay = container.retina.reduceFactor
                             ? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
                                 container.retina.reduceFactor
                             : Infinity;
                     }
                     else {
-                        this._destroy();
+                        this.#destroy();
                     }
-                    this._currentDuration -= this._duration;
-                    delete this._duration;
+                    this.#currentDuration -= this.#duration;
+                    this.#duration = undefined;
                 }
             }
-            if (this._spawnDelay !== undefined) {
-                this._currentSpawnDelay += delta.value;
-                if (this._currentSpawnDelay >= this._spawnDelay) {
-                    this._container.dispatchEvent("emitterPlay");
+            if (this.#spawnDelay !== undefined) {
+                this.#currentSpawnDelay += delta.value;
+                if (this.#currentSpawnDelay >= this.#spawnDelay) {
+                    this.#container.dispatchEvent("emitterPlay");
                     this.play();
-                    this._currentSpawnDelay -= this._spawnDelay;
-                    delete this._spawnDelay;
+                    this.#currentSpawnDelay -= this.#spawnDelay;
+                    this.#spawnDelay = undefined;
                 }
             }
-            if (this._emitDelay !== undefined) {
-                this._currentEmitDelay += delta.value;
-                if (this._currentEmitDelay >= this._emitDelay) {
-                    this._emit();
-                    this._currentEmitDelay -= this._emitDelay;
+            if (this.#emitDelay !== undefined) {
+                this.#currentEmitDelay += delta.value;
+                if (this.#currentEmitDelay >= this.#emitDelay) {
+                    this.#emit();
+                    this.#currentEmitDelay -= this.#emitDelay;
                 }
             }
         }
-        _calcPosition() {
-            const container = this._container;
+        #calcPosition() {
+            const container = this.#container;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
@@ -5927,8 +5980,8 @@
                 position: this.options.position,
             });
         }
-        _calcSize() {
-            const container = this._container;
+        #calcSize() {
+            const container = this.#container;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
@@ -5951,32 +6004,32 @@
                     return size;
                 })());
         }
-        _destroy = () => {
-            this._mutationObserver?.disconnect();
-            this._mutationObserver = undefined;
-            this._resizeObserver?.disconnect();
-            this._resizeObserver = undefined;
-            this._removeCallback(this);
-            this._container.dispatchEvent("emitterDestroyed", {
+        #destroy = () => {
+            this.#mutationObserver?.disconnect();
+            this.#mutationObserver = undefined;
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = undefined;
+            this.#removeCallback(this);
+            this.#container.dispatchEvent("emitterDestroyed", {
                 emitter: this,
             });
         };
-        _emit() {
-            if (this._paused) {
+        #emit() {
+            if (this.#paused) {
                 return;
             }
             const quantity = getRangeValue(this.options.rate.quantity);
-            this._emitParticles(quantity);
+            this.#emitParticles(quantity);
         }
-        _emitParticles(quantity) {
-            const singleParticlesOptions = (itemFromSingleOrMultiple(this._particlesOptions) ??
+        #emitParticles(quantity) {
+            const singleParticlesOptions = (itemFromSingleOrMultiple(this.#particlesOptions) ??
                 {}), fillHslAnimation = this.options.spawn.fill?.color?.animation, fillEnabled = this.options.spawn.fill?.enable ?? !!this.options.spawn.fill?.color, fillOpacity = this.options.spawn.fill?.opacity === undefined
                 ? defaultOpacity$1
                 : getRangeValue(this.options.spawn.fill.opacity), strokeHslAnimation = this.options.spawn.stroke?.color?.animation, strokeOpacity = this.options.spawn.stroke?.opacity === undefined
                 ? defaultOpacity$1
                 : getRangeValue(this.options.spawn.stroke.opacity), strokeWidth = this.options.spawn.stroke?.width === undefined
                 ? defaultStrokeWidth
-                : getRangeValue(this.options.spawn.stroke.width), reduceFactor = this._container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this._shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
+                : getRangeValue(this.options.spawn.stroke.width), reduceFactor = this.#container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this.#shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
             for (let i = 0; i < quantity * reduceFactor; i++) {
                 const particlesOptions = needsCopy
                     ? deepExtend({}, singleParticlesOptions)
@@ -5987,23 +6040,23 @@
                 this.spawnStrokeWidth = strokeWidth;
                 if (this.spawnFillColor) {
                     if (fillHslAnimation && maxValues) {
-                        this.spawnFillColor.h = this._setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
-                        this.spawnFillColor.s = this._setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
-                        this.spawnFillColor.l = this._setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
+                        this.spawnFillColor.h = this.#setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
+                        this.spawnFillColor.s = this.#setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
+                        this.spawnFillColor.l = this.#setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
                     }
                     setParticlesOptionsFillColor(particlesOptions, this.spawnFillColor, this.spawnFillOpacity, this.spawnFillEnabled);
                 }
                 if (this.spawnStrokeColor) {
                     if (strokeHslAnimation && maxValues) {
-                        this.spawnStrokeColor.h = this._setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
-                        this.spawnStrokeColor.s = this._setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
-                        this.spawnStrokeColor.l = this._setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
+                        this.spawnStrokeColor.h = this.#setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
+                        this.spawnStrokeColor.s = this.#setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
+                        this.spawnStrokeColor.l = this.#setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
                     }
                     setParticlesOptionsStrokeColor(particlesOptions, this.spawnStrokeColor, this.spawnStrokeOpacity, this.spawnStrokeWidth);
                 }
                 let position = this.position;
-                if (this._shape) {
-                    const shapePosData = this._shape.randomPosition();
+                if (this.#shape) {
+                    const shapePosData = this.#shape.randomPosition();
                     if (shapePosData) {
                         position = shapePosData.position;
                         const replaceData = shapeOptions.replace;
@@ -6016,21 +6069,21 @@
                     }
                 }
                 if (position) {
-                    this._container.particles.addParticle(position, particlesOptions);
+                    this.#container.particles.addParticle(position, particlesOptions);
                 }
             }
         }
-        _prepareToDie = () => {
-            if (this._paused) {
+        #prepareToDie = () => {
+            if (this.#paused) {
                 return;
             }
             const duration = this.options.life.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
-            if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
-                this._duration = duration * millisecondsToSeconds;
+            if ((this.#lifeCount > minLifeCount || this.#immortal) && duration !== undefined && duration > minDuration) {
+                this.#duration = duration * millisecondsToSeconds;
             }
         };
-        _setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
-            const container = this._container;
+        #setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+            const container = this.#container;
             if (!animation.enable) {
                 return initValue;
             }