A headline drawn in thousands of particles that gather into place, then part around the cursor and spring back.
Motion
Customize
Usage
import { ParticleText } from "@/components/motionkit/particle-text";
<ParticleText
as="h1"
text="Motion"
className="text-7xl font-bold"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Gather and heal
Scrolls into view, or the pointer moves away
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.
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.
| 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". |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/particle-text. It saves the file to components/motionkit and installs its dependencies.
Particle Text is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the text appears already formed and the particles never move.
No, it is made for a single line of display text: the canvas is sampled from one line. For two lines, use two Particle Text elements.
Morphing Text
Rotates through a list of words, letters rising in and drifting out.
Kinetic Headline
Headlines that arrive word by word or letter by letter: slide, blur, hinge or rise from behind a mask, from any direction.
Liquid Gradient Text
Pools of colour swirl and flow inside the letters, for headings that feel alive without moving an inch.
Motion
Customize
Usage
import { ParticleText } from "@/components/motionkit/particle-text";
<ParticleText
as="h1"
text="Motion"
className="text-7xl font-bold"
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Gather and heal
Scrolls into view, or the pointer moves away
The live preview is free to explore. Plus unlocks the source for Particle Text and every other premium component.