Particle Word
A word sampled into thousands of ink particles that spring-assemble on mount, drift with organic noise, and scatter away from the cursor.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/particle-word.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/particle-word.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The word or short phrase to assemble from particles. |
| fontFamily | string | — | Font family for the sampled glyphs. Defaults to the --font-serif token. |
| fontStyle | "normal" | "italic" | "italic" | Font style used when sampling the word. |
| fontWeight | number | string | 400 | Font weight used when sampling the word. |
| color | string | — | Particle color. Defaults to a themed ink that flips with dark/light mode. |
| density | number | — | Sample step in px — lower is denser. Defaults to 2 below 700px width, 3 above. |
| repelRadius | number | 140 | Radius in px of the cursor repel field. |
| repelStrength | number | 2.4 | How hard particles scatter away from the cursor. |
| className | string | — | Additional CSS classes for the wrapper. |