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


  • Container


  • 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


_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
_lifeTime: number

The container lifetime

_nextFrame: ((timestamp) => Promise<void>) = ...

Type declaration

    • (timestamp): Promise<void>
    • Parameters

      • timestamp: number

      Returns Promise<void>

_options: Options
_paused: 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

drawers: Map<string, IShapeDrawer>

All the shape drawers used by the container

fpsLimit: number

The container fps limit, coming from options

id: string

the id to identify this instance

lastFrameTime?: number

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

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

responsiveMaxWidth?: number
retina: Retina
smooth: boolean
started: boolean

Check if the particles container is started

zLayers: number



  • 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

    • Optional 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

    Returns void

  • Parameters

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

    Returns Promise<undefined | Blob>

  • Gets the animation status

    Returns boolean

    true is playing, false is paused

  • 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

  • Customise path generation


    Returns void


    Use the new setPath

  • Customise path generation


    Returns void


    Use the new addPath

  • 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