@tsparticles/basic 4.0.0-alpha.4 → 4.0.0-alpha.8

package/12.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/191.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 191.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[191],{7191(a,s,e){function n(a){a.checkVersion("4.0.0-alpha.4"),a.register((async a=>{const{HslColorManager:s}=await e.e(306).then(e.bind(e,3306));a.addColorManager(new s)}))}e.d(s,{loadHslColorPlugin:()=>n})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[191],{7191(a,s,n){async function e(a){a.checkVersion("4.0.0-alpha.8"),await a.register((async a=>{const{HslColorManager:s}=await n.e(306).then(n.bind(n,3306));a.addColorManager(new s)}))}n.d(s,{loadHslColorPlugin:()=>e})}}]);

package/191.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/201.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 201.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[201],{2201(e,a,s){function t(e){e.checkVersion("4.0.0-alpha.4"),e.register((e=>{e.addMover("base",(async()=>{const{BaseMover:e}=await s.e(505).then(s.bind(s,5505));return new e}))}))}s.d(a,{loadBaseMover:()=>t})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[201],{2201(a,e,s){async function t(a){a.checkVersion("4.0.0-alpha.8"),await a.register((a=>{a.addMover("base",(async()=>{const{BaseMover:a}=await s.e(505).then(s.bind(s,5505));return new a}))}))}s.d(e,{loadBaseMover:()=>t})}}]);

