Particles

Particle field that reacts to the cursor. Pro · Effects › Backgrounds

A field of softly drifting particles behind content, in depth: near ones are larger, brighter, quicker and shift further as the pointer moves, far ones are small and calm. They make way for the pointer and spring back, a click or tap sends a ring of push through them, and they can join into a faint constellation. Drawn on a canvas at a capped pixel ratio; the loop runs only while the field is on screen and the tab is visible. The field fades in on mount and particles fade at the edges instead of popping as they wrap. Touch gets the drift and the tap; reduced motion draws one still frame. Colour and glow come from the theme.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add particles

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Particles } from 'valyro-ui-pro';

Props

Prop	Type	Default
`quantity`	`number`	`80`	Number of particles.
`speed`	`number`	`1`	Drift speed multiplier; 0 holds them in place.
`interaction`	`'repel' \| 'attract' \| 'none'`	`'repel'`	How particles react to the pointer: pushed aside, drawn in, or not at all.
`color`	`string`		Particle colour. Default: the theme's `--ui-particles-color`.
`colors`	`string[]`		Several CSS colours the particles are picked from (overrides `color`).
`glow`	`number`		Soft halo around each particle, 0–1 (default: the theme's `--ui-particles-glow`) — a starry, gravity-field look.
`influence`	`number`	`POINTER_RADIUS`	Radius of the pointer's pull or push, px (default 120).
`strength`	`number`	`1`	Strength of the pull or push, as a multiple of the default (default 1).
`parallax`	`number`	`14`	How much the field shifts in depth as the pointer moves, px at the nearest particles (default 14; 0 keeps it flat).
`links`	`number`	`0`	Joins particles closer than this many px with faint lines, like a constellation (default 0 — off).
`burst`	`boolean`	`true`	A click or tap sends a ring of push through the particles around it (default true).

Related components

Aurora Background — Slow aurora behind your content
Gradient Background — Slowly shifting gradient
Bubble Background — Soft colored bubbles, one follows the cursor
Stars Background — Starry sky with cursor parallax
Hexagon Background — Hexagon grid with a glowing trail
Hole Background — Portal tunnel with rings and particles
Fireworks Background — Fireworks for wins and achievements, launch on click
Spotlight — Stage beams and a cursor spotlight
Meteors — Falling meteors
Background Pattern — Fading dot, grid and line backgrounds
Glass Lens — Glass lens with real refraction
Morphing Capsule — Capsule that flows between states

Previous: Background Pattern · Next: Animated Border · All Effects