Particles

Root section for all particle appearance and behavior settings.

Each property controls one aspect of a particle's life cycle.
Use the links below to navigate to the detailed page for each sub-option.

Sub-options

Property	Description	Docs
bounce	Bounce behavior when particles hit each other or the canvas edge	IParticlesBounce
collisions	Collision detection and response between particles	Collisions
color	Base particle color	IAnimatableColor
destroy	What happens when a particle reaches end of life	Destroy
groups	Define named groups with different settings applied to subsets of particles	—
life	Lifespan and delay for finite-lifetime particles	Life
links	Lines drawn between nearby particles	Links
move	Movement direction, speed, and path	Move
number	How many particles exist and density rules	Number
opacity	Transparency and animated fading	Opacity
paint	Grouped fill/stroke painting options with shared color defaults	Paint
orbit	Orbital rotation around a center point	IOrbit
palette	Imports a named palette and applies fill/stroke + blend defaults	Palette
reduceDuplicates	When true, picks particle configs sequentially instead of randomly	—
repulse	Mutual repulsion between particles	IParticlesRepulse
roll	3D-like rolling effect	Roll
rotate	Rotation angle and speed	Rotate
shadow	Drop shadow behind particles	Shadow
shape	Particle visual shape (circle, square, image, emoji, …)	Shape
size	Particle radius and animated grow/shrink	Size
stroke	Outline stroke color and width	Stroke
tilt	Tilt angle and animation	Tilt
twinkle	Random opacity flicker effect	Twinkle
wobble	Lateral wobble movement	Wobble
zIndex	Depth sorting of particles	ZIndex

Minimal practical example

{
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "links": {
      "enable": true,
      "color": "#ffffff",
      "distance": 150,
      "opacity": 0.4
    },
    "move": {
      "enable": true,
      "speed": 1.5
    },
    "number": {
      "value": 60,
      "density": {
        "enable": true,
        "area": 800
      }
    },
    "opacity": {
      "value": 0.5
    },
    "shape": {
      "type": "circle"
    },
    "size": {
      "value": { "min": 1, "max": 3 }
    }
  }
}
Copy

groups

Particle groups let you define subsets of particles with different configs applied to a fraction of the total count.

{
  "particles": {
    "number": { "value": 100 },
    "groups": {
      "small": {
        "number": { "value": 60 },
        "size": { "value": 2 },
        "color": { "value": "#aaaaff" }
      },
      "large": {
        "number": { "value": 40 },
        "size": { "value": 8 },
        "color": { "value": "#ff4444" }
      }
    }
  }
}
Copy

palette

particles.palette loads a registered palette by id and automatically applies particle colors.

When a palette is found, tsParticles imports these defaults:

• paint.fill: imported from palette colors.*.fill
• paint.stroke: imported from palette colors.*.stroke
• paint: becomes an array when the palette declares multiple color variants
• blend: enabled with the palette blend mode

{
  "particles": {
    "palette": "ocean",
    "shape": {
      "type": "circle"
    }
  }
}
Copy

If you set paint.fill, paint.stroke, or blend explicitly after palette, those values override imported defaults.

Default paint behavior:

• paint.color.value defaults to "#fff"
• paint.fill.enable defaults to true

reduceDuplicates

When true, particles cycle through configs sequentially instead of picking randomly — useful for guaranteed even distribution.

Common pitfalls

• Enabling links without @tsparticles/slim or higher
• Setting move.enable: false and expecting particles to appear animated
• Forgetting number.density.enable: true on responsive layouts — particle count stays fixed regardless of screen size
• Using a shape type without loading the corresponding shape package

Related docs

• Options root: Options
• Number: Number
• Move: Move
• Links: Links
• Palette: Palette
• Shape: Shape