Particle

Updated: May 8, 2025

The Particle component provides customizable decorative particles with gradients, dots, grids, lines, and masking effects.

Particle

<Particle
  fill
  interactive
  speed={3}
  intensity={100}
  height={24}
/>

Density

The density prop controls the number of particles to display.

Density

<Particle
  fill
  height={24}
  density={250}
/>

Color

The color prop controls the color of the particles.

Color

<Particle
  fill
  height={24}
  color="brand-background-strong"
/>

Size

The size prop controls the size of the particles.

Size

<Particle
  fill
  height={24}
  size="8"
/>

Speed

The speed prop controls the speed of the particles.

Speed

<Particle
  fill
  height={24}
  speed={5}
/>

Interactive

The interactive prop controls whether the particles are interactive. Use the intensity prop to control the radius of the interaction area.

Interactive

<Particle
  fill
  height={24}
  interactive
/>

Mode

The mode prop controls how particles interact with the cursor. Use repel to push particles away or attract to pull them towards the cursor.

Mode

<Particle
  fill
  interactive
  mode="attract"
  height={24}
  intensity={30}
/>

Opacity

The opacity prop controls the opacity of the particles.

Opacity

<Particle
  fill
  height={24}
  opacity={50}
/>

Performance

Particle automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, particles are placed statically without animation. The animation also pauses when the element is outside the viewport. You can override this with the reducedMotion prop. See useReducedMotion for details.

API reference

Prop	Type	Default
density How many particles.	number	100
color Particle colour. Takes a token or any CSS colour.	ColorValue	brand-on-background-weak
size Particle size, on the spacing scale.	SpacingToken	2
speed Drift multiplier. Not a duration.	number	0.3
interactive React to the pointer.	boolean	false
mode Whether the pointer pushes particles away or pulls them in.	repelattract	repel
intensity How strongly the pointer acts, when interactive.	number	20
opacity Layer opacity, in steps of 10.	DisplayProps["opacity"]	100
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	auto
className	string	—
style	React.CSSProperties	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

ComponentsOption

ComponentsProgressBar

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club