• Options



[name: string]: unknown



_container: Container
_engine: Engine
_findDefaultTheme: ((mode) => undefined | Theme) = ...

Type declaration

_importPreset: ((preset) => void) = ...

Type declaration

    • (preset): void
    • Parameters

      • preset: string

      Returns void

autoPlay: boolean

Sets if the animations should start automatically or manually

background: Background

Background options, these background options will be used to the canvas element, they are all CSS properties

backgroundMask: BackgroundMask

Background Mask options, what's behind the canvas will become hidden and particles will uncover it

defaultThemes: DefaultThemes
delay: RangeValue

The initial delay before starting the animation

detectRetina: boolean

Enables the retina detection, if disabled the ratio used by canvas will be always 1 and not the device setting.

duration: RangeValue

The Particles effect duration in seconds, then the container will be destroyed

fpsLimit: number

The FPS (Frame Per Second) limit applied to all particles animations.

fullScreen: FullScreen

Sets the animated background mode for particles canvas bringing it to the back

interactivity: Interactivity

The particles interaction options

manualParticles: ManualParticle[]

Particles inserted at load time with a specific position

name?: string
particles: ParticlesOptions

The particles options

pauseOnBlur: boolean

Enables or disabled the animation on window blur

pauseOnOutsideViewport: boolean

Enable or disabled the animation if the element is outside the viewport

preset?: SingleOrMultiple<string>

This property will be used to add specified presets to the options

responsive: Responsive[]

This sets custom options based on canvas size

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 fpsLimit field will be used as a reference for the animation speed Some examples: - with a fpsLimit of 60 the animation will be twice faster on 120 fps devices - with a 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: RecursivePartial<CSSStyleDeclaration>
themes: Theme[]

User-defined themes that can be retrieved by the particles Container

zLayers: number

The maximum layers used in the z-axis



  • Parameters

    • width: number
    • pxRatio: number
    • defaultOptions: IOptions

    Returns undefined | number