The Options interface, defines all the options that can be used by tsParticles


property option type example notes
autoPlay boolean true / false
background object See Background options here {@link IBackground}
backgroundMask object See Background Mask options here {@link IBackgroundMask}
detectRetina boolean true / false Replaces the old retina_detect property
duration number / range 60 / { min: 30, max: 90 } The particles effect duration in seconds
fpsLimit number 60 Defaults to 60, replaces the old fps_limit property
fullScreen object / boolean {@link IFullScreen} or true / false See Full Screen options here {@link IFullScreen}
interactivity object See Interactivity options here {@link IInteractivity}
manualParticles array An array of Manual Particles object. See Manual Particles documentation here {@link IManualParticle }
motion object See Motion options here {@link IMotion here}
particles object See Particles options here {@link IParticlesOptions}
pauseOnBlur boolean true / false Pauses the animations when the page isn't on foreground
pauseOnOutsideViewport boolean true / false Pauses the animations when the element is out of the viewport
preset string / array "basic"
[ "links", "confetti" ]
You can use this property to load one or more presets for focusing on important properties and not all config. You can find presets on npm here
responsive array See Responsive options here {@link IResponsive}
themes array It's an array of Theme object, you can see the structure here {@link ITheme}


These options are not part of the slim bundle

property option type example notes
absorbers object / array See Absorbers options here {@link IAbsorber}
emitters object / array See Emitter options here {@link IEmitter}
polygonMask object See Particles options here {@link IPolygonMask}
interface IOptions {
    autoPlay: boolean;
    background: IBackground;
    backgroundMask: IBackgroundMask;
    clear: boolean;
    delay: RangeValue;
    detectRetina: boolean;
    duration: RangeValue;
    fpsLimit: number;
    fullScreen: boolean | RecursivePartial<IFullScreen>;
    interactivity: IInteractivity;
    key?: string;
    manualParticles: IManualParticle[];
    name?: string;
    particles: IParticlesOptions;
    pauseOnBlur: boolean;
    pauseOnOutsideViewport: boolean;
    preset?: SingleOrMultiple<string>;
    responsive: IResponsive[];
    smooth: boolean;
    style: RecursivePartial<CSSStyleDeclaration>;
    themes: ITheme[];
    zLayers: number;
    [name: string]: unknown;

Implemented by


[name: string]: unknown

More custom options for external plugins or customizations


autoPlay: boolean

Sets if the animations should start automatically or manually

background: IBackground

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

backgroundMask: IBackgroundMask

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

clear: boolean

Clears the canvas on every frame if enabled

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: boolean | RecursivePartial<IFullScreen>

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

interactivity: IInteractivity

The particles interaction options

key?: string

The key used to store the options in the Engine.configs collection

manualParticles: IManualParticle[]

Particles inserted at load time with a specific position

name?: string

The name of the config, if it needs to be shown to the user, used also if key is missing

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: IResponsive[]

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

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

zLayers: number

The maximum layers used in the z-axis