InteractiveSynapseNetwork

Heroes 207

About

A full-screen canvas-driven network of drifting nodes that light up on cursor proximity and send pulsing signals along their connections. Built with React and plain Canvas, this component simulates an interactive synaptic web—perfect for sci-fi dashboards, data-driven hero backgrounds, or immersive UI overlays.

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

Code

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

Usage.tsx

import React from 'react'
import InteractiveSynapseNetwork, {
  InteractiveSynapseNetworkProps,
} from '@/components/ui/interactive-synapse-network'

export const InteractiveSynapseNetworkDemo = () => {
  const glowStyle = '0 0 5px #00dcff, 0 0 10px #00dcff'
  const demoProps: InteractiveSynapseNetworkProps = {
    nodeColor: 'rgba(0,220,255,0.8)',
    pulseColor: 'rgba(255,255,255,1)',
    nodeCount: 60,
    connectionRadius: 180,
    trailOpacity: 0.15,
    className: 'flex items-center justify-center',
  }

  return (
    <InteractiveSynapseNetwork {...demoProps}>
      <div className="text-center select-none">
        <div className="px-8 py-6 bg-black/20 backdrop-blur-sm rounded-xl">
          <h1
            className="text-5xl sm:text-7xl font-bold uppercase tracking-widest text-cyan-200"
            style={{ textShadow: glowStyle }}
          >
            Synapse
          </h1>
          <h2 className="mt-2 text-lg sm:text-2xl uppercase tracking-wider text-cyan-200/70">
            Interactive Network
          </h2>
        </div>
        <p className="mt-8 text-sm text-cyan-200/40 font-mono">
          The cursor excites the neural pathways.
        </p>
      </div>
    </InteractiveSynapseNetwork>
  )
}

export default InteractiveSynapseNetworkDemo