Thousands of particles fly in from a scatter and settle into a word or an image, in any colors.
pnpm dlx shadcn@latest add @latheui/particle-revealPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Particle Reveal is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native canvas attributes. Pass text or src.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text to form. Text wider than the canvas is scaled down to fit. |
| src | string | — | Image to form, contained and centred. It must be same-origin or served with CORS headers. |
| label | string | text | Accessible description. Required in practice for images. |
| height | number | 200 | Height in pixels. The width follows the container. |
| color | "source" | "grayscale" | string | string[] | "source" | Source pixel color, its lightness only, one color, or a left-to-right gradient. |
| gap | number | 4 | Pixels between particles. Smaller means more particles. |
| size | number | 84% of gap, 94% for circles | Particle size in pixels. |
| shape | "square" | "circle" | "square" | Shape of a particle. |
| edges | "hard" | "soft" | "hard" | Soft starts particles closer and fades them in near the border, so the canvas's straight edges never show. |
| duration | number | 1800 | Milliseconds the shape takes to form. Lower is faster. |
| scatter | number | 1 | How far away particles start, as a multiple of the canvas size. |
| settle | "particles" | "real" | "particles" | What the shape ends as. Real hands over from the landed particles to the sharp text or image, tinted the same way. |
| settleDuration | number | 900 | Milliseconds the hand-over to the real text or image takes. |
| replayKey | React.Key | — | Change it to play again. |
| onStart | () => void | — | Called when the particles start to fly in, on first render and on every replay. |
| onComplete | () => void | — | Called once the shape has fully formed, after the hand-over when settle is real. With reduced motion it follows onStart at once. |
<ParticleReveal text="Solid" color="var(--chart-1)" />
<ParticleReveal text="Gradient" color={["#3b82f6", "#a855f7", "#f43f5e"]} />
<ParticleReveal src="/portrait.jpg" label="Portrait" color="grayscale" />
<ParticleReveal src="/portrait.jpg" label="Portrait" color="source" /><ParticleReveal text="Dense" gap={2} size={1.5} duration={900} shape="circle" scatter={2} />
<ParticleReveal text="Drift" edges="soft" />
<ParticleReveal text="Arrive" settle="real" settleDuration={1200} />