@tsparticles/preset-matrix 4.0.5 → 4.1.1

package/tsparticles.preset.matrix.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.5 */
+/* Preset v4.1.1 */
 (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;
         }
@@ -705,38 +705,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;
             }
@@ -745,7 +745,7 @@
                 return;
             }
             if (length === deleteCount) {
-                this._listeners.delete(type);
+                this.#listeners.delete(type);
             }
             else {
                 arr.splice(idx, deleteCount);
@@ -783,19 +783,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;
@@ -805,8 +805,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)) {
@@ -867,21 +867,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) {
@@ -892,24 +892,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);
         }
     }
 
@@ -989,17 +989,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.5";
+            return "4.1.1";
         }
         addEventListener(type, listener) {
-            this._eventDispatcher.addEventListener(type, listener);
+            this.#eventDispatcher.addEventListener(type, listener);
         }
         checkVersion(pluginVersion) {
             if (this.version === pluginVersion) {
@@ -1008,17 +1008,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;
@@ -1072,7 +1072,7 @@
             await Promise.all(this.items.map(t => t.refresh()));
         }
         removeEventListener(type, listener) {
-            this._eventDispatcher.removeEventListener(type, listener);
+            this.#eventDispatcher.removeEventListener(type, listener);
         }
     }
 
@@ -1843,43 +1843,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;
@@ -2047,43 +2010,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;
@@ -2117,24 +2043,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";
@@ -2142,7 +2065,6 @@
             this.paint.fill.enable = true;
             this.reduceDuplicates = false;
             this.shape = new Shape();
-            this.size = new Size();
             this.zIndex = new ZIndex();
         }
         load(data) {
@@ -2151,7 +2073,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)) {
@@ -2171,7 +2093,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)) {
@@ -2190,15 +2111,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) {
@@ -2208,8 +2128,8 @@
                 }
             }
         }
-        _importPalette = (palette) => {
-            const paletteData = this._pluginManager.getPalette(palette);
+        #importPalette = (palette) => {
+            const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -2288,11 +2208,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;
@@ -2303,7 +2223,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();
@@ -2318,12 +2238,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;
@@ -2377,12 +2297,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;
             }
@@ -2399,8 +2319,8 @@
                 },
             });
         };
-        _importPreset = preset => {
-            this.load(this._pluginManager.getPreset(preset));
+        #importPreset = preset => {
+            this.load(this.#pluginManager.getPreset(preset));
         };
     }
 
@@ -2869,7 +2789,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2906,7 +2826,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2927,15 +2847,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;
             }
@@ -2954,7 +2874,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3007,7 +2927,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -3015,13 +2935,13 @@
 
     class MovePlugin {
         id = "move";
-        _pluginManager;
+        #pluginManager;
         constructor(pluginManager) {
-            this._pluginManager = pluginManager;
+            this.#pluginManager = pluginManager;
         }
         async getPlugin(container) {
             const { MovePluginInstance } = await Promise.resolve().then(function () { return MovePluginInstance$1; });
-            return new MovePluginInstance(this._pluginManager, container);
+            return new MovePluginInstance(this.#pluginManager, container);
         }
         loadOptions() {
         }
@@ -3031,7 +2951,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3049,18 +2969,58 @@
         });
     }
 
+    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 OpacityUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         init(particle) {
             const opacityOptions = particle.options.opacity, pxRatio = 1;
+            if (!opacityOptions) {
+                return;
+            }
             particle.opacity = initParticleNumericAnimationValue(opacityOptions, pxRatio);
             const opacityAnimation = opacityOptions.animation;
             if (opacityAnimation.enable) {
                 particle.opacity.velocity =
-                    (getRangeValue(opacityAnimation.speed) / percentDenominator) * this.container.retina.reduceFactor;
+                    (getRangeValue(opacityAnimation.speed) / percentDenominator) * this.#container.retina.reduceFactor;
                 if (!opacityAnimation.sync) {
                     particle.opacity.velocity *= getRandom();
                 }
@@ -3076,6 +3036,12 @@
                     ((particle.opacity.maxLoops ?? none) > none &&
                         (particle.opacity.loops ?? none) < (particle.opacity.maxLoops ?? none))));
         }
