Particle Text

Loading-ring canvas particles that slowly resolve into solid letterforms.

textcanvasparticlesheadlineanimationtypographymagnetic

Overview

Particle Text is a React and Tailwind CSS text effect that draws a headline as a cloud of dots on canvas, in Next.js or any React app, with no dependencies. Particles spin on a loading ring, then resolve into the letterforms, with optional drift and a magnetic cursor pull. The loop stops once dots settle or leave the screen, and reduced motion paints the finished word. The real string sits in a screen reader span, and as can make it a heading. Glyphs are sampled without waiting for web fonts, so bump replayKey after a custom font loads.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add canvas-text

Usage

Import CanvasText from @/components/wensity/canvas-text and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { CanvasText } from "@/components/wensity/canvas-text";
 2
 3export default function Example() {
 4  return (
 5    <CanvasText
 6      text="Wensity"
 7      fontSize={72}
 8      density={2}
 9      scatter={64}
10      loadDuration={1}
11      morphDuration={1.4}
12      magnetic={0.45}
13      className="h-[200px]"
14    />
15  );
16}

Props

Prop	Type	Default	Description
`text`	string	-	The string to rasterize into particles.
`color`	string	currentColor	Particle fill. Omit to inherit the host text color.
`fontSize`	number	64	Font size in CSS pixels used when sampling glyphs.
`particleSize`	number	1.6	Particle diameter in CSS pixels.
`density`	number	2	Sampling stride (1 = densest). Higher = fewer particles.
`drift`	number	0	Optional idle wobble after settle, in CSS pixels. 0 keeps a locked symmetrical lattice.
`scatter`	number	48	Loading-ring radius in CSS pixels.
`loadDuration`	number	1	Seconds spent spinning on the loading ring before morph starts.
`morphDuration`	number	1.4	Seconds for the ring → text morph.
`magnetic`	number	0.35	Pointer warp strength. 0 disables magnetism.
`magneticRadius`	number	100	Radius of pointer influence in CSS pixels.
`paused`	boolean	-	Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden.
`replayKey`	string \| number	-	Bump to re-run the scatter → assemble intro.
`as`	"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"div"	Element to render. A heading tag keeps heading semantics; the default is announced as an image.

Featured in React hero section components.