Constellation Hover
Drifting stars whose links ignite in accent around the cursor
Create a constellation hover field. A light canvas with ~28 star nodes at positions from a seeded PRNG (mulberry32 with a fixed seed: no Math.random, so the constellation is identical every run). Each node drifts gently around its base position: x = base + sin(time × 0.0006 + phase) × amplitude (amplitude 2-6px, per-node phase from the PRNG), alive but anchored. Every frame, link pairs of nodes closer than ~64px with a line. At rest the web is barely there: ink at 7% alpha, 0.6px. The magic is pointer proximity: for each line, measure the distance from its midpoint to the cursor and compute lit = max(0, 1 - distance / 95); lit lines turn accent-colored with opacity 0.07 + lit × 0.8 and thicken to ~1.8px. The constellation ignites around the hand and fades with distance. Nodes do the same: ink dots at rest, accent and 2× radius when lit. Track the pointer in a ref (never React state: this redraws every frame); park it far off-canvas on pointer leave so the glow dies naturally. Run on requestAnimationFrame with a plain canvas 2D context; at ~28 nodes the O(n²) pair loop is nothing. Use crosshair cursor over the field. The canvas is decorative: aria-label on the container. If prefers-reduced-motion is set, draw one static frame with no drift (proximity lighting may stay. It follows the hand, it doesn't autoplay). Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.