Interactive Text Particle

A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts responsively to screen size, supports rich color palettes, and offers fully customizable animation dynamics—all with zero external dependencies. Perfect for landing pages, hero sections, and attention-grabbing banners.

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

import { ParticleTextEffect } from "@/components/ui/interactive-text-particle";

const DemoOne = () => {
  return <ParticleTextEffect
        text="HOVER"
        className="absolute top-0 left-0"
        colors={['ff6b6b', 'feca57', '48dbfb', '1dd1a1']}
      />;
};

export { DemoOne };