Interactive Particle Typography

Component 183

About

A React component that renders a full-screen interactive particle animation forming the word "21ST.DEV". Particles are attracted to text-shaped targets and respond to mouse or touch movements, creating a dynamic typography effect.

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

Code

How Interactive Particle Typography is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ParticleTypography from "@/components/ui/interactive-particle-typography-1";

const settings = {
  PARTICLE_COUNT_TARGET: 4000,
  ATTRACTION_FORCE_BASE: 0.1,
  NOISE_STRENGTH_BASE: 0.4,
  FRICTION: 0.95,
  MOUSE_INTERACTION_RADIUS: 90,
  MOUSE_DISPERSE_STRENGTH: 1.2,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <ParticleTypography {...s} />
    </div>
  );
}