Particle Canvas

Component 69

About

The component will use inline styles and include the canvas animation with customizable props.

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

Code

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

Usage.tsx

import { ParticleCanvas } from "@/components/ui/particle-canvas";

const settings = {
  particles: 200,
  particleBaseLight: 5,
  particleAddedLight: 30,
  sourceBaseDist: 130,
  sourceVariedDist: 50,
  enableTrails: false,
};

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