Cursor Driven Particles Typography

Interactive particle-based typography rendered on canvas. Text is constructed from dynamic particles that disperse on cursor interaction and smoothly return with spring physics. Fully customizable density, dispersion strength, return speed, size, and color. Perfect for hero sections, landing pages, and creative portfolios.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cursor Driven Particles Typography to your project and fits it to your theme.

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

export default function Demo() {
  return (
    <div className="w-full min-h-[500px] bg-black text-white flex items-center justify-center">
      <CursorDrivenParticleTypography
        text="Design"
        fontSize={160}
        particleDensity={5}
        dispersionStrength={20}
      />
    </div>
  );
}