package/201.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/209.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 209.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[209],{3209(t,i,e){e.d(i,{Container:()=>M});var s=e(7879),n=e(1607),a=e(6093),r=e(5721),o=e(5206);function h(t,i,e){const s=i[e];void 0!==s&&(t[e]=(t[e]??n.zs)*s)}function c(t,i,e=!1){if(!i)return;const s=t.style,n=new Set;for(let t=0;t<s.length;t++){const i=s.item(t);i&&n.add(i)}for(let t=0;t<i.length;t++){const e=i.item(t);e&&n.add(e)}for(const t of n){const n=i.getPropertyValue(t);n?s.setProperty(t,n,e?"important":""):s.removeProperty(t)}}class l{constructor(t,i){this.container=t,this._reusableColorStyles={},this._reusablePluginColors=[void 0,void 0],this._reusableTransform={},this._applyPostDrawUpdaters=t=>{for(const i of this._postDrawUpdaters)i.afterDraw?.(t)},this._applyPreDrawUpdaters=(t,i,e,s,n,a)=>{for(const r of this._preDrawUpdaters){if(r.getColorStyles){const{fill:a,stroke:o}=r.getColorStyles(i,t,e,s);a&&(n.fill=a),o&&(n.stroke=o)}if(r.getTransformValues){const t=r.getTransformValues(i);for(const i in t)h(a,t,i)}r.beforeDraw?.(i)}},this._applyResizePlugins=()=>{for(const t of this._resizePlugins)t.resize?.()},this._getPluginParticleColors=t=>{let i,e;for(const s of this._colorPlugins)if(!i&&s.particleFillColor&&(i=(0,o.R5)(this._engine,s.particleFillColor(t))),!e&&s.particleStrokeColor&&(e=(0,o.R5)(this._engine,s.particleStrokeColor(t))),i&&e)break;return this._reusablePluginColors[0]=i,this._reusablePluginColors[1]=e,this._reusablePluginColors},this._initStyle=()=>{const t=this.element,i=this.container.actualOptions;if(t){this._fullScreen?this._setFullScreenStyle():this._resetOriginalStyle();for(const e in i.style){if(!e||!Object.hasOwn(i.style,e))continue;const s=i.style[e];s&&t.style.setProperty(e,s,"important")}}},this._repairStyle=()=>{const t=this.element;if(!t)return;this._safeMutationObserver((t=>{t.disconnect()})),this._initStyle(),this.initBackground();const i=this._pointerEvents;t.style.pointerEvents=i,t.setAttribute("pointer-events",i),this._safeMutationObserver((i=>{t instanceof Node&&i.observe(t,{attributes:!0})}))},this._resetOriginalStyle=()=>{const t=this.element,i=this._originalStyle;t&&i&&c(t,i,!0)},this._safeMutationObserver=t=>{this._mutationObserver&&t(this._mutationObserver)},this._setFullScreenStyle=()=>{const t=this.element;t&&c(t,(0,r.hJ)(this.container.actualOptions.fullScreen.zIndex),!0)},this._engine=i,this._standardSize={height:0,width:0};const e=t.retina.pixelRatio,s=this._standardSize;this.size={height:s.height*e,width:s.width*e},this._context=null,this._generated=!1,this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[],this._pointerEvents="none"}get _fullScreen(){return this.container.actualOptions.fullScreen.enable}canvasClear(){this.container.actualOptions.clear&&this.draw((t=>{(0,a.IU)(t,this.size)}))}clear(){let t=!1;for(const i of this.container.plugins)!t&&i.canvasClear&&(t=i.canvasClear());t||this.canvasClear()}clearDrawPlugin(t,i){this.draw((e=>{(0,a.l7)(e,t,i)}))}destroy(){if(this.stop(),this._generated){const t=this.element;t?.remove(),this.element=void 0}else this._resetOriginalStyle();this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}draw(t){const i=this._context;if(i)return t(i)}drawParticle(t,i){if(t.spawning||t.destroyed)return;const e=t.getRadius();if(e<=n.w2)return;const s=t.getFillColor(),r=t.getStrokeColor()??s;let[h,c]=this._getPluginParticleColors(t);if(h??=s,c??=r,!h&&!c)return;const l=this.container,d=t.options.zIndex,p=n.RV-t.zIndexFactor,{opacity:u,strokeOpacity:f}=t.getOpacity(),_=this._reusableTransform,g=this._reusableColorStyles,y=h?(0,o.LC)(h,l.hdr,u):void 0,m=c?(0,o.LC)(c,l.hdr,f):y;_.a=_.b=_.c=_.d=void 0,g.fill=y,g.stroke=m,this.draw((s=>{this._applyPreDrawUpdaters(s,t,e,u,g,_),(0,a.p0)({container:l,context:s,particle:t,delta:i,colorStyles:g,radius:e*p**d.sizeRate,opacity:u,transform:_})})),this._applyPostDrawUpdaters(t)}drawParticlePlugin(t,i,e){this.draw((s=>{(0,a.Wb)(s,t,i,e)}))}drawParticles(t){const{particles:i,plugins:e}=this.container;this.clear(),i.update(t);for(const i of e.values())this.drawPlugin(i,t);this.draw((()=>{i.drawParticles(t)}));for(const i of e.values())this.clearDrawPlugin(i,t)}drawPlugin(t,i){this.draw((e=>{(0,a.e_)(e,t,i)}))}init(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=(0,r.tG)((t=>{for(const i of t)"attributes"===i.type&&"style"===i.attributeName&&this._repairStyle()})),this.resize(),this._initStyle(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})})),this.initUpdaters(),this.initPlugins(),this.paint()}initBackground(){const{container:t}=this,i=t.actualOptions.background,e=this.element;if(!e)return;const s=e.style,n=(0,o.BN)(this._engine,i.color);s.backgroundColor=n?(0,o.xx)(n,t.hdr,i.opacity):"",s.backgroundImage=i.image||"",s.backgroundPosition=i.position||"",s.backgroundRepeat=i.repeat||"",s.backgroundSize=i.size||""}initPlugins(){this._resizePlugins=[];for(const t of this.container.plugins)t.resize&&this._resizePlugins.push(t),(t.particleFillColor??t.particleStrokeColor)&&this._colorPlugins.push(t)}initUpdaters(){this._preDrawUpdaters=[],this._postDrawUpdaters=[];for(const t of this.container.particles.updaters)t.afterDraw&&this._postDrawUpdaters.push(t),(t.getColorStyles??t.getTransformValues??t.beforeDraw)&&this._preDrawUpdaters.push(t)}loadCanvas(t){this._generated&&this.element&&this.element.remove();const i=this.container;this._generated=n.eb in t.dataset?"true"===t.dataset[n.eb]:this._generated,this.element=t,this.element.ariaHidden="true",this._originalStyle=(0,r.td)(this.element.style);const e=this._standardSize;e.height=t.offsetHeight,e.width=t.offsetWidth;const s=this.container.retina.pixelRatio,a=this.size;t.height=a.height=e.height*s,t.width=a.width=e.width*s;const o=(0,r.lV)("(color-gamut: p3)");this._context=this.element.getContext("2d",{alpha:!0,colorSpace:o?.matches&&i.hdr?"display-p3":"srgb",desynchronized:!0,willReadFrequently:!1}),this._safeMutationObserver((t=>{t.disconnect()})),i.retina.init(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})}))}paint(){let t=!1;for(const i of this.container.plugins){if(t)break;t=i.canvasPaint?.()??!1}t||this.paintBase()}paintBase(t){this.draw((i=>{(0,a.Sn)(i,this.size,t)}))}paintImage(t,i){this.draw((e=>{(0,a.Md)(e,this.size,t,i)}))}resize(){if(!this.element)return!1;const t=this.container,i=t.canvas._standardSize,e={width:this.element.offsetWidth,height:this.element.offsetHeight},s=t.retina.pixelRatio,n={width:e.width*s,height:e.height*s};if(e.height===i.height&&e.width===i.width&&n.height===this.element.height&&n.width===this.element.width)return!1;const a={...i};i.height=e.height,i.width=e.width;const r=this.size;return this.element.width=r.width=n.width,this.element.height=r.height=n.height,this.container.started&&t.particles.setResizeFactor({width:i.width/a.width,height:i.height/a.height}),!0}setPointerEvents(t){this.element&&(this._pointerEvents=t,this._repairStyle())}stop(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=void 0,this.draw((t=>{(0,a.IU)(t,this.size)}))}async windowResize(){if(!this.element||!this.resize())return;const t=this.container,i=t.updateActualOptions();t.particles.setDensity(),this._applyResizePlugins(),i&&await t.refresh()}}class d{constructor(t){this.container=t,this._handleVisibilityChange=()=>{const t=this.container;t.actualOptions.pauseOnBlur&&((0,r.T5)().hidden?(t.pageHidden=!0,t.pause()):(t.pageHidden=!1,t.animationStatus?t.play(!0):t.draw(!0)))},this._handleWindowResize=()=>{this._resizeTimeout&&(clearTimeout(this._resizeTimeout),delete this._resizeTimeout);const t=async()=>{const t=this.container.canvas;await t.windowResize()};this._resizeTimeout=setTimeout((()=>{t()}),this.container.actualOptions.resize.delay*n.Xu)},this._manageListeners=t=>{const i=this._handlers;this._manageResize(t),(0,r.Kp)(document,n.nK,i.visibilityChange,t,!1)},this._manageResize=t=>{const i=this._handlers,e=this.container;if(!e.actualOptions.resize.enable)return;if("undefined"==typeof ResizeObserver)return void(0,r.Kp)(globalThis,n.NF,i.resize,t);const s=e.canvas.element;this._resizeObserver&&!t?(s&&this._resizeObserver.unobserve(s),this._resizeObserver.disconnect(),delete this._resizeObserver):!this._resizeObserver&&t&&s&&(this._resizeObserver=new ResizeObserver((t=>{t.find((t=>t.target===s))&&this._handleWindowResize()})),this._resizeObserver.observe(s))},this._handlers={visibilityChange:()=>{this._handleVisibilityChange()},resize:()=>{this._handleWindowResize()}}}addListeners(){this._manageListeners(!0)}removeListeners(){this._manageListeners(!1)}}var p=e(625),u=e(7718),f=e(6284),_=e(918),g=e(9508),y=e(8991),m=e(9239),v=e(4017);function w(t){if(!(0,r.hn)(t.outMode,t.checkModes))return;const i=t.radius*n.gd;t.coord>t.maxCoord-i?t.setCb(-t.radius):t.coord<i&&t.setCb(t.radius)}class b{constructor(t,i){this.container=i,this._cachedOpacityData={opacity:n.hv,strokeOpacity:n.hv},this._cachedPosition=_.p.origin,this._cachedRotateData={sin:0,cos:0},this._cachedTransform={a:1,b:0,c:0,d:1},this._calcPosition=(t,i)=>{let e=n.rq,a=t?_.p.create(t.x,t.y,i):void 0;const r=this.container,o=Array.from(r.plugins),h=this.options.move.outModes,c=this.getRadius(),l=r.canvas.size,d=new AbortController,{signal:p}=d;for(;!p.aborted;){for(const t of o){const e=t.particlePosition?.(a,this);if(e)return _.p.create(e.x,e.y,i)}const t=(0,s.Nx)({size:l,position:a}),r=_.p.create(t.x,t.y,i);this._fixHorizontal(r,c,h.left??h.default),this._fixHorizontal(r,c,h.right??h.default),this._fixVertical(r,c,h.top??h.default),this._fixVertical(r,c,h.bottom??h.default);let d=!0;for(const t of o)if(d=t.checkParticlePosition?.(this,r,e)??!0,!d)break;if(d)return r;e+=n.Eo,a=void 0}return a},this._calculateVelocity=()=>{const t=(0,s.$m)(this.direction).copy(),i=this.options.move;if(i.direction===g.F.inside||i.direction===g.F.outside)return t;const e=(0,s.pu)((0,s.VG)(i.angle.value)),a=(0,s.pu)((0,s.VG)(i.angle.offset)),r={left:a-e*n.MX,right:a+e*n.MX};return i.straight||(t.angle+=(0,s.vE)((0,s.DT)(r.left,r.right))),i.random&&"number"==typeof i.speed&&(t.length*=(0,s.G0)()),t},this._fixHorizontal=(t,i,e)=>{w({outMode:e,checkModes:[y.Y.bounce],coord:t.x,maxCoord:this.container.canvas.size.width,setCb:i=>t.x+=i,radius:i})},this._fixVertical=(t,i,e)=>{w({outMode:e,checkModes:[y.Y.bounce],coord:t.y,maxCoord:this.container.canvas.size.height,setCb:i=>t.y+=i,radius:i})},this._getRollColor=t=>{if(!t||!this.roll||!this.backColor&&!this.roll.alter)return t;const i=this.roll.horizontal&&this.roll.vertical?n.gd*n.l:n.l,e=this.roll.horizontal?Math.PI*n.MX:n.dv;return Math.floor((this.roll.angle+e)/(Math.PI/i))%n.gd?this.backColor?this.backColor:this.roll.alter?(0,a.yx)(t,this.roll.alter.type,this.roll.alter.value):t:t},this._initPosition=t=>{const i=this.container,e=(0,s.VG)(this.options.zIndex.value),a=this._calcPosition(t,(0,s.qE)(e,n.X_,i.zLayers));if(!a)throw new Error("a valid position cannot be found for particle");this.position=a,this.initialPosition=this.position.copy();const o=i.canvas.size;switch(this.moveCenter={...(0,r.E9)(this.options.move.center,o),radius:this.options.move.center.radius,mode:this.options.move.center.mode},this.direction=(0,s.JY)(this.options.move.direction,this.position,this.moveCenter),this.options.move.direction){case g.F.inside:this.outType=m.x.inside;break;case g.F.outside:this.outType=m.x.outside}this.offset=_.M.origin},this._engine=t}destroy(t){if(this.unbreakable||this.destroyed)return;this.destroyed=!0,this.bubble.inRange=!1,this.slow.inRange=!1;const i=this.container,e=this.pathGenerator,s=this.shape?i.shapeDrawers.get(this.shape):void 0;s?.particleDestroy?.(this);for(const e of i.plugins)e.particleDestroyed?.(this,t);for(const e of i.particles.updaters)e.particleDestroyed?.(this,t);e?.reset(this),this._engine.dispatchEvent(p.B.particleDestroyed,{container:this.container,data:{particle:this}})}draw(t){const i=this.container,e=i.canvas;for(const s of i.plugins)e.drawParticlePlugin(s,this,t);e.drawParticle(this,t)}getAngle(){return this.rotation+(this.pathRotation?this.velocity.angle:n.tA)}getFillColor(){return this._getRollColor(this.bubble.color??(0,o.O_)(this.color))}getMass(){return this.getRadius()**n.dm*Math.PI*n.MX}getOpacity(){const t=this.options.zIndex,i=(n.RV-this.zIndexFactor)**t.opacityRate,e=this.bubble.opacity??(0,s.VG)(this.opacity?.value??n.hv),a=this.strokeOpacity??e;return this._cachedOpacityData.opacity=e*i,this._cachedOpacityData.strokeOpacity=a*i,this._cachedOpacityData}getPosition(){return this._cachedPosition.x=this.position.x+this.offset.x,this._cachedPosition.y=this.position.y+this.offset.y,this._cachedPosition.z=this.position.z,this._cachedPosition}getRadius(){return this.bubble.radius??this.size.value}getRotateData(){const t=this.getAngle();return this._cachedRotateData.sin=Math.sin(t),this._cachedRotateData.cos=Math.cos(t),this._cachedRotateData}getStrokeColor(){return this._getRollColor(this.bubble.color??(0,o.O_)(this.strokeColor))}getTransformData(t){const i=this.getRotateData(),e=this.isRotating;return this._cachedTransform.a=i.cos*(t.a??n.Ug.a),this._cachedTransform.b=e?i.sin*(t.b??n.D_):t.b??n.Ug.b,this._cachedTransform.c=e?-i.sin*(t.c??n.D_):t.c??n.Ug.c,this._cachedTransform.d=i.cos*(t.d??n.Ug.d),this._cachedTransform}init(t,i,e,a){const o=this.container;this.id=t,this.group=a,this.effectClose=!0,this.effectFill=!0,this.shapeClose=!0,this.shapeFill=!0,this.pathRotation=!1,this.lastPathTime=0,this.destroyed=!1,this.unbreakable=!1,this.isRotating=!1,this.rotation=0,this.misplaced=!1,this.retina={maxDistance:{}},this.outType=m.x.normal,this.ignoresResizeRatio=!0;const h=o.retina.pixelRatio,c=o.actualOptions,l=(0,v.y)(this._engine,o,c.particles),d=l.reduceDuplicates,p=l.effect.type,u=l.shape.type;this.effect=(0,r.TA)(p,this.id,d),this.shape=(0,r.TA)(u,this.id,d);const f=l.effect,_=l.shape;if(e){if(e.effect?.type){const t=e.effect.type,i=(0,r.TA)(t,this.id,d);i&&(this.effect=i,f.load(e.effect))}if(e.shape?.type){const t=e.shape.type,i=(0,r.TA)(t,this.id,d);i&&(this.shape=i,_.load(e.shape))}}if(this.effect===n.mR){const t=[...this.container.effectDrawers.keys()];this.effect=t[Math.floor((0,s.G0)()*t.length)]}if(this.shape===n.mR){const t=[...this.container.shapeDrawers.keys()];this.shape=t[Math.floor((0,s.G0)()*t.length)]}this.effectData=this.effect?function(t,i,e,s){const n=i.options[t];return(0,r.zw)({close:i.close,fill:i.fill},(0,r.TA)(n,e,s))}(this.effect,f,this.id,d):void 0,this.shapeData=this.shape?function(t,i,e,s){const n=i.options[t];return(0,r.zw)({close:i.close,fill:i.fill},(0,r.TA)(n,e,s))}(this.shape,_,this.id,d):void 0,l.load(e);const g=this.effectData;g&&l.load(g.particles);const y=this.shapeData;y&&l.load(y.particles),this.effectFill=g?.fill??l.effect.fill,this.effectClose=g?.close??l.effect.close,this.shapeFill=y?.fill??l.shape.fill,this.shapeClose=y?.close??l.shape.close,this.options=l;const w=this.options.move.path;this.pathDelay=(0,s.VG)(w.delay.value)*n.Xu,w.generator&&(this.pathGenerator=this._engine.getPathGenerator(w.generator),this.pathGenerator&&o.addPath(w.generator,this.pathGenerator)&&this.pathGenerator.init(o)),o.retina.initParticle(this),this.size=(0,r.Xs)(this.options.size,h),this.bubble={inRange:!1},this.slow={inRange:!1,factor:1},this._initPosition(i),this.initialVelocity=this._calculateVelocity(),this.velocity=this.initialVelocity.copy(),this.moveDecay=n.WH-(0,s.VG)(this.options.move.decay);const b=o.particles;let z,P;b.setLastZIndex(this.position.z),this.zIndexFactor=this.position.z/o.zLayers,this.sides=24,this.effect&&(z=o.effectDrawers.get(this.effect),z||(z=this._engine.getEffectDrawer(this.effect),z&&o.effectDrawers.set(this.effect,z))),z?.loadEffect&&z.loadEffect(this),this.shape&&(P=o.shapeDrawers.get(this.shape),P||(P=this._engine.getShapeDrawer(this.shape),P&&o.shapeDrawers.set(this.shape,P))),P?.loadShape&&P.loadShape(this);const D=P?.getSidesCount;D&&(this.sides=D(this)),this.spawning=!1;for(const t of b.updaters)t.init(this);for(const t of b.movers)t.init(this);z?.particleInit?.(o,this),P?.particleInit?.(o,this);for(const t of o.plugins)t.particleCreated?.(this)}isInsideCanvas(){const t=this.getRadius(),i=this.container.canvas.size,e=this.position;return e.x>=-t&&e.y>=-t&&e.y<=i.height+t&&e.x<=i.width+t}isVisible(){return!this.destroyed&&!this.spawning&&this.isInsideCanvas()}reset(){for(const t of this.container.particles.updaters)t.reset?.(this)}}var z=e(4564),P=e(4673);class D{constructor(t,i){this.rectangle=t,this.capacity=i,this._subdivide=()=>{const{x:t,y:i}=this.rectangle.position,{width:e,height:s}=this.rectangle.size,{capacity:a}=this;for(let r=0;r<n.Pg;r++){const o=r%n.gd;this._subs.push(new D(new P.M_(t+e*n.MX*o,i+s*n.MX*(Math.round(r*n.MX)-o),e*n.MX,s*n.MX),a))}this._divided=!0},this._points=[],this._divided=!1,this._subs=[]}insert(t){return!!this.rectangle.contains(t.position)&&(this._points.length<this.capacity?(this._points.push(t),!0):(this._divided||this._subdivide(),this._subs.some((i=>i.insert(t)))))}query(t,i){const e=[];if(!t.intersects(this.rectangle))return[];for(const n of this._points)!t.contains(n.position)&&(0,s.Yf)(t.position,n.position)>n.particle.getRadius()&&(!i||i(n.particle))||e.push(n.particle);if(this._divided)for(const s of this._subs)e.push(...s.query(t,i));return e}queryCircle(t,i,e){return this.query(new P.jl(t.x,t.y,i),e)}queryRectangle(t,i,e){return this.query(new P.M_(t.x,t.y,i.width,i.height),e)}}var x=e(4077);const O=t=>{const{height:i,width:e}=t;return new P.M_(n.un*e,n.un*i,n.Rh*e,n.Rh*i)};class S{constructor(t,i){this._addToPool=(...t)=>{this._pool.push(...t)},this._applyDensity=(t,i,e,s)=>{const a=t.number;if(!a.density.enable)return void(void 0===e?this._limit=a.limit.value:(s?.number.limit.value??a.limit.value)&&this._groupLimits.set(e,s?.number.limit.value??a.limit.value));const r=this._initDensityFactor(a.density),o=a.value,h=a.limit.value>n.ou?a.limit.value:o,c=Math.min(o,h)*r+i,l=Math.min(this.count,this.filter((t=>t.group===e)).length);void 0===e?this._limit=a.limit.value*r:this._groupLimits.set(e,a.limit.value*r),l<c?this.push(Math.abs(c-l),void 0,t,e):l>c&&this.removeQuantity(l-c,e)},this._initDensityFactor=t=>{const i=this._container;if(!i.canvas.element||!t.enable)return n.lA;const e=i.canvas.element,s=i.retina.pixelRatio;return e.width*e.height/(t.height*t.width*s**n.dm)},this._pushParticle=(t,i,e,s)=>{try{const n=this._pool.pop()??new b(this._engine,this._container);n.init(this._nextId,t,i,e);let a=!0;if(s&&(a=s(n)),!a)return;return this._array.push(n),this._zArray.push(n),this._nextId++,this._engine.dispatchEvent(p.B.particleAdded,{container:this._container,data:{particle:n}}),n}catch(t){(0,x.t)().warning(`error adding particle: ${t}`)}},this._removeParticle=(t,i,e)=>{const s=this._array[t];if(!s)return!1;if(s.group!==i)return!1;const a=this._zArray.indexOf(s);return this._array.splice(t,n.LD),this._zArray.splice(a,n.LD),s.destroy(e),this._engine.dispatchEvent(p.B.particleRemoved,{container:this._container,data:{particle:s}}),this._addToPool(s),!0},this._engine=t,this._container=i,this._nextId=0,this._array=[],this._zArray=[],this._pool=[],this._limit=0,this._groupLimits=new Map,this._needsSort=!1,this._lastZIndex=0,this._pluginsInitialized=!1;const e=i.canvas.size;this.quadTree=new D(O(e),n.Kw),this.movers=[],this.updaters=[]}get count(){return this._array.length}addParticle(t,i,e,s){const a=this._container.actualOptions.particles.number.limit.mode,r=void 0===e?this._limit:this._groupLimits.get(e)??this._limit,o=this.count;if(r>n.ou)switch(a){case f.d.delete:{const t=o+n.nq-r;t>n.wM&&this.removeQuantity(t);break}case f.d.wait:if(o>=r)return}return this._pushParticle(t,i,e,s)}clear(){this._array=[],this._zArray=[],this._pluginsInitialized=!1}destroy(){this._array=[],this._zArray=[],this.movers=[],this.updaters=[]}drawParticles(t){for(const i of this._zArray)i.draw(t)}filter(t){return this._array.filter(t)}find(t){return this._array.find(t)}get(t){return this._array[t]}async init(){const t=this._container,i=t.actualOptions;this._lastZIndex=0,this._needsSort=!1;for(const i of t.plugins)i.redrawInit&&await i.redrawInit();await this.initPlugins();let e=!1;for(const i of t.plugins)if(e=i.particlesInitialization?.()??e,e)break;if(!e){const t=i.particles,e=t.groups;for(const i in e){const s=e[i];if(s)for(let e=this.count,n=0;n<s.number.value&&e<t.number.value;e++,n++)this.addParticle(void 0,s,i)}for(let i=this.count;i<t.number.value;i++)this.addParticle()}}async initPlugins(){if(this._pluginsInitialized)return;const t=this._container;this.movers=await this._engine.getMovers(t,!0),this.updaters=await this._engine.getUpdaters(t,!0);for(const i of t.pathGenerators.values())i.init(t)}push(t,i,e,s){for(let n=0;n<t;n++)this.addParticle(i,e,s)}async redraw(){this.clear(),await this.init(),this._container.canvas.drawParticles({value:0,factor:0})}remove(t,i,e){this.removeAt(this._array.indexOf(t),void 0,i,e)}removeAt(t,i=n.xd,e,s){if(t<n.z9||t>this.count)return;let a=0;for(let n=t;a<i&&n<this.count;n++)this._removeParticle(n,e,s)&&(n--,a++)}removeQuantity(t,i){this.removeAt(n.z9,t,i)}setDensity(){const t=this._container.actualOptions,i=t.particles.groups;let e=0;for(const t of this._container.plugins)t.particlesDensityCount&&(e+=t.particlesDensityCount());for(const t in i){const s=i[t];if(!s)continue;const n=(0,v.y)(this._engine,this._container,s);this._applyDensity(n,e,t)}this._applyDensity(t.particles,e)}setLastZIndex(t){this._lastZIndex=t,this._needsSort=this._needsSort||this._lastZIndex<t}setResizeFactor(t){this._resizeFactor=t}update(t){const i=this._container,e=new Set;this.quadTree=new D(O(i.canvas.size),n.Kw);for(const t of i.pathGenerators.values())t.update();for(const e of i.plugins)e.update?.(t);const s=this._resizeFactor;for(const i of this._array){s&&!i.ignoresResizeRatio&&(i.position.x*=s.width,i.position.y*=s.height,i.initialPosition.x*=s.width,i.initialPosition.y*=s.height),i.ignoresResizeRatio=!1;for(const t of this._container.plugins)t.particleReset&&t.particleReset(i);for(const e of this._container.plugins){if(i.destroyed)break;e.particleUpdate?.(i,t)}for(const e of this.movers)e.isEnabled(i)&&e.move(i,t);i.destroyed?e.add(i):this.quadTree.insert(new z.b(i.getPosition(),i))}if(e.size){const t=t=>!e.has(t);this._array=this.filter(t),this._zArray=this._zArray.filter(t);for(const t of e)this._engine.dispatchEvent(p.B.particleRemoved,{container:this._container,data:{particle:t}});this._addToPool(...e)}for(const e of i.plugins)e.postUpdate&&e.postUpdate(t);for(const e of this._array){for(const i of this.updaters)i.update(e,t);if(!e.destroyed&&!e.spawning)for(const s of i.plugins)s.postParticleUpdate&&s.postParticleUpdate(e,t)}if(delete this._resizeFactor,this._needsSort){const t=this._zArray;t.sort(((t,i)=>i.position.z-t.position.z||t.id-i.id));const i=t[t.length-n.K3];if(!i)return;this._lastZIndex=i.position.z,this._needsSort=!1}}}class R{constructor(t){this.container=t,this.pixelRatio=n.$x,this.reduceFactor=n.Zp}init(){const t=this.container,i=t.actualOptions;this.pixelRatio=i.detectRetina?devicePixelRatio:n.$x,this.reduceFactor=n.Zp;const e=this.pixelRatio,a=t.canvas;if(a.element){const t=a.element;a.size.width=t.offsetWidth*e,a.size.height=t.offsetHeight*e}const r=i.particles,o=r.move;this.maxSpeed=(0,s.VG)(o.gravity.maxSpeed)*e,this.sizeAnimationSpeed=(0,s.VG)(r.size.animation.speed)*e}initParticle(t){const i=t.options,e=this.pixelRatio,n=i.move,a=n.distance,r=t.retina;r.moveDrift=(0,s.VG)(n.drift)*e,r.moveSpeed=(0,s.VG)(n.speed)*e,r.sizeAnimationSpeed=(0,s.VG)(i.size.animation.speed)*e;const o=r.maxDistance;o.horizontal=void 0!==a.horizontal?a.horizontal*e:void 0,o.vertical=void 0!==a.vertical?a.vertical*e:void 0,r.maxSpeed=(0,s.VG)(n.gravity.maxSpeed)*e}}function C(t){return!t.destroyed}function T(t,i,...e){const s=new u.J(t,i);return(0,v.Z)(s,...e),s}class M{constructor(t,i,e){this._delta={value:0,factor:0},this._nextFrame=t=>{try{if(!this._smooth&&void 0!==this._lastFrameTime&&t<this._lastFrameTime+n.Xu/this.fpsLimit)return void this.draw(!1);if(this._lastFrameTime??=t,function(t,i,e=n.z$,s=!1){t.value=i,t.factor=s?n.z$/e:n.z$*i/n.Xu}(this._delta,t-this._lastFrameTime,this.fpsLimit,this._smooth),this.addLifeTime(this._delta.value),this._lastFrameTime=t,this._delta.value>n.Xu)return void this.draw(!1);if(this.canvas.drawParticles(this._delta),!this.alive())return void this.destroy();this.animationStatus&&this.draw(!1)}catch(t){(0,x.t)().error("error in animation loop",t)}},this._engine=t,this.id=Symbol(i),this.fpsLimit=120,this.hdr=!1,this._smooth=!1,this._delay=0,this._duration=0,this._lifeTime=0,this._firstStart=!0,this.started=!1,this.destroyed=!1,this._paused=!0,this._lastFrameTime=0,this.zLayers=100,this.pageHidden=!1,this._sourceOptions=e,this._initialSourceOptions=e,this.retina=new R(this),this.canvas=new l(this,this._engine),this.particles=new S(this._engine,this),this.pathGenerators=new Map,this.plugins=[],this.effectDrawers=new Map,this.shapeDrawers=new Map,this._options=T(this._engine,this),this.actualOptions=T(this._engine,this),this._eventListeners=new d(this),this._engine.dispatchEvent(p.B.containerBuilt,{container:this})}get animationStatus(){return!this._paused&&!this.pageHidden&&C(this)}get options(){return this._options}get sourceOptions(){return this._sourceOptions}addLifeTime(t){this._lifeTime+=t}addPath(t,i,e=!1){return!(!C(this)||!e&&this.pathGenerators.has(t))&&(this.pathGenerators.set(t,i),!0)}alive(){return!this._duration||this._lifeTime<=this._duration}destroy(t=!0){if(C(this)){this.stop(),this.particles.destroy(),this.canvas.destroy();for(const t of this.effectDrawers.values())t.destroy?.(this);this.effectDrawers.clear();for(const t of this.shapeDrawers.values())t.destroy?.(this);this.shapeDrawers.clear();for(const t of this.plugins)t.destroy?.();if(this.plugins.length=0,this._engine.clearPlugins(this),this.destroyed=!0,t){const t=this._engine.items,i=t.indexOf(this);i>=n.vF&&t.splice(i,n.JC)}this._engine.dispatchEvent(p.B.containerDestroyed,{container:this})}}draw(t){if(!C(this))return;let i=t;const e=t=>{i&&(this._lastFrameTime=void 0,i=!1),this._nextFrame(t)};this._drawAnimationFrame=(0,s.i0)((t=>{e(t)}))}async export(t,i={}){for(const e of this.plugins){if(!e.export)continue;const s=await e.export(t,i);if(s.supported)return s.blob}(0,x.t)().error(`Export plugin with type ${t} not found`)}async init(){if(!C(this))return;const t=this._engine.getSupportedEffects();for(const i of t){const t=this._engine.getEffectDrawer(i);t&&this.effectDrawers.set(i,t)}const i=this._engine.getSupportedShapes();for(const t of i){const i=this._engine.getShapeDrawer(t);i&&this.shapeDrawers.set(t,i)}const e=new Map;for(const t of this._engine.plugins){const i=await t.getPlugin(this);i.preInit&&await i.preInit(),e.set(t,i)}await this.particles.initPlugins(),this._options=T(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=T(this._engine,this,this._options);for(const[t,i]of e)t.needsPlugin(this.actualOptions)&&this.plugins.push(i);this.retina.init(),this.canvas.init(),this.updateActualOptions(),this.canvas.initBackground(),this.canvas.resize();const{delay:a,duration:r,fpsLimit:o,hdr:h,smooth:c,zLayers:l}=this.actualOptions;this.hdr=h,this.zLayers=l,this._duration=(0,s.VG)(r)*n.Xu,this._delay=(0,s.VG)(a)*n.Xu,this._lifeTime=0,this.fpsLimit=o>n.DN?o:n.i8,this._smooth=c;for(const t of this.plugins)await(t.init?.());for(const t of this.effectDrawers.values())await(t.init?.(this));for(const t of this.shapeDrawers.values())await(t.init?.(this));this._engine.dispatchEvent(p.B.containerInit,{container:this}),await this.particles.init(),this.particles.setDensity();for(const t of this.plugins)t.particlesSetup?.();this._engine.dispatchEvent(p.B.particlesSetup,{container:this})}pause(){if(C(this)&&(void 0!==this._drawAnimationFrame&&((0,s.px)(this._drawAnimationFrame),delete this._drawAnimationFrame),!this._paused)){for(const t of this.plugins)t.pause?.();this.pageHidden||(this._paused=!0),this._engine.dispatchEvent(p.B.containerPaused,{container:this})}}play(t){if(!C(this))return;const i=this._paused||t;if(!this._firstStart||this.actualOptions.autoPlay){if(this._paused&&(this._paused=!1),i)for(const t of this.plugins)t.play&&t.play();this._engine.dispatchEvent(p.B.containerPlay,{container:this}),this.draw(i??!1)}else this._firstStart=!1}async refresh(){if(C(this))return this.stop(),this.start()}async reset(t){if(C(this))return this._initialSourceOptions=t,this._sourceOptions=t,this._options=T(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=T(this._engine,this,this._options),this.refresh()}async start(){C(this)&&!this.started&&(await this.init(),this.started=!0,await new Promise((t=>{const i=async()=>{this._eventListeners.addListeners();for(const t of this.plugins)await(t.start?.());this._engine.dispatchEvent(p.B.containerStarted,{container:this}),this.play(),t()};this._delayTimeout=setTimeout((()=>{i()}),this._delay)})))}stop(){if(C(this)&&this.started){this._delayTimeout&&(clearTimeout(this._delayTimeout),delete this._delayTimeout),this._firstStart=!0,this.started=!1,this._eventListeners.removeListeners(),this.pause(),this.particles.clear(),this.canvas.stop();for(const t of this.plugins)t.stop?.();this.plugins.length=0,this._sourceOptions=this._options,this._engine.dispatchEvent(p.B.containerStopped,{container:this})}}updateActualOptions(){let t=!1;for(const i of this.plugins)i.updateActualOptions&&(t=i.updateActualOptions()||t);return t}}}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[209],{3209(t,i,e){e.d(i,{Container:()=>T});var s=e(7879),n=e(1607),a=e(6093),r=e(5721),o=e(5206);function h(t,i,e){const s=i[e];void 0!==s&&(t[e]=(t[e]??n.zs)*s)}function c(t,i,e=!1){if(!i)return;const s=t.style,n=new Set;for(let t=0;t<s.length;t++){const i=s.item(t);i&&n.add(i)}for(let t=0;t<i.length;t++){const e=i.item(t);e&&n.add(e)}for(const t of n){const n=i.getPropertyValue(t);n?s.setProperty(t,n,e?"important":""):s.removeProperty(t)}}class l{constructor(t,i){this.container=t,this._reusableColorStyles={},this._reusablePluginColors=[void 0,void 0],this._reusableTransform={},this._applyPostDrawUpdaters=t=>{for(const i of this._postDrawUpdaters)i.afterDraw?.(t)},this._applyPreDrawUpdaters=(t,i,e,s,n,a)=>{for(const r of this._preDrawUpdaters){if(r.getColorStyles){const{fill:a,stroke:o}=r.getColorStyles(i,t,e,s);a&&(n.fill=a),o&&(n.stroke=o)}if(r.getTransformValues){const t=r.getTransformValues(i);for(const i in t)h(a,t,i)}r.beforeDraw?.(i)}},this._applyResizePlugins=()=>{for(const t of this._resizePlugins)t.resize?.()},this._getPluginParticleColors=t=>{let i,e;for(const s of this._colorPlugins)if(!i&&s.particleFillColor&&(i=(0,o.R5)(this._engine,s.particleFillColor(t))),!e&&s.particleStrokeColor&&(e=(0,o.R5)(this._engine,s.particleStrokeColor(t))),i&&e)break;return this._reusablePluginColors[0]=i,this._reusablePluginColors[1]=e,this._reusablePluginColors},this._initStyle=()=>{const t=this.element,i=this.container.actualOptions;if(t){this._fullScreen?this._setFullScreenStyle():this._resetOriginalStyle();for(const e in i.style){if(!e||!Object.hasOwn(i.style,e))continue;const s=i.style[e];s&&t.style.setProperty(e,s,"important")}}},this._repairStyle=()=>{const t=this.element;if(!t)return;this._safeMutationObserver((t=>{t.disconnect()})),this._initStyle(),this.initBackground();const i=this._pointerEvents;t.style.pointerEvents=i,t.setAttribute("pointer-events",i),this._safeMutationObserver((i=>{t instanceof Node&&i.observe(t,{attributes:!0})}))},this._resetOriginalStyle=()=>{const t=this.element,i=this._originalStyle;t&&i&&c(t,i,!0)},this._safeMutationObserver=t=>{this._mutationObserver&&t(this._mutationObserver)},this._setFullScreenStyle=()=>{const t=this.element;t&&c(t,(0,r.hJ)(this.container.actualOptions.fullScreen.zIndex),!0)},this._engine=i,this._standardSize={height:0,width:0};const e=t.retina.pixelRatio,s=this._standardSize;this.size={height:s.height*e,width:s.width*e},this._context=null,this._generated=!1,this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[],this._pointerEvents="none"}get _fullScreen(){return this.container.actualOptions.fullScreen.enable}canvasClear(){this.container.actualOptions.clear&&this.draw((t=>{(0,a.IU)(t,this.size)}))}clear(){let t=!1;for(const i of this.container.plugins)!t&&i.canvasClear&&(t=i.canvasClear());t||this.canvasClear()}destroy(){if(this.stop(),this._generated){const t=this.element;t?.remove(),this.element=void 0}else this._resetOriginalStyle();this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}draw(t){const i=this._context;if(i)return t(i)}drawParticle(t,i){if(t.spawning||t.destroyed)return;const e=t.getRadius();if(e<=n.w2)return;const s=t.getFillColor(),r=t.getStrokeColor()??s;let[h,c]=this._getPluginParticleColors(t);if(h??=s,c??=r,!h&&!c)return;const l=this.container,d=t.options.zIndex,p=n.RV-t.zIndexFactor,{opacity:u,strokeOpacity:f}=t.getOpacity(),_=this._reusableTransform,g=this._reusableColorStyles,y=h?(0,o.LC)(h,l.hdr,u):void 0,m=c?(0,o.LC)(c,l.hdr,f):y;_.a=_.b=_.c=_.d=void 0,g.fill=y,g.stroke=m,this.draw((s=>{for(const e of l.plugins)e.drawParticleSetup&&e.drawParticleSetup(s,t,i);this._applyPreDrawUpdaters(s,t,e,u,g,_),(0,a.p0)({container:l,context:s,particle:t,delta:i,colorStyles:g,radius:e*p**d.sizeRate,opacity:u,transform:_}),this._applyPostDrawUpdaters(t);for(const e of l.plugins)e.drawParticleCleanup&&e.drawParticleCleanup(s,t,i)}))}drawParticlePlugin(t,i,e){this.draw((s=>{(0,a.Wb)(s,t,i,e)}))}drawParticles(t){const{particles:i,plugins:e}=this.container;this.clear(),i.update(t),this.draw((s=>{for(const i of e)i.drawSettingsSetup?.(s,t);for(const i of e)i.draw?.(s,t);i.drawParticles(t);for(const i of e)i.clearDraw?.(s,t);for(const i of e)i.drawSettingsCleanup?.(s,t)}))}init(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=(0,r.tG)((t=>{for(const i of t)"attributes"===i.type&&"style"===i.attributeName&&this._repairStyle()})),this.resize(),this._initStyle(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})})),this.initUpdaters(),this.initPlugins(),this.paint()}initBackground(){const{container:t}=this,i=t.actualOptions.background,e=this.element;if(!e)return;const s=e.style,n=(0,o.BN)(this._engine,i.color);s.backgroundColor=n?(0,o.xx)(n,t.hdr,i.opacity):"",s.backgroundImage=i.image||"",s.backgroundPosition=i.position||"",s.backgroundRepeat=i.repeat||"",s.backgroundSize=i.size||""}initPlugins(){this._resizePlugins=[];for(const t of this.container.plugins)t.resize&&this._resizePlugins.push(t),(t.particleFillColor??t.particleStrokeColor)&&this._colorPlugins.push(t)}initUpdaters(){this._preDrawUpdaters=[],this._postDrawUpdaters=[];for(const t of this.container.particles.updaters)t.afterDraw&&this._postDrawUpdaters.push(t),(t.getColorStyles??t.getTransformValues??t.beforeDraw)&&this._preDrawUpdaters.push(t)}loadCanvas(t){this._generated&&this.element&&this.element.remove();const i=this.container;this._generated=n.eb in t.dataset?"true"===t.dataset[n.eb]:this._generated,this.element=t,this.element.ariaHidden="true",this._originalStyle=(0,r.td)(this.element.style);const e=this._standardSize;e.height=t.offsetHeight,e.width=t.offsetWidth;const s=this.container.retina.pixelRatio,a=this.size;t.height=a.height=e.height*s,t.width=a.width=e.width*s;const o=(0,r.lV)("(color-gamut: p3)");this._context=this.element.getContext("2d",{alpha:!0,colorSpace:o?.matches&&i.hdr?"display-p3":"srgb",desynchronized:!0,willReadFrequently:!1}),this._safeMutationObserver((t=>{t.disconnect()})),i.retina.init(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})}))}paint(){let t=!1;for(const i of this.container.plugins){if(t)break;t=i.canvasPaint?.()??!1}t||this.paintBase()}paintBase(t){this.draw((i=>{(0,a.Sn)(i,this.size,t)}))}paintImage(t,i){this.draw((e=>{(0,a.Md)(e,this.size,t,i)}))}resize(){if(!this.element)return!1;const t=this.container,i=t.canvas._standardSize,e={width:this.element.offsetWidth,height:this.element.offsetHeight},s=t.retina.pixelRatio,n={width:e.width*s,height:e.height*s};if(e.height===i.height&&e.width===i.width&&n.height===this.element.height&&n.width===this.element.width)return!1;const a={...i};i.height=e.height,i.width=e.width;const r=this.size;return this.element.width=r.width=n.width,this.element.height=r.height=n.height,this.container.started&&t.particles.setResizeFactor({width:i.width/a.width,height:i.height/a.height}),!0}setPointerEvents(t){this.element&&(this._pointerEvents=t,this._repairStyle())}stop(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=void 0,this.draw((t=>{(0,a.IU)(t,this.size)}))}async windowResize(){if(!this.element||!this.resize())return;const t=this.container,i=t.updateActualOptions();t.particles.setDensity(),this._applyResizePlugins(),i&&await t.refresh()}}class d{constructor(t){this.container=t,this._handleVisibilityChange=()=>{const t=this.container;t.actualOptions.pauseOnBlur&&((0,r.T5)().hidden?(t.pageHidden=!0,t.pause()):(t.pageHidden=!1,t.animationStatus?t.play(!0):t.draw(!0)))},this._handleWindowResize=()=>{this._resizeTimeout&&(clearTimeout(this._resizeTimeout),delete this._resizeTimeout);const t=async()=>{const t=this.container.canvas;await t.windowResize()};this._resizeTimeout=setTimeout((()=>{t()}),this.container.actualOptions.resize.delay*n.Xu)},this._manageListeners=t=>{const i=this._handlers;this._manageResize(t),(0,r.Kp)(document,n.nK,i.visibilityChange,t,!1)},this._manageResize=t=>{const i=this._handlers,e=this.container;if(!e.actualOptions.resize.enable)return;if("undefined"==typeof ResizeObserver)return void(0,r.Kp)(globalThis,n.NF,i.resize,t);const s=e.canvas.element;this._resizeObserver&&!t?(s&&this._resizeObserver.unobserve(s),this._resizeObserver.disconnect(),delete this._resizeObserver):!this._resizeObserver&&t&&s&&(this._resizeObserver=new ResizeObserver((t=>{t.find((t=>t.target===s))&&this._handleWindowResize()})),this._resizeObserver.observe(s))},this._handlers={visibilityChange:()=>{this._handleVisibilityChange()},resize:()=>{this._handleWindowResize()}}}addListeners(){this._manageListeners(!0)}removeListeners(){this._manageListeners(!1)}}var p=e(625),u=e(7718),f=e(6284),_=e(918),g=e(9508),y=e(8991),m=e(9239),v=e(4017);function w(t){if(!(0,r.hn)(t.outMode,t.checkModes))return;const i=t.radius*n.gd;t.coord>t.maxCoord-i?t.setCb(-t.radius):t.coord<i&&t.setCb(t.radius)}class b{constructor(t,i){this.container=i,this._cachedOpacityData={opacity:n.hv,strokeOpacity:n.hv},this._cachedPosition=_.p.origin,this._cachedRotateData={sin:0,cos:0},this._cachedTransform={a:1,b:0,c:0,d:1},this._calcPosition=(t,i)=>{let e=n.rq,a=t?_.p.create(t.x,t.y,i):void 0;const r=this.container,o=Array.from(r.plugins),h=this.options.move.outModes,c=this.getRadius(),l=r.canvas.size,d=new AbortController,{signal:p}=d;for(;!p.aborted;){for(const t of o){const e=t.particlePosition?.(a,this);if(e)return _.p.create(e.x,e.y,i)}const t=(0,s.Nx)({size:l,position:a}),r=_.p.create(t.x,t.y,i);this._fixHorizontal(r,c,h.left??h.default),this._fixHorizontal(r,c,h.right??h.default),this._fixVertical(r,c,h.top??h.default),this._fixVertical(r,c,h.bottom??h.default);let d=!0;for(const t of o)if(d=t.checkParticlePosition?.(this,r,e)??!0,!d)break;if(d)return r;e+=n.Eo,a=void 0}return a},this._calculateVelocity=()=>{const t=(0,s.$m)(this.direction).copy(),i=this.options.move;if(i.direction===g.F.inside||i.direction===g.F.outside)return t;const e=(0,s.pu)((0,s.VG)(i.angle.value)),a=(0,s.pu)((0,s.VG)(i.angle.offset)),r={left:a-e*n.MX,right:a+e*n.MX};return i.straight||(t.angle+=(0,s.vE)((0,s.DT)(r.left,r.right))),i.random&&"number"==typeof i.speed&&(t.length*=(0,s.G0)()),t},this._fixHorizontal=(t,i,e)=>{w({outMode:e,checkModes:[y.Y.bounce],coord:t.x,maxCoord:this.container.canvas.size.width,setCb:i=>t.x+=i,radius:i})},this._fixVertical=(t,i,e)=>{w({outMode:e,checkModes:[y.Y.bounce],coord:t.y,maxCoord:this.container.canvas.size.height,setCb:i=>t.y+=i,radius:i})},this._getRollColor=t=>t&&this.roll&&(this.backColor||this.roll.alter)&&this.isShowingBack()?this.backColor?this.backColor:this.roll.alter?(0,a.yx)(t,this.roll.alter.type,this.roll.alter.value):t:t,this._initPosition=t=>{const i=this.container,e=(0,s.VG)(this.options.zIndex.value),a=this._calcPosition(t,(0,s.qE)(e,n.X_,i.zLayers));if(!a)throw new Error("a valid position cannot be found for particle");this.position=a,this.initialPosition=this.position.copy();const o=i.canvas.size;switch(this.moveCenter={...(0,r.E9)(this.options.move.center,o),radius:this.options.move.center.radius,mode:this.options.move.center.mode},this.direction=(0,s.JY)(this.options.move.direction,this.position,this.moveCenter),this.options.move.direction){case g.F.inside:this.outType=m.x.inside;break;case g.F.outside:this.outType=m.x.outside}this.offset=_.M.origin},this._engine=t}destroy(t){if(this.unbreakable||this.destroyed)return;this.destroyed=!0,this.bubble.inRange=!1,this.slow.inRange=!1;const i=this.container,e=this.pathGenerator,s=this.shape?i.shapeDrawers.get(this.shape):void 0;s?.particleDestroy?.(this);for(const e of i.plugins)e.particleDestroyed?.(this,t);for(const e of i.particles.updaters)e.particleDestroyed?.(this,t);e?.reset(this),this._engine.dispatchEvent(p.B.particleDestroyed,{container:this.container,data:{particle:this}})}draw(t){const i=this.container,e=i.canvas;for(const s of i.plugins)e.drawParticlePlugin(s,this,t);e.drawParticle(this,t)}getAngle(){return this.rotation+(this.pathRotation?this.velocity.angle:n.tA)}getFillColor(){return this._getRollColor(this.bubble.color??(0,o.O_)(this.color))}getMass(){return this.getRadius()**n.dm*Math.PI*n.MX}getOpacity(){const t=this.options.zIndex,i=(n.RV-this.zIndexFactor)**t.opacityRate,e=this.bubble.opacity??(0,s.VG)(this.opacity?.value??n.hv),a=this.strokeOpacity??e;return this._cachedOpacityData.opacity=e*i,this._cachedOpacityData.strokeOpacity=a*i,this._cachedOpacityData}getPosition(){return this._cachedPosition.x=this.position.x+this.offset.x,this._cachedPosition.y=this.position.y+this.offset.y,this._cachedPosition.z=this.position.z,this._cachedPosition}getRadius(){return this.bubble.radius??this.size.value}getRotateData(){const t=this.getAngle();return this._cachedRotateData.sin=Math.sin(t),this._cachedRotateData.cos=Math.cos(t),this._cachedRotateData}getStrokeColor(){return this._getRollColor(this.bubble.color??(0,o.O_)(this.strokeColor))}getTransformData(t){const i=this.getRotateData(),e=this.isRotating;return this._cachedTransform.a=i.cos*(t.a??n.Ug.a),this._cachedTransform.b=e?i.sin*(t.b??n.D_):t.b??n.Ug.b,this._cachedTransform.c=e?-i.sin*(t.c??n.D_):t.c??n.Ug.c,this._cachedTransform.d=i.cos*(t.d??n.Ug.d),this._cachedTransform}init(t,i,e,a){const o=this.container;this.id=t,this.group=a,this.effectClose=!0,this.effectFill=!0,this.shapeClose=!0,this.shapeFill=!0,this.pathRotation=!1,this.lastPathTime=0,this.destroyed=!1,this.unbreakable=!1,this.isRotating=!1,this.rotation=0,this.misplaced=!1,this.retina={maxDistance:{}},this.outType=m.x.normal,this.ignoresResizeRatio=!0;const h=o.retina.pixelRatio,c=o.actualOptions,l=(0,v.y)(this._engine,o,c.particles),d=l.reduceDuplicates,p=l.effect.type,u=l.shape.type;this.effect=(0,r.TA)(p,this.id,d),this.shape=(0,r.TA)(u,this.id,d);const f=l.effect,_=l.shape;if(e){if(e.effect?.type){const t=e.effect.type,i=(0,r.TA)(t,this.id,d);i&&(this.effect=i,f.load(e.effect))}if(e.shape?.type){const t=e.shape.type,i=(0,r.TA)(t,this.id,d);i&&(this.shape=i,_.load(e.shape))}}if(this.effect===n.mR){const t=[...this.container.effectDrawers.keys()];this.effect=t[Math.floor((0,s.G0)()*t.length)]}if(this.shape===n.mR){const t=[...this.container.shapeDrawers.keys()];this.shape=t[Math.floor((0,s.G0)()*t.length)]}this.effectData=this.effect?function(t,i,e,s){const n=i.options[t];return(0,r.zw)({close:i.close,fill:i.fill},(0,r.TA)(n,e,s))}(this.effect,f,this.id,d):void 0,this.shapeData=this.shape?function(t,i,e,s){const n=i.options[t];return(0,r.zw)({close:i.close,fill:i.fill},(0,r.TA)(n,e,s))}(this.shape,_,this.id,d):void 0,l.load(e);const g=this.effectData;g&&l.load(g.particles);const y=this.shapeData;y&&l.load(y.particles),this.effectFill=g?.fill??l.effect.fill,this.effectClose=g?.close??l.effect.close,this.shapeFill=y?.fill??l.shape.fill,this.shapeClose=y?.close??l.shape.close,this.options=l;const w=this.options.move.path;this.pathDelay=(0,s.VG)(w.delay.value)*n.Xu,w.generator&&(this.pathGenerator=this._engine.getPathGenerator(w.generator),this.pathGenerator&&o.addPath(w.generator,this.pathGenerator)&&this.pathGenerator.init(o)),o.retina.initParticle(this),this.size=(0,r.Xs)(this.options.size,h),this.bubble={inRange:!1},this.slow={inRange:!1,factor:1},this._initPosition(i),this.initialVelocity=this._calculateVelocity(),this.velocity=this.initialVelocity.copy(),this.moveDecay=n.WH-(0,s.VG)(this.options.move.decay);const b=o.particles;let z,P;b.setLastZIndex(this.position.z),this.zIndexFactor=this.position.z/o.zLayers,this.sides=24,this.effect&&(z=o.effectDrawers.get(this.effect),z||(z=this._engine.getEffectDrawer(this.effect),z&&o.effectDrawers.set(this.effect,z))),z?.loadEffect&&z.loadEffect(this),this.shape&&(P=o.shapeDrawers.get(this.shape),P||(P=this._engine.getShapeDrawer(this.shape),P&&o.shapeDrawers.set(this.shape,P))),P?.loadShape&&P.loadShape(this);const S=P?.getSidesCount;S&&(this.sides=S(this)),this.spawning=!1;for(const t of b.updaters)t.init(this);for(const t of b.movers)t.init(this);z?.particleInit?.(o,this),P?.particleInit?.(o,this);for(const t of o.plugins)t.particleCreated?.(this)}isInsideCanvas(){const t=this.getRadius(),i=this.container.canvas.size,e=this.position;return e.x>=-t&&e.y>=-t&&e.y<=i.height+t&&e.x<=i.width+t}isShowingBack(){if(!this.roll)return!1;const t=this.roll.angle;if(this.roll.horizontal&&this.roll.vertical){const i=t%n.R1,e=i<n.tA?i+n.R1:i;return e>=Math.PI*n.MX&&e<Math.PI*n.Nu*n.MX}if(this.roll.horizontal){const i=(t+Math.PI*n.MX)%(Math.PI*n.gd),e=i<n.tA?i+Math.PI*n.gd:i;return e>=Math.PI&&e<Math.PI*n.gd}if(this.roll.vertical){const i=t%(Math.PI*n.gd),e=i<n.tA?i+Math.PI*n.gd:i;return e>=Math.PI&&e<Math.PI*n.gd}return!1}isVisible(){return!this.destroyed&&!this.spawning&&this.isInsideCanvas()}reset(){for(const t of this.container.particles.updaters)t.reset?.(this)}}var z=e(4564),P=e(4673);class S{constructor(t,i){this.rectangle=t,this.capacity=i,this._subdivide=()=>{const{x:t,y:i}=this.rectangle.position,{width:e,height:s}=this.rectangle.size,{capacity:a}=this;for(let r=0;r<n.Pg;r++){const o=r%n.gd;this._subs.push(new S(new P.M_(t+e*n.MX*o,i+s*n.MX*(Math.round(r*n.MX)-o),e*n.MX,s*n.MX),a))}this._divided=!0},this._points=[],this._divided=!1,this._subs=[]}insert(t){return!!this.rectangle.contains(t.position)&&(this._points.length<this.capacity?(this._points.push(t),!0):(this._divided||this._subdivide(),this._subs.some((i=>i.insert(t)))))}query(t,i){const e=[];if(!t.intersects(this.rectangle))return[];for(const n of this._points)!t.contains(n.position)&&(0,s.Yf)(t.position,n.position)>n.particle.getRadius()&&(!i||i(n.particle))||e.push(n.particle);if(this._divided)for(const s of this._subs)e.push(...s.query(t,i));return e}queryCircle(t,i,e){return this.query(new P.jl(t.x,t.y,i),e)}queryRectangle(t,i,e){return this.query(new P.M_(t.x,t.y,i.width,i.height),e)}}var x=e(4077);const D=t=>{const{height:i,width:e}=t;return new P.M_(n.un*e,n.un*i,n.Rh*e,n.Rh*i)};class O{constructor(t,i){this._addToPool=(...t)=>{this._pool.push(...t)},this._applyDensity=(t,i,e,s)=>{const a=t.number;if(!a.density.enable)return void(void 0===e?this._limit=a.limit.value:(s?.number.limit.value??a.limit.value)&&this._groupLimits.set(e,s?.number.limit.value??a.limit.value));const r=this._initDensityFactor(a.density),o=a.value,h=a.limit.value>n.ou?a.limit.value:o,c=Math.min(o,h)*r+i,l=Math.min(this.count,this.filter((t=>t.group===e)).length);void 0===e?this._limit=a.limit.value*r:this._groupLimits.set(e,a.limit.value*r),l<c?this.push(Math.abs(c-l),void 0,t,e):l>c&&this.removeQuantity(l-c,e)},this._initDensityFactor=t=>{const i=this._container;if(!i.canvas.element||!t.enable)return n.lA;const e=i.canvas.element,s=i.retina.pixelRatio;return e.width*e.height/(t.height*t.width*s**n.dm)},this._pushParticle=(t,i,e,s)=>{try{const n=this._pool.pop()??new b(this._engine,this._container);n.init(this._nextId,t,i,e);let a=!0;if(s&&(a=s(n)),!a)return;return this._array.push(n),this._zArray.push(n),this._nextId++,this._engine.dispatchEvent(p.B.particleAdded,{container:this._container,data:{particle:n}}),n}catch(t){(0,x.t)().warning(`error adding particle: ${t}`)}},this._removeParticle=(t,i,e)=>{const s=this._array[t];if(!s)return!1;if(s.group!==i)return!1;const a=this._zArray.indexOf(s);return this._array.splice(t,n.LD),this._zArray.splice(a,n.LD),s.destroy(e),this._engine.dispatchEvent(p.B.particleRemoved,{container:this._container,data:{particle:s}}),this._addToPool(s),!0},this._engine=t,this._container=i,this._nextId=0,this._array=[],this._zArray=[],this._pool=[],this._limit=0,this._groupLimits=new Map,this._needsSort=!1,this._lastZIndex=0,this._pluginsInitialized=!1;const e=i.canvas.size;this.quadTree=new S(D(e),n.Kw),this.movers=[],this.updaters=[]}get count(){return this._array.length}addParticle(t,i,e,s){const a=this._container.actualOptions.particles.number.limit.mode,r=void 0===e?this._limit:this._groupLimits.get(e)??this._limit,o=this.count;if(r>n.ou)switch(a){case f.d.delete:{const t=o+n.nq-r;t>n.wM&&this.removeQuantity(t);break}case f.d.wait:if(o>=r)return}return this._pushParticle(t,i,e,s)}clear(){this._array=[],this._zArray=[],this._pluginsInitialized=!1}destroy(){this._array=[],this._zArray=[],this.movers=[],this.updaters=[]}drawParticles(t){for(const i of this._zArray)i.draw(t)}filter(t){return this._array.filter(t)}find(t){return this._array.find(t)}get(t){return this._array[t]}async init(){const t=this._container,i=t.actualOptions;this._lastZIndex=0,this._needsSort=!1;for(const i of t.plugins)i.redrawInit&&await i.redrawInit();await this.initPlugins();let e=!1;for(const i of t.plugins)if(e=i.particlesInitialization?.()??e,e)break;if(!e){const t=i.particles,e=t.groups;for(const i in e){const s=e[i];if(s)for(let e=this.count,n=0;n<s.number.value&&e<t.number.value;e++,n++)this.addParticle(void 0,s,i)}for(let i=this.count;i<t.number.value;i++)this.addParticle()}}async initPlugins(){if(this._pluginsInitialized)return;const t=this._container;this.movers=await this._engine.getMovers(t,!0),this.updaters=await this._engine.getUpdaters(t,!0);for(const i of t.pathGenerators.values())i.init(t)}push(t,i,e,s){for(let n=0;n<t;n++)this.addParticle(i,e,s)}async redraw(){this.clear(),await this.init(),this._container.canvas.drawParticles({value:0,factor:0})}remove(t,i,e){this.removeAt(this._array.indexOf(t),void 0,i,e)}removeAt(t,i=n.xd,e,s){if(t<n.z9||t>this.count)return;let a=0;for(let n=t;a<i&&n<this.count;n++)this._removeParticle(n,e,s)&&(n--,a++)}removeQuantity(t,i){this.removeAt(n.z9,t,i)}setDensity(){const t=this._container.actualOptions,i=t.particles.groups;let e=0;for(const t of this._container.plugins)t.particlesDensityCount&&(e+=t.particlesDensityCount());for(const t in i){const s=i[t];if(!s)continue;const n=(0,v.y)(this._engine,this._container,s);this._applyDensity(n,e,t)}this._applyDensity(t.particles,e)}setLastZIndex(t){this._lastZIndex=t,this._needsSort=this._needsSort||this._lastZIndex<t}setResizeFactor(t){this._resizeFactor=t}update(t){const i=this._container,e=new Set;this.quadTree=new S(D(i.canvas.size),n.Kw);for(const t of i.pathGenerators.values())t.update();for(const e of i.plugins)e.update?.(t);const s=this._resizeFactor;for(const i of this._array){s&&!i.ignoresResizeRatio&&(i.position.x*=s.width,i.position.y*=s.height,i.initialPosition.x*=s.width,i.initialPosition.y*=s.height),i.ignoresResizeRatio=!1;for(const t of this._container.plugins)t.particleReset&&t.particleReset(i);for(const e of this._container.plugins){if(i.destroyed)break;e.particleUpdate?.(i,t)}for(const e of this.movers)e.isEnabled(i)&&e.move(i,t);i.destroyed?e.add(i):this.quadTree.insert(new z.b(i.getPosition(),i))}if(e.size){const t=t=>!e.has(t);this._array=this.filter(t),this._zArray=this._zArray.filter(t);for(const t of e)this._engine.dispatchEvent(p.B.particleRemoved,{container:this._container,data:{particle:t}});this._addToPool(...e)}for(const e of i.plugins)e.postUpdate&&e.postUpdate(t);for(const e of this._array){for(const i of this.updaters)i.update(e,t);if(!e.destroyed&&!e.spawning)for(const s of i.plugins)s.postParticleUpdate&&s.postParticleUpdate(e,t)}if(delete this._resizeFactor,this._needsSort){const t=this._zArray;t.sort(((t,i)=>i.position.z-t.position.z||t.id-i.id));const i=t[t.length-n.K3];if(!i)return;this._lastZIndex=i.position.z,this._needsSort=!1}}}class R{constructor(t){this.container=t,this.pixelRatio=n.$x,this.reduceFactor=n.Zp}init(){const t=this.container,i=t.actualOptions;this.pixelRatio=i.detectRetina?devicePixelRatio:n.$x,this.reduceFactor=n.Zp;const e=this.pixelRatio,a=t.canvas;if(a.element){const t=a.element;a.size.width=t.offsetWidth*e,a.size.height=t.offsetHeight*e}const r=i.particles,o=r.move;this.maxSpeed=(0,s.VG)(o.gravity.maxSpeed)*e,this.sizeAnimationSpeed=(0,s.VG)(r.size.animation.speed)*e}initParticle(t){const i=t.options,e=this.pixelRatio,n=i.move,a=n.distance,r=t.retina;r.moveDrift=(0,s.VG)(n.drift)*e,r.moveSpeed=(0,s.VG)(n.speed)*e,r.sizeAnimationSpeed=(0,s.VG)(i.size.animation.speed)*e;const o=r.maxDistance;o.horizontal=void 0!==a.horizontal?a.horizontal*e:void 0,o.vertical=void 0!==a.vertical?a.vertical*e:void 0,r.maxSpeed=(0,s.VG)(n.gravity.maxSpeed)*e}}function C(t){return!t.destroyed}function M(t,i,...e){const s=new u.J(t,i);return(0,v.Z)(s,...e),s}class T{constructor(t,i,e){this._delta={value:0,factor:0},this._nextFrame=t=>{try{if(!this._smooth&&void 0!==this._lastFrameTime&&t<this._lastFrameTime+n.Xu/this.fpsLimit)return void this.draw(!1);if(this._lastFrameTime??=t,function(t,i,e=n.z$,s=!1){t.value=i,t.factor=s?n.z$/e:n.z$*i/n.Xu}(this._delta,t-this._lastFrameTime,this.fpsLimit,this._smooth),this.addLifeTime(this._delta.value),this._lastFrameTime=t,this._delta.value>n.Xu)return void this.draw(!1);if(this.canvas.drawParticles(this._delta),!this.alive())return void this.destroy();this.animationStatus&&this.draw(!1)}catch(t){(0,x.t)().error("error in animation loop",t)}},this._engine=t,this.id=Symbol(i),this.fpsLimit=120,this.hdr=!1,this._smooth=!1,this._delay=0,this._duration=0,this._lifeTime=0,this._firstStart=!0,this.started=!1,this.destroyed=!1,this._paused=!0,this._lastFrameTime=0,this.zLayers=100,this.pageHidden=!1,this._sourceOptions=e,this._initialSourceOptions=e,this.retina=new R(this),this.canvas=new l(this,this._engine),this.particles=new O(this._engine,this),this.pathGenerators=new Map,this.plugins=[],this.effectDrawers=new Map,this.shapeDrawers=new Map,this._options=M(this._engine,this),this.actualOptions=M(this._engine,this),this._eventListeners=new d(this),this._engine.dispatchEvent(p.B.containerBuilt,{container:this})}get animationStatus(){return!this._paused&&!this.pageHidden&&C(this)}get options(){return this._options}get sourceOptions(){return this._sourceOptions}addLifeTime(t){this._lifeTime+=t}addPath(t,i,e=!1){return!(!C(this)||!e&&this.pathGenerators.has(t))&&(this.pathGenerators.set(t,i),!0)}alive(){return!this._duration||this._lifeTime<=this._duration}destroy(t=!0){if(C(this)){this.stop(),this.particles.destroy(),this.canvas.destroy();for(const t of this.effectDrawers.values())t.destroy?.(this);this.effectDrawers.clear();for(const t of this.shapeDrawers.values())t.destroy?.(this);this.shapeDrawers.clear();for(const t of this.plugins)t.destroy?.();if(this.plugins.length=0,this._engine.clearPlugins(this),this.destroyed=!0,t){const t=this._engine.items,i=t.indexOf(this);i>=n.vF&&t.splice(i,n.JC)}this._engine.dispatchEvent(p.B.containerDestroyed,{container:this})}}draw(t){if(!C(this))return;let i=t;const e=t=>{i&&(this._lastFrameTime=void 0,i=!1),this._nextFrame(t)};this._drawAnimationFrame=(0,s.i0)((t=>{e(t)}))}async export(t,i={}){for(const e of this.plugins){if(!e.export)continue;const s=await e.export(t,i);if(s.supported)return s.blob}(0,x.t)().error(`Export plugin with type ${t} not found`)}async init(){if(!C(this))return;const t=this._engine.getSupportedEffects();for(const i of t){const t=this._engine.getEffectDrawer(i);t&&this.effectDrawers.set(i,t)}const i=this._engine.getSupportedShapes();for(const t of i){const i=this._engine.getShapeDrawer(t);i&&this.shapeDrawers.set(t,i)}const e=new Map;for(const t of this._engine.plugins){const i=await t.getPlugin(this);i.preInit&&await i.preInit(),e.set(t,i)}await this.particles.initPlugins(),this._options=M(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=M(this._engine,this,this._options);for(const[t,i]of e)t.needsPlugin(this.actualOptions)&&this.plugins.push(i);this.retina.init(),this.canvas.init(),this.updateActualOptions(),this.canvas.initBackground(),this.canvas.resize();const{delay:a,duration:r,fpsLimit:o,hdr:h,smooth:c,zLayers:l}=this.actualOptions;this.hdr=h,this.zLayers=l,this._duration=(0,s.VG)(r)*n.Xu,this._delay=(0,s.VG)(a)*n.Xu,this._lifeTime=0,this.fpsLimit=o>n.DN?o:n.i8,this._smooth=c;for(const t of this.plugins)await(t.init?.());for(const t of this.effectDrawers.values())await(t.init?.(this));for(const t of this.shapeDrawers.values())await(t.init?.(this));this._engine.dispatchEvent(p.B.containerInit,{container:this}),await this.particles.init(),this.particles.setDensity();for(const t of this.plugins)t.particlesSetup?.();this._engine.dispatchEvent(p.B.particlesSetup,{container:this})}pause(){if(C(this)&&(void 0!==this._drawAnimationFrame&&((0,s.px)(this._drawAnimationFrame),delete this._drawAnimationFrame),!this._paused)){for(const t of this.plugins)t.pause?.();this.pageHidden||(this._paused=!0),this._engine.dispatchEvent(p.B.containerPaused,{container:this})}}play(t){if(!C(this))return;const i=this._paused||t;if(!this._firstStart||this.actualOptions.autoPlay){if(this._paused&&(this._paused=!1),i)for(const t of this.plugins)t.play&&t.play();this._engine.dispatchEvent(p.B.containerPlay,{container:this}),this.draw(i??!1)}else this._firstStart=!1}async refresh(){if(C(this))return this.stop(),this.start()}async reset(t){if(C(this))return this._initialSourceOptions=t,this._sourceOptions=t,this._options=M(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=M(this._engine,this,this._options),this.refresh()}async start(){C(this)&&!this.started&&(await this.init(),this.started=!0,await new Promise((t=>{const i=async()=>{this._eventListeners.addListeners();for(const t of this.plugins)await(t.start?.());this._engine.dispatchEvent(p.B.containerStarted,{container:this}),this.play(),t()};this._delayTimeout=setTimeout((()=>{i()}),this._delay)})))}stop(){if(C(this)&&this.started){this._delayTimeout&&(clearTimeout(this._delayTimeout),delete this._delayTimeout),this._firstStart=!0,this.started=!1,this._eventListeners.removeListeners(),this.pause(),this.particles.clear(),this.canvas.stop();for(const t of this.plugins)t.stop?.();this.plugins.length=0,this._sourceOptions=this._options,this._engine.dispatchEvent(p.B.containerStopped,{container:this})}}updateActualOptions(){let t=!1;for(const i of this.plugins)i.updateActualOptions&&(t=i.updateActualOptions()||t);return t}}}}]);

