Components
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.
npx @21st-dev/cli add dhileepkumargm/synapse-backgroundLoading preview...
import React from 'react'
import SynapseBackground, { SynapseBackgroundProps } from '@/components/ui/synapse-background'
export const SynapseBackgroundDemo = () => {
const demoProps: SynapseBackgroundProps = {
particleCount: 4000,
connectionDistance: 60,
className: 'flex items-center justify-center',
}
return (
<SynapseBackground {...demoProps}>
<div className="text-center select-none p-4">
<h1 className="text-5xl md:text-7xl lg:text-[80px] font-bold uppercase text-white drop-shadow-[0_0_20px_rgba(0,0,0,1)] leading-none">
Mind Canvas
</h1>
<h2 className="text-4xl md:text-5xl lg:text-[60px] font-medium uppercase text-white drop-shadow-[0_0_20px_rgba(0,0,0,1)] leading-none">
Connecting Ideas
</h2>
<p className="mt-2 text-sm md:text-base text-white drop-shadow-[0_0_20px_rgba(0,0,0,1)]">
Move the cursor to activate the network.
</p>
</div>
</SynapseBackground>
)
}
export default SynapseBackgroundDemo