Options Reference

tsParticles options are deep, so this page is a practical map before you dive into every sub-option.

Choose your configuration path

• Fast visual result: start from a preset and override key fields.
• Full control: define particles, interactivity, and background manually.
• Config-first workflow: start from @tsparticles/configs and iterate safely.

Quick docs (local)

• Background & Canvas
• Background Mask
• Full Screen
• Motion
• Manual Particles
• Themes
• Particles
• Particles Number
• Particles Move
• Particles Links
• Particles Palette
• Particles Shape
• Particles Collisions
• Particles Life
• Particles Orbit
• Particles Roll
• Particles Rotate
• Interactivity
• Interactivity Click
• Interactivity Hover
• Interactivity Div
• Interactivity Events
• Interactivity Modes
• Plugin: Absorbers
• Plugin: Background Mask
• Plugin: Blend
• Plugin: Canvas Mask
• Plugin: Colors
• Plugin: Easings
• Plugin: Effects
• Plugin: Emitter Shapes
• Plugin: Emitters
• Plugin: Exports
• Plugin: Infection
• Plugin: Interactions
• Plugin: Motion
• Plugin: Path Generators
• Plugin: Poisson
• Plugin: Polygon Mask
• Plugin: Responsive
• Plugin: Shapes
• Plugin: Sounds
• Plugin: Themes
• Plugin: Trail
• Plugin: Updaters
• Plugin: Zoom
• Performance Guide

Particle deep-dive pages

• Particles Bounce
• Particles Color
• Particles Destroy
• Particles Group
• Particles Opacity
• Particles Palette
• Particles Repulse
• Particles Shadow
• Particles Size
• Particles Stroke
• Particles Tilt
• Particles Twinkle
• Particles Wobble
• Particles ZIndex

Where the source of truth lives

• Main options docs: tsparticles/markdown/Options.md
• Detailed option pages: tsparticles/markdown/Options/
• Type interfaces: tsparticles/engine/src/Options/Interfaces

Most-used root options

• background
• fullScreen
• interactivity
• particles
• detectRetina
• preset
• responsive

Most-used sections

• background: canvas background and masking basics.
• particles.number: quantity and density.
• particles.move: movement speed, direction, and out modes.
• particles.shape: circle, polygon, image, emoji, custom.
• particles.palette: quickly swap coordinated color sets.
• interactivity: hover/click modes and external effects.
• detectRetina: quality/perf tradeoff on high-DPI screens.

Particles map (nested view)

Use this quick tree as a navigation aid before opening single pages:

particles
|- number
|- color
|- shape
|- size
|- opacity
|- move
|- links
|- collisions
|- life
|- destroy
|- group
|- orbit
|- repulse
|- roll
|- rotate
|- shadow
|- stroke
|- tilt
|- twinkle
|- wobble
|- zIndex
`- palette

Open root docs first, then deep-dive sections:

• Root: Particles
• Deep dives: Particles Number, Particles Move, Particles Links

Safe options workflow

1. Start with a working config from demos or presets.
2. Change one section at a time.
3. Validate with TypeScript (IOptions) in app code.
4. Keep production options in dedicated JSON files.

Minimal typed example

import type { ISourceOptions } from "@tsparticles/engine";

export const particlesOptions: ISourceOptions = {
  fpsLimit: 60,
  particles: {
    number: { value: 70 },
    move: { enable: true, speed: 1.5 },
  },
};

Performance guardrails

• Prefer @tsparticles/slim unless you need advanced plugins.
• Keep particle counts proportional to container area.
• Profile with real devices before adding heavy interactions.

Related references

• Config package docs: https://github.com/tsparticles/tsparticles/blob/main/utils/configs/README.md
• Presets folder: https://github.com/tsparticles/tsparticles/tree/main/presets
• Palettes folder: https://github.com/tsparticles/tsparticles/tree/main/palettes

For full details on every sub-option, also use the source pages in tsparticles/markdown/Options linked above.