+        loadOptions(options, ...sources) {
+            options.opacity ??= new Opacity();
+            for (const source of sources) {
+                options.opacity.load(source?.opacity);
+            }
+        }
         reset(particle) {
             if (!particle.opacity) {
                 return;
@@ -3084,7 +3050,7 @@
             particle.opacity.loops = 0;
         }
         update(particle, delta) {
-            if (!this.isEnabled(particle) || !particle.opacity) {
+            if (!this.isEnabled(particle) || !particle.opacity || !particle.options.opacity) {
                 return;
             }
             updateAnimation(particle, particle.opacity, true, particle.options.opacity.animation.destroy, delta);
@@ -3092,7 +3058,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3114,10 +3080,9 @@
         }
         const velocity = data.particle.velocity.x;
         let bounced = false;
-        if ((data.direction === OutModeDirection.right &&
-            data.bounds.right >= data.canvasSize.width &&
-            velocity > minVelocity$4) ||
-            (data.direction === OutModeDirection.left && data.bounds.left <= boundsMin && velocity < minVelocity$4)) {
+        if (data.outOfCanvas &&
+            ((data.direction === OutModeDirection.right && velocity > minVelocity$4) ||
+                (data.direction === OutModeDirection.left && velocity < minVelocity$4))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
             data.particle.velocity.x *= -newVelocity;
             bounced = true;
@@ -3126,10 +3091,10 @@
             return;
         }
         const minPos = data.offset.x + data.size;
-        if (data.bounds.right >= data.canvasSize.width && data.direction === OutModeDirection.right) {
+        if (data.outOfCanvas && data.direction === OutModeDirection.right) {
             data.particle.position.x = data.canvasSize.width - minPos;
         }
-        else if (data.bounds.left <= boundsMin && data.direction === OutModeDirection.left) {
+        else if (data.outOfCanvas && data.direction === OutModeDirection.left) {
             data.particle.position.x = minPos;
         }
         if (data.outMode === OutMode.split) {
@@ -3149,10 +3114,9 @@
         }
         const velocity = data.particle.velocity.y;
         let bounced = false;
-        if ((data.direction === OutModeDirection.bottom &&
-            data.bounds.bottom >= data.canvasSize.height &&
-            velocity > minVelocity$4) ||
-            (data.direction === OutModeDirection.top && data.bounds.top <= boundsMin && velocity < minVelocity$4)) {
+        if (data.outOfCanvas &&
+            ((data.direction === OutModeDirection.bottom && velocity > minVelocity$4) ||
+                (data.direction === OutModeDirection.top && velocity < minVelocity$4))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
             data.particle.velocity.y *= -newVelocity;
             bounced = true;
@@ -3161,10 +3125,10 @@
             return;
         }
         const minPos = data.offset.y + data.size;
-        if (data.bounds.bottom >= data.canvasSize.height && data.direction === OutModeDirection.bottom) {
+        if (data.outOfCanvas && data.direction === OutModeDirection.bottom) {
             data.particle.position.y = data.canvasSize.height - minPos;
         }
-        else if (data.bounds.top <= boundsMin && data.direction === OutModeDirection.top) {
+        else if (data.outOfCanvas && data.direction === OutModeDirection.top) {
             data.particle.position.y = minPos;
         }
         if (data.outMode === OutMode.split) {
@@ -3173,24 +3137,24 @@
     }
 
     class BounceOutMode {
-        container;
         modes;
-        _particleBouncePlugins;
+        #container;
+        #particleBouncePlugins;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [
                 OutMode.bounce,
                 OutMode.split,
             ];
-            this._particleBouncePlugins = container.plugins.filter(p => p.particleBounce !== undefined);
+            this.#particleBouncePlugins = container.plugins.filter(p => p.particleBounce !== undefined);
         }
         update(particle, direction, delta, outMode) {
             if (!this.modes.includes(outMode)) {
                 return;
             }
-            const container = this.container;
+            const container = this.#container;
             let handled = false;
-            for (const plugin of this._particleBouncePlugins) {
+            for (const plugin of this.#particleBouncePlugins) {
                 handled = plugin.particleBounce?.(particle, delta, direction) ?? false;
                 if (handled) {
                     break;
@@ -3199,29 +3163,26 @@
             if (handled) {
                 return;
             }
-            const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size;
-            bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, size });
-            bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, size });
+            const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size, outOfCanvas = !particle.isInsideCanvasForOutMode(outMode, direction);
+            bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
+            bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
         }
     }
 
     const minVelocity$3 = 0;
     class DestroyOutMode {
-        container;
         modes;
-        constructor(container) {
-            this.container = container;
+        constructor(_container) {
             this.modes = [OutMode.destroy];
         }
         update(particle, direction, _delta, outMode) {
             if (!this.modes.includes(outMode)) {
                 return;
             }
-            const container = this.container;
             switch (particle.outType) {
                 case ParticleOutType.normal:
                 case ParticleOutType.outside:
-                    if (isPointInside(particle.position, container.canvas.size, originPoint, particle.getRadius(), direction)) {
+                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
                         return;
                     }
                     break;
@@ -3242,10 +3203,10 @@
 
     const minVelocity$2 = 0;
     class NoneOutMode {
-        container;
         modes;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [OutMode.none];
         }
         update(particle, direction, _delta, outMode) {
@@ -3258,7 +3219,7 @@
                     (direction === OutModeDirection.top || direction === OutModeDirection.bottom))) {
                 return;
             }
-            const gravityOptions = particle.options.move.gravity, container = this.container, canvasSize = container.canvas.size, pRadius = particle.getRadius();
+            const gravityOptions = particle.options.move.gravity, container = this.#container, canvasSize = container.canvas.size, pRadius = particle.getRadius();
             if (!gravityOptions.enable) {
                 if ((particle.velocity.y > minVelocity$2 && particle.position.y <= canvasSize.height + pRadius) ||
                     (particle.velocity.y < minVelocity$2 && particle.position.y >= -pRadius) ||
@@ -3284,17 +3245,17 @@
 
     const minVelocity$1 = 0, minDistance = 0, updateVector = Vector.origin;
     class OutOutMode {
-        container;
         modes;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [OutMode.out];
         }
         update(particle, direction, _delta, outMode) {
             if (!this.modes.includes(outMode)) {
                 return;
             }
-            const container = this.container;
+            const container = this.#container;
             switch (particle.outType) {
                 case ParticleOutType.inside: {
                     const { x: vx, y: vy } = particle.velocity;
@@ -3324,7 +3285,7 @@
                     break;
                 }
                 default: {
-                    if (isPointInside(particle.position, container.canvas.size, originPoint, particle.getRadius(), direction)) {
+                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
                         return;
                     }
                     switch (particle.outType) {
@@ -3408,16 +3369,16 @@
     };
     class OutOfCanvasUpdater {
         updaters;
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.updaters = new Map();
         }
         init(particle) {
-            this._addUpdaterIfMissing(particle, OutMode.bounce, container => new BounceOutMode(container));
-            this._addUpdaterIfMissing(particle, OutMode.out, container => new OutOutMode(container));
-            this._addUpdaterIfMissing(particle, OutMode.destroy, container => new DestroyOutMode(container));
-            this._addUpdaterIfMissing(particle, OutMode.none, container => new NoneOutMode(container));
+            this.#addUpdaterIfMissing(particle, OutMode.bounce, container => new BounceOutMode(container));
+            this.#addUpdaterIfMissing(particle, OutMode.out, container => new OutOutMode(container));
+            this.#addUpdaterIfMissing(particle, OutMode.destroy, container => new DestroyOutMode(container));
+            this.#addUpdaterIfMissing(particle, OutMode.none, container => new NoneOutMode(container));
         }
         isEnabled(particle) {
             return !particle.destroyed && !particle.spawning;
@@ -3425,18 +3386,18 @@
         update(particle, delta) {
             const outModes = particle.options.move.outModes;
             particle.justWarped = false;
-            this._updateOutMode(particle, delta, outModes.bottom ?? outModes.default, OutModeDirection.bottom);
-            this._updateOutMode(particle, delta, outModes.left ?? outModes.default, OutModeDirection.left);
-            this._updateOutMode(particle, delta, outModes.right ?? outModes.default, OutModeDirection.right);
-            this._updateOutMode(particle, delta, outModes.top ?? outModes.default, OutModeDirection.top);
+            this.#updateOutMode(particle, delta, outModes.bottom ?? outModes.default, OutModeDirection.bottom);
+            this.#updateOutMode(particle, delta, outModes.left ?? outModes.default, OutModeDirection.left);
+            this.#updateOutMode(particle, delta, outModes.right ?? outModes.default, OutModeDirection.right);
+            this.#updateOutMode(particle, delta, outModes.top ?? outModes.default, OutModeDirection.top);
         }
-        _addUpdaterIfMissing = (particle, outMode, getUpdater) => {
+        #addUpdaterIfMissing = (particle, outMode, getUpdater) => {
             const outModes = particle.options.move.outModes;
             if (!this.updaters.has(outMode) && checkOutMode(outModes, outMode)) {
-                this.updaters.set(outMode, getUpdater(this.container));
+                this.updaters.set(outMode, getUpdater(this.#container));
             }
         };
-        _updateOutMode = (particle, delta, outMode, direction) => {
+        #updateOutMode = (particle, delta, outMode, direction) => {
             for (const updater of this.updaters.values()) {
                 updater.update(particle, direction, delta, outMode);
             }
@@ -3444,7 +3405,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3454,20 +3415,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);
                 }
@@ -3483,7 +3444,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);
                 }
@@ -3515,7 +3476,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3570,27 +3531,69 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
     }
 
+    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 &&
@@ -3600,12 +3603,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);
@@ -3613,7 +3630,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3622,7 +3639,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3854,7 +3871,7 @@
     }
 
     async function loadMatrixShape(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["matrix"], () => Promise.resolve(new MatrixDrawer()));
         });
@@ -3914,7 +3931,7 @@
     }
 
     async function loadPoissonDiscPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new PoissonDiscPlugin());
         });
@@ -3922,18 +3939,18 @@
 
     const defaultShadowBlur = 0, defaultShadowOffsetValue = 0;
     class ShadowDrawer {
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
         }
         drawAfter(data) {
             const { context } = data;
             context.restore();
         }
         drawBefore(data) {
-            const { particle, context } = data, { _container: container } = this, shadowParticle = particle, shadowColor = shadowParticle.shadowColor, shadowOffset = shadowParticle.shadowOffset;
+            const { particle, context } = data, container = this.#container, shadowParticle = particle, shadowColor = shadowParticle.shadowColor, shadowOffset = shadowParticle.shadowOffset;
             if (!shadowColor) {
                 return;
             }
@@ -3945,14 +3962,14 @@
         }
         particleInit(_container, particle) {
             const effectData = particle.effectData, shadowColor = OptionsColor.create(new OptionsColor(), effectData?.color);
-            particle.shadowColor = rangeColorToRgb(this._pluginManager, shadowColor);
+            particle.shadowColor = rangeColorToRgb(this.#pluginManager, shadowColor);
             particle.shadowBlur = effectData?.blur ?? defaultShadowBlur;
             particle.shadowOffset = effectData?.offset ?? originPoint;
         }
     }
 
     async function loadShadowEffect(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("shadow", container => {
                 return Promise.resolve(new ShadowDrawer(e.pluginManager, container));
@@ -4003,13 +4020,13 @@
 
     class TrailPlugin {
         id = "trail";
-        _pluginManager;
+        #pluginManager;
         constructor(pluginManager) {
-            this._pluginManager = pluginManager;
+            this.#pluginManager = pluginManager;
         }
         async getPlugin(container) {
             const { TrailPluginInstance } = await Promise.resolve().then(function () { return TrailPluginInstance$1; });
-            return new TrailPluginInstance(this._pluginManager, container);
+            return new TrailPluginInstance(this.#pluginManager, container);
         }
         loadOptions(_container, options, source) {
             if (!this.needsPlugin()) {
@@ -4027,7 +4044,7 @@
     }
 
     async function loadTrailPlugin(engine) {
-        engine.checkVersion("4.0.5");
+        engine.checkVersion("4.1.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
         });
@@ -4137,58 +4154,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;
@@ -4201,21 +4218,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;
             }
@@ -4230,21 +4247,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,
@@ -4255,35 +4272,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);
                 }
             });
@@ -4294,64 +4311,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;
@@ -4364,35 +4381,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) {
@@ -4411,22 +4428,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;
         };
     }
 
@@ -4484,53 +4501,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,
@@ -4538,20 +4555,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;
@@ -4562,13 +4579,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 = "";
@@ -4579,27 +4596,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;
@@ -4608,7 +4625,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)");
@@ -4619,12 +4636,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;
@@ -4637,11 +4654,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 = {
@@ -4660,7 +4677,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,
@@ -4673,46 +4690,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)) {
@@ -4725,72 +4742,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;
             }
@@ -4808,24 +4825,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;
             }
