ParticleTextCanvas

A full-screen, canvas-driven particle system that spells out specified text and lets the cursor dynamically repel the letters’ particles. It captures pixel data from bold, gradient-filled text and instantiates particles at those locations, creating an interactive “shatter and reform” effect as you move or leave the cursor. Ideal for hero titles, interactive headings, or animated backgrounds.

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

import ParticleText from "@/components/ui/particle-text-canvas";

export default function Demo() {
  return (
    <div className="h-screen w-screen">
      <ParticleText />
    </div>
  );
}