Components
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.
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>
);
}