@@ -4834,22 +4851,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);
             }
         };
     }
@@ -4922,24 +4939,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) {
@@ -4948,7 +4965,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);
@@ -4956,12 +4973,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);
         }
@@ -4969,50 +4986,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$1)
                 : (externalTransform.b ?? defaultTransform.b);
-            this._cachedTransform.c = rotating
+            this.#cachedTransform.c = rotating
                 ? -rotateData.sin * (externalTransform.c ?? identity$1)
                 : (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;
@@ -5032,21 +5049,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;
@@ -5055,21 +5078,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);
             }
@@ -5077,7 +5099,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,
             };
@@ -5085,8 +5109,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;
@@ -5117,12 +5141,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) {
@@ -5147,13 +5170,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);
@@ -5165,10 +5188,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;
@@ -5184,8 +5207,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;
             }
@@ -5201,27 +5224,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;
             }
@@ -5236,8 +5318,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");
             }
@@ -5260,45 +5342,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;
                     }
@@ -5315,29 +5410,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 {
@@ -5358,53 +5453,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: {
@@ -5422,20 +5517,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;
@@ -5446,25 +5541,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;
                 }
@@ -5474,24 +5569,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) {
@@ -5501,26 +5596,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;
@@ -5554,10 +5649,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) {
@@ -5565,7 +5660,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++;
                 }
