# Particle Text

> A headline drawn in thousands of particles that gather into place, then part around the cursor and spring back.

Category: Text · MotionKit Plus · Updated 2026-10-21 · Live demo: https://motionkitui.com/components/particle-text

## When to use it

One big headline on a launch page, an AI or data product hero, or a portfolio intro: a word or two that people want to wave their cursor through.

## How it works

The text is drawn once onto a hidden canvas in the element's own font, and every few pixels where the ink is solid becomes a particle with a home position. Each frame, a spring pulls every particle towards home while the pointer pushes nearby ones away, so the text parts and heals. The particles fly in from random spots the first time it scrolls into view. The loop sleeps once everything settles, so a finished headline costs nothing, and the real text stays in the page, transparent, for screen readers and search engines.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/particle-text` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` |  | The line of text. It stays on one line. |
| `color` | `string` | `"#5FAEB4"` | Particle colour as a hex value. |
| `gap` | `number` | `3` | Pixels between particles. Lower is denser and sharper. |
| `repel` | `number` | `70` | Radius around the pointer that particles move out of. 0 turns it off. |
| `spring` | `number` | `0.08` | How quickly particles return home, 0 to 1. |
| `intro` | `"view" \| "none"` | `"view"` | Assemble when scrolled into view, or show it formed. |
| `as` | `ElementType` | `"p"` | Element to render, e.g. "h1". |

## Accessibility

- **Keyboard: Not applicable.** Decorative motion on a heading; nothing to focus.
- **Screen readers: Pass.** The real text stays in the page, transparent, so it is read, selected and indexed normally. The canvas is hidden from assistive tech.
- **Reduced motion: Pass.** With reduced motion on, the text appears already formed and the particles never move.
- **Colour contrast: Partial.** Particles are drawn at 70% of the grid spacing, so thin type reads lighter than solid text. Use it for large display headings.