Text drawn as thousands of particles sampled from its own font and layout on a Canvas 2D layer. Particles fly into the letters, scatter and swirl away from the cursor, take an accent color while they move and shimmer at rest; a slow ghost pointer keeps them alive on touch screens. Density, size, colors, push, reach, spring, swirl and shimmer are props. The real text stays in the page for screen readers and search, the particle count adapts to the device, it pauses offscreen and settles into still letters for reduced motion.
The import and the props worth knowing about, in one place.
import { Text21 } from "@/components/beste/component/text21";
<Text21
as="h1" // "h1" | "h2" | "h3" | "p" | "span"
text="Every letter, loose."
className="text-9xl font-semibold tracking-[-0.04em]"
/>
<Text21
text="Push it around."
color="currentColor" // follows the text color; any CSS color or token
accentColor="var(--primary)" // color while particles move
density={0.7} // finer sampling, 0 to 1
force={0.8} // harder scatter, 0 to 1
reach={220} // radius around the cursor, in pixels
idle={false} // no ghost pointer when nobody is pointing
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The text to set; every letter is sampled into particles |
as | "h1" | "h2" | "h3" | "p" | "span" | — | Element the text renders as |
color | string | — | Particle color. "currentColor" follows the text color; any CSS color or token works |
accentColor | string | — | Color particles take while they are moving |
density | number | — | How finely the letters are sampled, 0 (coarse) to 1 (dense) |
maxParticles | number | — | Upper bound on particles, whatever the size of the text |
size | number | — | Particle size relative to the sampling grid, 0 to 1 |
force | number | — | How hard the cursor scatters particles, 0 to 1 |
reach | number | — | Radius around the cursor that scatters particles, in pixels |
spring | number | — | How quickly particles pull back into their letters, 0 to 1 |
swirl | number | — | Sideways swirl around the cursor, 0 to 1 |
shimmer | number | — | Brightness flicker of particles at rest, 0 to 1 |
entrance | boolean | — | Particles fly in from a ring on mount |
interactive | boolean | — | Particles scatter from the cursor |
idle | boolean | — | A slow invisible pointer keeps the letters moving when nobody is pointing |
className | string | — |