Particle Morph Text
Words built from thousands of particles that swirl from one word into the next and scatter away from the cursor.
Move your cursor through the letters
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/particle-textOther Examples
Dense Particles
Props
| Prop | Type | Default | Description |
|---|---|---|---|
words* | string[] | - | Words to cycle through. Short words read best. |
interval | number | 3200 | Milliseconds each word stays before morphing. |
colors | string[] | Deep cyan → violet → pink in light mode, bright in dark mode | Gradient across the text, left to right. The default switches with the theme. |
density | number | 4 | Distance between particles in px; smaller is denser and heavier. |
particleSize | number | 2.5 | Particle size in px. |
repelRadius | number | 90 | How far the cursor pushes particles, in px. 0 turns it off. |
fontWeight | number | 800 | Weight of the font the words are sampled from. The font family is inherited. |
label | string | - | Accessible text. Defaults to the words joined with commas. |
className | string | - | Extra classes for the canvas wrapper (set its height here; default h-48). |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the canvas wrapper (set its height here; default h-48). |