Cursor & pointer
Particle trail
Iridescent sparks shed by the pointer with velocity, drag and drift — and a burst on click.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ParticleTrail } from '@vizzele/react';
<ParticleTrail density={6} shape="spark" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
density | number | 6 | Particles per 100px travelled. |
max | number | 220 | Max particles alive (halved on low-end devices). |
size | [number, number] | [2, 6] | Size range in px. |
gravity | number | -40 | Vertical drift in px/s² (negative floats up). |
life | number | 1.1 | Lifetime in seconds. |
shape | 'spark' | 'square' | 'ring' | 'spark' | Particle shape. |
colors | string[] | iridescent palette | Colors to pick from. |
burstOnClick | boolean | true | React only: burst on press. |
Accessibility
- One overlay canvas, `aria-hidden`, never blocks clicks; it sleeps when no particle is alive.
- Off with reduced motion. On touch it only emits while your finger moves.