package/209.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/234.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 234.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[234],{9234(e,a,t){function i(e){e.checkVersion("4.0.0-alpha.4"),e.register((e=>{e.addParticleUpdater("size",(async()=>{const{SizeUpdater:e}=await t.e(744).then(t.bind(t,3744));return new e}))}))}t.d(a,{loadSizeUpdater:()=>i})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[234],{9234(a,e,t){async function i(a){a.checkVersion("4.0.0-alpha.8"),await a.register((a=>{a.addParticleUpdater("size",(async()=>{const{SizeUpdater:a}=await t.e(744).then(t.bind(t,3744));return new a}))}))}t.d(e,{loadSizeUpdater:()=>i})}}]);

package/234.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/3.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 3.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[3],{3003(a,e,n){function s(a){a.checkVersion("4.0.0-alpha.4"),a.register((async a=>{const{RgbColorManager:e}=await n.e(410).then(n.bind(n,9410));a.addColorManager(new e)}))}n.d(e,{loadRgbColorPlugin:()=>s})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[3],{3003(a,n,s){async function e(a){a.checkVersion("4.0.0-alpha.8"),await a.register((async a=>{const{RgbColorManager:n}=await s.e(410).then(s.bind(s,9410));a.addColorManager(new n)}))}s.d(n,{loadRgbColorPlugin:()=>e})}}]);

