127 Components
Particle Network
BackgroundsInteractive Canvas 2D proximity graph where drifting nodes dynamically connect with distance-attenuated lines whenever they pass within a threshold radius.
Particle Network · 55 NodesRadius: 125px
Proximity Graph Topology
Drifting nodes dynamically form edges whenever their Euclidean distance falls below 125px, with line opacity scaling inversely with distance.
Hover anywhere to attract proximity edges
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/particle-network.json"
Props
TypeScript props supported by <ParticleNetwork />.
| Prop | Type | Default | Description |
|---|---|---|---|
| particleCount | number | 55 | Number of autonomous drifting nodes. |
| connectDistance | number | 125 | Maximum pixel distance at which two nodes form a connecting line. |
| speed | number | 1 | Node drift speed multiplier. |
| particleColor | string | "255, 255, 255" | RGB triplet string ('R, G, B') used for node and line alpha rendering. |
| interactive | boolean | true | Connects nearby nodes to the user's cursor on hover. |
| children | React.ReactNode | — | Optional foreground content rendered above the network. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Computes pairwise Euclidean distance (`Math.hypot`) and renders edges with opacity proportional to `1 - dist / connectDistance`.
- Interactive cursor node that links to nearby particles as the user moves their pointer.
- Elastic boundary reflection keeps all nodes inside the responsive canvas.
Keyboard & Accessibility
- Marks the `<canvas>` graph layer with `aria-hidden='true'`.
- High-contrast foreground text over the `#05070B` canvas.
- Zero pointer-event obstruction for foreground buttons and links.