@tsparticles/confetti 4.0.4 → 4.1.0

package/tsparticles.confetti.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);
-/* tsParticles v4.0.4 */
+/* tsParticles 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;
         }
@@ -804,38 +804,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;
             }
@@ -844,7 +844,7 @@
                 return;
             }
             if (length === deleteCount) {
-                this._listeners.delete(type);
+                this.#listeners.delete(type);
             }
             else {
                 arr.splice(idx, deleteCount);
@@ -882,19 +882,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;
@@ -904,8 +904,8 @@
         }
         addConfig(config) {
             const key = config.key ?? config.name ?? "default";
-            this._configs.set(key, config);
-            this._engine.dispatchEvent(exports.EventType.configAdded, { data: { name: key, config } });
+            this.#configs.set(key, config);
+            this.#engine.dispatchEvent(exports.EventType.configAdded, { data: { name: key, config } });
         }
         addEasing(name, easing) {
             if (this.easingFunctions.get(name)) {
@@ -966,21 +966,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) {
@@ -991,24 +991,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);
         }
     }
 
@@ -1111,17 +1111,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) {
@@ -1130,17 +1130,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;
@@ -1194,7 +1194,7 @@
             await Promise.all(this.items.map(t => t.refresh()));
         }
         removeEventListener(type, listener) {
-            this._eventDispatcher.removeEventListener(type, listener);
+            this.#eventDispatcher.removeEventListener(type, listener);
         }
     }
 
@@ -1965,43 +1965,6 @@
         }
     }
 
-    class OpacityAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = exports.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;
@@ -2169,43 +2132,6 @@
         }
     }
 
-    class SizeAnimation extends RangedAnimationOptions {
-        destroy;
-        constructor() {
-            super();
-            this.destroy = exports.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;
@@ -2239,24 +2165,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";
@@ -2264,7 +2187,6 @@
             this.paint.fill.enable = true;
             this.reduceDuplicates = false;
             this.shape = new Shape();
-            this.size = new Size();
             this.zIndex = new ZIndex();
         }
         load(data) {
@@ -2273,7 +2195,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)) {
@@ -2293,7 +2215,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)) {
@@ -2312,15 +2233,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) {
@@ -2330,8 +2250,8 @@
                 }
             }
         }
-        _importPalette = (palette) => {
-            const paletteData = this._pluginManager.getPalette(palette);
+        #importPalette = (palette) => {
+            const paletteData = this.#pluginManager.getPalette(palette);
             if (!paletteData) {
                 return;
             }
@@ -2410,11 +2330,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;
@@ -2425,7 +2345,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();
@@ -2440,12 +2360,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;
@@ -2499,12 +2419,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;
             }
@@ -2521,8 +2441,8 @@
                 },
             });
         };
-        _importPreset = preset => {
-            this.load(this._pluginManager.getPreset(preset));
+        #importPreset = preset => {
+            this.load(this.#pluginManager.getPreset(preset));
         };
     }
 
@@ -3055,7 +2975,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());
         });
@@ -3092,7 +3012,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());
@@ -3113,15 +3033,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;
             }
@@ -3140,7 +3060,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());
         });
@@ -3193,7 +3113,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());
         });
@@ -3201,13 +3121,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() {
         }
@@ -3217,7 +3137,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();
@@ -3235,18 +3155,58 @@
         });
     }
 
+    class OpacityAnimation extends RangedAnimationOptions {
+        destroy;
+        constructor() {
+            super();
+            this.destroy = exports.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();
                 }
@@ -3262,6 +3222,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;
@@ -3270,7 +3236,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);
@@ -3278,7 +3244,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));
@@ -3300,10 +3266,9 @@
         }
         const velocity = data.particle.velocity.x;
         let bounced = false;
-        if ((data.direction === exports.OutModeDirection.right &&
-            data.bounds.right >= data.canvasSize.width &&
-            velocity > minVelocity$4) ||
-            (data.direction === exports.OutModeDirection.left && data.bounds.left <= boundsMin && velocity < minVelocity$4)) {
+        if (data.outOfCanvas &&
+            ((data.direction === exports.OutModeDirection.right && velocity > minVelocity$4) ||
+                (data.direction === exports.OutModeDirection.left && velocity < minVelocity$4))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
             data.particle.velocity.x *= -newVelocity;
             bounced = true;
@@ -3312,10 +3277,10 @@
             return;
         }
         const minPos = data.offset.x + data.size;
-        if (data.bounds.right >= data.canvasSize.width && data.direction === exports.OutModeDirection.right) {
+        if (data.outOfCanvas && data.direction === exports.OutModeDirection.right) {
             data.particle.position.x = data.canvasSize.width - minPos;
         }
-        else if (data.bounds.left <= boundsMin && data.direction === exports.OutModeDirection.left) {
+        else if (data.outOfCanvas && data.direction === exports.OutModeDirection.left) {
             data.particle.position.x = minPos;
         }
         if (data.outMode === exports.OutMode.split) {
@@ -3335,10 +3300,9 @@
         }
         const velocity = data.particle.velocity.y;
         let bounced = false;
-        if ((data.direction === exports.OutModeDirection.bottom &&
-            data.bounds.bottom >= data.canvasSize.height &&
-            velocity > minVelocity$4) ||
-            (data.direction === exports.OutModeDirection.top && data.bounds.top <= boundsMin && velocity < minVelocity$4)) {
+        if (data.outOfCanvas &&
+            ((data.direction === exports.OutModeDirection.bottom && velocity > minVelocity$4) ||
+                (data.direction === exports.OutModeDirection.top && velocity < minVelocity$4))) {
             const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
             data.particle.velocity.y *= -newVelocity;
             bounced = true;
@@ -3347,10 +3311,10 @@
             return;
         }
         const minPos = data.offset.y + data.size;
-        if (data.bounds.bottom >= data.canvasSize.height && data.direction === exports.OutModeDirection.bottom) {
+        if (data.outOfCanvas && data.direction === exports.OutModeDirection.bottom) {
             data.particle.position.y = data.canvasSize.height - minPos;
         }
-        else if (data.bounds.top <= boundsMin && data.direction === exports.OutModeDirection.top) {
+        else if (data.outOfCanvas && data.direction === exports.OutModeDirection.top) {
             data.particle.position.y = minPos;
         }
         if (data.outMode === exports.OutMode.split) {
@@ -3359,24 +3323,24 @@
     }
 
     class BounceOutMode {
-        container;
         modes;
-        _particleBouncePlugins;
+        #container;
+        #particleBouncePlugins;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [
                 exports.OutMode.bounce,
                 exports.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;
@@ -3385,29 +3349,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 = [exports.OutMode.destroy];
         }
         update(particle, direction, _delta, outMode) {
             if (!this.modes.includes(outMode)) {
                 return;
             }
-            const container = this.container;
             switch (particle.outType) {
                 case exports.ParticleOutType.normal:
                 case exports.ParticleOutType.outside:
-                    if (isPointInside(particle.position, container.canvas.size, originPoint, particle.getRadius(), direction)) {
+                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
                         return;
                     }
                     break;
@@ -3428,10 +3389,10 @@
 
     const minVelocity$2 = 0;
     class NoneOutMode {
-        container;
         modes;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [exports.OutMode.none];
         }
         update(particle, direction, _delta, outMode) {
@@ -3444,7 +3405,7 @@
                     (direction === exports.OutModeDirection.top || direction === exports.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) ||
@@ -3470,17 +3431,17 @@
 
     const minVelocity$1 = 0, minDistance = 0, updateVector = Vector.origin;
     class OutOutMode {
-        container;
         modes;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.modes = [exports.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 exports.ParticleOutType.inside: {
                     const { x: vx, y: vy } = particle.velocity;
@@ -3510,7 +3471,7 @@
                     break;
                 }
                 default: {
-                    if (isPointInside(particle.position, container.canvas.size, originPoint, particle.getRadius(), direction)) {
+                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
                         return;
                     }
                     switch (particle.outType) {
@@ -3594,16 +3555,16 @@
     };
     class OutOfCanvasUpdater {
         updaters;
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
             this.updaters = new Map();
         }
         init(particle) {
-            this._addUpdaterIfMissing(particle, exports.OutMode.bounce, container => new BounceOutMode(container));
-            this._addUpdaterIfMissing(particle, exports.OutMode.out, container => new OutOutMode(container));
-            this._addUpdaterIfMissing(particle, exports.OutMode.destroy, container => new DestroyOutMode(container));
-            this._addUpdaterIfMissing(particle, exports.OutMode.none, container => new NoneOutMode(container));
+            this.#addUpdaterIfMissing(particle, exports.OutMode.bounce, container => new BounceOutMode(container));
+            this.#addUpdaterIfMissing(particle, exports.OutMode.out, container => new OutOutMode(container));
+            this.#addUpdaterIfMissing(particle, exports.OutMode.destroy, container => new DestroyOutMode(container));
+            this.#addUpdaterIfMissing(particle, exports.OutMode.none, container => new NoneOutMode(container));
         }
         isEnabled(particle) {
             return !particle.destroyed && !particle.spawning;
@@ -3611,18 +3572,18 @@
         update(particle, delta) {
             const outModes = particle.options.move.outModes;
             particle.justWarped = false;
-            this._updateOutMode(particle, delta, outModes.bottom ?? outModes.default, exports.OutModeDirection.bottom);
-            this._updateOutMode(particle, delta, outModes.left ?? outModes.default, exports.OutModeDirection.left);
-            this._updateOutMode(particle, delta, outModes.right ?? outModes.default, exports.OutModeDirection.right);
-            this._updateOutMode(particle, delta, outModes.top ?? outModes.default, exports.OutModeDirection.top);
+            this.#updateOutMode(particle, delta, outModes.bottom ?? outModes.default, exports.OutModeDirection.bottom);
+            this.#updateOutMode(particle, delta, outModes.left ?? outModes.default, exports.OutModeDirection.left);
+            this.#updateOutMode(particle, delta, outModes.right ?? outModes.default, exports.OutModeDirection.right);
+            this.#updateOutMode(particle, delta, outModes.top ?? outModes.default, exports.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);
             }
@@ -3630,7 +3591,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));
@@ -3640,20 +3601,20 @@
 
     const defaultOpacity$1 = 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);
                 }
@@ -3669,7 +3630,7 @@
                 particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
                 particle.strokeOpacity = getRangeValue(stroke.opacity ?? defaultOpacity$1);
                 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);
                 }
@@ -3701,7 +3662,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));
@@ -3756,27 +3717,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 = exports.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 &&
@@ -3786,12 +3789,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);
@@ -3799,7 +3816,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));
@@ -3808,7 +3825,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),
@@ -4108,7 +4125,7 @@
     }
 
     async function loadClubsSuitShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
         });
@@ -4122,7 +4139,7 @@
     }
 
     async function loadDiamondsSuitShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
         });
@@ -4136,7 +4153,7 @@
     };
 
     async function loadHeartsSuitShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer$1()));
         });
@@ -4150,14 +4167,14 @@
     }
 
     async function loadSpadesSuitShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
         });
     }
 
     async function loadCardSuitsShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await Promise.all([
             loadClubsSuitShape(engine),
             loadDiamondsSuitShape(engine),
@@ -4375,13 +4392,13 @@
 
     class EmittersPlugin {
         id = "emitters";
-        _instancesManager;
+        #instancesManager;
         constructor(instancesManager) {
-            this._instancesManager = instancesManager;
+            this.#instancesManager = instancesManager;
         }
         async getPlugin(container) {
             const { EmittersPluginInstance } = await Promise.resolve().then(function () { return EmittersPluginInstance$1; });
-            return new EmittersPluginInstance(this._instancesManager, container);
+            return new EmittersPluginInstance(this.#instancesManager, container);
         }
         loadOptions(_container, options, source) {
             if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -4434,7 +4451,7 @@
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(async (e) => {
             const instancesManager = await getEmittersInstancesManager(e);
             await addEmittersShapesManager(e);
@@ -4460,13 +4477,13 @@
 
     const defaultFont = '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif', noPadding = 0, firstItem = 0;
     class EmojiDrawer {
-        _emojiShapeDict = new Map();
+        #emojiShapeDict = new Map();
         destroy() {
-            for (const [key, data] of this._emojiShapeDict) {
+            for (const [key, data] of this.#emojiShapeDict) {
                 if (data instanceof ImageBitmap) {
                     data.close();
                 }
-                this._emojiShapeDict.delete(key);
+                this.#emojiShapeDict.delete(key);
             }
         }
         draw(data) {
@@ -4474,7 +4491,7 @@
             if (!key) {
                 return;
             }
-            const image = this._emojiShapeDict.get(key);
+            const image = this.#emojiShapeDict.get(key);
             if (!image) {
                 return;
             }
@@ -4517,7 +4534,7 @@
                     ...shapeData,
                     ...emoji,
                 }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;
-            if (this._emojiShapeDict.has(cacheKey)) {
+            if (this.#emojiShapeDict.has(cacheKey)) {
                 particle.emojiDataKey = cacheKey;
                 return;
             }
@@ -4530,13 +4547,13 @@
             context.textAlign = "center";
             context.fillText(value, fullSize, fullSize);
             const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
-            this._emojiShapeDict.set(cacheKey, image);
+            this.#emojiShapeDict.set(cacheKey, image);
             particle.emojiDataKey = cacheKey;
         }
     }
 
     async function loadEmojiShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(validTypes, () => Promise.resolve(new EmojiDrawer()));
         });
@@ -4562,7 +4579,7 @@
     }
 
     async function loadHeartShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["heart"], () => Promise.resolve(new HeartDrawer()));
         });
@@ -5147,11 +5164,11 @@
 
     const sides$2 = 12;
     class ImageDrawer {
-        _container;
-        _engine;
+        #container;
+        #engine;
         constructor(engine, container) {
-            this._engine = engine;
-            this._container = container;
+            this.#engine = engine;
+            this.#container = container;
         }
         draw(data) {
             const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
@@ -5160,7 +5177,7 @@
             }
             context.globalAlpha = opacity;
             if (image.gif && image.gifData) {
-                drawGif(data, this._container.canvas.render.settings);
+                drawGif(data, this.#container.canvas.render.settings);
             }
             else if (element) {
                 const ratio = image.ratio, pos = {
@@ -5176,17 +5193,17 @@
         }
         async init(container) {
             const options = container.actualOptions;
-            if (!options.preload || !this._engine.loadImage) {
+            if (!options.preload || !this.#engine.loadImage) {
                 return;
             }
             const promises = [];
             for (const imageData of options.preload) {
-                promises.push(this._engine.loadImage(container, imageData));
+                promises.push(this.#engine.loadImage(container, imageData));
             }
             await Promise.all(promises);
         }
         loadShape(particle) {
-            const { _container: container } = this;
+            const container = this.#container;
             if (!particle.shape || !shapeTypes.includes(particle.shape)) {
                 return;
             }
@@ -5194,11 +5211,11 @@
             if (!imageData) {
                 return;
             }
-            const images = this._engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            const images = this.#engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
             if (image) {
                 return;
             }
-            void this.loadImageShape(container, imageData).then(() => {
+            void this.#loadImageShape(container, imageData).then(() => {
                 this.loadShape(particle);
             });
         }
@@ -5206,7 +5223,7 @@
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            const images = this._engine.getImages?.(container), imageData = particle.shapeData;
+            const images = this.#engine.getImages?.(container), imageData = particle.shapeData;
             if (!imageData) {
                 return;
             }
@@ -5251,11 +5268,11 @@
                 particle.shapeClose = imageShape.close;
             })();
         }
-        loadImageShape = async (container, imageShape) => {
-            if (!this._engine.loadImage) {
+        #loadImageShape = async (container, imageShape) => {
+            if (!this.#engine.loadImage) {
                 throw new Error(`Image shape not initialized`);
             }
-            await this._engine.loadImage(container, {
+            await this.#engine.loadImage(container, {
                 gif: imageShape.gif,
                 name: imageShape.name,
                 replaceColor: imageShape.replaceColor,
@@ -5302,13 +5319,13 @@
 
     class ImagePreloaderPlugin {
         id = "image-preloader";
-        _engine;
+        #engine;
         constructor(engine) {
-            this._engine = engine;
+            this.#engine = engine;
         }
         async getPlugin(container) {
             const { ImagePreloaderInstance } = await Promise.resolve().then(function () { return ImagePreloaderInstance$1; });
-            return new ImagePreloaderInstance(this._engine, container);
+            return new ImagePreloaderInstance(this.#engine, container);
         }
         loadOptions(_container, options, source) {
             if (!source?.preload) {
@@ -5387,7 +5404,7 @@
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             addLoadImageToEngine(e);
             e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
@@ -5505,12 +5522,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;
             }
@@ -5549,12 +5566,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));
@@ -5622,7 +5639,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());
         });
@@ -5707,19 +5724,19 @@
     }
 
     async function loadGenericPolygonShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["polygon"], () => Promise.resolve(new PolygonDrawer()));
         });
     }
     async function loadTriangleShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["triangle"], () => Promise.resolve(new TriangleDrawer()));
         });
     }
     async function loadPolygonShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await Promise.all([
             loadGenericPolygonShape(engine),
             loadTriangleShape(engine),
@@ -5844,9 +5861,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;
@@ -5856,7 +5873,7 @@
             };
         }
         init(particle) {
-            initParticle(this._pluginManager, particle);
+            initParticle(this.#pluginManager, particle);
         }
         isEnabled(particle) {
             const roll = particle.options.roll;
@@ -5877,7 +5894,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));
@@ -5943,9 +5960,9 @@
 
     const doublePIDeg = 360;
     class RotateUpdater {
-        container;
+        #container;
         constructor(container) {
-            this.container = container;
+            this.#container = container;
         }
         init(particle) {
             const rotateOptions = particle.options.rotate;
@@ -5977,7 +5994,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();
                 }
@@ -6011,7 +6028,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));
@@ -6035,7 +6052,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()));
         });
@@ -6069,7 +6086,7 @@
     }
 
     async function loadStarShape(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["star"], () => Promise.resolve(new StarDrawer()));
         });
@@ -6140,9 +6157,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;
@@ -6181,7 +6198,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();
                 }
@@ -6206,7 +6223,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));
@@ -6287,9 +6304,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;
@@ -6308,7 +6325,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;
@@ -6323,12 +6340,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));
@@ -6755,7 +6772,7 @@
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBasic(e),
@@ -6828,7 +6845,7 @@
     confetti.init = async () => {
         await initPlugins(tsParticles);
     };
-    confetti.version = "4.0.4";
+    confetti.version = "4.1.0";
     globalThis.confetti = confetti;
 
     const globalObject = globalThis;
@@ -6843,58 +6860,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;
@@ -6907,21 +6924,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;
             }
@@ -6936,21 +6953,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,
@@ -6961,35 +6978,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);
                 }
             });
@@ -7000,64 +7017,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;
@@ -7070,35 +7087,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) {
@@ -7117,22 +7134,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;
         };
     }
 
@@ -7190,53 +7207,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,
@@ -7244,20 +7261,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;
@@ -7268,13 +7285,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 = "";
@@ -7285,27 +7302,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;
@@ -7314,7 +7331,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)");
@@ -7325,12 +7342,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;
@@ -7343,11 +7360,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 = {
@@ -7366,7 +7383,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,
@@ -7379,46 +7396,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)) {
@@ -7431,72 +7448,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;
             }
@@ -7514,24 +7531,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;
             }
@@ -7540,22 +7557,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);
             }
         };
     }
@@ -7628,24 +7645,24 @@
         unbreakable;
         velocity;
         zIndexFactor;
-        _cachedOpacityData = {
+        #cachedOpacityData = {
             fillOpacity: defaultOpacity$2,
             opacity: defaultOpacity$2,
             strokeOpacity: defaultOpacity$2,
         };
-        _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) {
@@ -7654,7 +7671,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);
@@ -7662,12 +7679,12 @@
             for (const updater of container.particleUpdaters) {
                 updater.particleDestroyed?.(this, override);
             }
-            this._container.dispatchEvent(exports.EventType.particleDestroyed, {
+            this.#container.dispatchEvent(exports.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);
         }
@@ -7675,50 +7692,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$2), fillOpacity = this.fillOpacity ?? defaultOpacity$2, strokeOpacity = this.strokeOpacity ?? defaultOpacity$2;
-            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;
@@ -7738,21 +7755,27 @@
                 moveSpeed: 0,
                 sizeAnimationSpeed: 0,
             };
+            this.size = {
+                value: 1,
+                max: 1,
+                min: 1,
+                enable: false,
+            };
             this.outType = exports.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;
@@ -7761,21 +7784,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);
             }
@@ -7783,7 +7805,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,
             };
@@ -7791,8 +7815,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;
@@ -7823,12 +7847,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) {
@@ -7853,13 +7876,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);
@@ -7871,10 +7894,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;
@@ -7890,8 +7913,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 === exports.MoveDirection.inside || moveOptions.direction === exports.MoveDirection.outside) {
                 return res;
             }
@@ -7907,27 +7930,86 @@
             }
             return res;
         };
-        _fixHorizontal = (pos, radius, outMode) => {
+        #fixHorizontal = (pos, radius, outMode) => {
             fixOutMode({
                 outMode,
                 checkModes: [exports.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: [exports.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 === exports.OutMode.bounce;
+            if (direction === exports.OutModeDirection.bottom) {
+                return {
+                    inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
+                    reason: "default",
+                };
+            }
+            if (direction === exports.OutModeDirection.left) {
+                return {
+                    inside: isBounce ? position.x - radius > defaultAngle : position.x + radius > defaultAngle,
+                    reason: "default",
+                };
+            }
+            if (direction === exports.OutModeDirection.right) {
+                return {
+                    inside: isBounce ? position.x + radius < canvasSize.width : position.x - radius < canvasSize.width,
+                    reason: "default",
+                };
+            }
+            if (direction === exports.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;
             }
@@ -7942,8 +8024,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");
             }
@@ -7966,45 +8048,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;
                     }
@@ -8021,29 +8116,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 {
@@ -8064,53 +8159,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 exports.LimitMode.delete: {
@@ -8128,20 +8223,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(exports.EventType.particleAdded, {
+                this.#array.push(particle);
+                this.#insertParticleIntoBucket(particle);
+                this.#nextId++;
+                this.#container.dispatchEvent(exports.EventType.particleAdded, {
                     particle,
                 });
                 return particle;
@@ -8152,25 +8247,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;
                 }
@@ -8180,24 +8275,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) {
@@ -8207,26 +8302,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;
@@ -8260,10 +8355,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) {
@@ -8271,7 +8366,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++;
                 }
@@ -8281,9 +8376,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();
                 }
@@ -8293,51 +8388,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);
@@ -8346,18 +8441,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];
@@ -8374,8 +8469,8 @@
             }
             return start;
         };
-        _initDensityFactor = densityOptions => {
-            const container = this._container;
+        #initDensityFactor = densityOptions => {
+            const container = this.#container;
             if (!densityOptions.enable) {
                 return defaultDensityFactor;
             }
@@ -8385,82 +8480,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(exports.EventType.particleRemoved, {
+            this.#container.dispatchEvent(exports.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;
@@ -8468,10 +8563,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;
                     }
@@ -8485,36 +8580,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;
@@ -8528,7 +8623,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;
@@ -8566,73 +8660,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(exports.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)) {
@@ -8654,13 +8748,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(exports.EventType.containerDestroyed);
         }
         dispatchEvent(type, data) {
-            this._dispatchCallback(type, {
+            this.#dispatchCallback(type, {
                 container: this,
                 data,
             });
@@ -8670,12 +8764,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 = {}) {
@@ -8697,7 +8791,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();
@@ -8705,8 +8799,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;
@@ -8733,11 +8827,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?.();
             }
@@ -8750,7 +8844,7 @@
             this.dispatchEvent(exports.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);
@@ -8759,18 +8853,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(exports.EventType.containerPaused);
         }
@@ -8778,13 +8872,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) {
@@ -8807,10 +8901,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() {
@@ -8821,7 +8915,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?.();
                     }
@@ -8829,20 +8923,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();
@@ -8852,7 +8946,7 @@
             this.particleCreatedPlugins.length = 0;
             this.particleDestroyedPlugins.length = 0;
             this.particlePositionPlugins.length = 0;
-            this._sourceOptions = this._options;
+            this.#sourceOptions = this.#options;
             this.dispatchEvent(exports.EventType.containerStopped);
         }
         updateActualOptions() {
@@ -8864,23 +8958,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;
@@ -8901,10 +8995,10 @@
     });
 
     class BlendPluginInstance {
-        _container;
-        _defaultCompositeValue;
+        #container;
+        #defaultCompositeValue;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         drawParticleCleanup(context, particle) {
             if (!particle.options.blend?.enable) {
@@ -8921,14 +9015,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;
         }
     }
@@ -9071,11 +9165,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();
         }
@@ -9106,7 +9200,7 @@
                 acceleration: getRangeValue(gravityOptions.acceleration),
                 inverse: gravityOptions.inverse,
             };
-            initSpin(this._container, particle);
+            initSpin(this.#container, particle);
         }
         particleDestroyed(particle) {
             const pathGenerator = particle.pathGenerator;
@@ -9117,7 +9211,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);
             }
@@ -9127,18 +9221,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;
             }
@@ -9156,44 +9250,44 @@
     });
 
     class EmittersPluginInstance {
-        container;
-        _instancesManager;
+        #container;
+        #instancesManager;
         constructor(instancesManager, container) {
-            this.container = container;
-            this._instancesManager = instancesManager;
-            this._instancesManager.initContainer(container);
+            this.#instancesManager = instancesManager;
+            this.#container = container;
+            this.#instancesManager.initContainer(container);
         }
         async init() {
-            const emittersOptions = this.container.actualOptions.emitters;
+            const emittersOptions = this.#container.actualOptions.emitters;
             if (isArray(emittersOptions)) {
                 for (const emitterOptions of emittersOptions) {
-                    await this._instancesManager.addEmitter(this.container, emitterOptions);
+                    await this.#instancesManager.addEmitter(this.#container, emitterOptions);
                 }
             }
             else {
-                await this._instancesManager.addEmitter(this.container, emittersOptions);
+                await this.#instancesManager.addEmitter(this.#container, emittersOptions);
             }
         }
         pause() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.pause();
             }
         }
         play() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.play();
             }
         }
         resize() {
-            for (const emitter of this._instancesManager.getArray(this.container)) {
+            for (const emitter of this.#instancesManager.getArray(this.#container)) {
                 emitter.resize();
             }
         }
         stop() {
-            this._instancesManager.clear(this.container);
+            this.#instancesManager.clear(this.#container);
         }
         update(delta) {
-            this._instancesManager.getArray(this.container).forEach(emitter => {
+            this.#instancesManager.getArray(this.#container).forEach(emitter => {
                 emitter.update(delta);
             });
         }
@@ -9226,16 +9320,16 @@
 
     const defaultIndex = 0;
     class EmittersInstancesManager {
-        _containerArrays;
-        _pluginManager;
+        #containerArrays;
+        #pluginManager;
         constructor(pluginManager) {
-            this._containerArrays = new Map();
-            this._pluginManager = pluginManager;
+            this.#containerArrays = new Map();
+            this.#pluginManager = pluginManager;
         }
         async addEmitter(container, options, position) {
             const emitterOptions = new Emitter();
             emitterOptions.load(options);
-            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this._pluginManager, container, (emitter) => {
+            const { EmitterInstance } = await Promise.resolve().then(function () { return EmitterInstance$1; }), emitter = new EmitterInstance(this.#pluginManager, container, (emitter) => {
                 this.removeEmitter(container, emitter);
             }, emitterOptions, position);
             await emitter.init();
@@ -9244,22 +9338,22 @@
         }
         clear(container) {
             this.initContainer(container);
-            this._containerArrays.set(container, []);
+            this.#containerArrays.set(container, []);
         }
         getArray(container) {
             this.initContainer(container);
-            let array = this._containerArrays.get(container);
+            let array = this.#containerArrays.get(container);
             if (!array) {
                 array = [];
-                this._containerArrays.set(container, array);
+                this.#containerArrays.set(container, array);
             }
             return array;
         }
         initContainer(container) {
-            if (this._containerArrays.has(container)) {
+            if (this.#containerArrays.has(container)) {
                 return;
             }
-            this._containerArrays.set(container, []);
+            this.#containerArrays.set(container, []);
             container.getEmitter = (idxOrName) => {
                 const array = this.getArray(container);
                 return idxOrName === undefined || isNumber(idxOrName)
@@ -9300,14 +9394,14 @@
     });
 
     class ImagePreloaderInstance {
-        _container;
-        _engine;
+        #container;
+        #engine;
         constructor(engine, container) {
-            this._engine = engine;
-            this._container = container;
+            this.#engine = engine;
+            this.#container = container;
         }
         destroy() {
-            this._engine.images?.delete(this._container);
+            this.#engine.images?.delete(this.#container);
         }
     }
 
@@ -9318,12 +9412,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;
@@ -9333,10 +9427,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();
                     }
@@ -9347,8 +9441,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;
             }
@@ -9400,34 +9494,34 @@
         spawnStrokeColor;
         spawnStrokeOpacity;
         spawnStrokeWidth;
-        _container;
-        _currentDuration;
-        _currentEmitDelay;
-        _currentSpawnDelay;
-        _duration;
-        _emitDelay;
-        _firstSpawn;
-        _immortal;
-        _initialPosition;
-        _lifeCount;
-        _mutationObserver;
-        _particlesOptions;
-        _paused;
-        _pluginManager;
-        _removeCallback;
-        _resizeObserver;
-        _shape;
-        _size;
-        _spawnDelay;
-        _startParticlesAdded;
+        #container;
+        #currentDuration;
+        #currentEmitDelay;
+        #currentSpawnDelay;
+        #duration;
+        #emitDelay;
+        #firstSpawn;
+        #immortal;
+        #initialPosition;
+        #lifeCount;
+        #mutationObserver;
+        #particlesOptions;
+        #paused;
+        #pluginManager;
+        #removeCallback;
+        #resizeObserver;
+        #shape;
+        #size;
+        #spawnDelay;
+        #startParticlesAdded;
         constructor(pluginManager, container, removeCallback, options, position) {
-            this._pluginManager = pluginManager;
-            this._container = container;
-            this._removeCallback = removeCallback;
-            this._currentDuration = 0;
-            this._currentEmitDelay = 0;
-            this._currentSpawnDelay = 0;
-            this._initialPosition = position;
+            this.#pluginManager = pluginManager;
+            this.#container = container;
+            this.#removeCallback = removeCallback;
+            this.#currentDuration = 0;
+            this.#currentEmitDelay = 0;
+            this.#currentSpawnDelay = 0;
+            this.#initialPosition = position;
             if (options instanceof Emitter) {
                 this.options = options;
             }
@@ -9435,159 +9529,159 @@
                 this.options = new Emitter();
                 this.options.load(options);
             }
-            this._spawnDelay = container.retina.reduceFactor
+            this.#spawnDelay = container.retina.reduceFactor
                 ? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
                     container.retina.reduceFactor
                 : Infinity;
-            this.position = this._initialPosition ?? this._calcPosition();
+            this.position = this.#initialPosition ?? this.#calcPosition();
             this.name = this.options.name;
             this.fill = this.options.fill;
-            this._firstSpawn = !this.options.life.wait;
-            this._startParticlesAdded = false;
+            this.#firstSpawn = !this.options.life.wait;
+            this.#startParticlesAdded = false;
             const particlesOptions = deepExtend({}, this.options.particles);
             particlesOptions.move ??= {};
             particlesOptions.move.direction ??= this.options.direction;
             if (this.options.spawn.fill?.color) {
-                this.spawnFillColor = rangeColorToHsl(this._pluginManager, this.options.spawn.fill.color);
+                this.spawnFillColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.fill.color);
             }
             if (this.options.spawn.stroke?.color) {
-                this.spawnStrokeColor = rangeColorToHsl(this._pluginManager, this.options.spawn.stroke.color);
-            }
-            this._paused = !this.options.autoPlay;
-            this._particlesOptions = particlesOptions;
-            this._size = this._calcSize();
-            this.size = getSize(this._size, this._container.canvas.size);
-            this._lifeCount = this.options.life.count ?? defaultLifeCount;
-            this._immortal = this._lifeCount <= minLifeCount;
+                this.spawnStrokeColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.stroke.color);
+            }
+            this.#paused = !this.options.autoPlay;
+            this.#particlesOptions = particlesOptions;
+            this.#size = this.#calcSize();
+            this.size = getSize(this.#size, this.#container.canvas.size);
+            this.#lifeCount = this.options.life.count ?? defaultLifeCount;
+            this.#immortal = this.#lifeCount <= minLifeCount;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
-                    this._mutationObserver = new MutationObserver(() => {
+                    this.#mutationObserver = new MutationObserver(() => {
                         this.resize();
                     });
-                    this._resizeObserver = new ResizeObserver(() => {
+                    this.#resizeObserver = new ResizeObserver(() => {
                         this.resize();
                     });
-                    this._mutationObserver.observe(element, {
+                    this.#mutationObserver.observe(element, {
                         attributes: true,
                         attributeFilter: ["style", "width", "height"],
                     });
-                    this._resizeObserver.observe(element);
+                    this.#resizeObserver.observe(element);
                 }
             }
-            const shapeOptions = this.options.shape, shapeGenerator = this._pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
+            const shapeOptions = this.options.shape, shapeGenerator = this.#pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
             if (shapeGenerator) {
-                this._shape = shapeGenerator.generate(this._container, this.position, this.size, this.fill, shapeOptions.options);
+                this.#shape = shapeGenerator.generate(this.#container, this.position, this.size, this.fill, shapeOptions.options);
             }
-            this._container.dispatchEvent("emitterCreated", {
+            this.#container.dispatchEvent("emitterCreated", {
                 emitter: this,
             });
             this.play();
         }
         externalPause() {
-            this._paused = true;
+            this.#paused = true;
             this.pause();
         }
         externalPlay() {
-            this._paused = false;
+            this.#paused = false;
             this.play();
         }
         async init() {
-            await this._shape?.init();
+            await this.#shape?.init();
         }
         pause() {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            delete this._emitDelay;
+            this.#emitDelay = undefined;
         }
         play() {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            if (!((this._lifeCount > minLifeCount || this._immortal || !this.options.life.count) &&
-                (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? defaultSpawnDelay)))) {
+            if (!((this.#lifeCount > minLifeCount || this.#immortal || !this.options.life.count) &&
+                (this.#firstSpawn || this.#currentSpawnDelay >= (this.#spawnDelay ?? defaultSpawnDelay)))) {
                 return;
             }
-            const container = this._container;
-            if (this._emitDelay === undefined) {
+            const container = this.#container;
+            if (this.#emitDelay === undefined) {
                 const delay = getRangeValue(this.options.rate.delay);
-                this._emitDelay = container.retina.reduceFactor
+                this.#emitDelay = container.retina.reduceFactor
                     ? (delay * millisecondsToSeconds) / container.retina.reduceFactor
                     : Infinity;
             }
-            if (this._lifeCount > minLifeCount || this._immortal) {
-                this._prepareToDie();
+            if (this.#lifeCount > minLifeCount || this.#immortal) {
+                this.#prepareToDie();
             }
         }
         resize() {
-            const initialPosition = this._initialPosition, container = this._container;
+            const initialPosition = this.#initialPosition, container = this.#container;
             this.position =
                 initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
                     ? initialPosition
-                    : this._calcPosition();
-            this._size = this._calcSize();
-            this.size = getSize(this._size, container.canvas.size);
-            this._shape?.resize(this.position, this.size);
+                    : this.#calcPosition();
+            this.#size = this.#calcSize();
+            this.size = getSize(this.#size, container.canvas.size);
+            this.#shape?.resize(this.position, this.size);
         }
         update(delta) {
-            if (this._paused) {
+            if (this.#paused) {
                 return;
             }
-            const container = this._container;
-            if (this._firstSpawn) {
-                this._firstSpawn = false;
-                this._currentSpawnDelay = this._spawnDelay ?? defaultSpawnDelay;
-                this._currentEmitDelay = this._emitDelay ?? defaultEmitDelay;
+            const container = this.#container;
+            if (this.#firstSpawn) {
+                this.#firstSpawn = false;
+                this.#currentSpawnDelay = this.#spawnDelay ?? defaultSpawnDelay;
+                this.#currentEmitDelay = this.#emitDelay ?? defaultEmitDelay;
             }
-            if (!this._startParticlesAdded) {
-                this._startParticlesAdded = true;
-                this._emitParticles(this.options.startCount);
+            if (!this.#startParticlesAdded) {
+                this.#startParticlesAdded = true;
+                this.#emitParticles(this.options.startCount);
             }
-            if (this._duration !== undefined) {
-                this._currentDuration += delta.value;
-                if (this._currentDuration >= this._duration) {
+            if (this.#duration !== undefined) {
+                this.#currentDuration += delta.value;
+                if (this.#currentDuration >= this.#duration) {
                     this.pause();
-                    if (this._spawnDelay !== undefined) {
-                        delete this._spawnDelay;
+                    if (this.#spawnDelay !== undefined) {
+                        this.#spawnDelay = undefined;
                     }
-                    if (!this._immortal) {
-                        this._lifeCount--;
+                    if (!this.#immortal) {
+                        this.#lifeCount--;
                     }
-                    if (this._lifeCount > minLifeCount || this._immortal) {
-                        this.position = this._calcPosition();
-                        this._shape?.resize(this.position, this.size);
-                        this._spawnDelay = container.retina.reduceFactor
+                    if (this.#lifeCount > minLifeCount || this.#immortal) {
+                        this.position = this.#calcPosition();
+                        this.#shape?.resize(this.position, this.size);
+                        this.#spawnDelay = container.retina.reduceFactor
                             ? (getRangeValue(this.options.life.delay ?? defaultLifeDelay) * millisecondsToSeconds) /
                                 container.retina.reduceFactor
                             : Infinity;
                     }
                     else {
-                        this._destroy();
+                        this.#destroy();
                     }
-                    this._currentDuration -= this._duration;
-                    delete this._duration;
+                    this.#currentDuration -= this.#duration;
+                    this.#duration = undefined;
                 }
             }
-            if (this._spawnDelay !== undefined) {
-                this._currentSpawnDelay += delta.value;
-                if (this._currentSpawnDelay >= this._spawnDelay) {
-                    this._container.dispatchEvent("emitterPlay");
+            if (this.#spawnDelay !== undefined) {
+                this.#currentSpawnDelay += delta.value;
+                if (this.#currentSpawnDelay >= this.#spawnDelay) {
+                    this.#container.dispatchEvent("emitterPlay");
                     this.play();
-                    this._currentSpawnDelay -= this._spawnDelay;
-                    delete this._spawnDelay;
+                    this.#currentSpawnDelay -= this.#spawnDelay;
+                    this.#spawnDelay = undefined;
                 }
             }
-            if (this._emitDelay !== undefined) {
-                this._currentEmitDelay += delta.value;
-                if (this._currentEmitDelay >= this._emitDelay) {
-                    this._emit();
-                    this._currentEmitDelay -= this._emitDelay;
+            if (this.#emitDelay !== undefined) {
+                this.#currentEmitDelay += delta.value;
+                if (this.#currentEmitDelay >= this.#emitDelay) {
+                    this.#emit();
+                    this.#currentEmitDelay -= this.#emitDelay;
                 }
             }
         }
-        _calcPosition() {
-            const container = this._container;
+        #calcPosition() {
+            const container = this.#container;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
@@ -9603,8 +9697,8 @@
                 position: this.options.position,
             });
         }
-        _calcSize() {
-            const container = this._container;
+        #calcSize() {
+            const container = this.#container;
             if (this.options.domId) {
                 const element = safeDocument().getElementById(this.options.domId);
                 if (element) {
@@ -9627,32 +9721,32 @@
                     return size;
                 })());
         }
-        _destroy = () => {
-            this._mutationObserver?.disconnect();
-            this._mutationObserver = undefined;
-            this._resizeObserver?.disconnect();
-            this._resizeObserver = undefined;
-            this._removeCallback(this);
-            this._container.dispatchEvent("emitterDestroyed", {
+        #destroy = () => {
+            this.#mutationObserver?.disconnect();
+            this.#mutationObserver = undefined;
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = undefined;
+            this.#removeCallback(this);
+            this.#container.dispatchEvent("emitterDestroyed", {
                 emitter: this,
             });
         };
-        _emit() {
-            if (this._paused) {
+        #emit() {
+            if (this.#paused) {
                 return;
             }
             const quantity = getRangeValue(this.options.rate.quantity);
-            this._emitParticles(quantity);
+            this.#emitParticles(quantity);
         }
-        _emitParticles(quantity) {
-            const singleParticlesOptions = (itemFromSingleOrMultiple(this._particlesOptions) ??
+        #emitParticles(quantity) {
+            const singleParticlesOptions = (itemFromSingleOrMultiple(this.#particlesOptions) ??
                 {}), fillHslAnimation = this.options.spawn.fill?.color?.animation, fillEnabled = this.options.spawn.fill?.enable ?? !!this.options.spawn.fill?.color, fillOpacity = this.options.spawn.fill?.opacity === undefined
                 ? defaultOpacity$2
                 : getRangeValue(this.options.spawn.fill.opacity), strokeHslAnimation = this.options.spawn.stroke?.color?.animation, strokeOpacity = this.options.spawn.stroke?.opacity === undefined
                 ? defaultOpacity$2
                 : getRangeValue(this.options.spawn.stroke.opacity), strokeWidth = this.options.spawn.stroke?.width === undefined
                 ? defaultStrokeWidth
-                : getRangeValue(this.options.spawn.stroke.width), reduceFactor = this._container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this._shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
+                : getRangeValue(this.options.spawn.stroke.width), reduceFactor = this.#container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this.#shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
             for (let i = 0; i < quantity * reduceFactor; i++) {
                 const particlesOptions = needsCopy
                     ? deepExtend({}, singleParticlesOptions)
@@ -9663,23 +9757,23 @@
                 this.spawnStrokeWidth = strokeWidth;
                 if (this.spawnFillColor) {
                     if (fillHslAnimation && maxValues) {
-                        this.spawnFillColor.h = this._setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
-                        this.spawnFillColor.s = this._setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
-                        this.spawnFillColor.l = this._setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
+                        this.spawnFillColor.h = this.#setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
+                        this.spawnFillColor.s = this.#setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
+                        this.spawnFillColor.l = this.#setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
                     }
                     setParticlesOptionsFillColor(particlesOptions, this.spawnFillColor, this.spawnFillOpacity, this.spawnFillEnabled);
                 }
                 if (this.spawnStrokeColor) {
                     if (strokeHslAnimation && maxValues) {
-                        this.spawnStrokeColor.h = this._setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
-                        this.spawnStrokeColor.s = this._setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
-                        this.spawnStrokeColor.l = this._setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
+                        this.spawnStrokeColor.h = this.#setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
+                        this.spawnStrokeColor.s = this.#setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
+                        this.spawnStrokeColor.l = this.#setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
                     }
                     setParticlesOptionsStrokeColor(particlesOptions, this.spawnStrokeColor, this.spawnStrokeOpacity, this.spawnStrokeWidth);
                 }
                 let position = this.position;
-                if (this._shape) {
-                    const shapePosData = this._shape.randomPosition();
+                if (this.#shape) {
+                    const shapePosData = this.#shape.randomPosition();
                     if (shapePosData) {
                         position = shapePosData.position;
                         const replaceData = shapeOptions.replace;
@@ -9692,21 +9786,21 @@
                     }
                 }
                 if (position) {
-                    this._container.particles.addParticle(position, particlesOptions);
+                    this.#container.particles.addParticle(position, particlesOptions);
                 }
             }
         }
-        _prepareToDie = () => {
-            if (this._paused) {
+        #prepareToDie = () => {
+            if (this.#paused) {
                 return;
             }
             const duration = this.options.life.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
-            if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
-                this._duration = duration * millisecondsToSeconds;
+            if ((this.#lifeCount > minLifeCount || this.#immortal) && duration !== undefined && duration > minDuration) {
+                this.#duration = duration * millisecondsToSeconds;
             }
         };
-        _setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
-            const container = this._container;
+        #setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+            const container = this.#container;
             if (!animation.enable) {
                 return initValue;
             }
@@ -9737,8 +9831,6 @@
     exports.MoveCenter = MoveCenter;
     exports.MoveGravity = MoveGravity;
     exports.MovePath = MovePath;
-    exports.Opacity = Opacity;
-    exports.OpacityAnimation = OpacityAnimation;
     exports.Options = Options;
     exports.OptionsColor = OptionsColor;
     exports.OutModes = OutModes;
@@ -9754,8 +9846,6 @@
     exports.Rectangle = Rectangle;
     exports.ResizeEvent = ResizeEvent;
     exports.Shape = Shape;
-    exports.Size = Size;
-    exports.SizeAnimation = SizeAnimation;
     exports.Spin = Spin;
     exports.Stroke = Stroke;
     exports.ValueWithRandom = ValueWithRandom;