package/3.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/302.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 302.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[302],{5302(a,e,t){function r(a){a.checkVersion("4.0.0-alpha.4"),a.register((a=>{a.addParticleUpdater("color",(async e=>{const{ColorUpdater:r}=await t.e(580).then(t.bind(t,6580));return new r(a,e)}))}))}t.d(e,{loadColorUpdater:()=>r})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[302],{5302(a,t,e){async function c(a){a.checkVersion("4.0.0-alpha.8"),await a.register((a=>{a.addParticleUpdater("color",(async t=>{const{ColorUpdater:c}=await e.e(580).then(e.bind(e,6580));return new c(a,t)}))}))}e.d(t,{loadColorUpdater:()=>c})}}]);

package/302.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/306.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/346.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/410.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/49.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 49.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[49],{1049(a,e,n){function s(a){a.checkVersion("4.0.0-alpha.4"),a.register((async a=>{const{HexColorManager:e}=await n.e(346).then(n.bind(n,346));a.addColorManager(new e)}))}n.d(e,{loadHexColorPlugin:()=>s})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[49],{1049(a,e,n){async function s(a){a.checkVersion("4.0.0-alpha.8"),await a.register((async a=>{const{HexColorManager:e}=await n.e(346).then(n.bind(n,346));a.addColorManager(new e)}))}n.d(e,{loadHexColorPlugin:()=>s})}}]);

