Browse components
Particle Text
Thousands of tiny particles swarm together to spell a word, burst away from the cursor and spring back into place.
Glint
Installation
npx shadcn@latest add @glint-ui/particle-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/particle-text.json
Usage
import { ParticleText } from "@/components/ui/particle-text";
<div className="relative h-80">
<ParticleText text="Glint" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Glint" | Text the particles form. |
| particleSize | number | 2.2 | Particle size, in px. |
| gap | number | 4 | Sampling step in px; smaller means more particles. |
| color | string | "#bef264" | First gradient color. |
| secondaryColor | string | "#22d3ee" | Second gradient color. |
| sparkColor | string | "#ffffff" | Color of particles while they fly. |
| repelRadius | number | 90 | Pointer push radius, in px. |
| repelStrength | number | 5 | How hard the pointer pushes. |
| returnSpeed | number | 0.06 | Spring pull back home. |
| className | string | — | Extra classes for the root element. |