ParticleBackground

A React component that renders a full-screen, interactive particle system using p5.js.. Particles gently follow the mouse pointer, supports light/dark themes, resizes responsively, and respects the user’s reduced-motion setting.

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

import ParticleBackground from "@/components/ui/particle-background";

const settings = {
  total: 500,
  sizeThreshold: 5,
  decel: 1.05,
  drag: 0.01,
};

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