package/49.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/505.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/521.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 521.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[521],{521(a,e,c){function i(a){a.checkVersion("4.0.0-alpha.4"),a.register((async a=>{const{CircleDrawer:e}=await c.e(743).then(c.bind(c,3743));a.addShape(new e)}))}c.d(e,{loadCircleShape:()=>i})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[521],{521(a,e,c){async function i(a){a.checkVersion("4.0.0-alpha.8"),await a.register((async a=>{const{CircleDrawer:e}=await c.e(743).then(c.bind(c,3743));a.addShape(new e)}))}c.d(e,{loadCircleShape:()=>i})}}]);

package/521.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/56.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 56.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[56],{7056(a,t,e){function c(a){a.checkVersion("4.0.0-alpha.4"),a.register((a=>{a.addParticleUpdater("opacity",(async a=>{const{OpacityUpdater:t}=await e.e(12).then(e.bind(e,7012));return new t(a)}))}))}e.d(t,{loadOpacityUpdater:()=>c})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[56],{7056(a,t,c){async function e(a){a.checkVersion("4.0.0-alpha.8"),await a.register((a=>{a.addParticleUpdater("opacity",(async a=>{const{OpacityUpdater:t}=await c.e(12).then(c.bind(c,7012));return new t(a)}))}))}c.d(t,{loadOpacityUpdater:()=>e})}}]);

