Behind the Scene

Nocturne is a fictional planetarium whose entire visual world is one Canvas 2D particle system — about 120 lines of physics. No WebGL, no libraries, no images. Here's how the sky works.

01 · Eleven hundred stars with spring physics

Each star is an object with a position, a home position, a velocity, a size, a depth (0.3–1.0), a twinkle phase, and one of three colours (white, gold, cyan — weighted 78/12/10). Every frame, two forces act on it:

• Pointer gravity — inside a 160px radius, stars accelerate toward the cursor, scaled by proximity. Move your hand through the sky and it gathers like iron filings.
• Spring home — a weak restoring force (k = 0.012) pulls each star back to where it belongs, with 0.9 damping. The sky always heals.

s.vx += (s.hx - s.x) * 0.012;   // spring home
s.vx *= 0.9;                     // damping
if (d < 160) s.vx += dx/d * (1 - d/160) * 0.55;  // gravity

02 · Constellations that follow you

Stars within 130px of the pointer are collected (capped at 26) and every pair closer than 70px gets a line, with opacity proportional to closeness. The result: wherever you point, the sky spontaneously draws constellations — and un-draws them as you leave. The three atlas cards use a different trick: SVG lines with stroke-dasharray animated on hover, so each constellation draws itself in.

03 · Meteors, twinkle, parallax

• Click = meteor — a particle with a velocity vector and a linear-gradient tail 13 frames long; one also falls on its own every ~10 seconds.
• Twinkle — each star's alpha oscillates on its own sine phase and speed; bright stars get a second, larger arc at 7% alpha as a glow.
• Scroll parallax — home positions shift by scrollY × 0.06 × depth, so nearer stars sweep faster than distant ones as you read.

04 · The design around the sky

Cormorant Garamond at weight 300 gives the celestial-atlas voice; IBM Plex Mono plays the instrument-readout counterpart (times, magnitudes, coordinates). The palette is disciplined: void blue, starlight, one gold, one cyan. The ephemeris table and the “pay what the sky is worth” admission line do the storytelling — a reminder that copywriting is a design material.

05 · Reproduce it

Start with an array of particles and three rules — attract, spring, damp. Add per-particle sine twinkle. Draw pairwise lines under a distance threshold near the pointer. Cap the star count by viewport area / 1600 and the canvas DPR at 2, and it runs at 60fps on a phone.