Components
Particle Canvas
The component will use inline styles and include the canvas animation with customizable props.
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>
);
}