← All effects

Constellation

BackgroundVanilla JS · zero dependenciesCanvas · links only near the cursor
-- fps
prefers-reduced-motion detected — static star map shown

X-ray · layers

the drifting, twinkling field
lines drawn near the cursor
connected stars glow brighter

Parameters

Stars140
Link distance100 px
Cursor reach180 px
Drift0.25×
your version · updates as you tinker

How this effect works

Unlike a particle network, which connects everything to everything nearby, a constellation only exists where you are looking. Every frame we collect the stars inside the cursor's reach — a simple distance check — and only that handful is considered for lines. Two of them get connected when they are closer than the link distance, and the line fades with distance, so constellations assemble and dissolve as you sweep across the sky.

That "only near the cursor" rule is also the performance trick: comparing every star with every other star costs count², but comparing only the ~20 stars under your cursor costs almost nothing, which is why this effect can afford a dense sky. The light-up layer brightens and enlarges exactly the stars that are inside the reach, so the sky answers your hand; the field itself just drifts and twinkles — each star carries a phase offset into one shared sine wave.

Production notes: respects prefers-reduced-motion (one static frame) · the link pass only runs on stars near the cursor, so cost stays flat as the field grows · with no mouse on the stage the constellation walks on its own so the effect still demos itself · the copied snippet is self-contained HTML + JS.