package/56.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/580.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/743.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/744.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/85.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 85.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[85],{1085(a,t,e){function s(a){a.checkVersion("4.0.0-alpha.4"),a.register((a=>{a.addParticleUpdater("outModes",(async a=>{const{OutOfCanvasUpdater:t}=await e.e(993).then(e.bind(e,8993));return new t(a)}))}))}e.d(t,{loadOutModesUpdater:()=>s})}}]);
+(this.webpackChunk_tsparticles_basic=this.webpackChunk_tsparticles_basic||[]).push([[85],{1085(a,t,e){async function s(a){a.checkVersion("4.0.0-alpha.8"),await a.register((a=>{a.addParticleUpdater("outModes",(async a=>{const{OutOfCanvasUpdater:t}=await e.e(993).then(e.bind(e,8993));return new t(a)}))}))}e.d(t,{loadOutModesUpdater:()=>s})}}]);

package/85.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/993.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Basic v4.0.0-alpha.4 by Matteo Bruni */
+/*! tsParticles Basic v4.0.0-alpha.8 by Matteo Bruni */

package/browser/index.js

@@ -1,15 +1,15 @@
-export function loadBasic(engine) {
-    engine.checkVersion("4.0.0-alpha.4");
-    engine.register(async (e) => {
+export async function loadBasic(engine) {
+    engine.checkVersion("4.0.0-alpha.8");
+    await engine.register(async (e) => {
         const { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadBaseMover } = await import("@tsparticles/move-base"), { loadCircleShape } = await import("@tsparticles/shape-circle"), { loadColorUpdater } = await import("@tsparticles/updater-color"), { loadOpacityUpdater } = await import("@tsparticles/updater-opacity"), { loadOutModesUpdater } = await import("@tsparticles/updater-out-modes"), { loadSizeUpdater } = await import("@tsparticles/updater-size");
-        loadHexColorPlugin(e);
-        loadHslColorPlugin(e);
-        loadRgbColorPlugin(e);
-        loadBaseMover(e);
-        loadCircleShape(e);
-        loadColorUpdater(e);
-        loadOpacityUpdater(e);
-        loadOutModesUpdater(e);
-        loadSizeUpdater(e);
+        await loadHexColorPlugin(e);
+        await loadHslColorPlugin(e);
+        await loadRgbColorPlugin(e);
+        await loadBaseMover(e);
+        await loadCircleShape(e);
+        await loadColorUpdater(e);
+        await loadOpacityUpdater(e);
+        await loadOutModesUpdater(e);
+        await loadSizeUpdater(e);
     });
 }

package/cjs/index.js

@@ -1,15 +1,15 @@
-export function loadBasic(engine) {
-    engine.checkVersion("4.0.0-alpha.4");
-    engine.register(async (e) => {
+export async function loadBasic(engine) {
+    engine.checkVersion("4.0.0-alpha.8");
+    await engine.register(async (e) => {
         const { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadBaseMover } = await import("@tsparticles/move-base"), { loadCircleShape } = await import("@tsparticles/shape-circle"), { loadColorUpdater } = await import("@tsparticles/updater-color"), { loadOpacityUpdater } = await import("@tsparticles/updater-opacity"), { loadOutModesUpdater } = await import("@tsparticles/updater-out-modes"), { loadSizeUpdater } = await import("@tsparticles/updater-size");
-        loadHexColorPlugin(e);
-        loadHslColorPlugin(e);
-        loadRgbColorPlugin(e);
-        loadBaseMover(e);
-        loadCircleShape(e);
-        loadColorUpdater(e);
-        loadOpacityUpdater(e);
-        loadOutModesUpdater(e);
-        loadSizeUpdater(e);
+        await loadHexColorPlugin(e);
+        await loadHslColorPlugin(e);
+        await loadRgbColorPlugin(e);
+        await loadBaseMover(e);
+        await loadCircleShape(e);
+        await loadColorUpdater(e);
+        await loadOpacityUpdater(e);
+        await loadOutModesUpdater(e);
+        await loadSizeUpdater(e);
     });
 }

package/engine_dist_browser_Core_Container_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.4
+ * v4.0.0-alpha.8
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n  sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key];\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas,\n    elementStyle = element.style,\n    keys = new Set();\n  for (let i = 0; i < elementStyle.length; i++) {\n    const key = elementStyle.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (let i = 0; i < style.length; i++) {\n    const key = style.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (value) {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    } else {\n      elementStyle.removeProperty(key);\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\n    this._reusableColorStyles = {};\n    this._reusablePluginColors = [undefined, undefined];\n    this._reusableTransform = {};\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      this._reusablePluginColors[fColorIndex] = fColor;\n      this._reusablePluginColors[sColorIndex] = sColor;\n      return this._reusablePluginColors;\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !Object.hasOwn(options.style, key)) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => {\n        observer.disconnect();\n      });\n      this._initStyle();\n      this.initBackground();\n      const pointerEvents = this._pointerEvents;\n      element.style.pointerEvents = pointerEvents;\n      element.setAttribute(\"pointer-events\", pointerEvents);\n      this._safeMutationObserver(observer => {\n        if (!(element instanceof Node)) {\n          return;\n        }\n        observer.observe(element, {\n          attributes: true\n        });\n      });\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!element || !originalStyle) {\n        return;\n      }\n      setStyle(element, originalStyle, true);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n    this._engine = engine;\n    this._standardSize = {\n      height: 0,\n      width: 0\n    };\n    const pxRatio = container.retina.pixelRatio,\n      stdSize = this._standardSize;\n    this.size = {\n      height: stdSize.height * pxRatio,\n      width: stdSize.width * pxRatio\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n    this._pointerEvents = \"none\";\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  canvasClear() {\n    if (!this.container.actualOptions.clear) {\n      return;\n    }\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  clear() {\n    let pluginHandled = false;\n    for (const plugin of this.container.plugins) {\n      if (!pluginHandled && plugin.canvasClear) {\n        pluginHandled = plugin.canvasClear();\n      }\n    }\n    if (pluginHandled) {\n      return;\n    }\n    this.canvasClear();\n  }\n  clearDrawPlugin(plugin, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clearDrawPlugin)(ctx, plugin, delta);\n    });\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n      this.element = undefined;\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius();\n    if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    fColor ??= pfColor;\n    sColor ??= psColor;\n    if (!fColor && !sColor) {\n      return;\n    }\n    const container = this.container,\n      zIndexOptions = particle.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n      {\n        opacity,\n        strokeOpacity\n      } = particle.getOpacity(),\n      transform = this._reusableTransform,\n      colorStyles = this._reusableColorStyles,\n      fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n      stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n    transform.a = transform.b = transform.c = transform.d = undefined;\n    colorStyles.fill = fill;\n    colorStyles.stroke = stroke;\n    this.draw(context => {\n      this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context,\n        particle,\n        delta,\n        colorStyles,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: opacity,\n        transform\n      });\n    });\n    this._applyPostDrawUpdaters(particle);\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n    });\n  }\n  drawParticles(delta) {\n    const {\n      particles,\n      plugins\n    } = this.container;\n    this.clear();\n    particles.update(delta);\n    for (const plugin of plugins.values()) {\n      this.drawPlugin(plugin, delta);\n    }\n    this.draw(() => {\n      particles.drawParticles(delta);\n    });\n    for (const plugin of plugins.values()) {\n      this.clearDrawPlugin(plugin, delta);\n    }\n  }\n  drawPlugin(plugin, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta);\n    });\n  }\n  init() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const {\n        container\n      } = this,\n      options = container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style,\n      color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n    if (color) {\n      elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const plugin of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    const container = this.container;\n    this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n    const standardSize = this._standardSize;\n    standardSize.height = canvas.offsetHeight;\n    standardSize.width = canvas.offsetWidth;\n    const pxRatio = this.container.retina.pixelRatio,\n      retinaSize = this.size;\n    canvas.height = retinaSize.height = standardSize.height * pxRatio;\n    canvas.width = retinaSize.width = standardSize.width * pxRatio;\n    const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n    this._context = this.element.getContext(\"2d\", {\n      alpha: true,\n      colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n      desynchronized: true,\n      willReadFrequently: false\n    });\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    container.retina.init();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n  }\n  paint() {\n    let handled = false;\n    for (const plugin of this.container.plugins) {\n      if (handled) {\n        break;\n      }\n      handled = plugin.canvasPaint?.() ?? false;\n    }\n    if (handled) {\n      return;\n    }\n    this.paintBase();\n  }\n  paintBase(baseColor) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n    });\n  }\n  paintImage(image, opacity) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      currentSize = container.canvas._standardSize,\n      newSize = {\n        width: this.element.offsetWidth,\n        height: this.element.offsetHeight\n      },\n      pxRatio = container.retina.pixelRatio,\n      retinaSize = {\n        width: newSize.width * pxRatio,\n        height: newSize.height * pxRatio\n      };\n    if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...currentSize\n    };\n    currentSize.height = newSize.height;\n    currentSize.width = newSize.width;\n    const canvasSize = this.size;\n    this.element.width = canvasSize.width = retinaSize.width;\n    this.element.height = canvasSize.height = retinaSize.height;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: currentSize.width / oldSize.width,\n        height: currentSize.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  setPointerEvents(type) {\n    const element = this.element;\n    if (!element) {\n      return;\n    }\n    this._pointerEvents = type;\n    this._repairStyle();\n  }\n  stop() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = undefined;\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Canvas.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n  sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key];\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas,\n    elementStyle = element.style,\n    keys = new Set();\n  for (let i = 0; i < elementStyle.length; i++) {\n    const key = elementStyle.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (let i = 0; i < style.length; i++) {\n    const key = style.item(i);\n    if (!key) {\n      continue;\n    }\n    keys.add(key);\n  }\n  for (const key of keys) {\n    const value = style.getPropertyValue(key);\n    if (value) {\n      elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n    } else {\n      elementStyle.removeProperty(key);\n    }\n  }\n}\nclass Canvas {\n  constructor(container, engine) {\n    this.container = container;\n    this._reusableColorStyles = {};\n    this._reusablePluginColors = [undefined, undefined];\n    this._reusableTransform = {};\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      this._reusablePluginColors[fColorIndex] = fColor;\n      this._reusablePluginColors[sColorIndex] = sColor;\n      return this._reusablePluginColors;\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !Object.hasOwn(options.style, key)) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => {\n        observer.disconnect();\n      });\n      this._initStyle();\n      this.initBackground();\n      const pointerEvents = this._pointerEvents;\n      element.style.pointerEvents = pointerEvents;\n      element.setAttribute(\"pointer-events\", pointerEvents);\n      this._safeMutationObserver(observer => {\n        if (!(element instanceof Node)) {\n          return;\n        }\n        observer.observe(element, {\n          attributes: true\n        });\n      });\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!element || !originalStyle) {\n        return;\n      }\n      setStyle(element, originalStyle, true);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n    };\n    this._engine = engine;\n    this._standardSize = {\n      height: 0,\n      width: 0\n    };\n    const pxRatio = container.retina.pixelRatio,\n      stdSize = this._standardSize;\n    this.size = {\n      height: stdSize.height * pxRatio,\n      width: stdSize.width * pxRatio\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n    this._pointerEvents = \"none\";\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  canvasClear() {\n    if (!this.container.actualOptions.clear) {\n      return;\n    }\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  clear() {\n    let pluginHandled = false;\n    for (const plugin of this.container.plugins) {\n      if (!pluginHandled && plugin.canvasClear) {\n        pluginHandled = plugin.canvasClear();\n      }\n    }\n    if (pluginHandled) {\n      return;\n    }\n    this.canvasClear();\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n      this.element = undefined;\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius();\n    if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    fColor ??= pfColor;\n    sColor ??= psColor;\n    if (!fColor && !sColor) {\n      return;\n    }\n    const container = this.container,\n      zIndexOptions = particle.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n      {\n        opacity,\n        strokeOpacity\n      } = particle.getOpacity(),\n      transform = this._reusableTransform,\n      colorStyles = this._reusableColorStyles,\n      fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n      stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n    transform.a = transform.b = transform.c = transform.d = undefined;\n    colorStyles.fill = fill;\n    colorStyles.stroke = stroke;\n    this.draw(context => {\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleSetup) {\n          plugin.drawParticleSetup(context, particle, delta);\n        }\n      }\n      this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context,\n        particle,\n        delta,\n        colorStyles,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: opacity,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n      for (const plugin of container.plugins) {\n        if (plugin.drawParticleCleanup) {\n          plugin.drawParticleCleanup(context, particle, delta);\n        }\n      }\n    });\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n    });\n  }\n  drawParticles(delta) {\n    const {\n      particles,\n      plugins\n    } = this.container;\n    this.clear();\n    particles.update(delta);\n    this.draw(ctx => {\n      for (const plugin of plugins) {\n        plugin.drawSettingsSetup?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.draw?.(ctx, delta);\n      }\n      particles.drawParticles(delta);\n      for (const plugin of plugins) {\n        plugin.clearDraw?.(ctx, delta);\n      }\n      for (const plugin of plugins) {\n        plugin.drawSettingsCleanup?.(ctx, delta);\n      }\n    });\n  }\n  init() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const {\n        container\n      } = this,\n      options = container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style,\n      color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n    if (color) {\n      elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, background.opacity);\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const plugin of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    const container = this.container;\n    this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n    const standardSize = this._standardSize;\n    standardSize.height = canvas.offsetHeight;\n    standardSize.width = canvas.offsetWidth;\n    const pxRatio = this.container.retina.pixelRatio,\n      retinaSize = this.size;\n    canvas.height = retinaSize.height = standardSize.height * pxRatio;\n    canvas.width = retinaSize.width = standardSize.width * pxRatio;\n    const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n    this._context = this.element.getContext(\"2d\", {\n      alpha: true,\n      colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n      desynchronized: true,\n      willReadFrequently: false\n    });\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    container.retina.init();\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element || !(this.element instanceof Node)) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n  }\n  paint() {\n    let handled = false;\n    for (const plugin of this.container.plugins) {\n      if (handled) {\n        break;\n      }\n      handled = plugin.canvasPaint?.() ?? false;\n    }\n    if (handled) {\n      return;\n    }\n    this.paintBase();\n  }\n  paintBase(baseColor) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n    });\n  }\n  paintImage(image, opacity) {\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      currentSize = container.canvas._standardSize,\n      newSize = {\n        width: this.element.offsetWidth,\n        height: this.element.offsetHeight\n      },\n      pxRatio = container.retina.pixelRatio,\n      retinaSize = {\n        width: newSize.width * pxRatio,\n        height: newSize.height * pxRatio\n      };\n    if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...currentSize\n    };\n    currentSize.height = newSize.height;\n    currentSize.width = newSize.width;\n    const canvasSize = this.size;\n    this.element.width = canvasSize.width = retinaSize.width;\n    this.element.height = canvasSize.height = retinaSize.height;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: currentSize.width / oldSize.width,\n        height: currentSize.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  setPointerEvents(type) {\n    const element = this.element;\n    if (!element) {\n      return;\n    }\n    this._pointerEvents = type;\n    this._repairStyle();\n  }\n  stop() {\n    this._safeMutationObserver(obs => {\n      obs.disconnect();\n    });\n    this._mutationObserver = undefined;\n    this.draw(ctx => {\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n    });\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Canvas.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \**************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"../../engine/dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n  if (data.coord > data.maxCoord - diameter) {\n    data.setCb(-data.radius);\n  } else if (data.coord < diameter) {\n    data.setCb(data.radius);\n  }\n}\nclass Particle {\n  constructor(engine, container) {\n    this.container = container;\n    this._cachedOpacityData = {\n      opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n      strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n    };\n    this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    this._cachedRotateData = {\n      sin: 0,\n      cos: 0\n    };\n    this._cachedTransform = {\n      a: 1,\n      b: 0,\n      c: 0,\n      d: 1\n    };\n    this._calcPosition = (position, zIndex) => {\n      let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n        posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n      const container = this.container,\n        plugins = Array.from(container.plugins),\n        outModes = this.options.move.outModes,\n        radius = this.getRadius(),\n        canvasSize = container.canvas.size,\n        abortController = new AbortController(),\n        {\n          signal\n        } = abortController;\n      while (!signal.aborted) {\n        for (const plugin of plugins) {\n          const pluginPos = plugin.particlePosition?.(posVec, this);\n          if (pluginPos) {\n            return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n          }\n        }\n        const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.calcExactPositionOrRandomFromSize)({\n            size: canvasSize,\n            position: posVec\n          }),\n          pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n        this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n        this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n        let isValidPosition = true;\n        for (const plugin of plugins) {\n          isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n          if (!isValidPosition) {\n            break;\n          }\n        }\n        if (isValidPosition) {\n          return pos;\n        }\n        tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.tryCountIncrement;\n        posVec = undefined;\n      }\n      return posVec;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside) {\n        return res;\n      }\n      const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n          right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._fixHorizontal = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.x,\n        maxCoord: this.container.canvas.size.width,\n        setCb: value => pos.x += value,\n        radius\n      });\n    };\n    this._fixVertical = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.y,\n        maxCoord: this.container.canvas.size.height,\n        setCb: value => pos.y += value,\n        radius\n      });\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      const backFactor = this.roll.horizontal && this.roll.vertical ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor,\n        backSum = this.roll.horizontal ? Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.none,\n        rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n      if (!rolled) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n      const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minZ, container.zLayers));\n      if (!initialPosition) {\n        throw new Error(\"a valid position cannot be found for particle\");\n      }\n      this.position = initialPosition;\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius,\n        mode: this.options.move.center.mode\n      };\n      this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.inside;\n          break;\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.outside;\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n    this._engine = engine;\n  }\n  destroy(override) {\n    if (this.unbreakable || this.destroyed) {\n      return;\n    }\n    this.destroyed = true;\n    this.bubble.inRange = false;\n    this.slow.inRange = false;\n    const container = this.container,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n    shapeDrawer?.particleDestroy?.(this);\n    for (const plugin of container.plugins) {\n      plugin.particleDestroyed?.(this, override);\n    }\n    for (const updater of container.particles.updaters) {\n      updater.particleDestroyed?.(this, override);\n    }\n    pathGenerator?.reset(this);\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.particleDestroyed, {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const plugin of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getAngle() {\n    return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n  }\n  getOpacity() {\n    const zIndexOptions = this.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n      zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n      opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n      strokeOpacity = this.strokeOpacity ?? opacity;\n    this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n    this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n    return this._cachedOpacityData;\n  }\n  getPosition() {\n    this._cachedPosition.x = this.position.x + this.offset.x;\n    this._cachedPosition.y = this.position.y + this.offset.y;\n    this._cachedPosition.z = this.position.z;\n    return this._cachedPosition;\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getRotateData() {\n    const angle = this.getAngle();\n    this._cachedRotateData.sin = Math.sin(angle);\n    this._cachedRotateData.cos = Math.cos(angle);\n    return this._cachedRotateData;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.strokeColor));\n  }\n  getTransformData(externalTransform) {\n    const rotateData = this.getRotateData(),\n      rotating = this.isRotating;\n    this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n    this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n    this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n    this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.d);\n    return this._cachedTransform;\n  }\n  init(id, position, overrideOptions, group) {\n    const container = this.container;\n    this.id = id;\n    this.group = group;\n    this.effectClose = true;\n    this.effectFill = true;\n    this.shapeClose = true;\n    this.shapeFill = true;\n    this.pathRotation = false;\n    this.lastPathTime = 0;\n    this.destroyed = false;\n    this.unbreakable = false;\n    this.isRotating = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.normal;\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      reduceDuplicates = particlesOptions.reduceDuplicates,\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n    const effectOptions = particlesOptions.effect,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n        if (effect) {\n          this.effect = effect;\n          effectOptions.load(overrideOptions.effect);\n        }\n      }\n      if (overrideOptions.shape?.type) {\n        const overrideShapeType = overrideOptions.shape.type,\n          shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableEffects = [...this.container.effectDrawers.keys()];\n      this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n    }\n    if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableShapes = [...this.container.shapeDrawers.keys()];\n      this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableShapes.length)];\n    }\n    this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n    this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n    particlesOptions.load(overrideOptions);\n    const effectData = this.effectData;\n    if (effectData) {\n      particlesOptions.load(effectData.particles);\n    }\n    const shapeData = this.shapeData;\n    if (shapeData) {\n      particlesOptions.load(shapeData.particles);\n    }\n    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n    this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n    this.options = particlesOptions;\n    const pathOptions = this.options.move.path;\n    this.pathDelay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n    this.bubble = {\n      inRange: false\n    };\n    this.slow = {\n      inRange: false,\n      factor: 1\n    };\n    this._initPosition(position);\n    this.initialVelocity = this._calculateVelocity();\n    this.velocity = this.initialVelocity.copy();\n    this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.move.decay);\n    const particles = container.particles;\n    particles.setLastZIndex(this.position.z);\n    this.zIndexFactor = this.position.z / container.zLayers;\n    this.sides = 24;\n    let effectDrawer, shapeDrawer;\n    if (this.effect) {\n      effectDrawer = container.effectDrawers.get(this.effect);\n      if (!effectDrawer) {\n        effectDrawer = this._engine.getEffectDrawer(this.effect);\n        if (effectDrawer) {\n          container.effectDrawers.set(this.effect, effectDrawer);\n        }\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    if (this.shape) {\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n      if (!shapeDrawer) {\n        shapeDrawer = this._engine.getShapeDrawer(this.shape);\n        if (shapeDrawer) {\n          container.shapeDrawers.set(this.shape, shapeDrawer);\n        }\n      }\n    }\n    if (shapeDrawer?.loadShape) {\n      shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    for (const updater of particles.updaters) {\n      updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      mover.init(this);\n    }\n    effectDrawer?.particleInit?.(container, this);\n    shapeDrawer?.particleInit?.(container, this);\n    for (const plugin of container.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n  }\n  isVisible() {\n    return !this.destroyed && !this.spawning && this.isInsideCanvas();\n  }\n  reset() {\n    for (const updater of this.container.particles.updaters) {\n      updater.reset?.(this);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Particle.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"../../engine/dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n  if (data.coord > data.maxCoord - diameter) {\n    data.setCb(-data.radius);\n  } else if (data.coord < diameter) {\n    data.setCb(data.radius);\n  }\n}\nclass Particle {\n  constructor(engine, container) {\n    this.container = container;\n    this._cachedOpacityData = {\n      opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n      strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n    };\n    this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n    this._cachedRotateData = {\n      sin: 0,\n      cos: 0\n    };\n    this._cachedTransform = {\n      a: 1,\n      b: 0,\n      c: 0,\n      d: 1\n    };\n    this._calcPosition = (position, zIndex) => {\n      let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n        posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n      const container = this.container,\n        plugins = Array.from(container.plugins),\n        outModes = this.options.move.outModes,\n        radius = this.getRadius(),\n        canvasSize = container.canvas.size,\n        abortController = new AbortController(),\n        {\n          signal\n        } = abortController;\n      while (!signal.aborted) {\n        for (const plugin of plugins) {\n          const pluginPos = plugin.particlePosition?.(posVec, this);\n          if (pluginPos) {\n            return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n          }\n        }\n        const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.calcExactPositionOrRandomFromSize)({\n            size: canvasSize,\n            position: posVec\n          }),\n          pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n        this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n        this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n        this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n        let isValidPosition = true;\n        for (const plugin of plugins) {\n          isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n          if (!isValidPosition) {\n            break;\n          }\n        }\n        if (isValidPosition) {\n          return pos;\n        }\n        tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.tryCountIncrement;\n        posVec = undefined;\n      }\n      return posVec;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside) {\n        return res;\n      }\n      const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n          right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._fixHorizontal = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.x,\n        maxCoord: this.container.canvas.size.width,\n        setCb: value => pos.x += value,\n        radius\n      });\n    };\n    this._fixVertical = (pos, radius, outMode) => {\n      fixOutMode({\n        outMode,\n        checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_6__.OutMode.bounce],\n        coord: pos.y,\n        maxCoord: this.container.canvas.size.height,\n        setCb: value => pos.y += value,\n        radius\n      });\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      if (!this.isShowingBack()) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_8__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n      const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minZ, container.zLayers));\n      if (!initialPosition) {\n        throw new Error(\"a valid position cannot be found for particle\");\n      }\n      this.position = initialPosition;\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius,\n        mode: this.options.move.center.mode\n      };\n      this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.inside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.inside;\n          break;\n        case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_5__.MoveDirection.outside:\n          this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.outside;\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n    this._engine = engine;\n  }\n  destroy(override) {\n    if (this.unbreakable || this.destroyed) {\n      return;\n    }\n    this.destroyed = true;\n    this.bubble.inRange = false;\n    this.slow.inRange = false;\n    const container = this.container,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n    shapeDrawer?.particleDestroy?.(this);\n    for (const plugin of container.plugins) {\n      plugin.particleDestroyed?.(this, override);\n    }\n    for (const updater of container.particles.updaters) {\n      updater.particleDestroyed?.(this, override);\n    }\n    pathGenerator?.reset(this);\n    this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.particleDestroyed, {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const plugin of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getAngle() {\n    return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n  }\n  getOpacity() {\n    const zIndexOptions = this.options.zIndex,\n      zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n      zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n      opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n      strokeOpacity = this.strokeOpacity ?? opacity;\n    this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n    this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n    return this._cachedOpacityData;\n  }\n  getPosition() {\n    this._cachedPosition.x = this.position.x + this.offset.x;\n    this._cachedPosition.y = this.position.y + this.offset.y;\n    this._cachedPosition.z = this.position.z;\n    return this._cachedPosition;\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getRotateData() {\n    const angle = this.getAngle();\n    this._cachedRotateData.sin = Math.sin(angle);\n    this._cachedRotateData.cos = Math.cos(angle);\n    return this._cachedRotateData;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_9__.getHslFromAnimation)(this.strokeColor));\n  }\n  getTransformData(externalTransform) {\n    const rotateData = this.getRotateData(),\n      rotating = this.isRotating;\n    this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n    this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n    this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n    this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.d);\n    return this._cachedTransform;\n  }\n  init(id, position, overrideOptions, group) {\n    const container = this.container;\n    this.id = id;\n    this.group = group;\n    this.effectClose = true;\n    this.effectFill = true;\n    this.shapeClose = true;\n    this.shapeFill = true;\n    this.pathRotation = false;\n    this.lastPathTime = 0;\n    this.destroyed = false;\n    this.unbreakable = false;\n    this.isRotating = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_7__.ParticleOutType.normal;\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_10__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      reduceDuplicates = particlesOptions.reduceDuplicates,\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n    const effectOptions = particlesOptions.effect,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n        if (effect) {\n          this.effect = effect;\n          effectOptions.load(overrideOptions.effect);\n        }\n      }\n      if (overrideOptions.shape?.type) {\n        const overrideShapeType = overrideOptions.shape.type,\n          shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableEffects = [...this.container.effectDrawers.keys()];\n      this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n    }\n    if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n      const availableShapes = [...this.container.shapeDrawers.keys()];\n      this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableShapes.length)];\n    }\n    this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n    this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\n    particlesOptions.load(overrideOptions);\n    const effectData = this.effectData;\n    if (effectData) {\n      particlesOptions.load(effectData.particles);\n    }\n    const shapeData = this.shapeData;\n    if (shapeData) {\n      particlesOptions.load(shapeData.particles);\n    }\n    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n    this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n    this.options = particlesOptions;\n    const pathOptions = this.options.move.path;\n    this.pathDelay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n    this.bubble = {\n      inRange: false\n    };\n    this.slow = {\n      inRange: false,\n      factor: 1\n    };\n    this._initPosition(position);\n    this.initialVelocity = this._calculateVelocity();\n    this.velocity = this.initialVelocity.copy();\n    this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.move.decay);\n    const particles = container.particles;\n    particles.setLastZIndex(this.position.z);\n    this.zIndexFactor = this.position.z / container.zLayers;\n    this.sides = 24;\n    let effectDrawer, shapeDrawer;\n    if (this.effect) {\n      effectDrawer = container.effectDrawers.get(this.effect);\n      if (!effectDrawer) {\n        effectDrawer = this._engine.getEffectDrawer(this.effect);\n        if (effectDrawer) {\n          container.effectDrawers.set(this.effect, effectDrawer);\n        }\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    if (this.shape) {\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n      if (!shapeDrawer) {\n        shapeDrawer = this._engine.getShapeDrawer(this.shape);\n        if (shapeDrawer) {\n          container.shapeDrawers.set(this.shape, shapeDrawer);\n        }\n      }\n    }\n    if (shapeDrawer?.loadShape) {\n      shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    for (const updater of particles.updaters) {\n      updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      mover.init(this);\n    }\n    effectDrawer?.particleInit?.(container, this);\n    shapeDrawer?.particleInit?.(container, this);\n    for (const plugin of container.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n  }\n  isShowingBack() {\n    if (!this.roll) {\n      return false;\n    }\n    const angle = this.roll.angle;\n    if (this.roll.horizontal && this.roll.vertical) {\n      const normalizedAngle = angle % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.doublePI,\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.doublePI : normalizedAngle;\n      return adjustedAngle >= Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.triple * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n    }\n    if (this.roll.horizontal) {\n      const normalizedAngle = (angle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half) % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n    }\n    if (this.roll.vertical) {\n      const normalizedAngle = angle % (Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double),\n        adjustedAngle = normalizedAngle < _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle ? normalizedAngle + Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double : normalizedAngle;\n      return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double;\n    }\n    return false;\n  }\n  isVisible() {\n    return !this.destroyed && !this.spawning && this.isInsideCanvas();\n  }\n  reset() {\n    for (const updater of this.container.particles.updaters) {\n      updater.reset?.(this);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/basic/../../engine/dist/browser/Core/Particle.js?\n}");
 
 /***/ },
 

