ComponentsPixel
Particle text
Particles gather into letters and scatter on touch.
Installation
$ npx shadcn@latest add @textlab/particle-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ParticleText } from "@/components/textlab/particle-text/particle-text";
<ParticleText as="h1" text="Stardust" variant="stars" />Variants
dustsandstarsProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "dust" | "sand" | "stars" | "dust" | Fine quick dust, heavy warm sand that sags under the pointer, or twinkling stars. |
| gap | number | 3 | Sampling gap in px; smaller means more particles. |
| radius | number | 1.2 | Pointer push radius in em. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Launch pages and immersive heroes.
- One large word per screen.
Skip it
- Several instances; each one simulates thousands of particles.
- Low-power contexts where battery matters.
Accessibility and motion
Accessibility
- Decorative canvas; the text is read from a hidden copy.
- Particles settle into readable letters within a second or two.
Motion
- Particles gather from a wide cloud when the word scrolls in.
- The pointer pushes them away; springs pull them home.
Reduced motion. Plain text instead of the canvas.
Performance
- Capped at 9,000 particles; the loop sleeps once they settle (except stars, which twinkle).
- Typed arrays, one draw call per frame for dust.