Backgrounds
NodeGraphBackground
A neural network, conceptually.
Canvas-rendered drifting nodes with proximity-based links. Reacts to the cursor (pulls nodes within `hoverDistance`). Zero JS dependencies.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/node-graph.json
Examples
Default
<div style={{ position: "relative", height: 280 }}>
<NodeGraphBackground />
</div>Sparse + green
<NodeGraphBackground
density={35}
linkColor="#22c55e"
colors={["#86efac", "#22c55e"]}
linkDistance={180}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 70 | Number of nodes. |
| speed | number | 0.4 | Pixel speed per frame. |
| linkDistance | number | 140 | Max px between linked nodes. |
| colors | string[] | - | Pool of node colors. |
| linkColor | string | "#7c3aed" | Link stroke color. |
| baseOpacity | number | 0.45 | Resting alpha of nodes + edges. Field is dim at rest; cursor brightens it. |
| hoverDistance | number | 200 | Radius of cursor effects (gravity + brighten). 0 disables both. |
| hoverGravity | number | 0.005 | 0–1 strength of cursor pull. Default is very subtle drift; set higher for stronger attraction. |
| hoverBrighten | number | 0.8 | 0–1 strength of opacity boost near the cursor. |
| overscan | number | 80 | px the simulation world extends past the visible viewport, nodes bounce off the world edges, drifting in/out of view. |