# Table of Contents
- [tsParticles - v3.0.0](#tsparticles-v3-0-0)
- [tsParticles - v3.0.0](#tsparticles-v3-0-0)
- [IOptions | tsParticles - v3.0.0](#ioptions-tsparticles-v3-0-0)
- [Options/Interfaces/IOptions | tsParticles - v3.0.0](#options-interfaces-ioptions-tsparticles-v3-0-0)
- [RecursivePartial | tsParticles - v3.0.0](#recursivepartial-tsparticles-v3-0-0)
- [SingleOrMultiple | tsParticles - v3.0.0](#singleormultiple-tsparticles-v3-0-0)
- [RangeValue | tsParticles - v3.0.0](#rangevalue-tsparticles-v3-0-0)
- [IFullScreen | tsParticles - v3.0.0](#ifullscreen-tsparticles-v3-0-0)
- [IResponsive | tsParticles - v3.0.0](#iresponsive-tsparticles-v3-0-0)
- [IManualParticle | tsParticles - v3.0.0](#imanualparticle-tsparticles-v3-0-0)
- [ITheme | tsParticles - v3.0.0](#itheme-tsparticles-v3-0-0)
- [IBackground | tsParticles - v3.0.0](#ibackground-tsparticles-v3-0-0)
- [IBackgroundMask | tsParticles - v3.0.0](#ibackgroundmask-tsparticles-v3-0-0)
- [IInteractivity | tsParticles - v3.0.0](#iinteractivity-tsparticles-v3-0-0)
- [Options | tsParticles - v3.0.0](#options-tsparticles-v3-0-0)
- [Container | tsParticles - v3.0.0](#container-tsparticles-v3-0-0)
- [IParticlesOptions | tsParticles - v3.0.0](#iparticlesoptions-tsparticles-v3-0-0)
- [tsParticles Engine - v3.8.1 | tsParticles - v3.0.0](#tsparticles-engine-v3-8-1-tsparticles-v3-0-0)
- [Types/RangeValue | tsParticles - v3.0.0](#types-rangevalue-tsparticles-v3-0-0)
- [Options/Interfaces/BackgroundMask/IBackgroundMask | tsParticles - v3.0.0](#options-interfaces-backgroundmask-ibackgroundmask-tsparticles-v3-0-0)
- [Options/Interfaces/Background/IBackground | tsParticles - v3.0.0](#options-interfaces-background-ibackground-tsparticles-v3-0-0)
- [Types/RecursivePartial | tsParticles - v3.0.0](#types-recursivepartial-tsparticles-v3-0-0)
- [Options/Interfaces/FullScreen/IFullScreen | tsParticles - v3.0.0](#options-interfaces-fullscreen-ifullscreen-tsparticles-v3-0-0)
- [Options/Interfaces/IManualParticle | tsParticles - v3.0.0](#options-interfaces-imanualparticle-tsparticles-v3-0-0)
- [Types/SingleOrMultiple | tsParticles - v3.0.0](#types-singleormultiple-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/IInteractivity | tsParticles - v3.0.0](#options-interfaces-interactivity-iinteractivity-tsparticles-v3-0-0)
- [Options/Interfaces/Theme/ITheme | tsParticles - v3.0.0](#options-interfaces-theme-itheme-tsparticles-v3-0-0)
- [IRangeValue | tsParticles - v3.0.0](#irangevalue-tsparticles-v3-0-0)
- [Options/Interfaces/IResponsive | tsParticles - v3.0.0](#options-interfaces-iresponsive-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/IParticlesOptions | tsParticles - v3.0.0](#options-interfaces-particles-iparticlesoptions-tsparticles-v3-0-0)
- [Core/Canvas | tsParticles - v3.0.0](#core-canvas-tsparticles-v3-0-0)
- [Options/Classes/Options | tsParticles - v3.0.0](#options-classes-options-tsparticles-v3-0-0)
- [Core/Container | tsParticles - v3.0.0](#core-container-tsparticles-v3-0-0)
- [ResponsiveMode | tsParticles - v3.0.0](#responsivemode-tsparticles-v3-0-0)
- [IThemeDefault | tsParticles - v3.0.0](#ithemedefault-tsparticles-v3-0-0)
- [InteractivityDetect | tsParticles - v3.0.0](#interactivitydetect-tsparticles-v3-0-0)
- [ICoordinatesWithMode | tsParticles - v3.0.0](#icoordinateswithmode-tsparticles-v3-0-0)
- [IColor | tsParticles - v3.0.0](#icolor-tsparticles-v3-0-0)
- [FullScreen | tsParticles - v3.0.0](#fullscreen-tsparticles-v3-0-0)
- [IParticlesBounce | tsParticles - v3.0.0](#iparticlesbounce-tsparticles-v3-0-0)
- [IRangeColor | tsParticles - v3.0.0](#irangecolor-tsparticles-v3-0-0)
- [Core/Engine | tsParticles - v3.0.0](#core-engine-tsparticles-v3-0-0)
- [IBackgroundMaskCover | tsParticles - v3.0.0](#ibackgroundmaskcover-tsparticles-v3-0-0)
- [Background | tsParticles - v3.0.0](#background-tsparticles-v3-0-0)
- [IEvents | tsParticles - v3.0.0](#ievents-tsparticles-v3-0-0)
- [IOptionsColor | tsParticles - v3.0.0](#ioptionscolor-tsparticles-v3-0-0)
- [Responsive | tsParticles - v3.0.0](#responsive-tsparticles-v3-0-0)
- [ManualParticle | tsParticles - v3.0.0](#manualparticle-tsparticles-v3-0-0)
- [IModes | tsParticles - v3.0.0](#imodes-tsparticles-v3-0-0)
- [Theme | tsParticles - v3.0.0](#theme-tsparticles-v3-0-0)
- [Core/Interfaces/IBounds | tsParticles - v3.0.0](#core-interfaces-ibounds-tsparticles-v3-0-0)
- [ICollisions | tsParticles - v3.0.0](#icollisions-tsparticles-v3-0-0)
- [BackgroundMask | tsParticles - v3.0.0](#backgroundmask-tsparticles-v3-0-0)
- [Core/Interfaces/IBubbleParticleData | tsParticles - v3.0.0](#core-interfaces-ibubbleparticledata-tsparticles-v3-0-0)
- [IEffect | tsParticles - v3.0.0](#ieffect-tsparticles-v3-0-0)
- [Canvas | tsParticles - v3.0.0](#canvas-tsparticles-v3-0-0)
- [ParticlesGroups | tsParticles - v3.0.0](#particlesgroups-tsparticles-v3-0-0)
- [Core/Interfaces/ICircleBouncer | tsParticles - v3.0.0](#core-interfaces-icirclebouncer-tsparticles-v3-0-0)
- [Core/Interfaces/IColorManager | tsParticles - v3.0.0](#core-interfaces-icolormanager-tsparticles-v3-0-0)
- [IEffectDrawer | tsParticles - v3.0.0](#ieffectdrawer-tsparticles-v3-0-0)
- [IAnimatableColor | tsParticles - v3.0.0](#ianimatablecolor-tsparticles-v3-0-0)
- [Core/Interfaces/IContainerInteractivity | tsParticles - v3.0.0](#core-interfaces-icontainerinteractivity-tsparticles-v3-0-0)
- [Interactivity | tsParticles - v3.0.0](#interactivity-tsparticles-v3-0-0)
- [IContainerInteractivity | tsParticles - v3.0.0](#icontainerinteractivity-tsparticles-v3-0-0)
- [Core/Interfaces/IContainerPlugin | tsParticles - v3.0.0](#core-interfaces-icontainerplugin-tsparticles-v3-0-0)
- [Core/Interfaces/Colors | tsParticles - v3.0.0](#core-interfaces-colors-tsparticles-v3-0-0)
- [IParticlesNumber | tsParticles - v3.0.0](#iparticlesnumber-tsparticles-v3-0-0)
- [IOpacity | tsParticles - v3.0.0](#iopacity-tsparticles-v3-0-0)
- [IMovePathGenerator | tsParticles - v3.0.0](#imovepathgenerator-tsparticles-v3-0-0)
- [Core/Interfaces/IDelta | tsParticles - v3.0.0](#core-interfaces-idelta-tsparticles-v3-0-0)
- [IShadow | tsParticles - v3.0.0](#ishadow-tsparticles-v3-0-0)
- [IShape | tsParticles - v3.0.0](#ishape-tsparticles-v3-0-0)
- [Core/Interfaces/ICoordinates | tsParticles - v3.0.0](#core-interfaces-icoordinates-tsparticles-v3-0-0)
- [Retina | tsParticles - v3.0.0](#retina-tsparticles-v3-0-0)
- [Core/Interfaces/IDimension | tsParticles - v3.0.0](#core-interfaces-idimension-tsparticles-v3-0-0)
- [Core/Interfaces/IDistance | tsParticles - v3.0.0](#core-interfaces-idistance-tsparticles-v3-0-0)
- [Engine | tsParticles - v3.0.0](#engine-tsparticles-v3-0-0)
- [Core/Interfaces/IDrawParticleParams | tsParticles - v3.0.0](#core-interfaces-idrawparticleparams-tsparticles-v3-0-0)
- [ISize | tsParticles - v3.0.0](#isize-tsparticles-v3-0-0)
- [Core/Interfaces/IExternalInteractor | tsParticles - v3.0.0](#core-interfaces-iexternalinteractor-tsparticles-v3-0-0)
- [Core/Interfaces/IEffectDrawer | tsParticles - v3.0.0](#core-interfaces-ieffectdrawer-tsparticles-v3-0-0)
- [ParticlesOptions | tsParticles - v3.0.0](#particlesoptions-tsparticles-v3-0-0)
- [IMove | tsParticles - v3.0.0](#imove-tsparticles-v3-0-0)
- [Core/Interfaces/ILoadParams | tsParticles - v3.0.0](#core-interfaces-iloadparams-tsparticles-v3-0-0)
- [Core/Interfaces/IInteractor | tsParticles - v3.0.0](#core-interfaces-iinteractor-tsparticles-v3-0-0)
- [Core/Interfaces/IMouseData | tsParticles - v3.0.0](#core-interfaces-imousedata-tsparticles-v3-0-0)
- [IContainerPlugin | tsParticles - v3.0.0](#icontainerplugin-tsparticles-v3-0-0)
- [IShapeDrawer | tsParticles - v3.0.0](#ishapedrawer-tsparticles-v3-0-0)
- [IStroke | tsParticles - v3.0.0](#istroke-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleColorStyle | tsParticles - v3.0.0](#core-interfaces-iparticlecolorstyle-tsparticles-v3-0-0)
- [Core/Interfaces/IMovePathGenerator | tsParticles - v3.0.0](#core-interfaces-imovepathgenerator-tsparticles-v3-0-0)
- [Particles | tsParticles - v3.0.0](#particles-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleLife | tsParticles - v3.0.0](#core-interfaces-iparticlelife-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleHslAnimation | tsParticles - v3.0.0](#core-interfaces-iparticlehslanimation-tsparticles-v3-0-0)
- [IZIndex | tsParticles - v3.0.0](#izindex-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleRetinaProps | tsParticles - v3.0.0](#core-interfaces-iparticleretinaprops-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleMover | tsParticles - v3.0.0](#core-interfaces-iparticlemover-tsparticles-v3-0-0)
- [Core/Interfaces/IParticlesInteractor | tsParticles - v3.0.0](#core-interfaces-iparticlesinteractor-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleRoll | tsParticles - v3.0.0](#core-interfaces-iparticleroll-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleTransformValues | tsParticles - v3.0.0](#core-interfaces-iparticletransformvalues-tsparticles-v3-0-0)
- [Core/Interfaces/IPlugin | tsParticles - v3.0.0](#core-interfaces-iplugin-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleUpdater | tsParticles - v3.0.0](#core-interfaces-iparticleupdater-tsparticles-v3-0-0)
- [Core/Interfaces/IParticleValueAnimation | tsParticles - v3.0.0](#core-interfaces-iparticlevalueanimation-tsparticles-v3-0-0)
- [Core/Interfaces/IPositionFromSizeParams | tsParticles - v3.0.0](#core-interfaces-ipositionfromsizeparams-tsparticles-v3-0-0)
- [Core/Interfaces/IRangeValue | tsParticles - v3.0.0](#core-interfaces-irangevalue-tsparticles-v3-0-0)
- [Core/Interfaces/IRectSideResult | tsParticles - v3.0.0](#core-interfaces-irectsideresult-tsparticles-v3-0-0)
- [IOptionLoader | tsParticles - v3.0.0](#ioptionloader-tsparticles-v3-0-0)
- [Particle | tsParticles - v3.0.0](#particle-tsparticles-v3-0-0)
- [Core/Interfaces/IShapeDrawData | tsParticles - v3.0.0](#core-interfaces-ishapedrawdata-tsparticles-v3-0-0)
- [Core/Interfaces/IShapeDrawer | tsParticles - v3.0.0](#core-interfaces-ishapedrawer-tsparticles-v3-0-0)
- [Core/Interfaces/IShapeValues | tsParticles - v3.0.0](#core-interfaces-ishapevalues-tsparticles-v3-0-0)
- [Core/Interfaces/ISlowParticleData | tsParticles - v3.0.0](#core-interfaces-islowparticledata-tsparticles-v3-0-0)
- [Core/Interfaces/ITrailFillData | tsParticles - v3.0.0](#core-interfaces-itrailfilldata-tsparticles-v3-0-0)
- [Core/Particle | tsParticles - v3.0.0](#core-particle-tsparticles-v3-0-0)
- [Core/Particles | tsParticles - v3.0.0](#core-particles-tsparticles-v3-0-0)
- [Core/Retina | tsParticles - v3.0.0](#core-retina-tsparticles-v3-0-0)
- [Core/Utils/ExternalInteractorBase | tsParticles - v3.0.0](#core-utils-externalinteractorbase-tsparticles-v3-0-0)
- [Core/Utils/EventListeners | tsParticles - v3.0.0](#core-utils-eventlisteners-tsparticles-v3-0-0)
- [Core/Utils/InteractionManager | tsParticles - v3.0.0](#core-utils-interactionmanager-tsparticles-v3-0-0)
- [Core/Utils/ParticlesInteractorBase | tsParticles - v3.0.0](#core-utils-particlesinteractorbase-tsparticles-v3-0-0)
- [Core/Utils/Point | tsParticles - v3.0.0](#core-utils-point-tsparticles-v3-0-0)
- [Core/Utils/Constants | tsParticles - v3.0.0](#core-utils-constants-tsparticles-v3-0-0)
- [Core/Utils/QuadTree | tsParticles - v3.0.0](#core-utils-quadtree-tsparticles-v3-0-0)
- [bundle | tsParticles - v3.0.0](#bundle-tsparticles-v3-0-0)
- [Core/Utils/Ranges | tsParticles - v3.0.0](#core-utils-ranges-tsparticles-v3-0-0)
- [Core/Utils/Vectors | tsParticles - v3.0.0](#core-utils-vectors-tsparticles-v3-0-0)
- [Enums/AnimationStatus | tsParticles - v3.0.0](#enums-animationstatus-tsparticles-v3-0-0)
- [Enums/Directions/MoveDirection | tsParticles - v3.0.0](#enums-directions-movedirection-tsparticles-v3-0-0)
- [Enums/Directions/OutModeDirection | tsParticles - v3.0.0](#enums-directions-outmodedirection-tsparticles-v3-0-0)
- [Enums/InteractivityDetect | tsParticles - v3.0.0](#enums-interactivitydetect-tsparticles-v3-0-0)
- [Enums/Directions/RotateDirection | tsParticles - v3.0.0](#enums-directions-rotatedirection-tsparticles-v3-0-0)
- [Enums/Modes/AnimationMode | tsParticles - v3.0.0](#enums-modes-animationmode-tsparticles-v3-0-0)
- [Enums/Modes/CollisionMode | tsParticles - v3.0.0](#enums-modes-collisionmode-tsparticles-v3-0-0)
- [Enums/Modes/LimitMode | tsParticles - v3.0.0](#enums-modes-limitmode-tsparticles-v3-0-0)
- [Enums/Modes/OutMode | tsParticles - v3.0.0](#enums-modes-outmode-tsparticles-v3-0-0)
- [Enums/Modes/PixelMode | tsParticles - v3.0.0](#enums-modes-pixelmode-tsparticles-v3-0-0)
- [Enums/Modes/ResponsiveMode | tsParticles - v3.0.0](#enums-modes-responsivemode-tsparticles-v3-0-0)
- [Enums/Modes/ThemeMode | tsParticles - v3.0.0](#enums-modes-thememode-tsparticles-v3-0-0)
- [Enums/Types/AlterType | tsParticles - v3.0.0](#enums-types-altertype-tsparticles-v3-0-0)
- [Enums/Types/DivType | tsParticles - v3.0.0](#enums-types-divtype-tsparticles-v3-0-0)
- [Enums/Types/DestroyType | tsParticles - v3.0.0](#enums-types-destroytype-tsparticles-v3-0-0)
- [Enums/Types/EasingType | tsParticles - v3.0.0](#enums-types-easingtype-tsparticles-v3-0-0)
- [Enums/Types/EventType | tsParticles - v3.0.0](#enums-types-eventtype-tsparticles-v3-0-0)
- [Enums/Types/GradientType | tsParticles - v3.0.0](#enums-types-gradienttype-tsparticles-v3-0-0)
- [Enums/Types/InteractorType | tsParticles - v3.0.0](#enums-types-interactortype-tsparticles-v3-0-0)
- [Enums/Types/ParticleOutType | tsParticles - v3.0.0](#enums-types-particleouttype-tsparticles-v3-0-0)
- [Enums/Types/StartValueType | tsParticles - v3.0.0](#enums-types-startvaluetype-tsparticles-v3-0-0)
- [init | tsParticles - v3.0.0](#init-tsparticles-v3-0-0)
- [Options/Classes/AnimationOptions | tsParticles - v3.0.0](#options-classes-animationoptions-tsparticles-v3-0-0)
- [Options/Classes/AnimatableColor | tsParticles - v3.0.0](#options-classes-animatablecolor-tsparticles-v3-0-0)
- [Options/Classes/Background/Background | tsParticles - v3.0.0](#options-classes-background-background-tsparticles-v3-0-0)
- [Options/Classes/BackgroundMask/BackgroundMask | tsParticles - v3.0.0](#options-classes-backgroundmask-backgroundmask-tsparticles-v3-0-0)
- [Options/Classes/ColorAnimation | tsParticles - v3.0.0](#options-classes-coloranimation-tsparticles-v3-0-0)
- [Options/Classes/FullScreen/FullScreen | tsParticles - v3.0.0](#options-classes-fullscreen-fullscreen-tsparticles-v3-0-0)
- [Options/Classes/BackgroundMask/BackgroundMaskCover | tsParticles - v3.0.0](#options-classes-backgroundmask-backgroundmaskcover-tsparticles-v3-0-0)
- [Options/Classes/HslAnimation | tsParticles - v3.0.0](#options-classes-hslanimation-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/DivEvent | tsParticles - v3.0.0](#options-classes-interactivity-events-divevent-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/Parallax | tsParticles - v3.0.0](#options-classes-interactivity-events-parallax-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/ClickEvent | tsParticles - v3.0.0](#options-classes-interactivity-events-clickevent-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/Events | tsParticles - v3.0.0](#options-classes-interactivity-events-events-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Interactivity | tsParticles - v3.0.0](#options-classes-interactivity-interactivity-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/HoverEvent | tsParticles - v3.0.0](#options-classes-interactivity-events-hoverevent-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Modes/Modes | tsParticles - v3.0.0](#options-classes-interactivity-modes-modes-tsparticles-v3-0-0)
- [Options/Classes/Interactivity/Events/ResizeEvent | tsParticles - v3.0.0](#options-classes-interactivity-events-resizeevent-tsparticles-v3-0-0)
- [Options/Classes/ManualParticle | tsParticles - v3.0.0](#options-classes-manualparticle-tsparticles-v3-0-0)
- [Options/Classes/OptionsColor | tsParticles - v3.0.0](#options-classes-optionscolor-tsparticles-v3-0-0)
- [Options/Classes/Particles/Bounce/ParticlesBounce | tsParticles - v3.0.0](#options-classes-particles-bounce-particlesbounce-tsparticles-v3-0-0)
- [Options/Classes/Particles/Bounce/ParticlesBounceFactor | tsParticles - v3.0.0](#options-classes-particles-bounce-particlesbouncefactor-tsparticles-v3-0-0)
- [Options/Classes/Particles/Collisions/CollisionsOverlap | tsParticles - v3.0.0](#options-classes-particles-collisions-collisionsoverlap-tsparticles-v3-0-0)
- [Options/Classes/Particles/Effect/Effect | tsParticles - v3.0.0](#options-classes-particles-effect-effect-tsparticles-v3-0-0)
- [Options/Classes/Particles/Collisions/CollisionsAbsorb | tsParticles - v3.0.0](#options-classes-particles-collisions-collisionsabsorb-tsparticles-v3-0-0)
- [Options/Classes/Particles/Collisions/Collisions | tsParticles - v3.0.0](#options-classes-particles-collisions-collisions-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveAngle | tsParticles - v3.0.0](#options-classes-particles-move-moveangle-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/Move | tsParticles - v3.0.0](#options-classes-particles-move-move-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveAttract | tsParticles - v3.0.0](#options-classes-particles-move-moveattract-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveTrail | tsParticles - v3.0.0](#options-classes-particles-move-movetrail-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveGravity | tsParticles - v3.0.0](#options-classes-particles-move-movegravity-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveCenter | tsParticles - v3.0.0](#options-classes-particles-move-movecenter-tsparticles-v3-0-0)
- [Options/Classes/Particles/Number/ParticlesNumber | tsParticles - v3.0.0](#options-classes-particles-number-particlesnumber-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/Path/MovePath | tsParticles - v3.0.0](#options-classes-particles-move-path-movepath-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/OutModes | tsParticles - v3.0.0](#options-classes-particles-move-outmodes-tsparticles-v3-0-0)
- [Options/Classes/Particles/Number/ParticlesNumberLimit | tsParticles - v3.0.0](#options-classes-particles-number-particlesnumberlimit-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/MoveTrailFill | tsParticles - v3.0.0](#options-classes-particles-move-movetrailfill-tsparticles-v3-0-0)
- [Options/Classes/Particles/Opacity/Opacity | tsParticles - v3.0.0](#options-classes-particles-opacity-opacity-tsparticles-v3-0-0)
- [Options/Classes/Particles/ParticlesOptions | tsParticles - v3.0.0](#options-classes-particles-particlesoptions-tsparticles-v3-0-0)
- [Options/Classes/Particles/Move/Spin | tsParticles - v3.0.0](#options-classes-particles-move-spin-tsparticles-v3-0-0)
- [Options/Classes/Particles/Number/ParticlesDensity | tsParticles - v3.0.0](#options-classes-particles-number-particlesdensity-tsparticles-v3-0-0)
- [Options/Classes/Particles/Shadow | tsParticles - v3.0.0](#options-classes-particles-shadow-tsparticles-v3-0-0)
- [Options/Classes/Particles/Opacity/OpacityAnimation | tsParticles - v3.0.0](#options-classes-particles-opacity-opacityanimation-tsparticles-v3-0-0)
- [Options/Classes/Particles/Size/Size | tsParticles - v3.0.0](#options-classes-particles-size-size-tsparticles-v3-0-0)
- [Options/Classes/Particles/Shape/Shape | tsParticles - v3.0.0](#options-classes-particles-shape-shape-tsparticles-v3-0-0)
- [Options/Classes/Particles/Stroke | tsParticles - v3.0.0](#options-classes-particles-stroke-tsparticles-v3-0-0)
- [Options/Classes/Particles/Size/SizeAnimation | tsParticles - v3.0.0](#options-classes-particles-size-sizeanimation-tsparticles-v3-0-0)
- [Options/Classes/Responsive | tsParticles - v3.0.0](#options-classes-responsive-tsparticles-v3-0-0)
- [Options/Classes/Particles/ZIndex/ZIndex | tsParticles - v3.0.0](#options-classes-particles-zindex-zindex-tsparticles-v3-0-0)
- [Options/Classes/Theme/ThemeDefault | tsParticles - v3.0.0](#options-classes-theme-themedefault-tsparticles-v3-0-0)
- [Options/Classes/Theme/Theme | tsParticles - v3.0.0](#options-classes-theme-theme-tsparticles-v3-0-0)
- [Options/Interfaces/BackgroundMask/IBackgroundMaskCover | tsParticles - v3.0.0](#options-interfaces-backgroundmask-ibackgroundmaskcover-tsparticles-v3-0-0)
- [Options/Classes/ValueWithRandom | tsParticles - v3.0.0](#options-classes-valuewithrandom-tsparticles-v3-0-0)
- [Options/Interfaces/IAnimatable | tsParticles - v3.0.0](#options-interfaces-ianimatable-tsparticles-v3-0-0)
- [Options/Interfaces/IAnimation | tsParticles - v3.0.0](#options-interfaces-ianimation-tsparticles-v3-0-0)
- [Options/Interfaces/IAnimatableColor | tsParticles - v3.0.0](#options-interfaces-ianimatablecolor-tsparticles-v3-0-0)
- [Options/Interfaces/IHslAnimation | tsParticles - v3.0.0](#options-interfaces-ihslanimation-tsparticles-v3-0-0)
- [Options/Interfaces/IColorAnimation | tsParticles - v3.0.0](#options-interfaces-icoloranimation-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IClickEvent | tsParticles - v3.0.0](#options-interfaces-interactivity-events-iclickevent-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IDivEvent | tsParticles - v3.0.0](#options-interfaces-interactivity-events-idivevent-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IEvents | tsParticles - v3.0.0](#options-interfaces-interactivity-events-ievents-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IHoverEvent | tsParticles - v3.0.0](#options-interfaces-interactivity-events-ihoverevent-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IParallax | tsParticles - v3.0.0](#options-interfaces-interactivity-events-iparallax-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Events/IResizeEvent | tsParticles - v3.0.0](#options-interfaces-interactivity-events-iresizeevent-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Modes/IModeDiv | tsParticles - v3.0.0](#options-interfaces-interactivity-modes-imodediv-tsparticles-v3-0-0)
- [export-types | tsParticles - v3.0.0](#export-types-tsparticles-v3-0-0)
- [Options/Interfaces/Interactivity/Modes/IModes | tsParticles - v3.0.0](#options-interfaces-interactivity-modes-imodes-tsparticles-v3-0-0)
- [Options/Interfaces/IOptionLoader | tsParticles - v3.0.0](#options-interfaces-ioptionloader-tsparticles-v3-0-0)
- [exports | tsParticles - v3.0.0](#exports-tsparticles-v3-0-0)
- [Options/Interfaces/IOptionsColor | tsParticles - v3.0.0](#options-interfaces-ioptionscolor-tsparticles-v3-0-0)
- [Options/Interfaces/IValueWithRandom | tsParticles - v3.0.0](#options-interfaces-ivaluewithrandom-tsparticles-v3-0-0)
- [index | tsParticles - v3.0.0](#index-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Bounce/IParticlesBounce | tsParticles - v3.0.0](#options-interfaces-particles-bounce-iparticlesbounce-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Collisions/ICollisions | tsParticles - v3.0.0](#options-interfaces-particles-collisions-icollisions-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Collisions/ICollisionsOverlap | tsParticles - v3.0.0](#options-interfaces-particles-collisions-icollisionsoverlap-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Collisions/ICollisionsAbsorb | tsParticles - v3.0.0](#options-interfaces-particles-collisions-icollisionsabsorb-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Effect/IEffect | tsParticles - v3.0.0](#options-interfaces-particles-effect-ieffect-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/IShadow | tsParticles - v3.0.0](#options-interfaces-particles-ishadow-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/IStroke | tsParticles - v3.0.0](#options-interfaces-particles-istroke-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMove | tsParticles - v3.0.0](#options-interfaces-particles-move-imove-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveAngle | tsParticles - v3.0.0](#options-interfaces-particles-move-imoveangle-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveAttract | tsParticles - v3.0.0](#options-interfaces-particles-move-imoveattract-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveCenter | tsParticles - v3.0.0](#options-interfaces-particles-move-imovecenter-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveGravity | tsParticles - v3.0.0](#options-interfaces-particles-move-imovegravity-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveTrail | tsParticles - v3.0.0](#options-interfaces-particles-move-imovetrail-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IMoveTrailFill | tsParticles - v3.0.0](#options-interfaces-particles-move-imovetrailfill-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/IOutModes | tsParticles - v3.0.0](#options-interfaces-particles-move-ioutmodes-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/ISpin | tsParticles - v3.0.0](#options-interfaces-particles-move-ispin-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Move/Path/IMovePath | tsParticles - v3.0.0](#options-interfaces-particles-move-path-imovepath-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Number/IParticlesDensity | tsParticles - v3.0.0](#options-interfaces-particles-number-iparticlesdensity-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Number/IParticlesNumber | tsParticles - v3.0.0](#options-interfaces-particles-number-iparticlesnumber-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Number/IParticlesNumberLimit | tsParticles - v3.0.0](#options-interfaces-particles-number-iparticlesnumberlimit-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Opacity/IOpacity | tsParticles - v3.0.0](#options-interfaces-particles-opacity-iopacity-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Opacity/IOpacityAnimation | tsParticles - v3.0.0](#options-interfaces-particles-opacity-iopacityanimation-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Shape/IShape | tsParticles - v3.0.0](#options-interfaces-particles-shape-ishape-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Size/ISizeAnimation | tsParticles - v3.0.0](#options-interfaces-particles-size-isizeanimation-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/Size/ISize | tsParticles - v3.0.0](#options-interfaces-particles-size-isize-tsparticles-v3-0-0)
- [Options/Interfaces/Particles/ZIndex/IZIndex | tsParticles - v3.0.0](#options-interfaces-particles-zindex-izindex-tsparticles-v3-0-0)
- [Options/Interfaces/Theme/IThemeDefault | tsParticles - v3.0.0](#options-interfaces-theme-ithemedefault-tsparticles-v3-0-0)
- [Types/CustomEventArgs | tsParticles - v3.0.0](#types-customeventargs-tsparticles-v3-0-0)
- [Types/CustomEventListener | tsParticles - v3.0.0](#types-customeventlistener-tsparticles-v3-0-0)
- [Types/EasingFunction | tsParticles - v3.0.0](#types-easingfunction-tsparticles-v3-0-0)
- [Types/ExportResult | tsParticles - v3.0.0](#types-exportresult-tsparticles-v3-0-0)
- [Types/ISourceOptions | tsParticles - v3.0.0](#types-isourceoptions-tsparticles-v3-0-0)
---
# tsParticles - v3.0.0
tsParticles - v3.0.0
====================
[](https://particles.js.org/)
tsParticles - TypeScript Particles[](https://particles.js.org/docs/index.html#md:tsparticles---typescript-particles)
=====================================================================================================================
**A lightweight TypeScript library for creating particles. Dependency free (\*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**
[](https://github.com/sponsors/matteobruni)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://cdnjs.com/libraries/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://lerna.js.org/)
[](https://www.codefactor.io/repository/github/matteobruni/tsparticles)
[](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)
[](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)
[](https://gitpod.io/#https://github.com/matteobruni/tsparticles)
[](https://repl.it/github/matteobruni/tsparticles)
[](https://discord.gg/hACwv45Hme)
[](https://t.me/tsparticles)
[](https://www.reddit.com/r/tsParticles/)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles%22)
[](https://www.buymeacoffee.com/matteobruni)
* * *
Table of Contents[](https://particles.js.org/docs/index.html#md:table-of-contents)
-----------------------------------------------------------------------------------
⚠️⚠️ \_This readme refers to **v2** version, [read here](https://github.com/matteobruni/tsparticles/tree/v1#readme)
for **v1** documentation\* ⚠️⚠️
* [tsParticles - TypeScript Particles](https://particles.js.org/docs/index.html#md:tsparticles---typescript-particles)
* [Table of Contents](https://particles.js.org/docs/index.html#md:table-of-contents)
* [Do you want to use it on your website?](https://particles.js.org/docs/index.html#md:do-you-want-to-use-it-on-your-website)
* [**_Library installation_**](https://particles.js.org/docs/index.html#md:library-installation)
* [**_Hosting / CDN_**](https://particles.js.org/docs/index.html#md:hosting--cdn)
* [jsDelivr](https://particles.js.org/docs/index.html#md:jsdelivr)
* [cdnjs](https://particles.js.org/docs/index.html#md:cdnjs)
* [unpkg](https://particles.js.org/docs/index.html#md:unpkg)
* [**_npm_**](https://particles.js.org/docs/index.html#md:npm)
* [**_yarn_**](https://particles.js.org/docs/index.html#md:yarn)
* [**_pnpm_**](https://particles.js.org/docs/index.html#md:pnpm)
* [Import and require](https://particles.js.org/docs/index.html#md:import-and-require)
* [**_Usage_**](https://particles.js.org/docs/index.html#md:usage)
* [Official components for some of the most used frameworks](https://particles.js.org/docs/index.html#md:official-components-for-some-of-the-most-used-frameworks)
* [Angular](https://particles.js.org/docs/index.html#md:angular)
* [Astro](https://particles.js.org/docs/index.html#md:astro)
* [Ember.js](https://particles.js.org/docs/index.html#md:emberjs)
* [Inferno](https://particles.js.org/docs/index.html#md:inferno)
* [jQuery](https://particles.js.org/docs/index.html#md:jquery)
* [Preact](https://particles.js.org/docs/index.html#md:preact)
* [ReactJS](https://particles.js.org/docs/index.html#md:reactjs)
* [RiotJS](https://particles.js.org/docs/index.html#md:riotjs)
* [`riot-particles`](https://particles.js.org/docs/index.html#md:riot-particles)
* [SolidJS](https://particles.js.org/docs/index.html#md:solidjs)
* [`solid-particles`](https://particles.js.org/docs/index.html#md:solid-particles)
* [Svelte](https://particles.js.org/docs/index.html#md:svelte)
* [VueJS 2.x](https://particles.js.org/docs/index.html#md:vuejs-2x)
* [VueJS 3.x](https://particles.js.org/docs/index.html#md:vuejs-3x)
* [Web Components](https://particles.js.org/docs/index.html#md:web-components)
* [`web-particles`](https://particles.js.org/docs/index.html#md:web-particles)
* [WordPress](https://particles.js.org/docs/index.html#md:wordpress)
* [`wordpress-particles`](https://particles.js.org/docs/index.html#md:wordpress-particles)
* [Elementor](https://particles.js.org/docs/index.html#md:elementor)
* [Presets](https://particles.js.org/docs/index.html#md:presets)
* [Big Circles](https://particles.js.org/docs/index.html#md:big-circles)
* [Bubbles](https://particles.js.org/docs/index.html#md:bubbles)
* [Confetti](https://particles.js.org/docs/index.html#md:confetti)
* [Fire](https://particles.js.org/docs/index.html#md:fire)
* [Firefly](https://particles.js.org/docs/index.html#md:firefly)
* [Fireworks](https://particles.js.org/docs/index.html#md:fireworks)
* [Fountain](https://particles.js.org/docs/index.html#md:fountain)
* [Links](https://particles.js.org/docs/index.html#md:links)
* [Sea Anemone](https://particles.js.org/docs/index.html#md:sea-anemone)
* [Snow](https://particles.js.org/docs/index.html#md:snow)
* [Stars](https://particles.js.org/docs/index.html#md:stars)
* [Triangles](https://particles.js.org/docs/index.html#md:triangles)
* [Templates and Resources](https://particles.js.org/docs/index.html#md:templates-and-resources)
* [**_Demo / Generator_**](https://particles.js.org/docs/index.html#md:demo--generator)
* [**_Video Tutorials_**](https://particles.js.org/docs/index.html#md:video-tutorials)
* [Characters as particles](https://particles.js.org/docs/index.html#md:characters-as-particles)
* [Polygon mask](https://particles.js.org/docs/index.html#md:polygon-mask)
* [Animated stars](https://particles.js.org/docs/index.html#md:animated-stars)
* [Nyan cat flying on scrolling stars](https://particles.js.org/docs/index.html#md:nyan-cat-flying-on-scrolling-stars)
* [Snow particles](https://particles.js.org/docs/index.html#md:snow-particles)
* [Background Mask particles](https://particles.js.org/docs/index.html#md:background-mask-particles)
* [**_Options_**](https://particles.js.org/docs/index.html#md:options)
* [Want to see it in action and try it?](https://particles.js.org/docs/index.html#md:want-to-see-it-in-action-and-try-it)
* [Migrating from Particles.js](https://particles.js.org/docs/index.html#md:migrating-from-particlesjs)
* [Plugins/Customizations](https://particles.js.org/docs/index.html#md:pluginscustomizations)
* [Dependency Graphs](https://particles.js.org/docs/index.html#md:dependency-graphs)
* [Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!](https://particles.js.org/docs/index.html#md:huge-thanks-to-jetbrains-for-the-2020-2022-open-source-licenses)
* * *
Do you want to use it on your website?[](https://particles.js.org/docs/index.html#md:do-you-want-to-use-it-on-your-website)
----------------------------------------------------------------------------------------------------------------------------
_Documentation and Development references [here](https://particles.js.org/docs/)
📖_
**This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.
You'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation)
, with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.
**The output files are just JavaScript**. 🤩
CDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.engine.min.js), and all files splitted for `import` syntax.
**If you are interested** there are some _simple instructions_ just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation)
to guide you to migrate from the old particles.js library.
**_Library installation_**[](https://particles.js.org/docs/index.html#md:library-installation)
-----------------------------------------------------------------------------------------------
### **_Hosting / CDN_**[](https://particles.js.org/docs/index.html#md:hosting--cdn)
**_Please use these hosts or your own to load tsParticles on your projects_**
#### jsDelivr[](https://particles.js.org/docs/index.html#md:jsdelivr)
[](https://www.jsdelivr.com/package/npm/tsparticles-confetti)
[](https://www.jsdelivr.com/package/npm/tsparticles-engine)
[](https://www.jsdelivr.com/package/npm/tsparticles-fireworks)
[](https://www.jsdelivr.com/package/npm/tsparticles-slim)
[](https://www.jsdelivr.com/package/npm/tsparticles)
#### cdnjs[](https://particles.js.org/docs/index.html#md:cdnjs)
[](https://cdnjs.com/libraries/tsparticles)
#### unpkg[](https://particles.js.org/docs/index.html#md:unpkg)
[https://unpkg.com/tsparticles-confetti/](https://unpkg.com/tsparticles-confetti/)
[https://unpkg.com/tsparticles-engine/](https://unpkg.com/tsparticles-engine/)
[https://unpkg.com/tsparticles-fireworks/](https://unpkg.com/tsparticles-fireworks/)
[https://unpkg.com/tsparticles-slim/](https://unpkg.com/tsparticles-slim/)
[https://unpkg.com/tsparticles/](https://unpkg.com/tsparticles/)
* * *
### **_npm_**[](https://particles.js.org/docs/index.html#md:npm)
_tsParticles Confetti_
[](https://www.npmjs.com/package/tsparticles-confetti)
[](https://www.npmjs.com/package/tsparticles-confetti)
_tsParticles Engine_
[](https://www.npmjs.com/package/tsparticles-engine)
[](https://www.npmjs.com/package/tsparticles-engine)
_tsParticles Fireworks_
[](https://www.npmjs.com/package/tsparticles-fireworks)
[](https://www.npmjs.com/package/tsparticles-fireworks)
_tsParticles Slim_
[](https://www.npmjs.com/package/tsparticles-slim)
[](https://www.npmjs.com/package/tsparticles-slim)
_tsParticles_
[](https://www.npmjs.com/package/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
npm install tsparticles-engine
### **_yarn_**[](https://particles.js.org/docs/index.html#md:yarn)
yarn add tsparticles-engine
### **_pnpm_**[](https://particles.js.org/docs/index.html#md:pnpm)
pnpm install tsparticles-engine
#### Import and require[](https://particles.js.org/docs/index.html#md:import-and-require)
const tsParticles = require("tsparticles-engine");// orimport { tsParticles } from "tsparticles-engine";
The imported `tsParticles` is the same instance you have when including the script in the page using the `
**app.js**
/* tsParticles.load(@params); */tsParticles.load({ id: "tsparticles", options: { /* options here */ }, // url: "http://foo.bar/particles.js // this can be used as an alternative to options property});// after initialization this can be used./* tsParticles.setOnClickHandler(@callback); *//* this will be fired from all particles loaded */tsParticles.setOnClickHandler((event, particles) => { /* custom on click handler */});// now you can control the animations too, it's possible to pause and resume the animations// these methods don't change the config so you're safe with all your configurations// domItem(0) returns the first tsParticles instance loaded in the domconst particles = tsParticles.domItem(0);// play will start the animations, if the move is not enabled it won't enable it, it just updates the frameparticles.play();// pause will stop the animationsparticles.pause();
* * *
Official components for some of the most used frameworks[](https://particles.js.org/docs/index.html#md:official-components-for-some-of-the-most-used-frameworks)
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
### Angular[](https://particles.js.org/docs/index.html#md:angular)
`ng-particles`
[](https://www.npmjs.com/package/ng-particles)
[](https://www.npmjs.com/package/ng-particles)
Instructions available [here](https://github.com/tsparticles/angular/#readme)
### Astro[](https://particles.js.org/docs/index.html#md:astro)
`astro-particles`
[](https://www.npmjs.com/package/astro-particles)
[](https://www.npmjs.com/package/astro-particles)
Instructions available [here](https://github.com/tsparticles/astro/#readme)
### Ember.js[](https://particles.js.org/docs/index.html#md:emberjs)
`ember-tsparticles`
[](https://www.npmjs.com/package/ember-tsparticles)
[](https://www.npmjs.com/package/ember-tsparticles)
Instructions available [here](https://github.com/tsparticles/ember/#readme)
### Inferno[](https://particles.js.org/docs/index.html#md:inferno)
`inferno-particles`
[](https://www.npmjs.com/package/inferno-particles)
[](https://www.npmjs.com/package/inferno-particles)
Instructions available [here](https://github.com/tsparticles/inferno/#readme)
### jQuery[](https://particles.js.org/docs/index.html#md:jquery)
`jquery-particles`
[](https://www.npmjs.com/package/jquery-particles)
[](https://www.npmjs.com/package/jquery-particles)
Instructions available [here](https://github.com/tsparticles/jquery/#readme)
### Preact[](https://particles.js.org/docs/index.html#md:preact)
`preact-particles`
[](https://www.npmjs.com/package/preact-particles)
[](https://www.npmjs.com/package/preact-particles)
Instructions available [here](https://github.com/tsparticles/preact/#readme)
### ReactJS[](https://particles.js.org/docs/index.html#md:reactjs)
`react-particles`
[](https://www.npmjs.com/package/react-particles)
[](https://www.npmjs.com/package/react-particles)
Instructions available [here](https://github.com/tsparticles/react/#readme)
### RiotJS[](https://particles.js.org/docs/index.html#md:riotjs)
#### `riot-particles`[](https://particles.js.org/docs/index.html#md:riot-particles)
[](https://www.npmjs.com/package/riot-particles)
[](https://www.npmjs.com/package/riot-particles)
You can find the instructions [here](https://github.com/tsparticles/riot/#readme)
### SolidJS[](https://particles.js.org/docs/index.html#md:solidjs)
#### `solid-particles`[](https://particles.js.org/docs/index.html#md:solid-particles)
[](https://www.npmjs.com/package/solid-particles)
[](https://www.npmjs.com/package/solid-particles)
You can find the instructions [here](https://github.com/tsparticles/solid/#readme)
### Svelte[](https://particles.js.org/docs/index.html#md:svelte)
`svelte-particles`
[](https://www.npmjs.com/package/svelte-particles)
[](https://www.npmjs.com/package/svelte-particles)
Instructions available [here](https://github.com/tsparticles/svelte/#readme)
### VueJS 2.x[](https://particles.js.org/docs/index.html#md:vuejs-2x)
`vue2-particles`
[](https://www.npmjs.com/package/vue2-particles)
[](https://www.npmjs.com/package/vue2-particles)
Instructions available [here](https://github.com/tsparticles/vue2/#readme)
### VueJS 3.x[](https://particles.js.org/docs/index.html#md:vuejs-3x)
`vue3-particles`
[](https://www.npmjs.com/package/vue3-particles)
[](https://www.npmjs.com/package/vue3-particles)
Instruction available [here](https://github.com/tsparticles/vue3/#readme)
### Web Components[](https://particles.js.org/docs/index.html#md:web-components)
#### `web-particles`[](https://particles.js.org/docs/index.html#md:web-particles)
[](https://www.npmjs.com/package/web-particles)
[](https://www.npmjs.com/package/web-particles)
You can find the instructions [here](https://github.com/tsparticles/webcomponents/#readme)
### WordPress[](https://particles.js.org/docs/index.html#md:wordpress)
#### `wordpress-particles`[](https://particles.js.org/docs/index.html#md:wordpress-particles)
[](https://www.npmjs.com/package/wordpress-particles)
[](https://www.npmjs.com/package/wordpress-particles)
[](https://wordpress.org/plugins/tsparticles-block/)
[](https://wordpress.org/plugins/tsparticles-block/)
The plugin page hosted on [WordPress.org](http://wordpress.org/)
can be found [here](https://wordpress.org/plugins/tsparticles-block/#description)
### Elementor[](https://particles.js.org/docs/index.html#md:elementor)
Actually, an official tsParticles plugin isn't existing, but I have a collaboration with the `Premium Addons for Elementor` plugin collection.

Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. [Check It Now](https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/)
.
Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. [See a Live Example](https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/)
.
* * *
Presets[](https://particles.js.org/docs/index.html#md:presets)
---------------------------------------------------------------
There are some presets ready to be used in this repository, and they also have a bundle file that contains everything needed to run.
### Big Circles[](https://particles.js.org/docs/index.html#md:big-circles)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles)
[](https://www.npmjs.com/package/tsparticles-preset-big-circles)
[](https://www.npmjs.com/package/tsparticles-preset-big-circles)
This preset loads big colored circles moving upwards on a white background.
[](https://particles.js.org/samples/presets/bigCircles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bigCircles#readme)
### Bubbles[](https://particles.js.org/docs/index.html#md:bubbles)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://www.npmjs.com/package/tsparticles-preset-bubbles)
[](https://www.npmjs.com/package/tsparticles-preset-bubbles)
This preset loads colored bubbles coming from the bottom of the screen on a white background.
[](https://particles.js.org/samples/presets/bubbles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bubbles#readme)
### Confetti[](https://particles.js.org/docs/index.html#md:confetti)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti)
[](https://www.npmjs.com/package/tsparticles-preset-confetti)
[](https://www.npmjs.com/package/tsparticles-preset-confetti)
This preset loads white and red confetti launched from the screen center on a transparent background.
[](https://particles.js.org/samples/presets/confetti)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confetti#readme)
### Fire[](https://particles.js.org/docs/index.html#md:fire)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire)
[](https://www.npmjs.com/package/tsparticles-preset-fire)
[](https://www.npmjs.com/package/tsparticles-preset-fire)
This preset loads a faded red to a black background with particles colored like fire and ash sparks.
[](https://particles.js.org/samples/presets/fire)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fire#readme)
### Firefly[](https://particles.js.org/docs/index.html#md:firefly)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly)
[](https://www.npmjs.com/package/tsparticles-preset-firefly)
[](https://www.npmjs.com/package/tsparticles-preset-firefly)
This preset loads a mouse trail made with small fading particles like little fireflies.
[](https://particles.js.org/samples/presets/firefly)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/firefly#readme)
### Fireworks[](https://particles.js.org/docs/index.html#md:fireworks)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks)
[](https://www.npmjs.com/package/tsparticles-preset-fireworks)
[](https://www.npmjs.com/package/tsparticles-preset-fireworks)
This preset loads a beautiful fireworks effect.
[](https://particles.js.org/samples/presets/fireworks)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fireworks#readme)
### Fountain[](https://particles.js.org/docs/index.html#md:fountain)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain)
[](https://www.npmjs.com/package/tsparticles-preset-fountain)
[](https://www.npmjs.com/package/tsparticles-preset-fountain)
[](https://particles.js.org/samples/presets/fountain)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fountain#readme)
### Links[](https://particles.js.org/docs/index.html#md:links)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-links)
[](https://www.npmjs.com/package/tsparticles-preset-links)
[](https://www.npmjs.com/package/tsparticles-preset-links)
[](https://particles.js.org/samples/presets/links)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/links#readme)
### Sea Anemone[](https://particles.js.org/docs/index.html#md:sea-anemone)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone)
[](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)
[](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)
[](https://particles.js.org/samples/presets/seaAnemone)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/seaAnemone#readme)
### Snow[](https://particles.js.org/docs/index.html#md:snow)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow)
[](https://www.npmjs.com/package/tsparticles-preset-snow)
[](https://www.npmjs.com/package/tsparticles-preset-snow)
[](https://particles.js.org/samples/presets/snow)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/snow#readme)
### Stars[](https://particles.js.org/docs/index.html#md:stars)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars)
[](https://www.npmjs.com/package/tsparticles-preset-stars)
[](https://www.npmjs.com/package/tsparticles-preset-stars)
[](https://particles.js.org/samples/presets/stars)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/stars#readme)
### Triangles[](https://particles.js.org/docs/index.html#md:triangles)
[](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles)
[](https://www.npmjs.com/package/tsparticles-preset-triangles)
[](https://www.npmjs.com/package/tsparticles-preset-triangles)
[](https://particles.js.org/samples/presets/triangles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/triangles#readme)
* * *
Templates and Resources[](https://particles.js.org/docs/index.html#md:templates-and-resources)
-----------------------------------------------------------------------------------------------
You can find some tsParticles related templates [here](https://github.com/tsparticles/templates)
. The templates are created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_, and other frameworks.
The templates will vary, new ones can be created or older ones updated with the latest features or changed to a better style. Check them out once in a while.
If you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be credited as the template author!
[https://github.com/tsparticles/templates](https://github.com/tsparticles/templates)
* * *
**_Demo / Generator_**[](https://particles.js.org/docs/index.html#md:demo--generator)
--------------------------------------------------------------------------------------
[https://particles.js.org/samples](https://particles.js.org/samples)
[](https://particles.js.org/samples)
* * *
**_Video Tutorials_**[](https://particles.js.org/docs/index.html#md:video-tutorials)
-------------------------------------------------------------------------------------
You can find all video tutorials on the website here: [https://particles.js.org/video.html](https://particles.js.org/video.html)
_More videos are coming soon! Check every day if there are some new contents._
* * *
### Characters as particles[](https://particles.js.org/docs/index.html#md:characters-as-particles)
[](https://particles.js.org/samples/#chars)
* * *
### Polygon mask[](https://particles.js.org/docs/index.html#md:polygon-mask)
[](https://particles.js.org/samples/#polygonMask)
* * *
### Animated stars[](https://particles.js.org/docs/index.html#md:animated-stars)
[](https://particles.js.org/samples/#nasa)
* * *
### Nyan cat flying on scrolling stars[](https://particles.js.org/docs/index.html#md:nyan-cat-flying-on-scrolling-stars)
[](https://particles.js.org/samples/#nyancat2)
* * *
### Snow particles[](https://particles.js.org/docs/index.html#md:snow-particles)
[](https://particles.js.org/samples/#snow)
* * *
### Background Mask particles[](https://particles.js.org/docs/index.html#md:background-mask-particles)
[](https://particles.js.org/samples/#background)
* * *
**particles.json**
You can find some config samples [here](https://github.com/tsparticles/website/tree/main/presets)
📖
* * *
**_Options_**[](https://particles.js.org/docs/index.html#md:options)
---------------------------------------------------------------------
You can find all options available [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
📖
Want to see it in action and try it?[](https://particles.js.org/docs/index.html#md:want-to-see-it-in-action-and-try-it)
------------------------------------------------------------------------------------------------------------------------
I've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage)
😮 or you can check out my [profile](https://codepen.io/matteobruni)
Otherwise, there's the demo page link below.
[](https://particles.js.org/samples/)
Want to see even more demos? Clone the repository on your computer and follow these instructions
$ pnpm i$ pnpm run build$ cd demo/vanilla$ pnpm start
**Boom! 💥** [http://localhost:3000](http://localhost:3000/)
and you can check out other demos.
_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.
* * *
Migrating from Particles.js[](https://particles.js.org/docs/index.html#md:migrating-from-particlesjs)
------------------------------------------------------------------------------------------------------
**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.
[](https://www.jsdelivr.com/package/npm/tsparticles-particles.js)
[](https://www.npmjs.com/package/tsparticles-particles.js)
[](https://www.npmjs.com/package/tsparticles-particles.js)
Seriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're ready** 🧙!
You can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)
**
Want to know 5 reasons to do the switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)
_Below you can find all the information you need to install tsParticles and its new syntax._
* * *
Plugins/Customizations[](https://particles.js.org/docs/index.html#md:pluginscustomizations)
--------------------------------------------------------------------------------------------
tsParticles now supports some customizations 🥳.
**You can create your own plugins**
_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)
..._
* * *
Dependency Graphs[](https://particles.js.org/docs/index.html#md:dependency-graphs)
-----------------------------------------------------------------------------------
flowchart LR
subgraph b [Bundles]
bp[Particles.js compatibility bundle] --> bs[tsParticles Slim]
bs --> bf[tsParticles]
end
e[tsParticles Engine] --> b
iea & iebo & iebu & iec & ieg & iepa & iepu & ierem & ierep & ies --> bs
ipa & ipc & ipl --> bs
mb & mp --> bs
ple4 --> bs
sc & si & sl & sp & ssq & sst & st --> bs
ua & uc & ul & uop & uou & usi & ust --> bs
iet --> bf
pla & plem --> bf
ur & uti & utw & uw --> bf
subgraph i [Interactions]
subgraph ie [Externals]
iea[Attract]
iebo[Bounce]
iebu[Bubble]
iec[Connect]
ieg[Grab]
iepa[Pause]
iepu[Push]
ierem[Remove]
ierep[Repulse]
ies[Slow]
iet[Trail]
end
il[Light]
subgraph ip [Particles]
ipa[Attract]
ipc[Collisions]
ipl[Links]
ipr[Repulse]
end
end
i --> ie
i --> ip
e --> i
subgraph m [Movers]
mb[Base]
mp[Parallax]
end
e --> m
subgraph pa [Paths]
pac[Curves]
pape[Perlin Noise]
papo[Polygon]
pas[Simplex Noise]
end
e --> pa
subgraph pl [Plugins]
pla[Absorbers]
plem[Emitters]
plh[HSV Color]
pli[Infection]
plm[Motion]
plp[Polygon Mask]
subgraph plea [Easings]
pleb[Back]
pleci[Circ]
plecu[Cubic]
plee[Expo]
ple4[Quad]
ple5[Quint]
ples[Sine]
end
end
pl --> plea
e --> pl
subgraph s [Shapes]
sb[Bubble]
sc[Circle]
sh[Heart]
si[Image]
sl[Line]
sm[Multiline Text]
sp[Polygon]
sr[Rounded Rectangle]
ssp[Spiral]
ssq[Square]
sst[Star]
st[Text]
end
e --> s
subgraph u [Updaters]
ua[Angle]
uc[Color]
ud[Destroy]
ug[Gradient]
ul[Life]
uop[Opacity]
uor[Orbit]
uou[Out Modes]
ur[Roll]
usi[Size]
ust[Stroke Color]
uti[Tilt]
utw[Twinkle]
uw[Wobble]
end
e --> u
* * *
[](https://www.jetbrains.com/?from=tsParticles)
[](https://www.jetbrains.com/webstorm/?from=tsParticles)
### Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles)
for the 2020-2022 Open Source Licenses
[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles)
is used to maintain this project.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
[tsParticles - TypeScript Particles](https://particles.js.org/docs/index.html#md:tsparticles---typescript-particles)
* [Table of Contents](https://particles.js.org/docs/index.html#md:table-of-contents)
* [Do you want to use it on your website?](https://particles.js.org/docs/index.html#md:do-you-want-to-use-it-on-your-website)
* [Library installation](https://particles.js.org/docs/index.html#md:library-installation)
* * [Hosting / CDN](https://particles.js.org/docs/index.html#md:hosting--cdn)
* * [jsDelivr](https://particles.js.org/docs/index.html#md:jsdelivr)
* [cdnjs](https://particles.js.org/docs/index.html#md:cdnjs)
* [unpkg](https://particles.js.org/docs/index.html#md:unpkg)
* [npm](https://particles.js.org/docs/index.html#md:npm)
* [yarn](https://particles.js.org/docs/index.html#md:yarn)
* [pnpm](https://particles.js.org/docs/index.html#md:pnpm)
* * [Import and require](https://particles.js.org/docs/index.html#md:import-and-require)
* [Usage](https://particles.js.org/docs/index.html#md:usage)
* [Official components for some of the most used frameworks](https://particles.js.org/docs/index.html#md:official-components-for-some-of-the-most-used-frameworks)
* * [Angular](https://particles.js.org/docs/index.html#md:angular)
* [Astro](https://particles.js.org/docs/index.html#md:astro)
* [Ember.js](https://particles.js.org/docs/index.html#md:emberjs)
* [Inferno](https://particles.js.org/docs/index.html#md:inferno)
* [jQuery](https://particles.js.org/docs/index.html#md:jquery)
* [Preact](https://particles.js.org/docs/index.html#md:preact)
* [ReactJS](https://particles.js.org/docs/index.html#md:reactjs)
* [RiotJS](https://particles.js.org/docs/index.html#md:riotjs)
* * [riot-particles](https://particles.js.org/docs/index.html#md:riot-particles)
* [SolidJS](https://particles.js.org/docs/index.html#md:solidjs)
* * [solid-particles](https://particles.js.org/docs/index.html#md:solid-particles)
* [Svelte](https://particles.js.org/docs/index.html#md:svelte)
* [VueJS 2.x](https://particles.js.org/docs/index.html#md:vuejs-2x)
* [VueJS 3.x](https://particles.js.org/docs/index.html#md:vuejs-3x)
* [Web Components](https://particles.js.org/docs/index.html#md:web-components)
* * [web-particles](https://particles.js.org/docs/index.html#md:web-particles)
* [WordPress](https://particles.js.org/docs/index.html#md:wordpress)
* * [wordpress-particles](https://particles.js.org/docs/index.html#md:wordpress-particles)
* [Elementor](https://particles.js.org/docs/index.html#md:elementor)
* [Presets](https://particles.js.org/docs/index.html#md:presets)
* * [Big Circles](https://particles.js.org/docs/index.html#md:big-circles)
* [Bubbles](https://particles.js.org/docs/index.html#md:bubbles)
* [Confetti](https://particles.js.org/docs/index.html#md:confetti)
* [Fire](https://particles.js.org/docs/index.html#md:fire)
* [Firefly](https://particles.js.org/docs/index.html#md:firefly)
* [Fireworks](https://particles.js.org/docs/index.html#md:fireworks)
* [Fountain](https://particles.js.org/docs/index.html#md:fountain)
* [Links](https://particles.js.org/docs/index.html#md:links)
* [Sea Anemone](https://particles.js.org/docs/index.html#md:sea-anemone)
* [Snow](https://particles.js.org/docs/index.html#md:snow)
* [Stars](https://particles.js.org/docs/index.html#md:stars)
* [Triangles](https://particles.js.org/docs/index.html#md:triangles)
* [Templates and Resources](https://particles.js.org/docs/index.html#md:templates-and-resources)
* [Demo / Generator](https://particles.js.org/docs/index.html#md:demo--generator)
* [Video Tutorials](https://particles.js.org/docs/index.html#md:video-tutorials)
* * [Characters as particles](https://particles.js.org/docs/index.html#md:characters-as-particles)
* [Polygon mask](https://particles.js.org/docs/index.html#md:polygon-mask)
* [Animated stars](https://particles.js.org/docs/index.html#md:animated-stars)
* [Nyan cat flying on scrolling stars](https://particles.js.org/docs/index.html#md:nyan-cat-flying-on-scrolling-stars)
* [Snow particles](https://particles.js.org/docs/index.html#md:snow-particles)
* [Background Mask particles](https://particles.js.org/docs/index.html#md:background-mask-particles)
* [Options](https://particles.js.org/docs/index.html#md:options)
* [Want to see it in action and try it?](https://particles.js.org/docs/index.html#md:want-to-see-it-in-action-and-try-it)
* [Migrating from Particles.js](https://particles.js.org/docs/index.html#md:migrating-from-particlesjs)
* [Plugins/Customizations](https://particles.js.org/docs/index.html#md:pluginscustomizations)
* [Dependency Graphs](https://particles.js.org/docs/index.html#md:dependency-graphs)
* * [Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!](https://particles.js.org/docs/index.html#md:huge-thanks-to-jetbrains-for-the-2020-2022-open-source-licenses)
---
# tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
tsParticles - v3.0.0
====================
### Index
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IOptions | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptions.html)
* [IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
Interface IOptions
==================
The Options interface, defines all the options that can be used by `tsParticles` \[\[include:Options.md\]\]
interface IOptions {
[autoPlay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#autoPlay)
: boolean;
[background](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#background)
: [IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
;
[backgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#backgroundMask)
: [IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
;
[clear](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#clear)
: boolean;
[delay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#delay)
: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
;
[detectRetina](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#detectRetina)
: boolean;
[duration](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#duration)
: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
;
[fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
: number;
[fullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fullScreen)
: boolean | [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
\>;
[interactivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#interactivity)
: [IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
;
[key](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#key)
?: string;
[manualParticles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#manualParticles)
: [IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
\[\];
[name](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#name)
?: string;
[particles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#particles)
: [IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
;
[pauseOnBlur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnBlur)
: boolean;
[pauseOnOutsideViewport](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnOutsideViewport)
: boolean;
[preset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#preset)
?: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
;
[responsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#responsive)
: [IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
\[\];
[smooth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#smooth)
: boolean;
[style](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#style)
: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
;
[themes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#themes)
: [ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
\[\];
[zLayers](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#zLayers)
: number;
\[name: string\]: unknown;
}
#### Implemented by
* [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
#### Indexable
* \[name: string\]: unknown
More custom options for external plugins or customizations
##### Index
### Properties
[autoPlay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#autoPlay)
[background](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#background)
[backgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#backgroundMask)
[clear](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#clear)
[delay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#delay)
[detectRetina](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#detectRetina)
[duration](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#duration)
[fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
[fullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fullScreen)
[interactivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#interactivity)
[key?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#key)
[manualParticles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#manualParticles)
[name?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#name)
[particles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#particles)
[pauseOnBlur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnBlur)
[pauseOnOutsideViewport](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnOutsideViewport)
[preset?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#preset)
[responsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#responsive)
[smooth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#smooth)
[style](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#style)
[themes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#themes)
[zLayers](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#zLayers)
Properties
----------
### autoPlay[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#autoPlay)
autoPlay: boolean
Sets if the animations should start automatically or manually
### background[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#background)
background: [IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
Background options, these background options will be used to the canvas element, they are all CSS properties
### backgroundMask[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#backgroundMask)
backgroundMask: [IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
Background Mask options, what's behind the canvas will become hidden and particles will uncover it
### clear[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#clear)
clear: boolean
Clears the canvas on every frame if enabled
### delay[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#delay)
delay: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
The initial delay before starting the animation
### detectRetina[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#detectRetina)
detectRetina: boolean
Enables the retina detection, if disabled the ratio used by canvas will be always 1 and not the device setting.
### duration[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#duration)
duration: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
The Particles effect duration in seconds, then the container will be destroyed
### fpsLimit[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
fpsLimit: number
The FPS (Frame Per Second) limit applied to all particles animations.
### fullScreen[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fullScreen)
fullScreen: boolean | [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
\>
Sets the animated background mode for particles canvas bringing it to the back
### interactivity[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#interactivity)
interactivity: [IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
The particles interaction options
### `Optional`key[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#key)
key?: string
The key used to store the options in the Engine.configs collection
### manualParticles[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#manualParticles)
manualParticles: [IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
\[\]
Particles inserted at load time with a specific position
### `Optional`name[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#name)
name?: string
The name of the config, if it needs to be shown to the user, used also if key is missing
### particles[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#particles)
particles: [IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
The particles options
### pauseOnBlur[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnBlur)
pauseOnBlur: boolean
Enables or disabled the animation on window blur
### pauseOnOutsideViewport[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnOutsideViewport)
pauseOnOutsideViewport: boolean
Enable or disabled the animation if the element is outside the viewport
### `Optional`preset[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#preset)
preset?: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
This property will be used to add specified presets to the options
### responsive[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#responsive)
responsive: [IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
\[\]
This sets custom options based on canvas size
### smooth[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#smooth)
smooth: boolean
Enables a smooth effect, by default it's disabled When enabled the animation will speed up or slow down depending on fps The [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
field will be used as a reference for the animation speed Some examples: - with a [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
of 60 the animation will be twice faster on 120 fps devices - with a [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
of 120 the animation will be twice slower on 60 fps devices The animation will be always smooth, but the behavior could be affected by the user screen refresh rate It's recommended to keep this disabled, be careful.
### style[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#style)
style: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
### themes[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#themes)
themes: [ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
\[\]
User-defined themes that can be retrieved by the particles [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
### zLayers[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#zLayers)
zLayers: number
The maximum layers used in the z-axis
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[autoPlay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#autoPlay)
[background](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#background)
[backgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#backgroundMask)
[clear](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#clear)
[delay](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#delay)
[detectRetina](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#detectRetina)
[duration](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#duration)
[fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
[fullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fullScreen)
[interactivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#interactivity)
[key](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#key)
[manualParticles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#manualParticles)
[name](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#name)
[particles](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#particles)
[pauseOnBlur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnBlur)
[pauseOnOutsideViewport](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#pauseOnOutsideViewport)
[preset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#preset)
[responsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#responsive)
[smooth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#smooth)
[style](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#style)
[themes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#themes)
[zLayers](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#zLayers)
---
# Options/Interfaces/IOptions | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptions.html)
Module Options/Interfaces/IOptions
==================================
### Index
### Interfaces
[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# RecursivePartial | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/RecursivePartial](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RecursivePartial.html)
* [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
Type Alias RecursivePartial
==============================
RecursivePartial<[T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)
\>: {
\[P in keyof [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)\
\]?: [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)
\[P\] extends (infer U)\[\]
? [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
\[\]
: [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)
\[P\] extends object | undefined
? [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)
\[P\]\>
: [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html#T)
\[P\]
}
#### Type Parameters
* T
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# SingleOrMultiple | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/SingleOrMultiple](https://particles.js.org/docs/modules/tsParticles_Engine.Types_SingleOrMultiple.html)
* [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
Type Alias SingleOrMultiple
==============================
SingleOrMultiple<[T](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html#T)
\>: [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html#T)
| [T](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html#T)
\[\]
#### Type Parameters
* T
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# RangeValue | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/RangeValue](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RangeValue.html)
* [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
Type Alias RangeValue
=====================
RangeValue: number | [IRangeValue](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IFullScreen | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/FullScreen/IFullScreen](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.html)
* [IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
Interface IFullScreen
=====================
The options to set the particles in the background using CSS `fixed` position The [IFullScreen.zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#zIndex)
property sets the background CSS `z-index` property \[\[include:Options/FullScreen.md\]\]
interface IFullScreen {
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#enable)
: boolean;
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#zIndex)
: number;
}
#### Implemented by
* [FullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html)
##### Index
### Properties
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#enable)
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#zIndex)
Properties
----------
### enable[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#enable)
enable: boolean
This property sets the canvas to a full window size acting like a background, the most common configuration. The default value is `false` since many already have different configurations.
This is really helpful since there's no need to write CSS code to have a full size tsParticles instance.
### zIndex[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#zIndex)
zIndex: number
This is the CSS `z-index` property set to the canvas.
If the `z-index` is less than `0` the mouse interactions works only with the `interactivity.detectsOn` set to `window`.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#enable)
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html#zIndex)
---
# IResponsive | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IResponsive](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IResponsive.html)
* [IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
Interface IResponsive
=====================
interface IResponsive {
[maxWidth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#maxWidth)
: number;
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
: "screen" | "canvas" | [ResponsiveMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html)
;
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#options)
: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>;
}
#### Implemented by
* [Responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html)
##### Index
### Properties
[maxWidth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#maxWidth)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#options)
Properties
----------
### maxWidth[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#maxWidth)
maxWidth: number
Maximum width of the canvas or the screen, depending on [mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
value.
### mode[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
mode: "screen" | "canvas" | [ResponsiveMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html)
Responsive mode.
### options[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#options)
options: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
Options to override.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[maxWidth](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#maxWidth)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#options)
---
# IManualParticle | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IManualParticle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IManualParticle.html)
* [IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
Interface IManualParticle
=========================
Manual particles options \[\[include:Options/ManualParticles.md\]\]
interface IManualParticle {
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#options)
?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
\>;
[position](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#position)
?: [ICoordinatesWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html)
;
}
#### Implemented by
* [ManualParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html)
##### Index
### Properties
[options?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#options)
[position?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#position)
Properties
----------
### `Optional`options[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#options)
options?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
\>
Particle options, this properties will override the general particles configuration
### `Optional`position[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#position)
position?: [ICoordinatesWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html)
Particle position in canvas size percent, if undefined a random position will be used
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#options)
[position](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html#position)
---
# ITheme | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Theme/ITheme](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Theme_ITheme.html)
* [ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
Interface ITheme
================
The options to configure themes that can be easily switched \[\[include:Options/Themes.md\]\]
interface ITheme {
[default](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#default)
: [IThemeDefault](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html)
;
[name](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#name)
: string;
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#options)
?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>;
}
#### Implemented by
* [Theme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html)
##### Index
### Properties
[default](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#default)
[name](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#name)
[options?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#options)
Properties
----------
### default[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#default)
default: [IThemeDefault](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html)
Options to set the default theme
### name[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#name)
name: string
Theme name, use it when changing theme
### `Optional`options[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#options)
options?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
All options the theme will override
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[default](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#default)
[name](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#name)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html#options)
---
# IBackground | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Background/IBackground](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Background_IBackground.html)
* [IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
Interface IBackground
=====================
The background options used by the canvas element, it's not drawn, it's applied in the style \[\[include:Options/Background.md\]\]
interface IBackground {
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#color)
: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
;
[image](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#image)
: string;
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#opacity)
: number;
[position](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#position)
: string;
[repeat](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#repeat)
: string;
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#size)
: string;
}
#### Implemented by
* [Background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html)
##### Index
### Properties
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#color)
[image](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#image)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#opacity)
[position](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#position)
[repeat](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#repeat)
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#size)
Properties
----------
### color[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#color)
color: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
The `color` property can be set to a HEX string or to a [color object](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_IOptionsColor.IOptionsColor.html)
, that is the same as the one used in `particles.color` options.
This color is set to canvas style `background-color` property, if this property is not set the background will be transparent.
### image[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#image)
image: string
The `image` property sets the canvas style `background-image` property.
This property doesn't have a default value, anyway if you need a background image you need to specify the same CSS syntax with the `url()` function.
### opacity[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#opacity)
opacity: number
The `opacity` property sets the `color` property opacity, so you can set a semi-transparent background.
This value is by default to `1` and it accepts any value between `0` and `1` included.
### position[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#position)
position: string
The `position` property sets the canvas style `background-position` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
can be useful to set the right value to this property.
### repeat[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#repeat)
repeat: string
The `repeat` property sets the canvas style `background-repeat` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
can be useful to set the right value to this property.
### size[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#size)
size: string
The `size` property sets the canvas style `background-size` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
can be useful to set the right value to this property.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#color)
[image](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#image)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#opacity)
[position](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#position)
[repeat](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#repeat)
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html#size)
---
# IBackgroundMask | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/BackgroundMask/IBackgroundMask](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.html)
* [IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
Interface IBackgroundMask
=========================
The options to apply a base color to canvas to cover what's behind The particles will unveil what is covered by the canvas \[\[include:Options/BackgroundMask.md\]\]
interface IBackgroundMask {
[composite](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#composite)
: GlobalCompositeOperation;
[cover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#cover)
: string | [IColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html)
| [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IBackgroundMaskCover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html)
\>;
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#enable)
: boolean;
}
#### Implemented by
* [BackgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html)
##### Index
### Properties
[composite](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#composite)
[cover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#cover)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#enable)
Properties
----------
### composite[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#composite)
composite: GlobalCompositeOperation
This property is used to choose the composition mode for the background mask effect.
The default value is `destination-out`, which unveils the background below using drawn elements, any other valid value can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)
### cover[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#cover)
cover: string | [IColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html)
| [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IBackgroundMaskCover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html)
\>
The `cover` property can be set to a HEX string or to a [color object](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html)
, that is the same as the one used in `particles.color` options.
The `cover` can also be a [cover object](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html)
like the one described below.
### enable[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#enable)
enable: boolean
This property set the background mask mode, this mode enables the `composite` option to all elements drawn.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[composite](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#composite)
[cover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#cover)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html#enable)
---
# IInteractivity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Interactivity/IInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.html)
* [IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
Interface IInteractivity
========================
Particles interactivity options \[\[include:Options/Interactivity.md\]\]
interface IInteractivity {
[detectsOn](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#detectsOn)
:
| "window"
| "canvas"
| "parent"
| [InteractivityDetect](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html)
;
[events](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#events)
: [IEvents](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html)
;
[modes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#modes)
: [IModes](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModes.IModes.html)
;
\[name: string\]: unknown;
}
#### Implemented by
* [Interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html)
#### Indexable
* \[name: string\]: unknown
##### Index
### Properties
[detectsOn](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#detectsOn)
[events](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#events)
[modes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#modes)
Properties
----------
### detectsOn[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#detectsOn)
detectsOn:
| "window"
| "canvas"
| "parent"
| [InteractivityDetect](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html)
Where the mouse events will be detected If set to `canvas` only the particles canvas will be targeted If set to `parent` only the particles canvas parent will be targeted If set to `window` every area will be the target
### events[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#events)
events: [IEvents](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html)
Interaction events options, this configures which events are enabled and which modes should be used
### modes[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#modes)
modes: [IModes](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModes.IModes.html)
Interaction modes options, this configures every mode behavior
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[detectsOn](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#detectsOn)
[events](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#events)
[modes](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html#modes)
---
# Options | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Options](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Options.html)
* [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
Class Options
=============
\[\[include:Options.md\]\]
#### Implements
* [IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
#### Indexable
* \[name: string\]: unknown
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#constructor)
### Properties
[autoPlay](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#autoPlay)
[background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#background)
[backgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#backgroundMask)
[clear](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#clear)
[defaultThemes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#defaultThemes)
[delay](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#delay)
[detectRetina](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#detectRetina)
[duration](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#duration)
[fpsLimit](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fpsLimit)
[fullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fullScreen)
[interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#interactivity)
[key?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#key)
[manualParticles](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#manualParticles)
[name?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#name)
[particles](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#particles)
[pauseOnBlur](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnBlur)
[pauseOnOutsideViewport](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnOutsideViewport)
[preset?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#preset)
[responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#responsive)
[smooth](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#smooth)
[style](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#style)
[themes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#themes)
[zLayers](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#zLayers)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#load)
[setResponsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setResponsive)
[setTheme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setTheme)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#constructor)
* new Options(engine, container): [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#constructor.new_Options)
* #### Parameters
* engine: [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
#### Returns [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
Properties
----------
### autoPlay[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#autoPlay)
autoPlay: boolean
Sets if the animations should start automatically or manually
### `Readonly`background[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#background)
background: [Background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html)
Background options, these background options will be used to the canvas element, they are all CSS properties
### `Readonly`backgroundMask[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#backgroundMask)
backgroundMask: [BackgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html)
Background Mask options, what's behind the canvas will become hidden and particles will uncover it
### clear[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#clear)
clear: boolean
Clears the canvas on every frame if enabled
### defaultThemes[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#defaultThemes)
defaultThemes: DefaultThemes
### delay[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#delay)
delay: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
The initial delay before starting the animation
### detectRetina[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#detectRetina)
detectRetina: boolean
Enables the retina detection, if disabled the ratio used by canvas will be always 1 and not the device setting.
### duration[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#duration)
duration: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
The Particles effect duration in seconds, then the container will be destroyed
### fpsLimit[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fpsLimit)
fpsLimit: number
The FPS (Frame Per Second) limit applied to all particles animations.
### `Readonly`fullScreen[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fullScreen)
fullScreen: [FullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html)
Sets the animated background mode for particles canvas bringing it to the back
### `Readonly`interactivity[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#interactivity)
interactivity: [Interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html)
The particles interaction options
### `Optional`key[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#key)
key?: string
The key used to store the options in the Engine.configs collection
### manualParticles[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#manualParticles)
manualParticles: [ManualParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html)
\[\]
Particles inserted at load time with a specific position
### `Optional`name[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#name)
name?: string
The name of the config, if it needs to be shown to the user, used also if key is missing
### `Readonly`particles[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#particles)
particles: [ParticlesOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_ParticlesOptions.ParticlesOptions.html)
The particles options
### pauseOnBlur[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnBlur)
pauseOnBlur: boolean
Enables or disabled the animation on window blur
### pauseOnOutsideViewport[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnOutsideViewport)
pauseOnOutsideViewport: boolean
Enable or disabled the animation if the element is outside the viewport
### `Optional`preset[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#preset)
preset?: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
This property will be used to add specified presets to the options
### responsive[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#responsive)
responsive: [Responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html)
\[\]
This sets custom options based on canvas size
### smooth[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#smooth)
smooth: boolean
Enables a smooth effect, by default it's disabled When enabled the animation will speed up or slow down depending on fps The [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
field will be used as a reference for the animation speed Some examples: - with a [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
of 60 the animation will be twice faster on 120 fps devices - with a [IOptions.fpsLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html#fpsLimit)
of 120 the animation will be twice slower on 60 fps devices The animation will be always smooth, but the behavior could be affected by the user screen refresh rate It's recommended to keep this disabled, be careful.
### style[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#style)
style: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
### `Readonly`themes[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#themes)
themes: [Theme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html)
\[\]
User-defined themes that can be retrieved by the particles [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
### zLayers[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#zLayers)
zLayers: number
The maximum layers used in the z-axis
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#load.load-1)
* This method loads the source object in the current instance
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
the source data to load into the instance
#### Returns void
### setResponsive[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setResponsive)
* setResponsive(width, pxRatio, defaultOptions): undefined | number[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setResponsive.setResponsive-1)
* #### Parameters
* width: number
* pxRatio: number
* defaultOptions: [IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
#### Returns undefined | number
### setTheme[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setTheme)
* setTheme(name?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setTheme.setTheme-1)
* #### Parameters
* `Optional`name: string
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#constructor)
Properties
[autoPlay](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#autoPlay)
[background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#background)
[backgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#backgroundMask)
[clear](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#clear)
[defaultThemes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#defaultThemes)
[delay](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#delay)
[detectRetina](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#detectRetina)
[duration](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#duration)
[fpsLimit](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fpsLimit)
[fullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#fullScreen)
[interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#interactivity)
[key](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#key)
[manualParticles](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#manualParticles)
[name](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#name)
[particles](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#particles)
[pauseOnBlur](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnBlur)
[pauseOnOutsideViewport](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#pauseOnOutsideViewport)
[preset](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#preset)
[responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#responsive)
[smooth](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#smooth)
[style](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#style)
[themes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#themes)
[zLayers](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#zLayers)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#load)
[setResponsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setResponsive)
[setTheme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html#setTheme)
---
# Container | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Container](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Container.html)
* [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
Class Container
===============
The object loaded into an HTML element, it'll contain options loaded and all data to let everything working \[\[include:Container.md\]\]
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#constructor)
### Properties
[actualOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#actualOptions)
[canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#canvas)
[destroyed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroyed)
[effectDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#effectDrawers)
[fpsLimit](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#fpsLimit)
[id](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#id)
[interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#interactivity)
[pageHidden](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pageHidden)
[particles](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#particles)
[pathGenerators](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pathGenerators)
[plugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#plugins)
[retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#retina)
[shapeDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#shapeDrawers)
[started](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#started)
[zLayers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#zLayers)
### Accessors
[animationStatus](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#animationStatus)
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#options)
[sourceOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#sourceOptions)
### Methods
[addClickHandler](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addClickHandler)
[addLifeTime](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addLifeTime)
[addPath](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addPath)
[alive](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#alive)
[clearClickHandlers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#clearClickHandlers)
[destroy](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroy)
[draw](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#draw)
[export](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#export)
[handleClickMode](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#handleClickMode)
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#init)
[loadTheme](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#loadTheme)
[pause](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pause)
[play](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#play)
[refresh](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#refresh)
[reset](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#reset)
[start](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#start)
[stop](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#stop)
[updateActualOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#updateActualOptions)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#constructor)
* new Container(engine, id, sourceOptions?): [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#constructor.new_Container)
* This is the core class, create an instance to have a new working particles manager
#### Parameters
* engine: [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
the engine used by container
* id: string
the id to identify this instance
* `Optional`sourceOptions: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
the options to load
#### Returns [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
Properties
----------
### actualOptions[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#actualOptions)
actualOptions: [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
The options loaded by the container, it's a full [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
object
### `Readonly`canvas[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#canvas)
canvas: [Canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html)
Canvas object, in charge of the canvas element and drawing functions
### destroyed[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroyed)
destroyed: boolean
Check if the particles' container is destroyed, if so it's not recommended using it
### `Readonly`effectDrawers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#effectDrawers)
effectDrawers: Map\>
All the effect drawers used by the container
### fpsLimit[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#fpsLimit)
fpsLimit: number
The container fps limit, coming from options
### `Readonly`id[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#id)
id: symbol
### interactivity[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#interactivity)
interactivity: [IContainerInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html)
### pageHidden[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pageHidden)
pageHidden: boolean
The container check if it's hidden on the web page
### `Readonly`particles[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#particles)
particles: [Particles](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particles.Particles.html)
The particles manager
### `Readonly`pathGenerators[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pathGenerators)
pathGenerators: Map
### `Readonly`plugins[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#plugins)
plugins: Map
All the plugins used by the container
### `Readonly`retina[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#retina)
retina: [Retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html)
### `Readonly`shapeDrawers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#shapeDrawers)
shapeDrawers: Map\>
All the shape drawers used by the container
### started[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#started)
started: boolean
Check if the particles container is started
### zLayers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#zLayers)
zLayers: number
Accessors
---------
### animationStatus[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#animationStatus)
* get animationStatus(): boolean
* Gets the animation status
#### Returns boolean
`true` is playing, `false` is paused
### options[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#options)
* get options(): [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
* The options used by the container, it's a full [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
object
#### Returns [Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
the options used by the container
### sourceOptions[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#sourceOptions)
* get sourceOptions(): undefined | [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
* The options that were initially passed to the container
#### Returns undefined | [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
the source options passed to the container
Methods
-------
### addClickHandler[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addClickHandler)
* addClickHandler(callback): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addClickHandler.addClickHandler-1)
* Adds a click handler to the container
#### Parameters
* callback: ((evt: Event, particles?: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
\[\]) => void)
the callback to be called when the click event occurs
* * (evt, particles?): void
* #### Parameters
* evt: Event
* `Optional`particles: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
\[\]
#### Returns void
#### Returns void
### addLifeTime[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addLifeTime)
* addLifeTime(value): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addLifeTime.addLifeTime-1)
* #### Parameters
* value: number
#### Returns void
### addPath[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addPath)
* addPath(key, generator, override?): boolean[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addPath.addPath-1)
* Add a new path generator to the container
#### Parameters
* key: string
the key to identify the path generator
* generator: [IMovePathGenerator](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html)
the path generator
* override: boolean = false
if true, override the existing path generator
#### Returns boolean
true if the path generator was added, false otherwise
### alive[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#alive)
* alive(): boolean[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#alive.alive-1)
* #### Returns boolean
### clearClickHandlers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#clearClickHandlers)
* clearClickHandlers(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#clearClickHandlers.clearClickHandlers-1)
* #### Returns void
### destroy[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroy)
* destroy(remove?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroy.destroy-1)
* Destroys the current container, invalidating it
#### Parameters
* remove: boolean = true
if true, removes the container from the engine
#### Returns void
### draw[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#draw)
* draw(force): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#draw.draw-1)
* Draws a frame
#### Parameters
* force: boolean
#### Returns void
### export[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#export)
* export(type, options?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#export.export-1)
* #### Parameters
* type: string
* options: Record = {}
#### Returns Promise
### handleClickMode[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#handleClickMode)
* handleClickMode(mode): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#handleClickMode.handleClickMode-1)
* Handles click event in the container
#### Parameters
* mode: string
click mode to handle
#### Returns void
### init[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#init)
* init(): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#init.init-1)
* Initializes the container
#### Returns Promise
### loadTheme[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#loadTheme)
* loadTheme(name?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#loadTheme.loadTheme-1)
* Loads the given theme, overriding the options
#### Parameters
* `Optional`name: string
the theme name, if `undefined` resets the default options or the default theme
#### Returns Promise
### pause[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pause)
* pause(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pause.pause-1)
* Pauses animations
#### Returns void
### play[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#play)
* play(force?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#play.play-1)
* Starts animations and resume from pause
#### Parameters
* `Optional`force: boolean
#### Returns void
### refresh[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#refresh)
* refresh(): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#refresh.refresh-1)
* Restarts the container, just a [Container.stop](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#stop)
/[Container.start](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#start)
alias
#### Returns Promise
the Promise of the start method
### reset[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#reset)
* reset(sourceOptions?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#reset.reset-1)
* #### Parameters
* `Optional`sourceOptions: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
#### Returns Promise
### start[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#start)
* start(): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#start.start-1)
* Starts the container, initializes what are needed to create animations and event handling
#### Returns Promise
### stop[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#stop)
* stop(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#stop.stop-1)
* Stops the container, opposite to `start`. Clears some resources and stops events.
#### Returns void
### updateActualOptions[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#updateActualOptions)
* updateActualOptions(): boolean[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#updateActualOptions.updateActualOptions-1)
* Updates the container options
#### Returns boolean
true if the options were updated, false otherwise
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#constructor)
Properties
[actualOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#actualOptions)
[canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#canvas)
[destroyed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroyed)
[effectDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#effectDrawers)
[fpsLimit](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#fpsLimit)
[id](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#id)
[interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#interactivity)
[pageHidden](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pageHidden)
[particles](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#particles)
[pathGenerators](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pathGenerators)
[plugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#plugins)
[retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#retina)
[shapeDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#shapeDrawers)
[started](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#started)
[zLayers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#zLayers)
Accessors
[animationStatus](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#animationStatus)
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#options)
[sourceOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#sourceOptions)
Methods
[addClickHandler](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addClickHandler)
[addLifeTime](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addLifeTime)
[addPath](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#addPath)
[alive](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#alive)
[clearClickHandlers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#clearClickHandlers)
[destroy](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#destroy)
[draw](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#draw)
[export](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#export)
[handleClickMode](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#handleClickMode)
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#init)
[loadTheme](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#loadTheme)
[pause](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#pause)
[play](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#play)
[refresh](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#refresh)
[reset](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#reset)
[start](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#start)
[stop](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#stop)
[updateActualOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html#updateActualOptions)
---
# IParticlesOptions | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/IParticlesOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.html)
* [IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
Interface IParticlesOptions
===========================
\[\[include:Options/Particles.md\]\]
interface IParticlesOptions {
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#bounce)
: [IParticlesBounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html)
;
[collisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#collisions)
: [ICollisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html)
;
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#color)
: [IAnimatableColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html)
;
[effect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#effect)
: [IEffect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html)
;
[groups](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#groups)
: [ParticlesGroups](https://particles.js.org/docs/types/tsParticles_Engine.Types_ParticlesGroups.ParticlesGroups.html)
;
[interactivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#interactivity)
?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
\>;
[move](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#move)
: [IMove](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Move_IMove.IMove.html)
;
[number](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#number)
: [IParticlesNumber](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html)
;
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#opacity)
: [IOpacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html)
;
[reduceDuplicates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#reduceDuplicates)
: boolean;
[shadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shadow)
: [IShadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html)
;
[shape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shape)
: [IShape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html)
;
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#size)
: [ISize](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Size_ISize.ISize.html)
;
[stroke](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#stroke)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<[IStroke](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IStroke.IStroke.html)
\>;
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#zIndex)
: [IZIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_ZIndex_IZIndex.IZIndex.html)
;
\[name: string\]: unknown;
}
#### Implemented by
* [ParticlesOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_ParticlesOptions.ParticlesOptions.html)
#### Indexable
* \[name: string\]: unknown
##### Index
### Properties
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#bounce)
[collisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#collisions)
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#color)
[effect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#effect)
[groups](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#groups)
[interactivity?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#interactivity)
[move](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#move)
[number](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#number)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#opacity)
[reduceDuplicates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#reduceDuplicates)
[shadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shadow)
[shape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shape)
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#size)
[stroke](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#stroke)
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#zIndex)
Properties
----------
### bounce[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#bounce)
bounce: [IParticlesBounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html)
Options for customizing the behavior when a particle bounces
### collisions[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#collisions)
collisions: [ICollisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html)
Particles collisions options
### color[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#color)
color: [IAnimatableColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html)
Particles color options
### effect[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#effect)
effect: [IEffect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html)
Particles effects options
### groups[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#groups)
groups: [ParticlesGroups](https://particles.js.org/docs/types/tsParticles_Engine.Types_ParticlesGroups.ParticlesGroups.html)
Particles groups
### `Optional`interactivity[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#interactivity)
interactivity?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
\>
Particles interactivity options, overrides general interactivity options
### move[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#move)
move: [IMove](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Move_IMove.IMove.html)
Particles movement options
### number[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#number)
number: [IParticlesNumber](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html)
Particles number options
### opacity[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#opacity)
opacity: [IOpacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html)
Particles opacity options
### reduceDuplicates[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#reduceDuplicates)
reduceDuplicates: boolean
Particles options for reducing the randomization of duplicate particles, the index will be used for choosing the array values
### shadow[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shadow)
shadow: [IShadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html)
Particles shadow options
### shape[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shape)
shape: [IShape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html)
Particles shape options
### size[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#size)
size: [ISize](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Size_ISize.ISize.html)
Particles size options
### stroke[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#stroke)
stroke: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<[IStroke](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IStroke.IStroke.html)
\>
Particles stroke options
### zIndex[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#zIndex)
zIndex: [IZIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_ZIndex_IZIndex.IZIndex.html)
Particles z-index options
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#bounce)
[collisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#collisions)
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#color)
[effect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#effect)
[groups](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#groups)
[interactivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#interactivity)
[move](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#move)
[number](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#number)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#opacity)
[reduceDuplicates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#reduceDuplicates)
[shadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shadow)
[shape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#shape)
[size](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#size)
[stroke](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#stroke)
[zIndex](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html#zIndex)
---
# tsParticles Engine - v3.8.1 | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
Module tsParticles Engine - v3.8.1
==================================
[](https://particles.js.org/)
tsParticles - TypeScript Particles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticles---typescript-particles)
==========================================================================================================================================
**A lightweight TypeScript library for creating particles. Dependency free (\*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**
[](https://github.com/sponsors/matteobruni)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://cdnjs.com/libraries/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
[](https://lerna.js.org/)
[](https://www.codefactor.io/repository/github/tsparticles/tsparticles)
[](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=tsparticles/tsparticles&utm_campaign=Badge_Grade)
[](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles)
[](https://gitpod.io/#https://github.com/tsparticles/tsparticles)
[](https://repl.it/github/tsparticles/tsparticles)
[](https://discord.gg/hACwv45Hme)
[](https://t.me/tsparticles)
[](https://www.reddit.com/r/tsParticles/)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles%22)
[](https://www.buymeacoffee.com/matteobruni)
* * *
Table of Contents[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:table-of-contents)
--------------------------------------------------------------------------------------------------------
* [tsParticles - TypeScript Particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticles---typescript-particles)
* [Table of Contents](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:table-of-contents)
* [Do you want to use it on your website?](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:do-you-want-to-use-it-on-your-website)
* [**_Library installation_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:library-installation)
* [**_Hosting / CDN_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:hosting--cdn)
* [jsDelivr](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jsdelivr)
* [cdnjs](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:cdnjs)
* [unpkg](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:unpkg)
* [**_npm_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:npm)
* [**_yarn_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:yarn)
* [**_pnpm_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pnpm)
* [Import and require](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:import-and-require)
* [**_Usage_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:usage)
* [Official components for some of the most used frameworks](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:official-components-for-some-of-the-most-used-frameworks)
* [Angular](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:angular)
* [`@tsparticles/angular`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:@tsparticles/angular)
* [Astro](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro)
* [`astro-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro-particles)
* [Ember.js](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:emberjs)
* [`ember-tsparticles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:ember-tsparticles)
* [Inferno](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno)
* [`inferno-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno-particles)
* [jQuery](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery)
* [`jquery-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery-particles)
* [Preact](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact)
* [`preact-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact-particles)
* [ReactJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:reactjs)
* [`@tsparticles/react`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesreact)
* [RiotJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riotjs)
* [`riot-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riot-particles)
* [SolidJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solidjs)
* [`solid-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solid-particles)
* [Svelte](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:svelte)
* [`@tsparticles/svelte`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:@tsparticles/svelte)
* [VueJS 2.x](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-2x)
* [`@tsparticles/vue2`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue2)
* [VueJS 3.x](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-3x)
* [`@tsparticles/vue3`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue3)
* [Web Components](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-components)
* [`web-particles`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-particles)
* [WordPress](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:wordpress)
* [`@tsparticles/wordpress`](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:@tsparticles/wordpress)
* [Elementor](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:elementor)
* [Presets](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:presets)
* [Big Circles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:big-circles)
* [Bubbles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:bubbles)
* [Confetti](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:confetti)
* [Fire](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fire)
* [Firefly](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:firefly)
* [Fireworks](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fireworks)
* [Fountain](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fountain)
* [Links](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:links)
* [Sea Anemone](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sea-anemone)
* [Snow](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow)
* [Stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:stars)
* [Triangles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:triangles)
* [Templates and Resources](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:templates-and-resources)
* [**_Demo / Generator_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:demo--generator)
* [**_Video Tutorials_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:video-tutorials)
* [Characters as particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:characters-as-particles)
* [Polygon mask](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:polygon-mask)
* [Animated stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:animated-stars)
* [Nyan cat flying on scrolling stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:nyan-cat-flying-on-scrolling-stars)
* [Snow particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow-particles)
* [Background Mask particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:background-mask-particles)
* [**_Options_**](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:options)
* [Want to see it in action and try it?](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:want-to-see-it-in-action-and-try-it)
* [Migrating from Particles.js](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:migrating-from-particlesjs)
* [Plugins/Customizations](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pluginscustomizations)
* [Dependency Graph](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:dependency-graph)
* [Sponsors](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sponsors)
* [Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:huge-thanks-to-jetbrains-for-the-2020-2022-open-source-licenses)
* * *
Do you want to use it on your website?[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:do-you-want-to-use-it-on-your-website)
-------------------------------------------------------------------------------------------------------------------------------------------------
_Documentation and Development references [here](https://particles.js.org/docs/)
📖_
**This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**.
You'll find the instructions [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation)
, with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_.
**The output files are just JavaScript**. 🤩
CDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.engine.min.js), and all files splitted for `import` syntax.
**If you are interested** there are some _simple instructions_ just [below](https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation)
to guide you to migrate from the old particles.js library.
**_Library installation_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:library-installation)
--------------------------------------------------------------------------------------------------------------------
### **_Hosting / CDN_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:hosting--cdn)
**_Please use these hosts or your own to load tsParticles on your projects_**
#### jsDelivr[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jsdelivr)
[](https://www.jsdelivr.com/package/npm/@tsparticles/confetti)
[](https://www.jsdelivr.com/package/npm/@tsparticles/engine)
[](https://www.jsdelivr.com/package/npm/@tsparticles/fireworks)
[](https://www.jsdelivr.com/package/npm/@tsparticles/basic)
[](https://www.jsdelivr.com/package/npm/@tsparticles/slim)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://www.jsdelivr.com/package/npm/@tsparticles/all)
#### cdnjs[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:cdnjs)
[](https://cdnjs.com/libraries/tsparticles)
#### unpkg[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:unpkg)
[https://unpkg.com/@tsparticles/confetti/](https://unpkg.com/@tsparticles/confetti/)
[https://unpkg.com/@tsparticles/engine/](https://unpkg.com/@tsparticles/engine/)
[https://unpkg.com/@tsparticles/fireworks/](https://unpkg.com/@tsparticles/fireworks/)
[https://unpkg.com/@tsparticles/basic/](https://unpkg.com/@tsparticles/basic/)
[https://unpkg.com/@tsparticles/slim/](https://unpkg.com/@tsparticles/slim/)
[https://unpkg.com/tsparticles/](https://unpkg.com/tsparticles/)
[https://unpkg.com/@tsparticles/all/](https://unpkg.com/@tsparticles/all/)
* * *
### **_npm_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:npm)
_tsParticles Confetti_
[](https://www.npmjs.com/package/@tsparticles/confetti)
[](https://www.npmjs.com/package/@tsparticles/confetti)
_tsParticles Engine_
[](https://www.npmjs.com/package/@tsparticles/engine)
[](https://www.npmjs.com/package/@tsparticles/engine)
_tsParticles Fireworks_
[](https://www.npmjs.com/package/@tsparticles/fireworks)
[](https://www.npmjs.com/package/@tsparticles/fireworks)
_tsParticles Basic_
[](https://www.npmjs.com/package/@tsparticles/basic)
[](https://www.npmjs.com/package/@tsparticles/basic)
_tsParticles Slim_
[](https://www.npmjs.com/package/@tsparticles/slim)
[](https://www.npmjs.com/package/@tsparticles/slim)
_tsParticles_
[](https://www.npmjs.com/package/tsparticles)
[](https://www.npmjs.com/package/tsparticles)
_tsParticles All_
[](https://www.npmjs.com/package/@tsparticles/all)
[](https://www.npmjs.com/package/@tsparticles/all)
npm install @tsparticles/engine
### **_yarn_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:yarn)
yarn add @tsparticles/engine
### **_pnpm_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pnpm)
pnpm install @tsparticles/engine
#### Import and require[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:import-and-require)
const tsParticles = require("@tsparticles/engine");// orimport { tsParticles } from "@tsparticles/engine";
The imported `tsParticles` is the same instance you have when including the script in the page using the `
**app.js**
// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected/* tsParticles.load(@params); */tsParticles .load({ id: "tsparticles", url: "presets/default.json", }) .then((container) => { console.log("callback - tsparticles config loaded"); }) .catch((error) => { console.error(error); });//ortsParticles.load({ id: "tsparticles", options: { /* options here */ },});//ortsParticles.load({ id: "tsparticles", options: [ { /* options here */ }, { /* other options here */ }, ],});//random objecttsParticles.load({ id: "tsparticles", options: [ { /* options here */ }, { /* other options here */ }, ], index: 1,}); //the second one// Important! If the index is not in range 0... { /* custom on click handler */});// now you can control the animations too, it's possible to pause and resume the animations// these methods don't change the config so you're safe with all your configurations// domItem(0) returns the first tsParticles instance loaded in the domconst particles = tsParticles.domItem(0);// play will start the animations, if the move is not enabled it won't enable it, it just updates the frameparticles.play();// pause will stop the animationsparticles.pause();
* * *
Official components for some of the most used frameworks[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:official-components-for-some-of-the-most-used-frameworks)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
### Angular[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:angular)
#### `@tsparticles/angular`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesangular)
[](https://www.npmjs.com/package/@tsparticles/angular)
[](https://www.npmjs.com/package/@tsparticles/angular)
Instructions available [here](https://github.com/tsparticles/angular/#readme)
### Astro[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro)
#### `astro-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro-particles)
[](https://www.npmjs.com/package/astro-particles)
[](https://www.npmjs.com/package/astro-particles)
Instructions available [here](https://github.com/tsparticles/astro/#readme)
### Ember.js[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:emberjs)
#### `ember-tsparticles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:ember-tsparticles)
[](https://www.npmjs.com/package/ember-tsparticles)
[](https://www.npmjs.com/package/ember-tsparticles)
Instructions available [here](https://github.com/tsparticles/ember/#readme)
### Inferno[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno)
#### `inferno-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno-particles)
[](https://www.npmjs.com/package/inferno-particles)
[](https://www.npmjs.com/package/inferno-particles)
Instructions available [here](https://github.com/tsparticles/inferno/#readme)
### jQuery[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery)
#### `jquery-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery-particles)
[](https://www.npmjs.com/package/jquery-particles)
[](https://www.npmjs.com/package/jquery-particles)
Instructions available [here](https://github.com/tsparticles/jquery/#readme)
### Preact[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact)
#### `preact-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact-particles)
[](https://www.npmjs.com/package/preact-particles)
[](https://www.npmjs.com/package/preact-particles)
Instructions available [here](https://github.com/tsparticles/preact/#readme)
### ReactJS[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:reactjs)
#### `@tsparticles/react`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesreact)
[](https://www.npmjs.com/package/@tsparticles/react)
[](https://www.npmjs.com/package/@tsparticles/react)
Instructions available [here](https://github.com/tsparticles/react/#readme)
### RiotJS[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riotjs)
#### `riot-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riot-particles)
[](https://www.npmjs.com/package/riot-particles)
[](https://www.npmjs.com/package/riot-particles)
You can find the instructions [here](https://github.com/tsparticles/riot/#readme)
### SolidJS[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solidjs)
#### `solid-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solid-particles)
[](https://www.npmjs.com/package/solid-particles)
[](https://www.npmjs.com/package/solid-particles)
You can find the instructions [here](https://github.com/tsparticles/solid/#readme)
### Svelte[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:svelte)
#### `@tsparticles/svelte`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlessvelte)
[](https://www.npmjs.com/package/@tsparticles/svelte)
[](https://www.npmjs.com/package/@tsparticles/svelte)
Instructions available [here](https://github.com/tsparticles/svelte/#readme)
### VueJS 2.x[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-2x)
#### `@tsparticles/vue2`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue2)
[](https://www.npmjs.com/package/@tsparticles/vue2)
[](https://www.npmjs.com/package/@tsparticles/vue2)
Instructions available [here](https://github.com/tsparticles/vue2/#readme)
### VueJS 3.x[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-3x)
#### `@tsparticles/vue3`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue3)
[](https://www.npmjs.com/package/@tsparticles/vue3)
[](https://www.npmjs.com/package/@tsparticles/vue3)
Instruction available [here](https://github.com/tsparticles/vue3/#readme)
### Web Components[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-components)
#### `web-particles`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-particles)
[](https://www.npmjs.com/package/web-particles)
[](https://www.npmjs.com/package/web-particles)
You can find the instructions [here](https://github.com/tsparticles/webcomponents/#readme)
### WordPress[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:wordpress)
#### `@tsparticles/wordpress`[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticleswordpress)
[](https://www.npmjs.com/package/@tsparticles/wordpress)
[](https://www.npmjs.com/package/@tsparticles/wordpress)
[](https://wordpress.org/plugins/tsparticles-block/)
[](https://wordpress.org/plugins/tsparticles-block/)
The plugin page hosted on [WordPress.org](http://wordpress.org/)
can be found [here](https://wordpress.org/plugins/tsparticles-block/#description)
### Elementor[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:elementor)
Actually, an official tsParticles plugin isn't existing, but I have a collaboration with the `Premium Addons for Elementor` plugin collection.

Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. [Check It Now](https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/)
.
Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. [See a Live Example](https://premiumaddons.com/particles-section-addon-for-elementor-page-builder/)
.
* * *
Presets[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:presets)
------------------------------------------------------------------------------------
There are some presets ready to be used in [this repository](https://github.com/tsparticles/presets)
, and they also have a bundle file that contains everything needed to run.
### Big Circles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:big-circles)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-big-circles)
[](https://www.npmjs.com/package/@tsparticles/preset-big-circles)
[](https://www.npmjs.com/package/@tsparticles/preset-big-circles)
This preset loads big colored circles moving upwards on a white background.
[](https://particles.js.org/samples/presets/bigCircles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bigCircles#readme)
### Bubbles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:bubbles)
[](https://www.jsdelivr.com/package/npm/tsparticles)
[](https://www.npmjs.com/package/@tsparticles/preset-bubbles)
[](https://www.npmjs.com/package/@tsparticles/preset-bubbles)
This preset loads colored bubbles coming from the bottom of the screen on a white background.
[](https://particles.js.org/samples/presets/bubbles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/bubbles#readme)
### Confetti[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:confetti)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-confetti)
[](https://www.npmjs.com/package/@tsparticles/preset-confetti)
[](https://www.npmjs.com/package/@tsparticles/preset-confetti)
This preset loads white and red confetti launched from the screen center on a transparent background.
[](https://particles.js.org/samples/presets/confetti)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/confetti#readme)
### Fire[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fire)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fire)
[](https://www.npmjs.com/package/@tsparticles/preset-fire)
[](https://www.npmjs.com/package/@tsparticles/preset-fire)
This preset loads a faded red to a black background with particles colored like fire and ash sparks.
[](https://particles.js.org/samples/presets/fire)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fire#readme)
### Firefly[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:firefly)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-firefly)
[](https://www.npmjs.com/package/@tsparticles/preset-firefly)
[](https://www.npmjs.com/package/@tsparticles/preset-firefly)
This preset loads a mouse trail made with small fading particles like little fireflies.
[](https://particles.js.org/samples/presets/firefly)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/firefly#readme)
### Fireworks[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fireworks)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fireworks)
[](https://www.npmjs.com/package/@tsparticles/preset-fireworks)
[](https://www.npmjs.com/package/@tsparticles/preset-fireworks)
This preset loads a beautiful fireworks effect.
[](https://particles.js.org/samples/presets/fireworks)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fireworks#readme)
### Fountain[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fountain)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-fountain)
[](https://www.npmjs.com/package/@tsparticles/preset-fountain)
[](https://www.npmjs.com/package/@tsparticles/preset-fountain)
[](https://particles.js.org/samples/presets/fountain)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/fountain#readme)
### Links[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:links)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-links)
[](https://www.npmjs.com/package/@tsparticles/preset-links)
[](https://www.npmjs.com/package/@tsparticles/preset-links)
[](https://particles.js.org/samples/presets/links)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/links#readme)
### Sea Anemone[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sea-anemone)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-sea-anemone)
[](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone)
[](https://www.npmjs.com/package/@tsparticles/preset-sea-anemone)
[](https://particles.js.org/samples/presets/seaAnemone)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/seaAnemone#readme)
### Snow[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-snow)
[](https://www.npmjs.com/package/@tsparticles/preset-snow)
[](https://www.npmjs.com/package/@tsparticles/preset-snow)
[](https://particles.js.org/samples/presets/snow)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/snow#readme)
### Stars[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:stars)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-stars)
[](https://www.npmjs.com/package/@tsparticles/preset-stars)
[](https://www.npmjs.com/package/@tsparticles/preset-stars)
[](https://particles.js.org/samples/presets/stars)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/stars#readme)
### Triangles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:triangles)
[](https://www.jsdelivr.com/package/npm/@tsparticles/preset-triangles)
[](https://www.npmjs.com/package/@tsparticles/preset-triangles)
[](https://www.npmjs.com/package/@tsparticles/preset-triangles)
[](https://particles.js.org/samples/presets/triangles)
You can find the instructions [here](https://github.com/tsparticles/presets/tree/main/presets/triangles#readme)
* * *
Templates and Resources[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:templates-and-resources)
--------------------------------------------------------------------------------------------------------------------
You can find some tsParticles related templates [here](https://github.com/tsparticles/templates)
. The templates are created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_, and other frameworks.
The templates will vary, new ones can be created or older ones updated with the latest features or changed to a better style. Check them out once in a while.
If you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be credited as the template author!
[https://github.com/tsparticles/templates](https://github.com/tsparticles/templates)
* * *
**_Demo / Generator_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:demo--generator)
-----------------------------------------------------------------------------------------------------------
[https://particles.js.org/samples](https://particles.js.org/samples)
[](https://particles.js.org/samples)
* * *
**_Video Tutorials_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:video-tutorials)
----------------------------------------------------------------------------------------------------------
You can find all video tutorials on the website here: [https://particles.js.org/video.html](https://particles.js.org/video.html)
_More videos are coming soon! Check every day if there are some new contents._
* * *
### Characters as particles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:characters-as-particles)
[](https://particles.js.org/samples/#chars)
* * *
### Polygon mask[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:polygon-mask)
[](https://particles.js.org/samples/#polygonMask)
* * *
### Animated stars[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:animated-stars)
[](https://particles.js.org/samples/#nasa)
* * *
### Nyan cat flying on scrolling stars[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:nyan-cat-flying-on-scrolling-stars)
[](https://particles.js.org/samples/#nyancat2)
* * *
### Snow particles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow-particles)
[](https://particles.js.org/samples/#snow)
* * *
### Background Mask particles[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:background-mask-particles)
[](https://particles.js.org/samples/#background)
* * *
**particles.json**
You can find some config samples [here](https://github.com/tsparticles/website/tree/main/presets)
📖
* * *
**_Options_**[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:options)
------------------------------------------------------------------------------------------
You can find all options available [here](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
📖
Want to see it in action and try it?[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:want-to-see-it-in-action-and-try-it)
---------------------------------------------------------------------------------------------------------------------------------------------
I've created a tsParticles collection on [CodePen](https://codepen.io/collection/DPOage)
😮 or you can check out my [profile](https://codepen.io/matteobruni)
Otherwise, there's the demo page link below.
[](https://particles.js.org/samples/)
Want to see even more demos? Clone the repository on your computer and follow these instructions
$ pnpm i$ pnpm run build$ cd demo/vanilla$ pnpm start
**Boom! 💥** [http://localhost:3000](http://localhost:3000/)
and you can check out other demos.
_If you are brave enough_ you can switch to the `dev` branch for trying the features under development.
* * *
Migrating from Particles.js[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:migrating-from-particlesjs)
---------------------------------------------------------------------------------------------------------------------------
**tsParticles** has a package that makes this library 100% compatible with the _particles.js_ configuration.
[](https://www.jsdelivr.com/package/npm/@tsparticles/particles.js)
[](https://www.npmjs.com/package/@tsparticles/particles.js)
[](https://www.npmjs.com/package/@tsparticles/particles.js)
Seriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, **you're ready** 🧙!
You can read more **[here](https://dev.to/matteobruni/migrating-from-particles-js-to-tsparticles-2a6m)
**
Want to know 5 reasons to do the switch? [Read here](https://dev.to/matteobruni/5-reasons-to-use-tsparticles-and-not-particles-js-1gbe)
_Below you can find all the information you need to install tsParticles and its new syntax._
* * *
Plugins/Customizations[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pluginscustomizations)
-----------------------------------------------------------------------------------------------------------------
tsParticles now supports some customizations 🥳.
**You can create your own plugins**
_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)
..._
* * *
Dependency Graph[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:dependency-graph)
------------------------------------------------------------------------------------------------------
flowchart TD
subgraph core [Core]
engine[tsParticles Engine]
perlin-noise[Perlin Noise Lib]
simplex-noise[Simplex Noise Lib]
configs[tsParticles Configs]
end
subgraph bundle-basic [tsParticles Basic]
subgraph basic-movers [Movers]
move-base[Base]
end
subgraph basic-shapes [Shapes]
shape-circle[Circle]
end
subgraph basic-updates [Updaters]
updater-color[Color]
updater-opacity[Opacity]
updater-out-modes[Out Modes]
updater-size[Size]
end
end
engine --> bundle-basic
subgraph bundle-confetti [tsParticles Confetti]
subgraph confetti-plugins [Plugins]
plugin-emitters
plugin-motion
end
subgraph confetti-shapes [Shapes]
shape-cards
shape-emoji
shape-heart
shape-image
shape-polygon
shape-square
shape-star
end
subgraph confetti-updaters [Updaters]
updater-life
updater-roll
updater-rotate
updater-tilt
updater-wobble
end
end
bundle-basic --> bundle-confetti
subgraph bundle-slim [tsParticles Slim]
subgraph slim-interactions [Interactions]
subgraph slim-interactions-external [Externals]
interaction-external-attract[Attract]
interaction-external-bounce[Bounce]
interaction-external-bubble[Bubble]
interaction-external-connect[Connect]
interaction-external-grab[Grab]
interaction-external-pause[Pause]
interaction-external-push[Push]
interaction-external-remove[Remove]
interaction-external-repulse[Repulse]
interaction-external-slow[Slow]
end
subgraph slim-interactions-particles [Particles]
interaction-particles-attract[Attract]
interaction-particles-collisions[Collisions]
interaction-particles-links[Links]
end
end
subgraph slim-movers [Movers]
move-parallax[Parallax]
end
subgraph slim-plugins [Plugins]
subgraph slim-plugins-easings [Easings]
plugin-easing-quad[Quad]
end
end
subgraph slim-shapes [Shapes]
shape-emoji[Emoji]
shape-image[Image]
shape-line[Line]
shape-polygon[Polygon]
shape-square[Square]
shape-star[Star]
end
subgraph slim-updaters [Updaters]
updater-life[Life]
updater-rotate[Rotate]
updater-stroke-color[Stroke Color]
end
end
bundle-basic --> bundle-slim
subgraph bundle-fireworks [tsParticles Fireworks]
subgraph fireworks-effects [Effects]
effect-trail
end
subgraph fireworks-plugins [Plugins]
plugin-emitters
subgraph fireworks-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-square
end
plugin-sounds
end
subgraph fireworks-updaters [Updaters]
updater-destroy
updater-life
updater-rotate
end
end
bundle-basic --> bundle-fireworks
subgraph bundle-full [tsParticles]
subgraph full-interactions [Interactions]
subgraph full-interactions-external [Externals]
interaction-external-trail[Trail]
end
end
subgraph full-plugins [Plugins]
plugin-absorbers[Absorbers]
plugin-emitters[Emitters]
subgraph full-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-circle[Circle]
plugin-emitters-shape-square[Square]
end
end
subgraph full-shapes [Shapes]
shape-text[Text]
end
subgraph full-updaters [Updaters]
updater-destroy[Destroy]
updater-roll[Roll]
updater-tilt[Tilt]
updater-twinkle[Twinkle]
updater-wobble[Wobble]
end
end
bundle-slim --> bundle-full
subgraph bundle-all [tsParticles All]
bundle-pjs[tsParticles Particles.js Compatibility]
subgraph all-effects [Effects]
effect-bubble[Bubble]
effect-trail[Trail]
end
subgraph all-interactions [Interactions]
subgraph all-interactions-external [External]
interaction-external-particle[Particle]
interaction-external-pop[Pop]
end
interaction-light[Light]
subgraph all-interactions-particles [Particles]
interaction-particles-repulse[Repulse]
end
end
subgraph all-paths [Paths]
path-curl-noise[Curl Noise]
path-curves[Curves]
path-perlin-noise[Perlin Noise]
path-polygon[Polygon]
path-simplex-noise[Simplex Noise]
path-svg[SVG]
end
subgraph all-plugins [Plugins]
plugin-canvas-mask[Canvas Mask]
subgraph all-plugins-colors [Colors]
plugin-hsv-color[HSV Color]
plugin-named-color[Named Color]
plugin-oklch-color[Oklch Color]
end
subgraph all-plugins-easings [Easings]
plugin-easing-back[Back]
plugin-easing-circ[Circ]
plugin-easing-cubic[Cubic]
plugin-easing-expo[Expo]
plugin-easing-linear[Linear]
plugin-easing-quart[Quart]
plugin-easing-quint[Quint]
plugin-easing-sine[Sine]
end
subgraph all-plugin-emitters-shapes [Emitters Shapes]
plugin-emitters-shape-canvas[Canvas]
plugin-emitters-shape-path[Path]
plugin-emitters-shape-polygon[Polygon]
end
subgraph all-plugins-exports [Exports]
plugin-export-image[Image]
plugin-export-json[JSON]
plugin-export-video[Video]
end
plugin-infection[Infection]
plugin-motion[Motion]
plugin-poisson-disc[Poisson Disc]
plugin-polygon-mask[Polygon Mask]
plugin-sounds[Sounds]
end
subgraph all-shapes [Shapes]
shape-arrow[Arrow]
shape-cards[Cards]
shape-cog[Cog]
shape-heart[Heart]
shape-path[Path]
shape-rounded-polygon[Rounded Polygon]
shape-rounded-rect[Rounded Rect]
shape-spiral[Spiral]
end
subgraph all-updaters [Updaters]
updater-gradient[Gradient]
updater-orbit[Orbit]
end
simplex-noise --> path-curl-noise
perlin-noise --> path-perlin-noise
simplex-noise --> path-simplex-noise
end
bundle-full --> bundle-all
* * *
[](https://www.jetbrains.com/?from=tsParticles)
[](https://www.jetbrains.com/webstorm/?from=tsParticles)
Sponsors[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sponsors)
--------------------------------------------------------------------------------------
### JetBrains[](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jetbrains)
Huge thanks to [JetBrains](https://www.jetbrains.com/?from=tsParticles)
for the 2020-2022 Open Source Licenses!
[JetBrains WebStorm](https://www.jetbrains.com/webstorm/?from=tsParticles)
is used to maintain this project.
### Index
### Documents
### Modules
[bundle](https://particles.js.org/docs/modules/tsParticles_Engine.bundle.html)
[Core/Canvas](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Canvas.html)
[Core/Container](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Container.html)
[Core/Engine](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Engine.html)
[Core/Interfaces/Colors](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_Colors.html)
[Core/Interfaces/IBounds](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IBounds.html)
[Core/Interfaces/IBubbleParticleData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IBubbleParticleData.html)
[Core/Interfaces/ICircleBouncer](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ICircleBouncer.html)
[Core/Interfaces/IColorManager](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IColorManager.html)
[Core/Interfaces/IContainerInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.html)
[Core/Interfaces/IContainerPlugin](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IContainerPlugin.html)
[Core/Interfaces/ICoordinates](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ICoordinates.html)
[Core/Interfaces/IDelta](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDelta.html)
[Core/Interfaces/IDimension](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDimension.html)
[Core/Interfaces/IDistance](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDistance.html)
[Core/Interfaces/IDrawParticleParams](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDrawParticleParams.html)
[Core/Interfaces/IEffectDrawer](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IEffectDrawer.html)
[Core/Interfaces/IExternalInteractor](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IExternalInteractor.html)
[Core/Interfaces/IInteractor](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IInteractor.html)
[Core/Interfaces/ILoadParams](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ILoadParams.html)
[Core/Interfaces/IMouseData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IMouseData.html)
[Core/Interfaces/IMovePathGenerator](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.html)
[Core/Interfaces/IParticleColorStyle](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleColorStyle.html)
[Core/Interfaces/IParticleHslAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleHslAnimation.html)
[Core/Interfaces/IParticleLife](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleLife.html)
[Core/Interfaces/IParticleMover](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleMover.html)
[Core/Interfaces/IParticleRetinaProps](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleRetinaProps.html)
[Core/Interfaces/IParticleRoll](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleRoll.html)
[Core/Interfaces/IParticlesInteractor](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticlesInteractor.html)
[Core/Interfaces/IParticleTransformValues](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleTransformValues.html)
[Core/Interfaces/IParticleUpdater](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleUpdater.html)
[Core/Interfaces/IParticleValueAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IParticleValueAnimation.html)
[Core/Interfaces/IPlugin](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IPlugin.html)
[Core/Interfaces/IPositionFromSizeParams](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IPositionFromSizeParams.html)
[Core/Interfaces/IRangeValue](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IRangeValue.html)
[Core/Interfaces/IRectSideResult](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IRectSideResult.html)
[Core/Interfaces/IShapeDrawData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IShapeDrawData.html)
[Core/Interfaces/IShapeDrawer](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IShapeDrawer.html)
[Core/Interfaces/IShapeValues](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IShapeValues.html)
[Core/Interfaces/ISlowParticleData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ISlowParticleData.html)
[Core/Interfaces/ITrailFillData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ITrailFillData.html)
[Core/Particle](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Particle.html)
[Core/Particles](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Particles.html)
[Core/Retina](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Retina.html)
[Core/Utils/Constants](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_Constants.html)
[Core/Utils/EventListeners](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_EventListeners.html)
[Core/Utils/ExternalInteractorBase](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_ExternalInteractorBase.html)
[Core/Utils/InteractionManager](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_InteractionManager.html)
[Core/Utils/ParticlesInteractorBase](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_ParticlesInteractorBase.html)
[Core/Utils/Point](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_Point.html)
[Core/Utils/QuadTree](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_QuadTree.html)
[Core/Utils/Ranges](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_Ranges.html)
[Core/Utils/Vectors](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Utils_Vectors.html)
[Enums/AnimationStatus](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_AnimationStatus.html)
[Enums/Directions/MoveDirection](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Directions_MoveDirection.html)
[Enums/Directions/OutModeDirection](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Directions_OutModeDirection.html)
[Enums/Directions/RotateDirection](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Directions_RotateDirection.html)
[Enums/InteractivityDetect](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_InteractivityDetect.html)
[Enums/Modes/AnimationMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_AnimationMode.html)
[Enums/Modes/CollisionMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_CollisionMode.html)
[Enums/Modes/LimitMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_LimitMode.html)
[Enums/Modes/OutMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_OutMode.html)
[Enums/Modes/PixelMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_PixelMode.html)
[Enums/Modes/ResponsiveMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_ResponsiveMode.html)
[Enums/Modes/ThemeMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_ThemeMode.html)
[Enums/Types/AlterType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_AlterType.html)
[Enums/Types/DestroyType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_DestroyType.html)
[Enums/Types/DivType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_DivType.html)
[Enums/Types/EasingType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_EasingType.html)
[Enums/Types/EventType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_EventType.html)
[Enums/Types/GradientType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_GradientType.html)
[Enums/Types/InteractorType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_InteractorType.html)
[Enums/Types/ParticleOutType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_ParticleOutType.html)
[Enums/Types/StartValueType](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Types_StartValueType.html)
[export-types](https://particles.js.org/docs/modules/tsParticles_Engine.export_types.html)
[exports](https://particles.js.org/docs/modules/tsParticles_Engine.exports.html)
[index](https://particles.js.org/docs/modules/tsParticles_Engine.index.html)
[init](https://particles.js.org/docs/modules/tsParticles_Engine.init.html)
[Options/Classes/AnimatableColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_AnimatableColor.html)
[Options/Classes/AnimationOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_AnimationOptions.html)
[Options/Classes/Background/Background](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Background_Background.html)
[Options/Classes/BackgroundMask/BackgroundMask](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.html)
[Options/Classes/BackgroundMask/BackgroundMaskCover](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMaskCover.html)
[Options/Classes/ColorAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_ColorAnimation.html)
[Options/Classes/FullScreen/FullScreen](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.html)
[Options/Classes/HslAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_HslAnimation.html)
[Options/Classes/Interactivity/Events/ClickEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_ClickEvent.html)
[Options/Classes/Interactivity/Events/DivEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_DivEvent.html)
[Options/Classes/Interactivity/Events/Events](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_Events.html)
[Options/Classes/Interactivity/Events/HoverEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_HoverEvent.html)
[Options/Classes/Interactivity/Events/Parallax](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_Parallax.html)
[Options/Classes/Interactivity/Events/ResizeEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Events_ResizeEvent.html)
[Options/Classes/Interactivity/Interactivity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.html)
[Options/Classes/Interactivity/Modes/Modes](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Modes_Modes.html)
[Options/Classes/ManualParticle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_ManualParticle.html)
[Options/Classes/Options](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Options.html)
[Options/Classes/OptionsColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_OptionsColor.html)
[Options/Classes/Particles/Bounce/ParticlesBounce](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Bounce_ParticlesBounce.html)
[Options/Classes/Particles/Bounce/ParticlesBounceFactor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Bounce_ParticlesBounceFactor.html)
[Options/Classes/Particles/Collisions/Collisions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Collisions_Collisions.html)
[Options/Classes/Particles/Collisions/CollisionsAbsorb](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Collisions_CollisionsAbsorb.html)
[Options/Classes/Particles/Collisions/CollisionsOverlap](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Collisions_CollisionsOverlap.html)
[Options/Classes/Particles/Effect/Effect](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Effect_Effect.html)
[Options/Classes/Particles/Move/Move](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_Move.html)
[Options/Classes/Particles/Move/MoveAngle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveAngle.html)
[Options/Classes/Particles/Move/MoveAttract](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveAttract.html)
[Options/Classes/Particles/Move/MoveCenter](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveCenter.html)
[Options/Classes/Particles/Move/MoveGravity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveGravity.html)
[Options/Classes/Particles/Move/MoveTrail](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveTrail.html)
[Options/Classes/Particles/Move/MoveTrailFill](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_MoveTrailFill.html)
[Options/Classes/Particles/Move/OutModes](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_OutModes.html)
[Options/Classes/Particles/Move/Path/MovePath](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_Path_MovePath.html)
[Options/Classes/Particles/Move/Spin](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Move_Spin.html)
[Options/Classes/Particles/Number/ParticlesDensity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Number_ParticlesDensity.html)
[Options/Classes/Particles/Number/ParticlesNumber](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Number_ParticlesNumber.html)
[Options/Classes/Particles/Number/ParticlesNumberLimit](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Number_ParticlesNumberLimit.html)
[Options/Classes/Particles/Opacity/Opacity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Opacity_Opacity.html)
[Options/Classes/Particles/Opacity/OpacityAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Opacity_OpacityAnimation.html)
[Options/Classes/Particles/ParticlesOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_ParticlesOptions.html)
[Options/Classes/Particles/Shadow](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Shadow.html)
[Options/Classes/Particles/Shape/Shape](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Shape_Shape.html)
[Options/Classes/Particles/Size/Size](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Size_Size.html)
[Options/Classes/Particles/Size/SizeAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Size_SizeAnimation.html)
[Options/Classes/Particles/Stroke](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_Stroke.html)
[Options/Classes/Particles/ZIndex/ZIndex](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Particles_ZIndex_ZIndex.html)
[Options/Classes/Responsive](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Responsive.html)
[Options/Classes/Theme/Theme](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Theme_Theme.html)
[Options/Classes/Theme/ThemeDefault](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Theme_ThemeDefault.html)
[Options/Classes/ValueWithRandom](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_ValueWithRandom.html)
[Options/Interfaces/Background/IBackground](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Background_IBackground.html)
[Options/Interfaces/BackgroundMask/IBackgroundMask](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.html)
[Options/Interfaces/BackgroundMask/IBackgroundMaskCover](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.html)
[Options/Interfaces/FullScreen/IFullScreen](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.html)
[Options/Interfaces/IAnimatable](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IAnimatable.html)
[Options/Interfaces/IAnimatableColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IAnimatableColor.html)
[Options/Interfaces/IAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IAnimation.html)
[Options/Interfaces/IColorAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IColorAnimation.html)
[Options/Interfaces/IHslAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IHslAnimation.html)
[Options/Interfaces/IManualParticle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IManualParticle.html)
[Options/Interfaces/Interactivity/Events/IClickEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IClickEvent.html)
[Options/Interfaces/Interactivity/Events/IDivEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IDivEvent.html)
[Options/Interfaces/Interactivity/Events/IEvents](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.html)
[Options/Interfaces/Interactivity/Events/IHoverEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IHoverEvent.html)
[Options/Interfaces/Interactivity/Events/IParallax](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IParallax.html)
[Options/Interfaces/Interactivity/Events/IResizeEvent](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IResizeEvent.html)
[Options/Interfaces/Interactivity/IInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.html)
[Options/Interfaces/Interactivity/Modes/IModeDiv](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModeDiv.html)
[Options/Interfaces/Interactivity/Modes/IModes](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModes.html)
[Options/Interfaces/IOptionLoader](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptionLoader.html)
[Options/Interfaces/IOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptions.html)
[Options/Interfaces/IOptionsColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptionsColor.html)
[Options/Interfaces/IResponsive](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IResponsive.html)
[Options/Interfaces/IValueWithRandom](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IValueWithRandom.html)
[Options/Interfaces/Particles/Bounce/IParticlesBounce](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.html)
[Options/Interfaces/Particles/Collisions/ICollisions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.html)
[Options/Interfaces/Particles/Collisions/ICollisionsAbsorb](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsAbsorb.html)
[Options/Interfaces/Particles/Collisions/ICollisionsOverlap](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsOverlap.html)
[Options/Interfaces/Particles/Effect/IEffect](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.html)
[Options/Interfaces/Particles/IParticlesOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.html)
[Options/Interfaces/Particles/IShadow](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IShadow.html)
[Options/Interfaces/Particles/IStroke](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IStroke.html)
[Options/Interfaces/Particles/Move/IMove](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMove.html)
[Options/Interfaces/Particles/Move/IMoveAngle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveAngle.html)
[Options/Interfaces/Particles/Move/IMoveAttract](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveAttract.html)
[Options/Interfaces/Particles/Move/IMoveCenter](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveCenter.html)
[Options/Interfaces/Particles/Move/IMoveGravity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveGravity.html)
[Options/Interfaces/Particles/Move/IMoveTrail](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveTrail.html)
[Options/Interfaces/Particles/Move/IMoveTrailFill](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IMoveTrailFill.html)
[Options/Interfaces/Particles/Move/IOutModes](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_IOutModes.html)
[Options/Interfaces/Particles/Move/ISpin](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_ISpin.html)
[Options/Interfaces/Particles/Move/Path/IMovePath](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Move_Path_IMovePath.html)
[Options/Interfaces/Particles/Number/IParticlesDensity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesDensity.html)
[Options/Interfaces/Particles/Number/IParticlesNumber](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.html)
[Options/Interfaces/Particles/Number/IParticlesNumberLimit](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumberLimit.html)
[Options/Interfaces/Particles/Opacity/IOpacity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.html)
[Options/Interfaces/Particles/Opacity/IOpacityAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacityAnimation.html)
[Options/Interfaces/Particles/Shape/IShape](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.html)
[Options/Interfaces/Particles/Size/ISize](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Size_ISize.html)
[Options/Interfaces/Particles/Size/ISizeAnimation](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Size_ISizeAnimation.html)
[Options/Interfaces/Particles/ZIndex/IZIndex](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_ZIndex_IZIndex.html)
[Options/Interfaces/Theme/ITheme](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Theme_ITheme.html)
[Options/Interfaces/Theme/IThemeDefault](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.html)
[Types/CustomEventArgs](https://particles.js.org/docs/modules/tsParticles_Engine.Types_CustomEventArgs.html)
[Types/CustomEventListener](https://particles.js.org/docs/modules/tsParticles_Engine.Types_CustomEventListener.html)
[Types/EasingFunction](https://particles.js.org/docs/modules/tsParticles_Engine.Types_EasingFunction.html)
[Types/ExportResult](https://particles.js.org/docs/modules/tsParticles_Engine.Types_ExportResult.html)
[Types/ISourceOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Types_ISourceOptions.html)
[Types/ParticlesGroups](https://particles.js.org/docs/modules/tsParticles_Engine.Types_ParticlesGroups.html)
[Types/PathOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Types_PathOptions.html)
[Types/RangeType](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RangeType.html)
[Types/RangeValue](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RangeValue.html)
[Types/RecursivePartial](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RecursivePartial.html)
[Types/ShapeData](https://particles.js.org/docs/modules/tsParticles_Engine.Types_ShapeData.html)
[Types/SingleOrMultiple](https://particles.js.org/docs/modules/tsParticles_Engine.Types_SingleOrMultiple.html)
[Utils/CanvasUtils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_CanvasUtils.html)
[Utils/ColorUtils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_ColorUtils.html)
[Utils/EventDispatcher](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_EventDispatcher.html)
[Utils/NumberUtils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_NumberUtils.html)
[Utils/OptionsUtils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_OptionsUtils.html)
[Utils/TypeUtils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_TypeUtils.html)
[Utils/Utils](https://particles.js.org/docs/modules/tsParticles_Engine.Utils_Utils.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
[tsParticles - TypeScript Particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticles---typescript-particles)
* [Table of Contents](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:table-of-contents)
* [Do you want to use it on your website?](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:do-you-want-to-use-it-on-your-website)
* [Library installation](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:library-installation)
* * [Hosting / CDN](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:hosting--cdn)
* * [jsDelivr](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jsdelivr)
* [cdnjs](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:cdnjs)
* [unpkg](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:unpkg)
* [npm](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:npm)
* [yarn](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:yarn)
* [pnpm](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pnpm)
* * [Import and require](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:import-and-require)
* [Usage](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:usage)
* [Official components for some of the most used frameworks](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:official-components-for-some-of-the-most-used-frameworks)
* * [Angular](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:angular)
* * [@tsparticles/angular](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesangular)
* [Astro](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro)
* * [astro-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:astro-particles)
* [Ember.js](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:emberjs)
* * [ember-tsparticles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:ember-tsparticles)
* [Inferno](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno)
* * [inferno-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:inferno-particles)
* [jQuery](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery)
* * [jquery-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jquery-particles)
* [Preact](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact)
* * [preact-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:preact-particles)
* [ReactJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:reactjs)
* * [@tsparticles/react](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesreact)
* [RiotJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riotjs)
* * [riot-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:riot-particles)
* [SolidJS](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solidjs)
* * [solid-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:solid-particles)
* [Svelte](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:svelte)
* * [@tsparticles/svelte](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlessvelte)
* [VueJS 2.x](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-2x)
* * [@tsparticles/vue2](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue2)
* [VueJS 3.x](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:vuejs-3x)
* * [@tsparticles/vue3](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticlesvue3)
* [Web Components](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-components)
* * [web-particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:web-particles)
* [WordPress](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:wordpress)
* * [@tsparticles/wordpress](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:tsparticleswordpress)
* [Elementor](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:elementor)
* [Presets](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:presets)
* * [Big Circles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:big-circles)
* [Bubbles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:bubbles)
* [Confetti](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:confetti)
* [Fire](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fire)
* [Firefly](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:firefly)
* [Fireworks](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fireworks)
* [Fountain](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:fountain)
* [Links](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:links)
* [Sea Anemone](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sea-anemone)
* [Snow](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow)
* [Stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:stars)
* [Triangles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:triangles)
* [Templates and Resources](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:templates-and-resources)
* [Demo / Generator](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:demo--generator)
* [Video Tutorials](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:video-tutorials)
* * [Characters as particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:characters-as-particles)
* [Polygon mask](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:polygon-mask)
* [Animated stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:animated-stars)
* [Nyan cat flying on scrolling stars](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:nyan-cat-flying-on-scrolling-stars)
* [Snow particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:snow-particles)
* [Background Mask particles](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:background-mask-particles)
* [Options](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:options)
* [Want to see it in action and try it?](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:want-to-see-it-in-action-and-try-it)
* [Migrating from Particles.js](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:migrating-from-particlesjs)
* [Plugins/Customizations](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:pluginscustomizations)
* [Dependency Graph](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:dependency-graph)
* [Sponsors](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:sponsors)
* * [JetBrains](https://particles.js.org/docs/modules/tsParticles_Engine.html#md:jetbrains)
---
# Types/RangeValue | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/RangeValue](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RangeValue.html)
Module Types/RangeValue
=======================
### Index
### Type Aliases
[RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/BackgroundMask/IBackgroundMask | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/BackgroundMask/IBackgroundMask](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.html)
Module Options/Interfaces/BackgroundMask/IBackgroundMask
========================================================
### Index
### Interfaces
[IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/Background/IBackground | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Background/IBackground](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Background_IBackground.html)
Module Options/Interfaces/Background/IBackground
================================================
### Index
### Interfaces
[IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Types/RecursivePartial | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/RecursivePartial](https://particles.js.org/docs/modules/tsParticles_Engine.Types_RecursivePartial.html)
Module Types/RecursivePartial
=============================
### Index
### Type Aliases
[RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/FullScreen/IFullScreen | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/FullScreen/IFullScreen](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.html)
Module Options/Interfaces/FullScreen/IFullScreen
================================================
### Index
### Interfaces
[IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/IManualParticle | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IManualParticle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IManualParticle.html)
Module Options/Interfaces/IManualParticle
=========================================
### Index
### Interfaces
[IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Types/SingleOrMultiple | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/SingleOrMultiple](https://particles.js.org/docs/modules/tsParticles_Engine.Types_SingleOrMultiple.html)
Module Types/SingleOrMultiple
=============================
### Index
### Type Aliases
[SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/Interactivity/IInteractivity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Interactivity/IInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.html)
Module Options/Interfaces/Interactivity/IInteractivity
======================================================
### Index
### Interfaces
[IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/Theme/ITheme | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Theme/ITheme](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Theme_ITheme.html)
Module Options/Interfaces/Theme/ITheme
======================================
### Index
### Interfaces
[ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IRangeValue | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IRangeValue](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IRangeValue.html)
* [IRangeValue](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html)
Interface IRangeValue
=====================
interface IRangeValue {
[max](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#max)
: number;
[min](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#min)
: number;
}
##### Index
### Properties
[max](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#max)
[min](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#min)
Properties
----------
### max[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#max)
max: number
### min[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#min)
min: number
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[max](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#max)
[min](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IRangeValue.IRangeValue.html#min)
---
# Options/Interfaces/IResponsive | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IResponsive](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IResponsive.html)
Module Options/Interfaces/IResponsive
=====================================
### Index
### Interfaces
[IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Interfaces/Particles/IParticlesOptions | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/IParticlesOptions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.html)
Module Options/Interfaces/Particles/IParticlesOptions
=====================================================
### Index
### Interfaces
[IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Canvas | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Canvas](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Canvas.html)
Module Core/Canvas
==================
### Index
### Classes
[Canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Options/Classes/Options | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Options](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Options.html)
Module Options/Classes/Options
==============================
### Index
### Classes
[Options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Container | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Container](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Container.html)
Module Core/Container
=====================
### Index
### Classes
[Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# ResponsiveMode | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Enums/Modes/ResponsiveMode](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_Modes_ResponsiveMode.html)
* [ResponsiveMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html)
Enumeration ResponsiveMode
==========================
##### Index
### Enumeration Members
[canvas](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#canvas)
[screen](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#screen)
Enumeration Members
-------------------
### canvas[](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#canvas)
canvas
### screen[](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#screen)
screen
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Enumeration Members
[canvas](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#canvas)
[screen](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html#screen)
---
# IThemeDefault | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Theme/IThemeDefault](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.html)
* [IThemeDefault](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html)
Interface IThemeDefault
=======================
Options to set the default theme
interface IThemeDefault {
[auto](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#auto)
: boolean;
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#mode)
:
| "any"
| "dark"
| "light"
| [ThemeMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ThemeMode.ThemeMode.html)
;
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#value)
: boolean;
}
#### Implemented by
* [ThemeDefault](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_ThemeDefault.ThemeDefault.html)
##### Index
### Properties
[auto](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#auto)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#mode)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#value)
Properties
----------
### auto[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#auto)
auto: boolean
If set to true, this theme will be switched when the mode matches the user OS theme
### mode[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#mode)
mode:
| "any"
| "dark"
| "light"
| [ThemeMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ThemeMode.ThemeMode.html)
Default theme mode `any`: Sets the default theme for every configuration `dark`: Sets the default theme when the user has dark mode set `light`: Sets the default theme when the user has light mode set If `dark` or `light` themes are set, the `any` default theme will be used only for unset modes
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#value)
value: boolean
Sets or unsets the default flag to this theme and mode
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[auto](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#auto)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#mode)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_IThemeDefault.IThemeDefault.html#value)
---
# InteractivityDetect | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Enums/InteractivityDetect](https://particles.js.org/docs/modules/tsParticles_Engine.Enums_InteractivityDetect.html)
* [InteractivityDetect](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html)
Enumeration InteractivityDetect
===============================
##### Index
### Enumeration Members
[canvas](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#canvas)
[parent](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#parent)
[window](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#window)
Enumeration Members
-------------------
### canvas[](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#canvas)
canvas
### parent[](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#parent)
parent
### window[](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#window)
window
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Enumeration Members
[canvas](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#canvas)
[parent](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#parent)
[window](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html#window)
---
# ICoordinatesWithMode | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/ICoordinates](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ICoordinates.html)
* [ICoordinatesWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html)
Interface ICoordinatesWithMode
==============================
interface ICoordinatesWithMode {
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#mode)
: "percent" | "precise" | [PixelMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_PixelMode.PixelMode.html)
;
[x](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#x)
: number;
[y](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#y)
: number;
}
#### Hierarchy ([view full](https://particles.js.org/docs/hierarchy.html#tsParticles%20Engine.Core/Interfaces/ICoordinates.ICoordinatesWithMode)
)
* [ICoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinates.html)
* ICoordinatesWithMode
* [ICenterCoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICenterCoordinates.html)
##### Index
### Properties
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#mode)
[x](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#x)
[y](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#y)
Properties
----------
### mode[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#mode)
mode: "percent" | "precise" | [PixelMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_PixelMode.PixelMode.html)
### x[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#x)
x: number
### y[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#y)
y: number
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#mode)
[x](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#x)
[y](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html#y)
---
# IColor | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/Colors](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_Colors.html)
* [IColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html)
Interface IColor
================
Color \[\[include:Color.md\]\]
interface IColor {
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html#value)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
| [IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
| [IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
| [IHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsv.html)
\>;
}
##### Index
### Properties
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html#value)
Properties
----------
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html#value)
value: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
| [IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
| [IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
| [IHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsv.html)
\>
Color value, can be a single or an array of [IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
, [IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
, [IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
or string
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html#value)
---
# FullScreen | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/FullScreen/FullScreen](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.html)
* [FullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html)
Class FullScreen
================
The options to set the particles in the background using CSS `fixed` position The [FullScreen.zIndex](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#zIndex)
property sets the background CSS `z-index` property \[\[include:Options/FullScreen.md\]\]
#### Implements
* [IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#constructor)
### Properties
[enable](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#enable)
[zIndex](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#zIndex)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#constructor)
* new FullScreen(): [FullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#constructor.new_FullScreen)
* #### Returns [FullScreen](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html)
Properties
----------
### enable[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#enable)
enable: boolean
This property sets the canvas to a full window size acting like a background, the most common configuration. The default value is `false` since many already have different configurations.
This is really helpful since there's no need to write CSS code to have a full size tsParticles instance.
### zIndex[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#zIndex)
zIndex: number
This is the CSS `z-index` property set to the canvas.
If the `z-index` is less than `0` the mouse interactions works only with the `interactivity.detectsOn` set to `window`.
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IFullScreen](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#constructor)
Properties
[enable](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#enable)
[zIndex](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#zIndex)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html#load)
---
# IParticlesBounce | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Bounce/IParticlesBounce](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.html)
* [IParticlesBounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html)
Interface IParticlesBounce
==========================
interface IParticlesBounce {
[horizontal](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#horizontal)
: [IValueWithRandom](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IValueWithRandom.IValueWithRandom.html)
;
[vertical](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#vertical)
: [IValueWithRandom](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IValueWithRandom.IValueWithRandom.html)
;
}
#### Implemented by
* [ParticlesBounce](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Bounce_ParticlesBounce.ParticlesBounce.html)
##### Index
### Properties
[horizontal](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#horizontal)
[vertical](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#vertical)
Properties
----------
### horizontal[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#horizontal)
horizontal: [IValueWithRandom](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IValueWithRandom.IValueWithRandom.html)
### vertical[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#vertical)
vertical: [IValueWithRandom](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IValueWithRandom.IValueWithRandom.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[horizontal](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#horizontal)
[vertical](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html#vertical)
---
# IRangeColor | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/Colors](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_Colors.html)
* [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
Interface IRangeColor
=====================
Range Color \[\[include:Color.md\]\]
interface IRangeColor {
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html#value)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IRangeValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeValueColor.html)
| [IRangeRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeRgb.html)
| [IRangeHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsl.html)
| [IRangeHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsv.html)
\>;
}
##### Index
### Properties
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html#value)
Properties
----------
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html#value)
value: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IRangeValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeValueColor.html)
| [IRangeRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeRgb.html)
| [IRangeHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsl.html)
| [IRangeHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsv.html)
\>
Color value, can be a single or an array of [IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
, [IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
, [IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
or string
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html#value)
---
# Core/Engine | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Engine](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Engine.html)
Module Core/Engine
==================
### Index
### Classes
[Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IBackgroundMaskCover | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/BackgroundMask/IBackgroundMaskCover](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.html)
* [IBackgroundMaskCover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html)
Interface IBackgroundMaskCover
==============================
The background cover customization
interface IBackgroundMaskCover {
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#color)
?: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
;
[image](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#image)
?: string;
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#opacity)
: number;
}
#### Implemented by
* [BackgroundMaskCover](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMaskCover.BackgroundMaskCover.html)
##### Index
### Properties
[color?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#color)
[image?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#image)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#opacity)
Properties
----------
### `Optional`color[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#color)
color?: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
The background color hiding all elements behind, string or [IOptionsColor](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_IOptionsColor.IOptionsColor.html)
value.
### `Optional`image[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#image)
image?: string
The background image hiding all elements behind
### opacity[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#opacity)
opacity: number
The opacity of the background
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#color)
[image](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#image)
[opacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMaskCover.IBackgroundMaskCover.html#opacity)
---
# Background | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Background/Background](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Background_Background.html)
* [Background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html)
Class Background
================
\[\[include:Options/Background.md\]\]
#### Implements
* [IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#constructor)
### Properties
[color](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#color)
[image](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#image)
[opacity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#opacity)
[position](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#position)
[repeat](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#repeat)
[size](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#size)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#constructor)
* new Background(): [Background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#constructor.new_Background)
* #### Returns [Background](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html)
Properties
----------
### color[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#color)
color: [OptionsColor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_OptionsColor.OptionsColor.html)
The `color` property can be set to a HEX string or to a [color object](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_IOptionsColor.IOptionsColor.html)
, that is the same as the one used in `particles.color` options.
This color is set to canvas style `background-color` property, if this property is not set the background will be transparent.
### image[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#image)
image: string
The `image` property sets the canvas style `background-image` property.
This property doesn't have a default value, anyway if you need a background image you need to specify the same CSS syntax with the `url()` function.
### opacity[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#opacity)
opacity: number
The `opacity` property sets the `color` property opacity, so you can set a semi-transparent background.
This value is by default to `1` and it accepts any value between `0` and `1` included.
### position[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#position)
position: string
The `position` property sets the canvas style `background-position` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
can be useful to set the right value to this property.
### repeat[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#repeat)
repeat: string
The `repeat` property sets the canvas style `background-repeat` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
can be useful to set the right value to this property.
### size[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#size)
size: string
The `size` property sets the canvas style `background-size` property.
This [link](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
can be useful to set the right value to this property.
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IBackground](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Background_IBackground.IBackground.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#constructor)
Properties
[color](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#color)
[image](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#image)
[opacity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#opacity)
[position](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#position)
[repeat](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#repeat)
[size](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#size)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Background_Background.Background.html#load)
---
# IEvents | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Interactivity/Events/IEvents](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.html)
* [IEvents](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html)
Interface IEvents
=================
\[\[include:Options/Interactivity/Events.md\]\]
interface IEvents {
[onClick](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onClick)
: [IClickEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IClickEvent.IClickEvent.html)
;
[onDiv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onDiv)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<[IDivEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IDivEvent.IDivEvent.html)
\>;
[onHover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onHover)
: [IHoverEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IHoverEvent.IHoverEvent.html)
;
[resize](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#resize)
: [IResizeEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IResizeEvent.IResizeEvent.html)
;
}
#### Implemented by
* [Events](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Events_Events.Events.html)
##### Index
### Properties
[onClick](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onClick)
[onDiv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onDiv)
[onHover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onHover)
[resize](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#resize)
Properties
----------
### onClick[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onClick)
onClick: [IClickEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IClickEvent.IClickEvent.html)
Click event options
### onDiv[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onDiv)
onDiv: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<[IDivEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IDivEvent.IDivEvent.html)
\>
Div event options
### onHover[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onHover)
onHover: [IHoverEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IHoverEvent.IHoverEvent.html)
Hover event options
### resize[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#resize)
resize: [IResizeEvent](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IResizeEvent.IResizeEvent.html)
Resize event options
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[onClick](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onClick)
[onDiv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onDiv)
[onHover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#onHover)
[resize](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_Events_IEvents.IEvents.html#resize)
---
# IOptionsColor | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IOptionsColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IOptionsColor.html)
* [IOptionsColor](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_IOptionsColor.IOptionsColor.html)
Type Alias IOptionsColor
========================
IOptionsColor: [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
Color options \[\[include:Color.md\]\]
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Responsive | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Responsive](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Responsive.html)
* [Responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html)
Class Responsive
================
This interface is used by the options classes to have a [IOptionLoader.load](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html#load)
method to set all needed properties from source
#### Implements
* [IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#constructor)
### Properties
[maxWidth](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#maxWidth)
[mode](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#mode)
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#options)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#constructor)
* new Responsive(): [Responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#constructor.new_Responsive)
* #### Returns [Responsive](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html)
Properties
----------
### maxWidth[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#maxWidth)
maxWidth: number
Maximum width of the canvas or the screen, depending on [mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html#mode)
value.
### mode[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#mode)
mode: "screen" | "canvas" | [ResponsiveMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_ResponsiveMode.ResponsiveMode.html)
Responsive mode.
### options[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#options)
options: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
Options to override.
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IResponsive](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IResponsive.IResponsive.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#constructor)
Properties
[maxWidth](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#maxWidth)
[mode](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#mode)
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#options)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Responsive.Responsive.html#load)
---
# ManualParticle | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/ManualParticle](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_ManualParticle.html)
* [ManualParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html)
Class ManualParticle
====================
Manual particles options \[\[include:Options/ManualParticles.md\]\]
#### Implements
* [IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#constructor)
### Properties
[options?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#options)
[position?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#position)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#constructor)
* new ManualParticle(): [ManualParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#constructor.new_ManualParticle)
* #### Returns [ManualParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html)
Properties
----------
### `Optional`options[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#options)
options?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IParticlesOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IParticlesOptions.IParticlesOptions.html)
\>
Particle options, this properties will override the general particles configuration
### `Optional`position[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#position)
position?: [ICoordinatesWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html)
Particle position in canvas size percent, if undefined a random position will be used
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IManualParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IManualParticle.IManualParticle.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#constructor)
Properties
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#options)
[position](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#position)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_ManualParticle.ManualParticle.html#load)
---
# IModes | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Interactivity/Modes/IModes](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModes.html)
* [IModes](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_Interactivity_Modes_IModes.IModes.html)
Type Alias IModes
=================
IModes: Record
\[\[include:Options/Interactivity/Modes.md\]\]
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Theme | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Theme/Theme](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Theme_Theme.html)
* [Theme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html)
Class Theme
===========
The options to configure themes that can be easily switched \[\[include:Options/Themes.md\]\]
#### Implements
* [ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#constructor)
### Properties
[default](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#default)
[name](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#name)
[options?](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#options)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#constructor)
* new Theme(): [Theme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#constructor.new_Theme)
* #### Returns [Theme](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html)
Properties
----------
### `Readonly`default[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#default)
default: [ThemeDefault](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_ThemeDefault.ThemeDefault.html)
Options to set the default theme
### name[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#name)
name: string
Theme name, use it when changing theme
### `Optional`options[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#options)
options?: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
All options the theme will override
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[ITheme](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Theme_ITheme.ITheme.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#constructor)
Properties
[default](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#default)
[name](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#name)
[options](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#options)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Theme_Theme.Theme.html#load)
---
# Core/Interfaces/IBounds | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IBounds](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IBounds.html)
Module Core/Interfaces/IBounds
==============================
### Index
### Interfaces
[IBounds](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IBounds.IBounds.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# ICollisions | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Collisions/ICollisions](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.html)
* [ICollisions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html)
Interface ICollisions
=====================
\[\[include:Collisions.md\]\]
interface ICollisions {
[absorb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#absorb)
: [ICollisionsAbsorb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsAbsorb.ICollisionsAbsorb.html)
;
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#bounce)
: [IParticlesBounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html)
;
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#enable)
: boolean;
[maxSpeed](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#maxSpeed)
: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
;
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#mode)
:
| "absorb"
| "bounce"
| "destroy"
| [CollisionMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_CollisionMode.CollisionMode.html)
;
[overlap](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#overlap)
: [ICollisionsOverlap](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsOverlap.ICollisionsOverlap.html)
;
}
#### Implemented by
* [Collisions](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Collisions_Collisions.Collisions.html)
##### Index
### Properties
[absorb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#absorb)
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#bounce)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#enable)
[maxSpeed](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#maxSpeed)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#mode)
[overlap](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#overlap)
Properties
----------
### absorb[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#absorb)
absorb: [ICollisionsAbsorb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsAbsorb.ICollisionsAbsorb.html)
### bounce[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#bounce)
bounce: [IParticlesBounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Bounce_IParticlesBounce.IParticlesBounce.html)
### enable[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#enable)
enable: boolean
### maxSpeed[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#maxSpeed)
maxSpeed: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
### mode[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#mode)
mode:
| "absorb"
| "bounce"
| "destroy"
| [CollisionMode](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Modes_CollisionMode.CollisionMode.html)
### overlap[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#overlap)
overlap: [ICollisionsOverlap](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisionsOverlap.ICollisionsOverlap.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[absorb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#absorb)
[bounce](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#bounce)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#enable)
[maxSpeed](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#maxSpeed)
[mode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#mode)
[overlap](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Collisions_ICollisions.ICollisions.html#overlap)
---
# BackgroundMask | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/BackgroundMask/BackgroundMask](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.html)
* [BackgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html)
Class BackgroundMask
====================
\[\[include:Options/BackgroundMask.md\]\]
#### Implements
* [IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
\>
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#constructor)
### Properties
[composite](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#composite)
[cover](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#cover)
[enable](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#enable)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#constructor)
* new BackgroundMask(): [BackgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#constructor.new_BackgroundMask)
* #### Returns [BackgroundMask](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html)
Properties
----------
### composite[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#composite)
composite: GlobalCompositeOperation
Canvas composite operation values here: [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)
### `Readonly`cover[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#cover)
cover: [BackgroundMaskCover](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMaskCover.BackgroundMaskCover.html)
Background covering color
### enable[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#enable)
enable: boolean
Background mask enabling options
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IBackgroundMask](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_BackgroundMask_IBackgroundMask.IBackgroundMask.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#constructor)
Properties
[composite](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#composite)
[cover](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#cover)
[enable](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#enable)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_BackgroundMask_BackgroundMask.BackgroundMask.html#load)
---
# Core/Interfaces/IBubbleParticleData | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IBubbleParticleData](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IBubbleParticleData.html)
Module Core/Interfaces/IBubbleParticleData
==========================================
### Index
### Interfaces
[IBubbleParticleData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IBubbleParticleData.IBubbleParticleData.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IEffect | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Effect/IEffect](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.html)
* [IEffect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html)
Interface IEffect
=================
\[\[include:Options/Particles/Effect.md\]\]
interface IEffect {
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#close)
: boolean;
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#fill)
: boolean;
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#options)
: [ShapeData](https://particles.js.org/docs/types/tsParticles_Engine.Types_ShapeData.ShapeData.html)
;
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#type)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
;
}
#### Implemented by
* [Effect](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Effect_Effect.Effect.html)
##### Index
### Properties
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#close)
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#fill)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#options)
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#type)
Properties
----------
### close[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#close)
close: boolean
Set this property to false for creating an open shape
### fill[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#fill)
fill: boolean
Set this property to false for creating an empty shape
### options[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#options)
options: [ShapeData](https://particles.js.org/docs/types/tsParticles_Engine.Types_ShapeData.ShapeData.html)
### type[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#type)
type: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#close)
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#fill)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#options)
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Effect_IEffect.IEffect.html#type)
---
# Canvas | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Canvas](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Canvas.html)
* [Canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html)
Class Canvas
============
Canvas manager
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#constructor)
### Properties
[element?](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#element)
[size](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#size)
### Methods
[clear](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#clear)
[destroy](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#destroy)
[draw](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw)
[drawAsync](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync)
[drawParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticle)
[drawParticlePlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticlePlugin)
[drawPlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawPlugin)
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#init)
[initBackground](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initBackground)
[initPlugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initPlugins)
[initUpdaters](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initUpdaters)
[loadCanvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#loadCanvas)
[paint](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#paint)
[resize](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#resize)
[setPointerEvents](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#setPointerEvents)
[stop](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#stop)
[windowResize](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#windowResize)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#constructor)
* new Canvas(container, engine): [Canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#constructor.new_Canvas)
* Constructor of canvas manager
#### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
the parent container
* engine: [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
the engine managing the whole library
#### Returns [Canvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html)
Properties
----------
### `Optional`element[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#element)
element?: HTMLCanvasElement
The particles canvas
### `Readonly`size[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#size)
size: [IDimension](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDimension.IDimension.html)
The particles canvas dimension
Methods
-------
### clear[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#clear)
* clear(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#clear.clear-1)
* Clears the canvas content
#### Returns void
### destroy[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#destroy)
* destroy(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#destroy.destroy-1)
* Destroying object actions
#### Returns void
### draw[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw)
* draw<[T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
\>(cb): undefined | [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1)
* Generic draw method, for drawing stuff on the canvas context
#### Type Parameters
* T
#### Parameters
* cb: ((context: CanvasRenderingContext2D) => [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
)
* * (context): [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
* #### Parameters
* context: CanvasRenderingContext2D
#### Returns [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
#### Returns undefined | [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw.draw-1.T)
the result of the callback
### drawAsync[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync)
* drawAsync<[T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
\>(cb): undefined | [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1)
* #### Type Parameters
* T
#### Parameters
* cb: ((context: CanvasRenderingContext2D) => [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
)
* * (context): [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
* #### Parameters
* context: CanvasRenderingContext2D
#### Returns [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
#### Returns undefined | [T](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync.drawAsync-1.T-1)
### drawParticle[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticle)
* drawParticle(particle, delta): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticle.drawParticle-1)
* Draws the specified particle in the canvas
#### Parameters
* particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
the particle to draw
* delta: [IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
the frame delta time values
#### Returns void
### drawParticlePlugin[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticlePlugin)
* drawParticlePlugin(plugin, particle, delta): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticlePlugin.drawParticlePlugin-1)
* Draws stuff using the given plugin, using the given particle
#### Parameters
* plugin: [IContainerPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerPlugin.IContainerPlugin.html)
the plugin to use for drawing stuff
* particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
the particle used
* delta: [IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
the frame delta time values
#### Returns void
### drawPlugin[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawPlugin)
* drawPlugin(plugin, delta): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawPlugin.drawPlugin-1)
* Draws stuff using the given plugin
#### Parameters
* plugin: [IContainerPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerPlugin.IContainerPlugin.html)
the plugin to use for drawing stuff
* delta: [IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
the frame delta time values
#### Returns void
### init[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#init)
* init(): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#init.init-1)
* Initializes the canvas element
#### Returns Promise
### initBackground[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initBackground)
* initBackground(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initBackground.initBackground-1)
* Initializes the canvas background
#### Returns void
### initPlugins[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initPlugins)
* initPlugins(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initPlugins.initPlugins-1)
* Initializes the plugins needed by canvas
#### Returns void
### initUpdaters[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initUpdaters)
* initUpdaters(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initUpdaters.initUpdaters-1)
* Initializes the updaters needed by canvas
#### Returns void
### loadCanvas[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#loadCanvas)
* loadCanvas(canvas): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#loadCanvas.loadCanvas-1)
* Loads the canvas html element
#### Parameters
* canvas: HTMLCanvasElement
the canvas html element
#### Returns void
### paint[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#paint)
* paint(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#paint.paint-1)
* Paints the canvas background
#### Returns void
### resize[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#resize)
* resize(): boolean[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#resize.resize-1)
* Calculates the size of the canvas
#### Returns boolean
true if the size changed
### setPointerEvents[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#setPointerEvents)
* setPointerEvents(type): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#setPointerEvents.setPointerEvents-1)
* #### Parameters
* type: string
#### Returns void
### stop[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#stop)
* stop(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#stop.stop-1)
* #### Returns void
### windowResize[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#windowResize)
* windowResize(): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#windowResize.windowResize-1)
* The window resize event handler
#### Returns Promise
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#constructor)
Properties
[element](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#element)
[size](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#size)
Methods
[clear](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#clear)
[destroy](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#destroy)
[draw](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#draw)
[drawAsync](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawAsync)
[drawParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticle)
[drawParticlePlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawParticlePlugin)
[drawPlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#drawPlugin)
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#init)
[initBackground](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initBackground)
[initPlugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initPlugins)
[initUpdaters](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#initUpdaters)
[loadCanvas](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#loadCanvas)
[paint](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#paint)
[resize](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#resize)
[setPointerEvents](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#setPointerEvents)
[stop](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#stop)
[windowResize](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Canvas.Canvas.html#windowResize)
---
# ParticlesGroups | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Types/ParticlesGroups](https://particles.js.org/docs/modules/tsParticles_Engine.Types_ParticlesGroups.html)
* [ParticlesGroups](https://particles.js.org/docs/types/tsParticles_Engine.Types_ParticlesGroups.ParticlesGroups.html)
Type Alias ParticlesGroups
==========================
ParticlesGroups: Record
\[\[include:Options/Particles/Group.md\]\]
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Interfaces/ICircleBouncer | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/ICircleBouncer](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ICircleBouncer.html)
Module Core/Interfaces/ICircleBouncer
=====================================
### Index
### Interfaces
[ICircleBouncer](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICircleBouncer.ICircleBouncer.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Interfaces/IColorManager | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IColorManager](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IColorManager.html)
Module Core/Interfaces/IColorManager
====================================
### Index
### Interfaces
[IColorManager](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IColorManager.IColorManager.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IEffectDrawer | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IEffectDrawer](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IEffectDrawer.html)
* [IEffectDrawer](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html)
Interface IEffectDrawer
==================================
interface IEffectDrawer<[TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
\> {
[destroy](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#destroy)
?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => void);
[draw](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#draw)
: ((data: [IShapeDrawData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IShapeDrawData.IShapeDrawData.html)
<[TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
\>) => void);
[init](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#init)
?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => Promise);
[loadEffect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#loadEffect)
?: ((particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
) => void);
[particleInit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#particleInit)
?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
, particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
) => void);
}
#### Type Parameters
* TParticle extends [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
= [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
##### Index
### Properties
[destroy?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#destroy)
[draw](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#draw)
[init?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#init)
[loadEffect?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#loadEffect)
[particleInit?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#particleInit)
Properties
----------
### `Optional`destroy[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#destroy)
destroy?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => void)
Shape destroy function
#### Type declaration
* * (container): void
* #### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
the container initializing the shape
#### Returns void
### draw[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#draw)
draw: ((data: [IShapeDrawData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IShapeDrawData.IShapeDrawData.html)
<[TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
\>) => void)
Shape draw function
#### Type declaration
* * (data): void
* #### Parameters
* data: [IShapeDrawData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IShapeDrawData.IShapeDrawData.html)
<[TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
\>
the data used for drawing
#### Returns void
### `Optional`init[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#init)
init?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => Promise)
Shape init function
#### Type declaration
* * (container): Promise
* #### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
the container initializing the shape
#### Returns Promise
### `Optional`loadEffect[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#loadEffect)
loadEffect?: ((particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
) => void)
Effect load function
#### Type declaration
* * (particle): void
* #### Parameters
* particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
the particle using the shape
#### Returns void
### `Optional`particleInit[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#particleInit)
particleInit?: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
, particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
) => void)
Shape particle init function
#### Type declaration
* * (container, particle): void
* #### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
the container containing the shape
* particle: [TParticle](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#TParticle)
the particle using the shape
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[destroy](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#destroy)
[draw](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#draw)
[init](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#init)
[loadEffect](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#loadEffect)
[particleInit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html#particleInit)
---
# IAnimatableColor | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/IAnimatableColor](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_IAnimatableColor.html)
* [IAnimatableColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html)
Interface IAnimatableColor
==========================
The animatable color interface, it provides all the necessary properties to create a color animation \[\[include:Options/Particles/Color.md\]\]
interface IAnimatableColor {
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#animation)
: [IColorAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IColorAnimation.IColorAnimation.html)
| [IHslAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IHslAnimation.IHslAnimation.html)
;
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#value)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IRangeValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeValueColor.html)
| [IRangeRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeRgb.html)
| [IRangeHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsl.html)
| [IRangeHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsv.html)
\>;
}
#### Hierarchy ([view full](https://particles.js.org/docs/hierarchy.html#tsParticles%20Engine.Options/Interfaces/IAnimatableColor.IAnimatableColor)
)
* [IOptionsColor](https://particles.js.org/docs/types/tsParticles_Engine.Options_Interfaces_IOptionsColor.IOptionsColor.html)
* IAnimatableColor
#### Implemented by
* [AnimatableColor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_AnimatableColor.AnimatableColor.html)
##### Index
### Properties
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#animation)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#value)
Properties
----------
### animation[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#animation)
animation: [IColorAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IColorAnimation.IColorAnimation.html)
| [IHslAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IHslAnimation.IHslAnimation.html)
The color animation property
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#value)
value: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
<
| [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
| [IRangeValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeValueColor.html)
| [IRangeRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeRgb.html)
| [IRangeHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsl.html)
| [IRangeHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsv.html)
\>
Color value, can be a single or an array of [IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
, [IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
, [IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
or string
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#animation)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IAnimatableColor.IAnimatableColor.html#value)
---
# Core/Interfaces/IContainerInteractivity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IContainerInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.html)
Module Core/Interfaces/IContainerInteractivity
==============================================
### Index
### Interfaces
[IContainerInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Interactivity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Classes/Interactivity/Interactivity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.html)
* [Interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html)
Class Interactivity
===================
\[\[include:Options/Interactivity.md\]\]
#### Implements
* [IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
* [IOptionLoader](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptionLoader.IOptionLoader.html)
<[IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
\>
#### Indexable
* \[name: string\]: unknown
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#constructor)
### Properties
[detectsOn](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#detectsOn)
[events](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#events)
[modes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#modes)
### Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#load)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#constructor)
* new Interactivity(engine, container?): [Interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#constructor.new_Interactivity)
* #### Parameters
* engine: [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
* `Optional`container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
#### Returns [Interactivity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html)
Properties
----------
### detectsOn[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#detectsOn)
detectsOn:
| "window"
| "canvas"
| "parent"
| [InteractivityDetect](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_InteractivityDetect.InteractivityDetect.html)
Where the mouse events will be detected If set to `canvas` only the particles canvas will be targeted If set to `parent` only the particles canvas parent will be targeted If set to `window` every area will be the target
### `Readonly`events[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#events)
events: [Events](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Events_Events.Events.html)
Interaction events options, this configures which events are enabled and which modes should be used
### `Readonly`modes[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#modes)
modes: [Modes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Modes_Modes.Modes.html)
Interaction modes options, this configures every mode behavior
Methods
-------
### load[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#load)
* load(data?): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#load.load-1)
* This load method is used to load data in the classes used as generic
#### Parameters
* `Optional`data: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Interactivity_IInteractivity.IInteractivity.html)
\>
the input options
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#constructor)
Properties
[detectsOn](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#detectsOn)
[events](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#events)
[modes](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#modes)
Methods
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Interactivity_Interactivity.Interactivity.html#load)
---
# IContainerInteractivity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IContainerInteractivity](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.html)
* [IContainerInteractivity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html)
Interface IContainerInteractivity
=================================
interface IContainerInteractivity {
[element](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#element)
?:
| null
| Node
| HTMLElement
| Window;
[mouse](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#mouse)
: [IMouseData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMouseData.IMouseData.html)
;
[status](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#status)
?: string;
}
##### Index
### Properties
[element?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#element)
[mouse](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#mouse)
[status?](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#status)
Properties
----------
### `Optional`element[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#element)
element?:
| null
| Node
| HTMLElement
| Window
### mouse[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#mouse)
mouse: [IMouseData](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMouseData.IMouseData.html)
### `Optional`status[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#status)
status?: string
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[element](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#element)
[mouse](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#mouse)
[status](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerInteractivity.IContainerInteractivity.html#status)
---
# Core/Interfaces/IContainerPlugin | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IContainerPlugin](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IContainerPlugin.html)
Module Core/Interfaces/IContainerPlugin
=======================================
### Index
### Interfaces
[IContainerPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IContainerPlugin.IContainerPlugin.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Interfaces/Colors | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/Colors](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_Colors.html)
Module Core/Interfaces/Colors
=============================
### Index
### Interfaces
[IAlphaColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IAlphaColor.html)
[IColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IColor.html)
[IHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsl.html)
[IHsla](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsla.html)
[IHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsv.html)
[IHsva](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IHsva.html)
[ILch](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.ILch.html)
[ILcha](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.ILcha.html)
[IOklch](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IOklch.html)
[IOklcha](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IOklcha.html)
[IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
[IRangeHsl](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsl.html)
[IRangeHsv](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeHsv.html)
[IRangeLch](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeLch.html)
[IRangeOklch](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeOklch.html)
[IRangeRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeRgb.html)
[IRangeValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeValueColor.html)
[IRgb](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgb.html)
[IRgba](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRgba.html)
[IValueColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IValueColor.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IParticlesNumber | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Number/IParticlesNumber](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.html)
* [IParticlesNumber](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html)
Interface IParticlesNumber
==========================
\[\[include:Options/Particles/Number.md\]\]
interface IParticlesNumber {
[density](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#density)
: [IParticlesDensity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesDensity.IParticlesDensity.html)
;
[limit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#limit)
: [IParticlesNumberLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumberLimit.IParticlesNumberLimit.html)
;
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#value)
: number;
}
#### Implemented by
* [ParticlesNumber](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Number_ParticlesNumber.ParticlesNumber.html)
##### Index
### Properties
[density](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#density)
[limit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#limit)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#value)
Properties
----------
### density[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#density)
density: [IParticlesDensity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesDensity.IParticlesDensity.html)
Particles density options
### limit[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#limit)
limit: [IParticlesNumberLimit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumberLimit.IParticlesNumberLimit.html)
Particles number limit options
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#value)
value: number
The number of particles to be rendered
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[density](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#density)
[limit](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#limit)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Number_IParticlesNumber.IParticlesNumber.html#value)
---
# IOpacity | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Opacity/IOpacity](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.html)
* [IOpacity](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html)
Interface IOpacity
==================
\[\[include:Options/Particles/Opacity.md\]\]
interface IOpacity {
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#animation)
: [IOpacityAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacityAnimation.IOpacityAnimation.html)
;
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#value)
: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
;
}
#### Hierarchy ([view full](https://particles.js.org/docs/hierarchy.html#tsParticles%20Engine.Options/Interfaces/Particles/Opacity/IOpacity.IOpacity)
)
* [IValueWithRandom](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IValueWithRandom.IValueWithRandom.html)
* IOpacity
#### Implemented by
* [Opacity](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Opacity_Opacity.Opacity.html)
##### Index
### Properties
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#animation)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#value)
Properties
----------
### animation[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#animation)
animation: [IOpacityAnimation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacityAnimation.IOpacityAnimation.html)
The animation opacity options
### value[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#value)
value: [RangeValue](https://particles.js.org/docs/types/tsParticles_Engine.Types_RangeValue.RangeValue.html)
Value of property.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[animation](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#animation)
[value](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Opacity_IOpacity.IOpacity.html#value)
---
# IMovePathGenerator | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IMovePathGenerator](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.html)
* [IMovePathGenerator](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html)
Interface IMovePathGenerator
============================
interface IMovePathGenerator {
[generate](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#generate)
: ((particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
, delta: [IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
) => [Vector](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Utils_Vectors.Vector.html)
);
[init](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#init)
: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => void);
[reset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#reset)
: ((particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
) => void);
[update](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#update)
: (() => void);
}
##### Index
### Properties
[generate](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#generate)
[init](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#init)
[reset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#reset)
[update](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#update)
Properties
----------
### generate[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#generate)
generate: ((particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
, delta: [IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
) => [Vector](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Utils_Vectors.Vector.html)
)
### init[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#init)
init: ((container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
) => void)
### reset[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#reset)
reset: ((particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
) => void)
### update[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#update)
update: (() => void)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[generate](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#generate)
[init](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#init)
[reset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#reset)
[update](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html#update)
---
# Core/Interfaces/IDelta | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IDelta](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDelta.html)
Module Core/Interfaces/IDelta
=============================
### Index
### Interfaces
[IDelta](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDelta.IDelta.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# IShadow | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/IShadow](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_IShadow.html)
* [IShadow](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html)
Interface IShadow
=================
\[\[include:Shadow.md\]\]
interface IShadow {
[blur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#blur)
: number;
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#color)
: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
;
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#enable)
: boolean;
[offset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#offset)
: [ICoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinates.html)
;
}
#### Implemented by
* [Shadow](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Shadow.Shadow.html)
##### Index
### Properties
[blur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#blur)
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#color)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#enable)
[offset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#offset)
Properties
----------
### blur[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#blur)
blur: number
The blur of the shadow.
### color[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#color)
color: string | [IRangeColor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_Colors.IRangeColor.html)
The color of the shadow.
### enable[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#enable)
enable: boolean
Sets if the shadow is enabled.
### offset[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#offset)
offset: [ICoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinates.html)
The distance of the shadow from the particle.
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[blur](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#blur)
[color](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#color)
[enable](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#enable)
[offset](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_IShadow.IShadow.html#offset)
---
# IShape | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Options/Interfaces/Particles/Shape/IShape](https://particles.js.org/docs/modules/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.html)
* [IShape](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html)
Interface IShape
================
\[\[include:Options/Particles/Shape.md\]\]
interface IShape {
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#close)
: boolean;
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#fill)
: boolean;
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#options)
: [ShapeData](https://particles.js.org/docs/types/tsParticles_Engine.Types_ShapeData.ShapeData.html)
;
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#type)
: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
;
}
#### Implemented by
* [Shape](https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Particles_Shape_Shape.Shape.html)
##### Index
### Properties
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#close)
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#fill)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#options)
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#type)
Properties
----------
### close[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#close)
close: boolean
Set this property to false for creating an open shape
### fill[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#fill)
fill: boolean
Set this property to false for creating an empty shape
### options[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#options)
options: [ShapeData](https://particles.js.org/docs/types/tsParticles_Engine.Types_ShapeData.ShapeData.html)
Shape options
### type[](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#type)
type: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
Shape type
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Properties
[close](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#close)
[fill](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#fill)
[options](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#options)
[type](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html#type)
---
# Core/Interfaces/ICoordinates | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/ICoordinates](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_ICoordinates.html)
Module Core/Interfaces/ICoordinates
===================================
### Index
### Interfaces
[ICenterCoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICenterCoordinates.html)
[ICoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinates.html)
[ICoordinates3d](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinates3d.html)
[ICoordinatesWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.ICoordinatesWithMode.html)
[IRangedCoordinates](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.IRangedCoordinates.html)
[IRangedCoordinates3d](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_ICoordinates.IRangedCoordinates3d.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Retina | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Retina](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Retina.html)
* [Retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html)
Class Retina
============
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#constructor)
### Properties
[maxSpeed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#maxSpeed)
[pixelRatio](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#pixelRatio)
[reduceFactor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#reduceFactor)
[sizeAnimationSpeed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#sizeAnimationSpeed)
### Methods
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#init)
[initParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#initParticle)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#constructor)
* new Retina(container): [Retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#constructor.new_Retina)
* #### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
#### Returns [Retina](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html)
Properties
----------
### maxSpeed[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#maxSpeed)
maxSpeed: number
### pixelRatio[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#pixelRatio)
pixelRatio: number
### reduceFactor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#reduceFactor)
reduceFactor: number
### sizeAnimationSpeed[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#sizeAnimationSpeed)
sizeAnimationSpeed: number
Methods
-------
### init[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#init)
* init(): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#init.init-1)
* Initializes all the values needing a pixel ratio factor (sizes, widths, distances)
#### Returns void
### initParticle[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#initParticle)
* initParticle(particle): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#initParticle.initParticle-1)
* #### Parameters
* particle: [Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
#### Returns void
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
### On This Page
Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#constructor)
Properties
[maxSpeed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#maxSpeed)
[pixelRatio](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#pixelRatio)
[reduceFactor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#reduceFactor)
[sizeAnimationSpeed](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#sizeAnimationSpeed)
Methods
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#init)
[initParticle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Retina.Retina.html#initParticle)
---
# Core/Interfaces/IDimension | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IDimension](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDimension.html)
Module Core/Interfaces/IDimension
=================================
### Index
### Interfaces
[IDimension](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDimension.IDimension.html)
[IDimensionWithMode](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDimension.IDimensionWithMode.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Core/Interfaces/IDistance | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Interfaces/IDistance](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Interfaces_IDistance.html)
Module Core/Interfaces/IDistance
================================
### Index
### Interfaces
[IDistance](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IDistance.IDistance.html)
### Settings
Member Visibility
* Protected
* Inherited
* External
ThemeOSLightDark
---
# Engine | tsParticles - v3.0.0
* [tsParticles](https://particles.js.org/docs/modules.html)
* [tsParticles Engine](https://particles.js.org/docs/modules/tsParticles_Engine.html)
* [Core/Engine](https://particles.js.org/docs/modules/tsParticles_Engine.Core_Engine.html)
* [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
Class Engine
============
Engine class for creating the singleton on window. It's a singleton class for initializing [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
instances, and for Plugins class responsible for every external feature
##### Index
### Constructors
[constructor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#constructor)
### Properties
[colorManagers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#colorManagers)
[easingFunctions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#easingFunctions)
[effectDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#effectDrawers)
[interactors](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#interactors)
[movers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#movers)
[pathGenerators](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#pathGenerators)
[plugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#plugins)
[presets](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#presets)
[shapeDrawers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#shapeDrawers)
[updaters](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#updaters)
### Accessors
[configs](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#configs)
[items](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#items)
[version](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#version)
### Methods
[addColorManager](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addColorManager)
[addConfig](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addConfig)
[addEasing](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEasing)
[addEffect](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEffect)
[addEventListener](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEventListener)
[addInteractor](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addInteractor)
[addMover](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addMover)
[addParticleUpdater](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addParticleUpdater)
[addPathGenerator](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPathGenerator)
[addPlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPlugin)
[addPreset](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPreset)
[addShape](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addShape)
[checkVersion](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#checkVersion)
[clearPlugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#clearPlugins)
[dispatchEvent](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dispatchEvent)
[dom](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dom)
[domItem](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#domItem)
[getAvailablePlugins](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getAvailablePlugins)
[getEasing](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getEasing)
[getEffectDrawer](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getEffectDrawer)
[getInteractors](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getInteractors)
[getMovers](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getMovers)
[getPathGenerator](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getPathGenerator)
[getPlugin](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getPlugin)
[getPreset](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getPreset)
[getShapeDrawer](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getShapeDrawer)
[getSupportedEffects](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getSupportedEffects)
[getSupportedShapes](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getSupportedShapes)
[getUpdaters](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getUpdaters)
[init](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#init)
[item](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#item)
[load](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#load)
[loadOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#loadOptions)
[loadParticlesOptions](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#loadParticlesOptions)
[refresh](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#refresh)
[removeEventListener](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#removeEventListener)
[setOnClickHandler](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#setOnClickHandler)
Constructors
------------
### constructor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#constructor)
* new Engine(): [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#constructor.new_Engine)
* Engine constructor, initializes plugins, loader and the containers array
#### Returns [Engine](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html)
Properties
----------
### `Readonly`colorManagers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#colorManagers)
colorManagers: Map
### `Readonly`easingFunctions[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#easingFunctions)
easingFunctions: Map<[EasingTypeAlt](https://particles.js.org/docs/types/tsParticles_Engine.Enums_Types_EasingType.EasingTypeAlt.html)
| [EasingType](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Types_EasingType.EasingType.html)
, [EasingFunction](https://particles.js.org/docs/types/tsParticles_Engine.Types_EasingFunction.EasingFunction.html)
\>
### `Readonly`effectDrawers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#effectDrawers)
effectDrawers: Map\>
The drawers (additional effects) array
### `Readonly`interactors[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#interactors)
interactors: Map<[Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
, [IInteractor](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IInteractor.IInteractor.html)
<[Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
\>\[\]\>
The interaction managers array
### `Readonly`movers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#movers)
movers: Map<[Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
, [IParticleMover](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IParticleMover.IParticleMover.html)
\[\]\>
### `Readonly`pathGenerators[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#pathGenerators)
pathGenerators: Map
The path generators array
### `Readonly`plugins[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#plugins)
plugins: [IPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IPlugin.IPlugin.html)
\[\]
The plugins array
### `Readonly`presets[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#presets)
presets: Map\>
The presets array
### `Readonly`shapeDrawers[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#shapeDrawers)
shapeDrawers: Map\>
The drawers (additional shapes) array
### `Readonly`updaters[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#updaters)
updaters: Map<[Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
, [IParticleUpdater](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IParticleUpdater.IParticleUpdater.html)
\[\]\>
The updaters array
Accessors
---------
### configs[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#configs)
* get configs(): Record\>
* #### Returns Record\>
### items[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#items)
* get items(): [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
\[\]
* #### Returns [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
\[\]
### version[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#version)
* get version(): string
* #### Returns string
Methods
-------
### addColorManager[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addColorManager)
* addColorManager(manager, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addColorManager.addColorManager-1)
* #### Parameters
* manager: [IColorManager](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IColorManager.IColorManager.html)
* refresh: boolean = true
#### Returns Promise
### addConfig[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addConfig)
* addConfig(config): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addConfig.addConfig-1)
* #### Parameters
* config: [RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>
#### Returns void
### addEasing[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEasing)
* addEasing(name, easing, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEasing.addEasing-1)
* #### Parameters
* name: [EasingTypeAlt](https://particles.js.org/docs/types/tsParticles_Engine.Enums_Types_EasingType.EasingTypeAlt.html)
| [EasingType](https://particles.js.org/docs/enums/tsParticles_Engine.Enums_Types_EasingType.EasingType.html)
* easing: [EasingFunction](https://particles.js.org/docs/types/tsParticles_Engine.Types_EasingFunction.EasingFunction.html)
* refresh: boolean = true
#### Returns Promise
### addEffect[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEffect)
* addEffect(effect, drawer, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEffect.addEffect-1)
* addEffect adds effect to tsParticles, it will be available to all future instances created
#### Parameters
* effect: [SingleOrMultiple](https://particles.js.org/docs/types/tsParticles_Engine.Types_SingleOrMultiple.SingleOrMultiple.html)
the effect name
* drawer: [IEffectDrawer](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IEffectDrawer.IEffectDrawer.html)
<[Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
\>
the effect drawer function or class instance that draws the effect in the canvas
* refresh: boolean = true
should refresh the dom after adding the effect
#### Returns Promise
### addEventListener[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEventListener)
* addEventListener(type, listener): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addEventListener.addEventListener-1)
* Adds a listener to the specified event
#### Parameters
* type: string
The event to listen to
* listener: [CustomEventListener](https://particles.js.org/docs/types/tsParticles_Engine.Types_CustomEventListener.CustomEventListener.html)
The listener of the specified event
#### Returns void
### addInteractor[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addInteractor)
* addInteractor(name, interactorInitializer, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addInteractor.addInteractor-1)
* Adds an interaction manager to the current collection
#### Parameters
* name: string
the interaction manager name
* interactorInitializer: InteractorInitializer
the interaction manager initializer
* refresh: boolean = true
if true the engine will refresh all the containers
#### Returns Promise
### addMover[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addMover)
* addMover(name, moverInitializer, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addMover.addMover-1)
* #### Parameters
* name: string
the mover name
* moverInitializer: MoverInitializer
the mover initializer
* refresh: boolean = true
if true the engine will refresh all the containers
#### Returns Promise
### addParticleUpdater[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addParticleUpdater)
* addParticleUpdater(name, updaterInitializer, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addParticleUpdater.addParticleUpdater-1)
* Adds a particle updater to the collection
#### Parameters
* name: string
the particle updater name used as a key
* updaterInitializer: UpdaterInitializer
the particle updater initializer
* refresh: boolean = true
if true the engine will refresh all the containers
#### Returns Promise
### addPathGenerator[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPathGenerator)
* addPathGenerator(name, generator, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPathGenerator.addPathGenerator-1)
* addPathGenerator adds a named path generator to tsParticles, this can be called by options
#### Parameters
* name: string
the path generator name
* generator: [IMovePathGenerator](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IMovePathGenerator.IMovePathGenerator.html)
the path generator object
* refresh: boolean = true
should refresh the dom after adding the path generator
#### Returns Promise
### addPlugin[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPlugin)
* addPlugin(plugin, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPlugin.addPlugin-1)
* addPlugin adds plugin to tsParticles, if an instance needs it, it will be loaded
#### Parameters
* plugin: [IPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IPlugin.IPlugin.html)
the plugin implementation of [IPlugin](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IPlugin.IPlugin.html)
* refresh: boolean = true
should refresh the dom after adding the plugin
#### Returns Promise
### addPreset[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPreset)
* addPreset(preset, options, override?, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addPreset.addPreset-1)
* addPreset adds preset to tsParticles, it will be available to all future instances created
#### Parameters
* preset: string
the preset name
* options: Readonly<[RecursivePartial](https://particles.js.org/docs/types/tsParticles_Engine.Types_RecursivePartial.RecursivePartial.html)
<[IOptions](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html)
\>\>
the options to add to the preset
* override: boolean = false
if true, the preset will override any existing with the same name
* refresh: boolean = true
should refresh the dom after adding the preset
#### Returns Promise
### addShape[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addShape)
* addShape(drawer, refresh?): Promise[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#addShape.addShape-1)
* addShape adds shape to tsParticles, it will be available to all future instances created
#### Parameters
* drawer: [IShapeDrawer](https://particles.js.org/docs/interfaces/tsParticles_Engine.Core_Interfaces_IShapeDrawer.IShapeDrawer.html)
<[Particle](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Particle.Particle.html)
\>
the shape drawer function or class instance that draws the shape in the canvas
* refresh: boolean = true
should refresh the dom after adding the shape
#### Returns Promise
### checkVersion[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#checkVersion)
* checkVersion(pluginVersion): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#checkVersion.checkVersion-1)
* #### Parameters
* pluginVersion: string
the plugin version to check against
#### Returns void
### clearPlugins[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#clearPlugins)
* clearPlugins(container): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#clearPlugins.clearPlugins-1)
* #### Parameters
* container: [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
#### Returns void
### dispatchEvent[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dispatchEvent)
* dispatchEvent(type, args): void[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dispatchEvent.dispatchEvent-1)
* Dispatches an event that will be listened from listeners
#### Parameters
* type: string
The event to dispatch
* args: [CustomEventArgs](https://particles.js.org/docs/interfaces/tsParticles_Engine.Types_CustomEventArgs.CustomEventArgs.html)
The event parameters
#### Returns void
### dom[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dom)
* dom(): [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
\[\][](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#dom.dom-1)
* All the [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
objects loaded
#### Returns [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
\[\]
All the [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
objects loaded
#### Deprecated[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#Deprecated)
the dom() function is deprecated, please use the items property instead
### domItem[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#domItem)
* domItem(index): undefined | [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#domItem.domItem-1)
* Retrieves a [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
from all the objects loaded
#### Parameters
* index: number
The object index
#### Returns undefined | [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
The [Container](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Container.Container.html)
object at specified index, if present or not destroyed, otherwise undefined
#### Deprecated[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#Deprecated-1)
the domItem() function is deprecated, please use the item function instead
### getAvailablePlugins[](https://particles.js.org/docs/classes/tsParticles_Engine.Core_Engine.Engine.html#getAvailablePlugins)
* getAvailablePlugins(container): Promise