@@ -5575,9 +5670,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();
                 }
@@ -5587,51 +5682,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);
@@ -5640,18 +5735,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];
@@ -5668,8 +5763,8 @@
             }
             return start;
         };
-        _initDensityFactor = densityOptions => {
-            const container = this._container;
+        #initDensityFactor = densityOptions => {
+            const container = this.#container;
             if (!densityOptions.enable) {
                 return defaultDensityFactor;
             }
@@ -5679,82 +5774,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;
@@ -5762,10 +5857,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;
                     }
@@ -5779,36 +5874,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;
@@ -5822,7 +5917,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;
@@ -5860,73 +5954,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)) {
@@ -5948,13 +6042,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,
             });
@@ -5964,12 +6058,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 = {}) {
@@ -5991,7 +6085,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();
@@ -5999,8 +6093,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;
@@ -6027,11 +6121,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?.();
             }
@@ -6044,7 +6138,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);
@@ -6053,18 +6147,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);
         }
@@ -6072,13 +6166,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) {
@@ -6101,10 +6195,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() {
@@ -6115,7 +6209,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?.();
                     }
@@ -6123,20 +6217,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();
@@ -6146,7 +6240,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() {
@@ -6158,23 +6252,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;
@@ -6195,10 +6289,10 @@
     });
 
     class BlendPluginInstance {
-        _container;
-        _defaultCompositeValue;
+        #container;
+        #defaultCompositeValue;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         drawParticleCleanup(context, particle) {
             if (!particle.options.blend?.enable) {
@@ -6215,14 +6309,14 @@
             context.globalCompositeOperation = particle.options.blend.mode;
         }
         drawSettingsCleanup(context) {
-            if (!this._defaultCompositeValue) {
+            if (!this.#defaultCompositeValue) {
                 return;
             }
-            context.globalCompositeOperation = this._defaultCompositeValue;
+            context.globalCompositeOperation = this.#defaultCompositeValue;
         }
         drawSettingsSetup(context) {
-            const previousComposite = context.globalCompositeOperation, blend = this._container.actualOptions.blend;
-            this._defaultCompositeValue = previousComposite;
+            const previousComposite = context.globalCompositeOperation, blend = this.#container.actualOptions.blend;
+            this.#defaultCompositeValue = previousComposite;
             context.globalCompositeOperation = blend?.enable ? blend.mode : previousComposite;
         }
     }
@@ -6365,11 +6459,11 @@
     class MovePluginInstance {
         availablePathGenerators;
         pathGenerators;
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
             this.availablePathGenerators = new Map();
             this.pathGenerators = new Map();
         }
@@ -6400,7 +6494,7 @@
                 acceleration: getRangeValue(gravityOptions.acceleration),
                 inverse: gravityOptions.inverse,
             };
