Components
SynapseBackground
An interactive 3D particle network background built with Three.js.. Particles drift in space, connect via subtle lines when in proximity, and pulse to magenta when you hover nearby—simulating a living synaptic canvas. Ideal for immersive hero sections, data visualizations, or neural-network–inspired UI overlays.
import SynapseBackground from "@/components/ui/synapse-background";
const settings = {
particleCount: 5000,
connectionDistance: 80,
opacity: 0.05,
size: 2,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<SynapseBackground
particleCount={s.particleCount}
connectionDistance={s.connectionDistance}
opacity={s.opacity}
size={s.size}
/>
</div>
);
}