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

PropTypeDefault
textThe text content to render with particles.
string—
fontSizeBase font size in pixels. Scales down automatically for smaller containers.
number120
fontFamilyFont family for the text.
string"Inter, sans-serif"
particleSizeRadius of each particle in pixels.
number1.5
particleDensitySpacing between original pixel sampling. Lower number = more particles (higher density). Warning: very low numbers may impact performance.
number6
dispersionStrengthHow strongly the cursor pushes particles away on hover.
number15
returnSpeedStrength of the spring physics pulling particles back to their origin.
number0.08
colorCustom color for the particles. If omitted, it inherits parent text color.
string—
classNameAdditional CSS classes for custom styling of the wrapper div.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

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

Have any questions?
Contact on@harshjdhv
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>
  )
}