-            initSpin(this._container, particle);
+            initSpin(this.#container, particle);
         }
         particleDestroyed(particle) {
             const pathGenerator = particle.pathGenerator;
@@ -6411,7 +6505,7 @@
             if (!moveOptions.enable) {
                 return;
             }
-            const container = this._container, pxRatio = container.retina.pixelRatio, slowFactor = getProximitySpeedFactor(particle), reduceFactor = container.retina.reduceFactor, baseSpeed = particle.retina.moveSpeed, moveDrift = particle.retina.moveDrift, maxSize = getRangeMax(particleOptions.size.value) * pxRatio, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : defaultSizeFactor, deltaFactor = delta.factor || defaultDeltaFactor, moveSpeed = baseSpeed * sizeFactor * slowFactor * deltaFactor * half, maxSpeed = particle.retina.maxSpeed;
+            const container = this.#container, slowFactor = getProximitySpeedFactor(particle), reduceFactor = container.retina.reduceFactor, baseSpeed = particle.retina.moveSpeed, moveDrift = particle.retina.moveDrift, maxSize = particle.size.max, sizeFactor = moveOptions.size ? particle.getRadius() / maxSize : defaultSizeFactor, deltaFactor = delta.factor || defaultDeltaFactor, moveSpeed = baseSpeed * sizeFactor * slowFactor * deltaFactor * half, maxSpeed = particle.retina.maxSpeed;
             if (moveOptions.spin.enable) {
                 spin(container, particle, moveSpeed, reduceFactor);
             }
@@ -6421,18 +6515,18 @@
             applyDistance(particle);
         }
         preInit() {
-            return this._init();
+            return this.#init();
         }
         redrawInit() {
-            return this._init();
+            return this.#init();
         }
         update() {
             for (const pathGenerator of this.pathGenerators.values()) {
                 pathGenerator.update();
             }
         }
