The source — a headline, a logo, or an image — is sampled into thousands of particles that fly in from scatter to form the shape, hold with a subtle shimmer, then disperse and reform. A strong second-read moment for a hero.
pnpm dlx shadcn@latest add "https://godui.design/r/particle-dissolve.json"
The source is drawn to an offscreen canvas and sampled on a grid; every opaque
pixel becomes a particle whose colour is taken from the source (so images keep
their colours). A single requestAnimationFrame loop eases a global
form/scatter progress, with a per-particle delay for the stagger.
import { ParticleDissolve } from "@/components/godui/particle-dissolve";
<ParticleDissolve text="Launch" className="text-primary" />
The particle colour follows the canvas's CSS color, so a Tailwind text utility
(text-primary) just works — or pass an explicit color.
<ParticleDissolve src="/logo.png" width={480} height={480} />
Images must be same-origin or CORS-enabled to be sampled.
mode sets the resting behaviour (assemble, disperse, or loop); trigger
decides when it starts (mount, in-view, or hover).
<ParticleDissolve text="Hover me" mode="assemble" trigger="hover" />
The canvas exposes the text as its aria-label (role="img"). When
prefers-reduced-motion is set, the shape is drawn once, fully formed, with no
animation.
| Prop | Type | Default | Description |
|---|
text | string | — | Text to render as particles (ignored when src set). |
src | string | — | Image URL to sample into particles. |
mode | "assemble" | "disperse" | "loop" | "assemble" | Resting behaviour once triggered. |
trigger | "mount" | "in-view" | "hover" | "in-view" | When the animation starts. |
density | number | 4 | Pixel sampling step — smaller is denser. |
particleSize | number | 2 | Particle dot size in px. |
color | string | text color | Fill colour for text particles. |
width / height | number | 640 / 240 | Canvas size in CSS px. |
ParticleDissolve also forwards every standard <canvas> attribute.