@tsparticles/preset-confetti-cannon 4.0.4 → 4.1.0

package/tsparticles.preset.confettiCannon.bundle.js

@@ -1,5 +1,5 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Preset v4.0.4 */
+/* Preset v4.1.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -51,13 +51,13 @@
             return Math.atan2(this.y, this.x);
         }
         set angle(angle) {
-            this._updateFromAngle(angle, this.length);
+            this.#updateFromAngle(angle, this.length);
         }
         get length() {
             return Math.sqrt(this.getLengthSq());
         }
         set length(length) {
-            this._updateFromAngle(this.angle, length);
+            this.#updateFromAngle(this.angle, length);
         }
         static clone(source) {
             return Vector3d.create(source.x, source.y, getZ(source));
@@ -120,7 +120,7 @@
             this.y -= v.y;
             this.z -= getZ(v);
         }
-        _updateFromAngle(angle, length) {
+        #updateFromAngle(angle, length) {
             this.x = Math.cos(angle) * length;
             this.y = Math.sin(angle) * length;
         }
@@ -717,38 +717,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;
             }
@@ -757,7 +757,7 @@
                 return;
             }
             if (length === deleteCount) {
-                this._listeners.delete(type);
+                this.#listeners.delete(type);
             }
             else {
                 arr.splice(idx, deleteCount);
@@ -795,19 +795,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;
@@ -817,8 +817,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)) {
@@ -879,21 +879,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) {
@@ -904,24 +904,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);
         }
     }
 
@@ -1001,17 +1001,17 @@
     };
     class Engine {
         pluginManager = new PluginManager(this);
-        _domArray = [];
-        _eventDispatcher = new EventDispatcher();
-        _initialized = false;
+        #domArray = [];
+        #eventDispatcher = new EventDispatcher();
+        #initialized = false;
         get items() {
-            return this._domArray;
+            return this.#domArray;
         }
         get version() {
-            return "4.0.4";
+            return "4.1.0";
         }
         addEventListener(type, listener) {
-            this._eventDispatcher.addEventListener(type, listener);
+            this.#eventDispatcher.addEventListener(type, listener);
         }
         checkVersion(pluginVersion) {
             if (this.version === pluginVersion) {
@@ -1020,17 +1020,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;
@@ -1084,7 +1084,7 @@
             await Promise.all(this.items.map(t => t.refresh()));
         }
         removeEventListener(type, listener) {
-            this._eventDispatcher.removeEventListener(type, listener);
+            this.#eventDispatcher.removeEventListener(type, listener);
         }
     }
 
@@ -1855,43 +1855,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;
@@ -2059,43 +2022,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;
@@ -2129,24 +2055,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";
@@ -2154,7 +2077,6 @@
             this.paint.fill.enable = true;
             this.reduceDuplicates = false;
             this.shape = new Shape();
-            this.size = new Size();
             this.zIndex = new ZIndex();
         }
         load(data) {
@@ -2163,7 +2085,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)) {
@@ -2183,7 +2105,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)) {
@@ -2202,15 +2123,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) {
@@ -2220,8 +2140,8 @@
                 }
             }
         }
-        _importPalette = (palette) => {
-            const paletteData = this._pluginManager.getPalette(palette);
+        #importPalette = (palette) => {
+            const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -2300,11 +2220,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;
@@ -2315,7 +2235,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();
@@ -2330,12 +2250,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;
@@ -2389,12 +2309,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;
             }
@@ -2411,8 +2331,8 @@
                 },
             });
         };
-        _importPreset = preset => {
-            this.load(this._pluginManager.getPreset(preset));
+        #importPreset = preset => {
+            this.load(this.#pluginManager.getPreset(preset));
         };
     }
 
@@ -2881,7 +2801,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2918,7 +2838,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2939,15 +2859,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;
             }
@@ -2966,7 +2886,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -3019,7 +2939,7 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -3027,13 +2947,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() {
         }
@@ -3043,7 +2963,7 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
@@ -3061,18 +2981,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();
                 }
@@ -3088,6 +3048,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;
@@ -3096,7 +3062,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);
@@ -3104,7 +3070,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3126,10 +3092,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;
@@ -3138,10 +3103,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) {
@@ -3161,10 +3126,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;
@@ -3173,10 +3137,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) {
@@ -3185,24 +3149,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;
@@ -3211,29 +3175,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;
@@ -3254,10 +3215,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) {
@@ -3270,7 +3231,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) ||
@@ -3296,17 +3257,17 @@
 
     const minVelocity$1 = 0, minDistance$1 = 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;
@@ -3336,7 +3297,7 @@
                     break;
                 }
                 default: {
-                    if (isPointInside(particle.position, container.canvas.size, originPoint, particle.getRadius(), direction)) {
+                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
                         return;
                     }
                     switch (particle.outType) {
@@ -3420,16 +3381,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;
@@ -3437,18 +3398,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);
             }
@@ -3456,7 +3417,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3466,20 +3427,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);
                 }
@@ -3495,7 +3456,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);
                 }
@@ -3527,7 +3488,7 @@
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3582,27 +3543,69 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         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 &&
@@ -3612,12 +3615,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);
@@ -3625,7 +3642,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3634,7 +3651,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3791,20 +3808,20 @@
     })(InteractivityDetect || (InteractivityDetect = {}));
 
     class Modes {
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._pluginManager = pluginManager;
-            this._container = container;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
         }
         load(data) {
             if (isNull(data)) {
                 return;
             }
-            if (!this._container) {
+            if (!this.#container) {
                 return;
             }
-            const interactors = this._pluginManager.interactors?.get(this._container);
+            const interactors = this.#pluginManager.interactors?.get(this.#container);
             if (!interactors) {
                 return;
             }
@@ -3841,13 +3858,13 @@
 
     class InteractivityPlugin {
         id = "interactivity";
-        _pluginManager;
+        #pluginManager;
         constructor(pluginManager) {
-            this._pluginManager = pluginManager;
+            this.#pluginManager = pluginManager;
         }
         async getPlugin(container) {
             const { InteractivityPluginInstance } = await Promise.resolve().then(function () { return InteractivityPluginInstance$1; });
-            return new InteractivityPluginInstance(this._pluginManager, container);
+            return new InteractivityPluginInstance(this.#pluginManager, container);
         }
         loadOptions(container, options, source) {
             if (!this.needsPlugin()) {
@@ -3855,10 +3872,10 @@
             }
             let interactivityOptions = options.interactivity;
             if (!interactivityOptions?.load) {
-                options.interactivity = interactivityOptions = new Interactivity(this._pluginManager, container);
+                options.interactivity = interactivityOptions = new Interactivity(this.#pluginManager, container);
             }
             interactivityOptions.load(source?.interactivity);
-            const interactors = this._pluginManager.interactors?.get(container);
+            const interactors = this.#pluginManager.interactors?.get(container);
             if (!interactors) {
                 return;
             }
@@ -3872,7 +3889,7 @@
             if (source?.interactivity) {
                 options.interactivity = deepExtend({}, source.interactivity);
             }
-            const interactors = this._pluginManager.interactors?.get(container);
+            const interactors = this.#pluginManager.interactors?.get(container);
             if (!interactors) {
                 return;
             }
@@ -3902,7 +3919,7 @@
     const clickEvent = "click", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel";
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
@@ -3948,7 +3965,7 @@
             this.spread = 30;
             this.velocityFactor = 0.5;
             this.particleFactor = 0.2;
-            this.maxDragDistance = 200;
+            this.maxDragDistance = 0;
             this.minParticles = 5;
             this.maxParticles = 200;
             this.drawVector = true;
@@ -3973,6 +3990,9 @@
             if (data.maxParticles !== undefined) {
                 this.maxParticles = data.maxParticles;
             }
+            if (data.maxDragDistance !== undefined) {
+                this.maxDragDistance = data.maxDragDistance;
+            }
             if (data.drawVector !== undefined) {
                 this.drawVector = data.drawVector;
             }
@@ -3994,14 +4014,14 @@
     }
     class Cannoner extends ExternalInteractorBase {
         maxDistance = 0;
-        _data;
-        _gesture = {
+        #data;
+        #gesture = {
             origin: Vector.origin,
             current: Vector.origin,
             active: false,
         };
-        _lastDownPosition = undefined;
-        _state = CannonState.idle;
+        #lastDownPosition = undefined;
+        #state = CannonState.idle;
         constructor(container) {
             super(container);
         }
@@ -4009,7 +4029,7 @@
         }
         init() {
             const options = this.container.actualOptions.interactivity?.modes.cannon ?? new Cannon();
-            this._data = {
+            this.#data = {
                 spread: degToRad(options.spread),
                 maxDragDistance: options.maxDragDistance,
                 velocityFactor: options.velocityFactor,
@@ -4022,27 +4042,27 @@
         }
         interact(interactivityData, _delta) {
             const mouse = interactivityData.mouse, mousePos = mouse.position, clicking = mouse.clicking, downPos = mouse.downPosition;
-            if (clicking && downPos && downPos !== this._lastDownPosition && this._state === CannonState.idle) {
-                this._lastDownPosition = downPos;
-                this._gesture = {
+            if (clicking && downPos && downPos !== this.#lastDownPosition && this.#state === CannonState.idle) {
+                this.#lastDownPosition = downPos;
+                this.#gesture = {
                     origin: { x: downPos.x, y: downPos.y },
                     current: { x: downPos.x, y: downPos.y },
                     active: true,
                 };
-                this._state = CannonState.aiming;
+                this.#state = CannonState.aiming;
             }
-            if (this._state === CannonState.aiming && mousePos) {
-                this._gesture.current = { x: mousePos.x, y: mousePos.y };
-                this._drawVector();
+            if (this.#state === CannonState.aiming && mousePos) {
+                this.#gesture.current = { x: mousePos.x, y: mousePos.y };
+                this.#drawVector();
             }
-            if (!clicking && this._state === CannonState.aiming) {
-                this._gesture.active = false;
-                this._fire();
-                this._state = CannonState.idle;
+            if (!clicking && this.#state === CannonState.aiming) {
+                this.#gesture.active = false;
+                this.#fire();
+                this.#state = CannonState.idle;
             }
         }
         isEnabled(interactivityData) {
-            const { container } = this, events = container.actualOptions.interactivity?.events;
+            const container = this.container, events = container.actualOptions.interactivity?.events;
             if (!events?.onClick.enable) {
                 return false;
             }
@@ -4050,7 +4070,7 @@
             if (!modeEnabled) {
                 return false;
             }
-            return this._state !== CannonState.idle || interactivityData.mouse.clicking;
+            return this.#state !== CannonState.idle || interactivityData.mouse.clicking;
         }
         loadModeOptions(options, ...sources) {
             options.cannon ??= new Cannon();
@@ -4060,13 +4080,13 @@
         }
         reset(_interactivityData, _particle) {
         }
-        _drawVector() {
+        #drawVector() {
             this.container.canvas.render.draw(ctx => {
-                const opts = this._data;
+                const opts = this.#data;
                 if (!opts) {
                     return;
                 }
-                const { origin, current } = this._gesture, pxRatio = this.container.retina.pixelRatio, dragDist = getDistance(origin, current), clampedDist = opts.maxDragDistance > none ? Math.min(dragDist, opts.maxDragDistance * pxRatio) : pxRatio, clampRatio = dragDist > minDistance ? clampedDist / dragDist : minDistance, clampedX = origin.x + (current.x - origin.x) * clampRatio, clampedY = origin.y + (current.y - origin.y) * clampRatio;
+                const { origin, current } = this.#gesture, pxRatio = this.container.retina.pixelRatio, dragDist = getDistance(origin, current), clampedDist = opts.maxDragDistance > none ? Math.min(dragDist, opts.maxDragDistance * pxRatio) : dragDist, clampRatio = dragDist > minDistance ? clampedDist / dragDist : minDistance, clampedX = origin.x + (current.x - origin.x) * clampRatio, clampedY = origin.y + (current.y - origin.y) * clampRatio;
                 ctx.save();
                 ctx.strokeStyle = opts.vectorColor;
                 ctx.lineWidth = double * pxRatio;
@@ -4083,12 +4103,12 @@
                 ctx.restore();
             });
         }
-        _fire() {
-            const opts = this._data;
+        #fire() {
+            const opts = this.#data;
             if (!opts) {
                 return;
             }
-            const { origin, current } = this._gesture, pxRatio = this.container.retina.pixelRatio, dist = getDistance(origin, current), dragLength = opts.maxDragDistance > none ? Math.min(dist, opts.maxDragDistance * pxRatio) : dist;
+            const { origin, current } = this.#gesture, pxRatio = this.container.retina.pixelRatio, dist = getDistance(origin, current), dragLength = opts.maxDragDistance > none ? Math.min(dist, opts.maxDragDistance * pxRatio) : dist;
             if (dragLength < minTapsLength) {
                 return;
             }
@@ -4107,7 +4127,7 @@
     }
 
     async function loadExternalCannonInteraction(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addInteractor?.("externalCannon", container => {
@@ -4226,12 +4246,12 @@
 
     const noTime = 0, identity$2 = 1, infiniteValue = -1;
     class LifeUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         init(particle) {
-            const container = this.container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
+            const container = this.#container, particlesOptions = particle.options, lifeOptions = particlesOptions.life;
             if (!lifeOptions) {
                 return;
             }
@@ -4270,12 +4290,12 @@
             if (!this.isEnabled(particle) || !particle.life) {
                 return;
             }
-            updateLife(particle, delta, this.container.canvas.size);
+            updateLife(particle, delta, this.#container.canvas.size);
         }
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -4343,7 +4363,7 @@
     }
 
     async function loadMotionPlugin(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new MotionPlugin());
         });
@@ -4467,9 +4487,9 @@
     }
 
     class RollUpdater {
-        _pluginManager;
+        #pluginManager;
         constructor(pluginManager) {
-            this._pluginManager = pluginManager;
+            this.#pluginManager = pluginManager;
         }
         getTransformValues(particle) {
             const roll = particle.roll?.enable && particle.roll, rollHorizontal = roll && roll.horizontal, rollVertical = roll && roll.vertical;
@@ -4479,7 +4499,7 @@
             };
         }
         init(particle) {
-            initParticle(this._pluginManager, particle);
+            initParticle(this.#pluginManager, particle);
         }
         isEnabled(particle) {
             const roll = particle.options.roll;
@@ -4500,7 +4520,7 @@
     }
 
     async function loadRollUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("roll", () => {
                 return Promise.resolve(new RollUpdater(e.pluginManager));
@@ -4566,9 +4586,9 @@
 
     const doublePIDeg = 360;
     class RotateUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         init(particle) {
             const rotateOptions = particle.options.rotate;
@@ -4600,7 +4620,7 @@
             if (rotateAnimation.enable) {
                 particle.rotate.decay = identity$3 - getRangeValue(rotateAnimation.decay);
                 particle.rotate.velocity =
-                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.container.retina.reduceFactor;
+                    (getRangeValue(rotateAnimation.speed) / doublePIDeg) * this.#container.retina.reduceFactor;
                 if (!rotateAnimation.sync) {
                     particle.rotate.velocity *= getRandom();
                 }
@@ -4634,7 +4654,7 @@
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -4658,7 +4678,7 @@
     }
 
     async function loadSquareShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["edge", "square"], () => Promise.resolve(new SquareDrawer()));
         });
@@ -4729,9 +4749,9 @@
 
     const maxAngle$1 = 360;
     class TiltUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         getTransformValues(particle) {
             const tilt = particle.tilt?.enable && particle.tilt;
@@ -4770,7 +4790,7 @@
             const tiltAnimation = particle.options.tilt?.animation;
             if (tiltAnimation?.enable) {
                 particle.tilt.decay = identity$3 - getRangeValue(tiltAnimation.decay);
-                particle.tilt.velocity = (getRangeValue(tiltAnimation.speed) / maxAngle$1) * this.container.retina.reduceFactor;
+                particle.tilt.velocity = (getRangeValue(tiltAnimation.speed) / maxAngle$1) * this.#container.retina.reduceFactor;
                 if (!tiltAnimation.sync) {
                     particle.tilt.velocity *= getRandom();
                 }
@@ -4795,7 +4815,7 @@
     }
 
     async function loadTiltUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("tilt", container => {
                 return Promise.resolve(new TiltUpdater(container));
@@ -4876,9 +4896,9 @@
 
     const maxAngle = 360, moveSpeedFactor$1 = 10, defaultDistance = 0;
     class WobbleUpdater {
-        _container;
+        #container;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         init(particle) {
             const wobbleOpt = particle.options.wobble;
@@ -4897,7 +4917,7 @@
                 };
             }
             particle.retina.wobbleDistance =
-                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this._container.retina.pixelRatio;
+                getRangeValue(wobbleOpt?.distance ?? defaultDistance) * this.#container.retina.pixelRatio;
         }
         isEnabled(particle) {
             return !particle.destroyed && !particle.spawning && !!particle.options.wobble?.enable;
@@ -4912,12 +4932,12 @@
             if (!this.isEnabled(particle)) {
                 return;
             }
-            updateWobble(this._container, particle, delta);
+            updateWobble(this.#container, particle, delta);
         }
     }
 
     async function loadWobbleUpdater(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("wobble", container => {
                 return Promise.resolve(new WobbleUpdater(container));
@@ -5072,58 +5092,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;
@@ -5136,21 +5156,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;
             }
@@ -5165,21 +5185,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,
@@ -5190,35 +5210,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);
                 }
             });
@@ -5229,64 +5249,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;
@@ -5299,35 +5319,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) {
@@ -5346,22 +5366,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;
         };
     }
 
@@ -5419,53 +5439,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,
@@ -5473,20 +5493,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;
@@ -5497,13 +5517,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 = "";
@@ -5514,27 +5534,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;
@@ -5543,7 +5563,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)");
@@ -5554,12 +5574,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;
@@ -5572,11 +5592,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 = {
@@ -5595,7 +5615,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,
@@ -5608,46 +5628,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)) {
@@ -5660,72 +5680,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;
             }
@@ -5743,24 +5763,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;
             }
@@ -5769,22 +5789,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);
             }
         };
     }
@@ -5857,24 +5877,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) {
@@ -5883,7 +5903,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);
@@ -5891,12 +5911,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);
         }
@@ -5904,50 +5924,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$3)
                 : (externalTransform.b ?? defaultTransform.b);
-            this._cachedTransform.c = rotating
+            this.#cachedTransform.c = rotating
                 ? -rotateData.sin * (externalTransform.c ?? identity$3)
                 : (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;
@@ -5967,21 +5987,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;
@@ -5990,21 +6016,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);
             }
@@ -6012,7 +6037,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,
             };
@@ -6020,8 +6047,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;
@@ -6052,12 +6079,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) {
@@ -6082,13 +6108,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);
@@ -6100,10 +6126,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;
@@ -6119,8 +6145,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;
             }
@@ -6136,27 +6162,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;
             }
@@ -6171,8 +6256,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");
             }
@@ -6195,45 +6280,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;
                     }
@@ -6250,29 +6348,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 {
@@ -6293,53 +6391,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: {
@@ -6357,20 +6455,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;
@@ -6381,25 +6479,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;
                 }
@@ -6409,24 +6507,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) {
@@ -6436,26 +6534,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;
@@ -6489,10 +6587,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) {
@@ -6500,7 +6598,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++;
                 }
@@ -6510,9 +6608,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();
                 }
@@ -6522,51 +6620,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);
@@ -6575,18 +6673,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];
@@ -6603,8 +6701,8 @@
             }
             return start;
         };
-        _initDensityFactor = densityOptions => {
-            const container = this._container;
+        #initDensityFactor = densityOptions => {
+            const container = this.#container;
             if (!densityOptions.enable) {
                 return defaultDensityFactor;
             }
@@ -6614,82 +6712,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;
@@ -6697,10 +6795,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;
                     }
@@ -6714,36 +6812,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;
@@ -6757,7 +6855,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;
@@ -6795,73 +6892,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)) {
@@ -6883,13 +6980,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,
             });
@@ -6899,12 +6996,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 = {}) {
@@ -6926,7 +7023,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();
@@ -6934,8 +7031,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;
@@ -6962,11 +7059,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?.();
             }
@@ -6979,7 +7076,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);
@@ -6988,18 +7085,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);
         }
@@ -7007,13 +7104,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) {
@@ -7036,10 +7133,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() {
@@ -7050,7 +7147,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?.();
                     }
@@ -7058,20 +7155,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();
@@ -7081,7 +7178,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() {
@@ -7093,23 +7190,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;
@@ -7130,10 +7227,10 @@
     });
 
     class BlendPluginInstance {
-        _container;
-        _defaultCompositeValue;
+        #container;
+        #defaultCompositeValue;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         drawParticleCleanup(context, particle) {
             if (!particle.options.blend?.enable) {
@@ -7150,14 +7247,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;
         }
     }
@@ -7300,11 +7397,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();
         }
@@ -7335,7 +7432,7 @@
                 acceleration: getRangeValue(gravityOptions.acceleration),
                 inverse: gravityOptions.inverse,
             };
-            initSpin(this._container, particle);
+            initSpin(this.#container, particle);
         }
         particleDestroyed(particle) {
             const pathGenerator = particle.pathGenerator;
@@ -7346,7 +7443,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);
             }
@@ -7356,18 +7453,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;
             }
@@ -7386,65 +7483,65 @@
 
     const touchDelay = 500;
     class InteractivityEventListeners {
-        _canPush = true;
-        _clickPositionPlugins;
-        _container;
-        _handlers;
-        _interactionManager;
-        _touches;
+        #canPush = true;
+        #clickPositionPlugins;
+        #container;
+        #handlers;
+        #interactionManager;
+        #touches;
         constructor(container, interactionManager) {
-            this._container = container;
-            this._clickPositionPlugins = [];
-            this._interactionManager = interactionManager;
-            this._touches = new Map();
-            this._handlers = {
+            this.#container = container;
+            this.#clickPositionPlugins = [];
+            this.#interactionManager = interactionManager;
+            this.#touches = new Map();
+            this.#handlers = {
                 mouseDown: () => {
-                    this._mouseDown();
+                    this.#mouseDown();
                 },
                 mouseLeave: () => {
-                    this._mouseTouchFinish();
+                    this.#mouseTouchFinish();
                 },
                 mouseMove: (e) => {
-                    this._mouseTouchMove(e);
+                    this.#mouseTouchMove(e);
                 },
                 mouseUp: (e) => {
-                    this._mouseTouchClick(e);
+                    this.#mouseTouchClick(e);
                 },
                 touchStart: (e) => {
-                    this._touchStart(e);
+                    this.#touchStart(e);
                 },
                 touchMove: (e) => {
-                    this._mouseTouchMove(e);
+                    this.#mouseTouchMove(e);
                 },
                 touchEnd: (e) => {
-                    this._touchEnd(e);
+                    this.#touchEnd(e);
                 },
                 touchCancel: (e) => {
-                    this._touchEnd(e);
+                    this.#touchEnd(e);
                 },
                 touchEndClick: (e) => {
-                    this._touchEndClick(e);
+                    this.#touchEndClick(e);
                 },
                 visibilityChange: () => {
-                    this._handleVisibilityChange();
+                    this.#handleVisibilityChange();
                 },
             };
         }
         addListeners() {
-            this._manageListeners(true);
+            this.#manageListeners(true);
         }
         init() {
-            this._clickPositionPlugins.length = 0;
-            for (const plugin of this._container.plugins.filter(p => !!p.clickPositionValid)) {
-                this._clickPositionPlugins.push(plugin);
+            this.#clickPositionPlugins.length = 0;
+            for (const plugin of this.#container.plugins.filter(p => !!p.clickPositionValid)) {
+                this.#clickPositionPlugins.push(plugin);
             }
         }
         removeListeners() {
-            this._manageListeners(false);
+            this.#manageListeners(false);
         }
-        _doMouseTouchClick = e => {
-            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions;
-            if (this._canPush) {
+        #doMouseTouchClick = e => {
+            const container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions;
+            if (this.#canPush) {
                 const mouseInteractivity = interactionManager.interactivityData.mouse, mousePos = mouseInteractivity.position;
                 if (!mousePos) {
                     return;
@@ -7461,15 +7558,15 @@
             }
             if (e.type === "touchend") {
                 setTimeout(() => {
-                    this._mouseTouchFinish();
+                    this.#mouseTouchFinish();
                 }, touchDelay);
             }
         };
-        _handleVisibilityChange = () => {
-            this._mouseTouchFinish();
+        #handleVisibilityChange = () => {
+            this.#mouseTouchFinish();
         };
-        _manageInteractivityListeners = add => {
-            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivityEl = interactionManager.interactivityData.element;
+        #manageInteractivityListeners = add => {
+            const handlers = this.#handlers, container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions, interactivityEl = interactionManager.interactivityData.element;
             if (!interactivityEl) {
                 return;
             }
@@ -7500,8 +7597,8 @@
             manageListener(interactivityEl, mouseLeaveEvent, handlers.mouseLeave, add);
             manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
         };
-        _manageListeners = add => {
-            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, detectType = options.interactivity?.detectsOn, canvasEl = container.canvas.domElement;
+        #manageListeners = add => {
+            const handlers = this.#handlers, container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions, detectType = options.interactivity?.detectsOn, canvasEl = container.canvas.domElement;
             if (detectType === InteractivityDetect.window) {
                 interactionManager.interactivityData.element = safeDocument();
             }
@@ -7511,35 +7608,35 @@
             else {
                 interactionManager.interactivityData.element = canvasEl;
             }
-            this._manageInteractivityListeners(add);
+            this.#manageInteractivityListeners(add);
             manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
         };
-        _mouseDown = () => {
-            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+        #mouseDown = () => {
+            const { interactivityData } = this.#interactionManager, { mouse } = interactivityData;
             mouse.clicking = true;
             mouse.downPosition = mouse.position;
         };
-        _mouseTouchClick = e => {
-            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, { mouse } = interactionManager.interactivityData;
+        #mouseTouchClick = e => {
+            const container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions, { mouse } = interactionManager.interactivityData;
             mouse.inside = true;
             let handled = false;
             const mousePosition = mouse.position;
             if (!mousePosition || !options.interactivity?.events.onClick.enable) {
                 return;
             }
-            for (const plugin of this._clickPositionPlugins) {
+            for (const plugin of this.#clickPositionPlugins) {
                 handled = plugin.clickPositionValid?.(mousePosition) ?? false;
                 if (handled) {
                     break;
                 }
             }
             if (!handled) {
-                this._doMouseTouchClick(e);
+                this.#doMouseTouchClick(e);
             }
             mouse.clicking = false;
         };
-        _mouseTouchFinish = () => {
-            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+        #mouseTouchFinish = () => {
+            const { interactivityData } = this.#interactionManager, { mouse } = interactivityData;
             delete mouse.position;
             delete mouse.clickPosition;
             delete mouse.downPosition;
@@ -7547,15 +7644,15 @@
             mouse.inside = false;
             mouse.clicking = false;
         };
-        _mouseTouchMove = e => {
-            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivity = interactionManager.interactivityData, canvasEl = container.canvas.domElement;
+        #mouseTouchMove = e => {
+            const container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions, interactivity = interactionManager.interactivityData, canvasEl = container.canvas.domElement;
             if (!interactivity.element) {
                 return;
             }
             interactivity.mouse.inside = true;
             let pos;
             if (e.type.startsWith("pointer")) {
-                this._canPush = true;
+                this.#canPush = true;
                 const mouseEvent = e;
                 if (interactivity.element === safeDocument()) {
                     if (canvasEl) {
@@ -7590,7 +7687,7 @@
                 }
             }
             else {
-                this._canPush = e.type !== "touchmove";
+                this.#canPush = e.type !== "touchmove";
                 if (canvasEl) {
                     const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
                     if (!lastTouch) {
@@ -7610,60 +7707,60 @@
             interactivity.mouse.position = pos;
             interactivity.status = mouseMoveEvent;
         };
-        _touchEnd = e => {
+        #touchEnd = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
-                this._touches.delete(touch.identifier);
+                this.#touches.delete(touch.identifier);
             }
-            this._mouseTouchFinish();
+            this.#mouseTouchFinish();
         };
-        _touchEndClick = e => {
+        #touchEndClick = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
-                this._touches.delete(touch.identifier);
+                this.#touches.delete(touch.identifier);
             }
-            this._mouseTouchClick(e);
+            this.#mouseTouchClick(e);
         };
-        _touchStart = e => {
+        #touchStart = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
-                this._touches.set(touch.identifier, performance.now());
+                this.#touches.set(touch.identifier, performance.now());
             }
-            this._mouseTouchMove(e);
+            this.#mouseTouchMove(e);
         };
     }
 
     const clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0;
     class InteractionManager {
-        container;
         interactivityData;
-        _clickHandlers;
-        _eventListeners;
-        _externalInteractors;
-        _interactors;
-        _intersectionObserver;
-        _particleInteractors;
-        _pluginManager;
+        #clickHandlers;
+        #container;
+        #eventListeners;
+        #externalInteractors;
+        #interactors;
+        #intersectionObserver;
+        #particleInteractors;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this.container = container;
-            this._pluginManager = pluginManager;
-            this._interactors = [];
-            this._externalInteractors = [];
-            this._particleInteractors = [];
-            this._clickHandlers = new Map();
-            this._eventListeners = new InteractivityEventListeners(container, this);
+            this.#container = container;
+            this.#pluginManager = pluginManager;
+            this.#interactors = [];
+            this.#externalInteractors = [];
+            this.#particleInteractors = [];
+            this.#clickHandlers = new Map();
+            this.#eventListeners = new InteractivityEventListeners(container, this);
             this.interactivityData = {
                 mouse: {
                     clicking: false,
                     inside: false,
                 },
             };
-            this._intersectionObserver = safeIntersectionObserver(entries => {
-                this._intersectionManager(entries);
+            this.#intersectionObserver = safeIntersectionObserver(entries => {
+                this.#intersectionManager(entries);
             });
         }
         addClickHandler(callback) {
-            const { container, interactivityData } = this;
+            const container = this.#container, interactivityData = this.interactivityData;
             if (container.destroyed) {
                 return;
             }
@@ -7725,119 +7822,119 @@
                 touchMoved = false;
             };
             let touched = false, touchMoved = false;
-            this._clickHandlers.set(clickEvent, clickHandler);
-            this._clickHandlers.set(touchStartEvent, touchStartHandler);
-            this._clickHandlers.set(touchMoveEvent, touchMoveHandler);
-            this._clickHandlers.set(touchEndEvent, touchEndHandler);
-            this._clickHandlers.set(touchCancelEvent, touchCancelHandler);
-            for (const [key, handler] of this._clickHandlers) {
+            this.#clickHandlers.set(clickEvent, clickHandler);
+            this.#clickHandlers.set(touchStartEvent, touchStartHandler);
+            this.#clickHandlers.set(touchMoveEvent, touchMoveHandler);
+            this.#clickHandlers.set(touchEndEvent, touchEndHandler);
+            this.#clickHandlers.set(touchCancelEvent, touchCancelHandler);
+            for (const [key, handler] of this.#clickHandlers) {
                 el.addEventListener(key, handler);
             }
         }
         addListeners() {
-            this._eventListeners.addListeners();
+            this.#eventListeners.addListeners();
         }
         clearClickHandlers() {
-            const { container, interactivityData } = this;
+            const container = this.#container, interactivityData = this.interactivityData;
             if (container.destroyed) {
                 return;
             }
-            for (const [key, handler] of this._clickHandlers) {
+            for (const [key, handler] of this.#clickHandlers) {
                 interactivityData.element?.removeEventListener(key, handler);
             }
-            this._clickHandlers.clear();
+            this.#clickHandlers.clear();
         }
         externalInteract(delta) {
-            for (const interactor of this._externalInteractors) {
-                const { interactivityData } = this;
+            for (const interactor of this.#externalInteractors) {
+                const interactivityData = this.interactivityData;
                 if (interactor.isEnabled(interactivityData)) {
                     interactor.interact(interactivityData, delta);
                 }
             }
         }
         handleClickMode(mode) {
-            if (this.container.destroyed) {
+            if (this.#container.destroyed) {
                 return;
             }
-            const { interactivityData } = this;
-            for (const interactor of this._externalInteractors) {
+            const interactivityData = this.interactivityData;
+            for (const interactor of this.#externalInteractors) {
                 interactor.handleClickMode?.(mode, interactivityData);
             }
         }
         init() {
-            this._eventListeners.init();
-            for (const interactor of this._interactors) {
+            this.#eventListeners.init();
+            for (const interactor of this.#interactors) {
                 switch (interactor.type) {
                     case InteractorType.external:
-                        this._externalInteractors.push(interactor);
+                        this.#externalInteractors.push(interactor);
                         break;
                     case InteractorType.particles:
-                        this._particleInteractors.push(interactor);
+                        this.#particleInteractors.push(interactor);
                         break;
                 }
                 interactor.init();
             }
         }
         async initInteractors() {
-            const interactors = await this._pluginManager.getInteractors?.(this.container, true);
+            const interactors = await this.#pluginManager.getInteractors?.(this.#container, true);
             if (!interactors) {
                 return;
             }
-            this._interactors = interactors;
-            this._externalInteractors = [];
-            this._particleInteractors = [];
+            this.#interactors = interactors;
+            this.#externalInteractors = [];
+            this.#particleInteractors = [];
         }
         particlesInteract(particle, delta) {
-            const { interactivityData } = this;
-            for (const interactor of this._externalInteractors) {
+            const interactivityData = this.interactivityData;
+            for (const interactor of this.#externalInteractors) {
                 interactor.clear(particle, delta);
             }
-            for (const interactor of this._particleInteractors) {
+            for (const interactor of this.#particleInteractors) {
                 if (interactor.isEnabled(particle, interactivityData)) {
                     interactor.interact(particle, interactivityData, delta);
                 }
             }
         }
         removeListeners() {
-            this._eventListeners.removeListeners();
+            this.#eventListeners.removeListeners();
         }
         reset(particle) {
-            const { interactivityData } = this;
-            for (const interactor of this._externalInteractors) {
+            const interactivityData = this.interactivityData;
+            for (const interactor of this.#externalInteractors) {
                 if (interactor.isEnabled(interactivityData)) {
                     interactor.reset(interactivityData, particle);
                 }
             }
-            for (const interactor of this._particleInteractors) {
+            for (const interactor of this.#particleInteractors) {
                 if (interactor.isEnabled(particle, interactivityData)) {
                     interactor.reset(interactivityData, particle);
                 }
             }
         }
         startObserving() {
-            const { interactivityData } = this;
-            if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
-                this._intersectionObserver.observe(interactivityData.element);
+            const interactivityData = this.interactivityData;
+            if (interactivityData.element instanceof HTMLElement && this.#intersectionObserver) {
+                this.#intersectionObserver.observe(interactivityData.element);
             }
         }
         stopObserving() {
-            const { interactivityData } = this;
-            if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
-                this._intersectionObserver.unobserve(interactivityData.element);
+            const interactivityData = this.interactivityData;
+            if (interactivityData.element instanceof HTMLElement && this.#intersectionObserver) {
+                this.#intersectionObserver.unobserve(interactivityData.element);
             }
         }
         updateMaxDistance() {
             let maxTotalDistance = 0;
-            for (const interactor of this._interactors) {
+            for (const interactor of this.#interactors) {
                 if (interactor.maxDistance > maxTotalDistance) {
                     maxTotalDistance = interactor.maxDistance;
                 }
             }
-            const container = this.container;
+            const container = this.#container;
             container.particles.grid.setCellSize(maxTotalDistance * container.retina.pixelRatio);
         }
-        _intersectionManager = entries => {
-            const { container } = this;
+        #intersectionManager = entries => {
+            const container = this.#container;
             if (container.destroyed || !container.actualOptions.pauseOnOutsideViewport) {
                 return;
             }
@@ -7857,13 +7954,13 @@
 
     class InteractivityPluginInstance {
         interactionManager;
-        _container;
-        _pluginManager;
+        #container;
+        #pluginManager;
         constructor(pluginManager, container) {
-            this._container = container;
-            this._pluginManager = pluginManager;
+            this.#container = container;
+            this.#pluginManager = pluginManager;
             this.interactionManager = new InteractionManager(pluginManager, container);
-            this._container.addClickHandler = (callback) => {
+            this.#container.addClickHandler = (callback) => {
                 this.interactionManager.addClickHandler(callback);
             };
         }
@@ -7875,11 +7972,11 @@
         }
         destroy() {
             this.clearClickHandlers();
-            this._pluginManager.interactors?.delete(this._container);
+            this.#pluginManager.interactors?.delete(this.#container);
         }
         particleCreated(particle) {
-            const interactivityParticle = particle, interactivity = new Interactivity(this._pluginManager, this._container);
-            interactivity.load(this._container.actualOptions.interactivity);
+            const interactivityParticle = particle, interactivity = new Interactivity(this.#pluginManager, this.#container);
+            interactivity.load(this.#container.actualOptions.interactivity);
             interactivity.load(interactivityParticle.options.interactivity);
             interactivityParticle.interactivity = interactivity;
         }
@@ -7919,12 +8016,12 @@
 
     const defaultFactor = 1, defaultReduce = 1, disableReduce = 0, identity = 1;
     class MotionPluginInstance {
-        _container;
+        #container;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         async init() {
-            const container = this._container, options = container.actualOptions.motion;
+            const container = this.#container, options = container.actualOptions.motion;
             if (!(options && (options.disable || options.reduce.value))) {
                 container.retina.reduceFactor = 1;
                 return;
@@ -7934,10 +8031,10 @@
                 container.retina.reduceFactor = defaultFactor;
                 return;
             }
-            this._handleMotionChange(mediaQuery);
+            this.#handleMotionChange(mediaQuery);
             const handleChange = () => {
                 void (async () => {
-                    this._handleMotionChange(mediaQuery);
+                    this.#handleMotionChange(mediaQuery);
                     try {
                         await container.refresh();
                     }
@@ -7948,8 +8045,8 @@
             mediaQuery.addEventListener("change", handleChange);
             await Promise.resolve();
         }
-        _handleMotionChange = mediaQuery => {
-            const container = this._container, motion = container.actualOptions.motion;
+        #handleMotionChange = mediaQuery => {
+            const container = this.#container, motion = container.actualOptions.motion;
             if (!motion) {
                 return;
             }