Atmosphere & Background · The air of the page
Constellation星座连线
- dots drift
- links appear when close
- lines grow and dissolve
A set of dots drifts slowly; when two come within a threshold a line appears between them and breaks when they part. The line’s opacity follows the distance, so it grows in and dissolves rather than snapping on and off.
When to use it
Use it as an ambient backdrop for themes of connection, networks, relationships or data, and it pairs well with pointer attraction on desktop. The node count is the crux: past about 60 the links become a ball of yarn, and the pairwise distance check grows quadratically every frame.
Parameters
42 nodes · drift 8px/s · link when distance < 104px · line opacity 1−(d/104)² · per frame, no easing
Recipe
Constellation → 42 nodes · drift 8px/s · link when distance < 104px · line opacity 1−(d/104)² · per frame, no easing
One sentence for your AI
Build a constellation backdrop: 42 dots drifting at about 8px/s each, wrapping around when they leave the frame. Every frame compare them pairwise; under 104px draw a link with opacity falling off as 1−(d/104)², so a line fades to exactly zero at the threshold instead of snapping. Advance per frame with no easing. Keep it under 60 dots — the pairwise check grows quadratically.