Cursor-Driven Particle Typography

A canvas-based particle typography component where text dissolves into interactive particles that respond to cursor movement

pnpm dlx @sikka/naseem add cursor-driven-particle-typography

npx @sikka/naseem add cursor-driven-particle-typography

yarn dlx @sikka/naseem add cursor-driven-particle-typography

bunx --bun @sikka/naseem add cursor-driven-particle-typography

Usage

The CursorDrivenParticleTypography component renders text as a field of particles on a canvas. Each particle behaves with spring physics — pushing away from the cursor and gently returning to its origin, with a subtle idle jitter.

import { CursorDrivenParticleTypography } from "@/components/ui/cursor-driven-particle-typography"

export default function Hero() {
  return (
    <div className="h-[400px] w-full bg-black">
      <CursorDrivenParticleTypography
        text="Hello World"
        color="#fafafa"
      />
    </div>
  )
}

Props

Prop

Type

Features

Spring physics — particles repel from cursor and return with damped spring motion
Idle animation — subtle random jitter keeps particles alive when the cursor is away
Responsive — font size auto-scales to container width
Theme-aware — re-initializes when the <html> class changes (e.g. dark/light mode toggle)
Touch support — works with touch drag on mobile devices
High-DPI — renders at device pixel ratio for sharp text

Implementation

The component renders text onto a hidden canvas pass, reads the pixel alpha data to generate a particle map, then animates each particle's position each frame using a custom physics loop with repulsion, spring return, and friction.

Dependencies

{
  "react": "latest"
}