SynapseBackground

Heroes 58

About

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.

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

Code

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

Usage.tsx

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