Living Network

Living Network

A web of nodes drifting through space, connected by proximity-based lines. Move your cursor and the network reacts — nodes are pushed away, connections stretch and re-form, giving the scene a sense of physical presence.

How it works

Each node has a "home" position and continuously drifts around it with its own sinusoidal phase. Every frame, the component checks which pairs of nodes are within a configurable connection distance — any pair close enough is drawn as a line whose opacity fades with distance. Cursor proximity applies a repulsive force, and nodes smoothly return to their home positions when the cursor moves away.

Key Features

- Proximity connections — lines appear between nodes within a customizable distance

- Cursor repulsion — nodes drift away from your pointer with smooth recovery

- Drift motion — each node has a unique sinusoidal drift pattern

- Viewport-aware — pauses rendering automatically when offscreen

- 12 exposed properties — count, sizes, connection distance, line width, opacity, and more

Properties

- Node count multiplier — 0.25× to 4×

- Node size range — min / median / max

- Connection distance — how far links reach

- Line width & opacity

- Spread width & height

- Drift amplitude & speed

- Pointer strength — cursor repulsion intensity

Best for

Tech and SaaS hero sections, network-themed visuals, data product pages, and ambient interactive backgrounds.