DocsParticle 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

PropTypeDefault
textstring

The text content to render with particles.

—
fontSizenumber

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

120
fontFamilystring

Font family for the text.

"Inter, sans-serif"
particleSizenumber

Radius of each particle in pixels.

1.5
particleDensitynumber

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

6
dispersionStrengthnumber

How strongly the cursor pushes particles away on hover.

15
returnSpeednumber

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

0.08
colorstring

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

—
classNamestring

Additional CSS classes for custom styling of the wrapper div.

—

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
PreviousLetter CascadeNextText Morph
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>
  )
}