The object loaded into an HTML element, it'll contain options loaded and all data to let everything working

Particles Container

The {@link Container} class is the manager of the entire tsParticles instance. If you get the result of {@link Engine.load | tsParticles.load} the result it's this class, in the {@link Engine.loadJSON | tsParticles.loadJSON} is the then parameter.

Otherwise you can retrieve any loaded instance using {@link Engine.dom | tsParticles.dom()} or {@link Engine.domItem | tsParticles.domItem(index)}.


{@link}: the {@link Container} id, normally is the related DOM element {@link} attribute. It's set by {@link Engine.load | tsParticles.load()} and {@link Engine.loadJSON | tsParticles.loadJSON()}.

{@link Container.options}: Where to find the current options loaded. Changing this options while playing can result in an unexpected behavior. A {@link refresh | refresh()} after the change is the best thing to do.
{@link Container.sourceOptions}: The options used when the {@link Container} was created, these options will be used only in the constructor.

{@link Container.particles}: The particles manager, you can add/remove particles from here.


{@link | play()}: Used to resume the animations, can be stopped using {@link pause | pause()}.
{@link Container.pause | pause()}: Used to pause the animations, can be restarted using {@link play | play()}.

{@link Container.destroy | destroy()}: Prepare the instance to destruction, you won't retrieve this instance anymore. Only if you have a variable set with it.

{@link Container.exportImage | exportImage(callback, type?, quality?)}: Exports an image of the canvas (without the background property if set), type and quality are optional and are the image output type and quality.
{@link Container.exportConfiguration | exportConfiguration()}: Exports the current configuration in JSON, returns a string

{@link Container.start | start()}: Starts the container, it's different from {@link play | play()}, this will reload everything.
{@link Container.stop | stop()}: Stops the container, it's different from {@link pause | pause()}, this will clean up what need to be reloaded.
{@link Container.refresh | refresh()}: Restarts the container, just a {@link stop | stop()}/{@link start | start()} shortcut.

{@link Container.loadTheme | loadTheme(name)}: Sets the specified theme reloading options, if name is undefined the default theme will be used (if set)


  • This is the core class, create an instance to have a new working particles manager


    • engine: Engine

      the engine used by container

    • id: string

      the id to identify this instance

    • Optional sourceOptions: RecursivePartial<IOptions>

      the options to load

    Returns Container


_clickHandlers: Map<string, ContainerClickHandler>
_currentTheme?: string
_delay: number
_delayTimeout?: number | Timeout
_drawAnimationFrame?: number
_duration: number

The container duration

_engine: Engine
_eventListeners: EventListeners
_firstStart: boolean
_initialSourceOptions: undefined | RecursivePartial<IOptions>
_intersectionManager: ((entries) => void) = ...

Type declaration

    • (entries): void
    • Parameters

      • entries: IntersectionObserverEntry[]

      Returns void

_intersectionObserver: undefined | IntersectionObserver
_lastFrameTime?: number

Last frame time, used for delta values, for keeping animation correct in lower frame rates

_lifeTime: number

The container lifetime

_options: Options
_paused: boolean
_responsiveMaxWidth?: number
_smooth: boolean
_sourceOptions: undefined | RecursivePartial<IOptions>
actualOptions: Options

The options loaded by the container, it's a full Options object

canvas: Canvas

Canvas object, in charge of the canvas element and drawing functions

destroyed: boolean

Check if the particles' container is destroyed, if so it's not recommended using it

effectDrawers: Map<string, IEffectDrawer<Particle>>

All the effect drawers used by the container

fpsLimit: number

The container fps limit, coming from options

id: symbol
pageHidden: boolean

The container check if it's hidden on the web page

particles: Particles

The particles manager

pathGenerators: Map<string, IMovePathGenerator>
plugins: Map<string, IContainerPlugin>

All the plugins used by the container

retina: Retina
shapeDrawers: Map<string, IShapeDrawer<Particle>>

All the shape drawers used by the container

started: boolean

Check if the particles container is started

zLayers: number


  • get animationStatus(): boolean
  • Gets the animation status

    Returns boolean

    true is playing, false is paused


  • Adds a click handler to the container


    • callback: ((evt, particles?) => void)

      the callback to be called when the click event occurs

        • (evt, particles?): void
        • Parameters

          • evt: Event
          • Optional particles: Particle[]

          Returns void

    Returns void

  • Add a new path generator to the container


    • key: string

      the key to identify the path generator

    • generator: IMovePathGenerator

      the path generator

    • override: boolean = false

      if true, override the existing path generator

    Returns boolean

    true if the path generator was added, false otherwise

  • Destroys the current container, invalidating it


    • remove: boolean = true

      if true, removes the container from the engine

    Returns void

  • Parameters

    • type: string
    • options: Record<string, unknown> = {}

    Returns Promise<undefined | Blob>

  • Handles click event in the container


    • mode: string

      click mode to handle

    Returns void

  • Loads the given theme, overriding the options


    • Optional name: string

      the theme name, if undefined resets the default options or the default theme

    Returns Promise<void>

  • Starts animations and resume from pause


    • Optional force: boolean

    Returns void

  • Starts the container, initializes what are needed to create animations and event handling

    Returns Promise<void>

  • Stops the container, opposite to start. Clears some resources and stops events.

    Returns void

  • Updates the container options

    Returns boolean

    true if the options were updated, false otherwise