-        async _init() {
-            const availablePathGenerators = await this._pluginManager.getPathGenerators?.(this._container, true);
+        async #init() {
+            const availablePathGenerators = await this.#pluginManager.getPathGenerators?.(this.#container, true);
             if (!availablePathGenerators) {
                 return;
             }
@@ -6449,27 +6543,28 @@
         MovePluginInstance: MovePluginInstance
     });
 
+    const defaultSize = 1;
     class PoissonDiscPluginInstance {
         poissonDisc;
         redrawTimeout;
-        _container;
-        _currentIndex;
+        #container;
+        #currentIndex;
         constructor(container) {
-            this._container = container;
-            this._currentIndex = 0;
+            this.#container = container;
+            this.#currentIndex = 0;
         }
         async init() {
-            await this._initData();
+            await this.#initData();
         }
         particlePosition(position) {
-            const container = this._container, options = container.actualOptions.poisson;
-            if (!this.poissonDisc || !(options?.enable ?? false) || this._currentIndex >= this.poissonDisc.points.length) {
+            const container = this.#container, options = container.actualOptions.poisson;
+            if (!this.poissonDisc || !(options?.enable ?? false) || this.#currentIndex >= this.poissonDisc.points.length) {
                 return;
             }
-            return position ?? this.poissonDisc.points[this._currentIndex++]?.position;
+            return position ?? this.poissonDisc.points[this.#currentIndex++]?.position;
         }
         resize() {
-            const container = this._container, options = container.actualOptions.poisson;
+            const container = this.#container, options = container.actualOptions.poisson;
             if (!(options?.enable ?? false)) {
                 return;
             }
@@ -6479,10 +6574,10 @@
             const timeout = 250;
             this.redrawTimeout = setTimeout(() => {
                 void (async () => {
-                    if (this._container.destroyed) {
+                    if (this.#container.destroyed) {
                         return;
                     }
-                    await this._initData();
+                    await this.#initData();
                     await container.particles.redraw();
                 })();
             }, timeout);
@@ -6490,16 +6585,16 @@
         stop() {
             delete this.poissonDisc;
         }
-        async _initData() {
-            const container = this._container, poissonOptions = container.actualOptions.poisson, particlesOptions = container.actualOptions.particles, canvasSize = container.canvas.size, pixelRatio = container.retina.pixelRatio;
+        async #initData() {
+            const container = this.#container, poissonOptions = container.actualOptions.poisson, particlesOptions = container.actualOptions.particles, canvasSize = container.canvas.size, pixelRatio = container.retina.pixelRatio;
             if (!poissonOptions?.enable) {
                 return;
             }
-            this._currentIndex = 0;
+            this.#currentIndex = 0;
             const { PoissonDisc } = await Promise.resolve().then(function () { return PoissonDisc$1; });
             this.poissonDisc = new PoissonDisc(canvasSize, poissonOptions.radius
                 ? poissonOptions.radius * pixelRatio
-                : Math.max(getRangeMax(particlesOptions.size.value) * pixelRatio, Math.sqrt((canvasSize.width * canvasSize.height) / particlesOptions.number.value)), poissonOptions.retries, poissonOptions.dimensions);
+                : Math.max(getRangeMax(particlesOptions["size.value"] ?? defaultSize) * pixelRatio, Math.sqrt((canvasSize.width * canvasSize.height) / particlesOptions.number.value)), poissonOptions.retries, poissonOptions.dimensions);
             const noSteps = 0;
             if (poissonOptions.steps > noSteps) {
                 this.poissonDisc.steps(poissonOptions.steps);
@@ -6517,15 +6612,15 @@
 
     const minimumLength = 0;
     class TrailPluginInstance {
-        _container;
-        _pluginManager;
-        _trailFill;
+        #container;
+        #pluginManager;
+        #trailFill;
         constructor(pluginManager, container) {
-            this._container = container;
-            this._pluginManager = pluginManager;
+            this.#container = container;
+            this.#pluginManager = pluginManager;
         }
         canvasClear() {
-            const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;
+            const container = this.#container, trail = container.actualOptions.trail, trailFill = this.#trailFill;
             if (!trail?.enable || !trailFill || trail.length <= minimumLength) {
                 return false;
             }
@@ -6543,24 +6638,24 @@
         }
         async init() {
             try {
-                await this._initTrail();
+                await this.#initTrail();
             }
             catch (e) {
                 getLogger().error(e);
             }
         }
-        _initTrail = async () => {
-            const options = this._container.actualOptions, trail = options.trail;
+        #initTrail = async () => {
+            const options = this.#container.actualOptions, trail = options.trail;
             if (!trail?.enable) {
                 return;
             }
             const trailFill = trail.fill, opacity = inverseFactorNumerator / trail.length;
             if (trailFill.color) {
-                const fillColor = rangeColorToRgb(this._pluginManager, trailFill.color);
+                const fillColor = rangeColorToRgb(this.#pluginManager, trailFill.color);
                 if (!fillColor) {
                     return;
                 }
-                this._trailFill = {
+                this.#trailFill = {
                     color: {
                         ...fillColor,
                     },
@@ -6574,7 +6669,7 @@
                     }
                     const img = safeDocument().createElement("img");
                     img.addEventListener("load", () => {
-                        this._trailFill = {
+                        this.#trailFill = {
                             image: img,
                             opacity,
                         };
@@ -6684,10 +6779,10 @@
                 if (this.active.length <= minCount) {
                     continue;
                 }
-                this._step();
+                this.#step();
             }
         }
-        _getNewPoint(currentPoint, tries) {
+        #getNewPoint(currentPoint, tries) {
             const minCoordinate = 0, gridMinValue = 0, maxNeighbourIndex = 1, newAngle = tries * (doublePI / this.retries), newDist = this.getRandom(this.radius, this.radius * double), offset = {
                 x: Math.cos(newAngle) * newDist,
                 y: Math.sin(newAngle) * newDist,
@@ -6745,7 +6840,7 @@
             }
             return newPoint;
         }
-        _step() {
+        #step() {
             const minCount = 0, randomActive = this.getRandom(minCount, this.active.length);
             let foundNewPoint = false;
             for (let tries = 0; tries < this.retries; tries++) {
@@ -6757,7 +6852,7 @@
                 if (!point) {
                     continue;
                 }
-                const newPoint = this._getNewPoint(point, tries);
+                const newPoint = this.#getNewPoint(point, tries);
                 if (newPoint) {
                     foundNewPoint = true;
                     this.addPoint(newPoint);