Particle Reveal, animated React component
A headline made of thousands of dots that gather out of a scatter on springs, each with its own slight delay, like dust settling. The cursor pushes nearby dots aside and combs them into streaks, they flow back when it leaves, and a click blows the word apart again.
- Pro
- Motion Effects
- Hover
- Spring
Play with it
Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.
Sweep the cursor through the word. Click to blow it apart.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| text | string | "Reveal" | The word to draw. Short words read best. |
| color | string | "#3a3a3c" | Colour of the dots. |
| particleSize | number | 1 | Radius of each dot in px. |
| density | number | 3.2 | Sampling step in px. Lower is denser (2 to 8). |
| dispersion | number | 1 | How far the dots start from the letters, as a fraction of the stage (0 to 1.5). |
| hoverRadius | number | 70 | Radius around the cursor that pushes dots away, in px. |
| hoverForce | number | 1 | Strength of the push. |
| autoplay | boolean | false | A ghost cursor combs through the word and the word bursts and re-forms every few seconds, until a real pointer arrives. Pauses off screen and never runs under reduced motion. |
| className | string | — | Extra classes for the wrapper. |