Docs·Particle Typography

Particle Typography

Renders dynamic typography constructed entirely from particles that elegantly disperse and reassemble upon cursor interaction using spring physics.

Installation

pnpm dlx shadcn@latest add @componentry/cursor-driven-particle-typography

Usage

API Reference

PropertyTypeDefault
text

The text content to render with particles.

string—
fontSize

Base font size in pixels. Scales down automatically for smaller containers.

number120
fontFamily

Font family for the text.

string"Inter, sans-serif"
particleSize

Radius of each particle in pixels.

number1.5
particleDensity

Spacing between original pixel sampling. Lower number = more particles (higher density). Warning: very low numbers may impact performance.

number6
dispersionStrength

How strongly the cursor pushes particles away on hover.

number15
returnSpeed

Strength of the spring physics pulling particles back to their origin.

number0.08
color

Custom color for the particles. If omitted, it inherits parent text color.

string—
className

Additional CSS classes for custom styling of the wrapper div.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
import { CursorDrivenParticleTypography } from "@/components/ui/cursor-driven-particle-typography"
export default function ParticleTypographyDefault() {
  return (
    <div className="w-full min-h-[400px] relative">
      <CursorDrivenParticleTypography text="Design" />
    </div>
  )
}