Constellation Link
Drifting points that link to their nearest neighbour while it stays in range.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Constellation Link
*
* Points drifting slowly, each drawing a line to its nearest neighbour
* while that neighbour is close enough.
*About this effect
A network background for something about connection — integrations, sync, a team surface. The whole effect lives in the threshold. Each point links to its nearest neighbour only, never to everything in range, which keeps the graph sparse and lets it re-wire: as two points pass each other a link lets go of one partner and takes another, and that is the moment the field stops looking static. The link's opacity is a smoothstep of the distance ratio, so it arrives from nothing and leaves to nothing — a hard cutoff flickers as points jitter around the boundary and reads as a rendering fault. The range is derived from the point density rather than the box, so about half the field is linked whatever the container size or the count.