package/esm/index.js

@@ -1,15 +1,15 @@
-export function loadBasic(engine) {
-    engine.checkVersion("4.0.0-alpha.4");
-    engine.register(async (e) => {
+export async function loadBasic(engine) {
+    engine.checkVersion("4.0.0-alpha.8");
+    await engine.register(async (e) => {
         const { loadHexColorPlugin } = await import("@tsparticles/plugin-hex-color"), { loadHslColorPlugin } = await import("@tsparticles/plugin-hsl-color"), { loadRgbColorPlugin } = await import("@tsparticles/plugin-rgb-color"), { loadBaseMover } = await import("@tsparticles/move-base"), { loadCircleShape } = await import("@tsparticles/shape-circle"), { loadColorUpdater } = await import("@tsparticles/updater-color"), { loadOpacityUpdater } = await import("@tsparticles/updater-opacity"), { loadOutModesUpdater } = await import("@tsparticles/updater-out-modes"), { loadSizeUpdater } = await import("@tsparticles/updater-size");
-        loadHexColorPlugin(e);
-        loadHslColorPlugin(e);
-        loadRgbColorPlugin(e);
-        loadBaseMover(e);
-        loadCircleShape(e);
-        loadColorUpdater(e);
-        loadOpacityUpdater(e);
-        loadOutModesUpdater(e);
-        loadSizeUpdater(e);
+        await loadHexColorPlugin(e);
+        await loadHslColorPlugin(e);
+        await loadRgbColorPlugin(e);
+        await loadBaseMover(e);
+        await loadCircleShape(e);
+        await loadColorUpdater(e);
+        await loadOpacityUpdater(e);
+        await loadOutModesUpdater(e);
+        await loadSizeUpdater(e);
     });
 }