Starfield

Every star is a real one

The catalogue is the Yale Bright Star Catalogue: every star the eye can see, each placed by its right ascension and declination and turned for this latitude and this minute. The planets come from JPL’s published orbital elements, solved each time the sky turns. You could hold a phone up to the night and match it.

Facing south

From the northern hemisphere, south is where the sky is most alive: the ecliptic, the line the planets and moon travel, and most of the stars that rise in the east and set in the west. North is mostly the slow wheel around Polaris. The arrow keys turn you anyway.

← → 15° a press · Shift ↑ ↓ tilt 8° · the view glides, never jumps

Seeing deeper as you go

Each section of the site has a strength, and strength sets the limiting magnitude: how faint a star you can see. Quiet sections hold only the brighter stars; full ones go to the eye’s limit. Dark sections empty completely, past even Venus, and as you come in the brightest stars arrive first, the way your eyes adjust at night.

Square pixels, whole pixels

The field is squares on a 9px grid, in three sizes only, never merging. Every square snaps to whole device pixels, so a square of a size is identical on any screen. Before that, small squares drew as single specks on ordinary displays and the sizes blurred together.

A twinkle with direction

Real twinkle is random, and random reads as noise. Here the twinkle is a slow swell: a wave rolling sideways times a slower diagonal one, so crests sweep across the sky lighting stars as they pass. The brightest stars hold steady so the constellations stay readable, and only brighten as a crest goes by. The sweep comes from the site’s first star field; it survived three rebuilds because it was the part that felt alive.

Depth without lying

Real stars are too far away to shift against each other, so sliding them in layers would break the constellations. Instead the whole sky is the far plane: scroll down the page and your gaze tilts slowly up. Depth comes from a second, near plane of faint dust that moves faster and drifts sideways on a slow wind, so the two slide past each other.

Rare visitors

Every so often a shooting star crosses the upper sky: a short streak, brightest at the head, drawn cell by cell so it stays a pixel matrix. Now and then a satellite glides edge to edge in a straight line, one faint point, the way they really do. Rare on purpose, so you notice them.

Making room for you

The pointer is a single orange point, the site’s colour for what’s different. Over something to touch it opens into a ring, and the field moves out of its way by whole cells, clearing a small pocket. Press and hold here to try it.

push up to 2.5 cells within 80px · a ring 46px across · always whole cells

One shader, one spec

The field is a single fragment shader over one full-screen triangle. Each frame the sky is placed on the CPU and written into a small texture, one star per cell; each pixel then checks its own cell and its eight neighbours, since a star can sit anywhere in its cell. A Canvas 2D version mirrors the shader for browsers without WebGL. Every number for both lives in one spec, which is what this page edits.

1 pass · 3 × 3 neighbourhood · grid.js shared by the shader, the 2D mirror, and this page

Cheap when nothing happens

The sky’s texture is only rebuilt when something moves the stars: scroll, the pointer, the strength, the minute. When nobody is touching the page the slow twinkle draws at half rate, which looks identical and costs half. A shooting star or any input brings back the full rate.

~0.14ms to place the sky · ~1ms to turn it, every 10s · 30fps idle, 60 in use

Care you don’t see

With reduced motion on, time stops: no twinkle, no drift, no tilt, no visitors, just the sky. If the graphics context is lost, the 2D mirror takes over with the same picture. The field is decoration to assistive technology, and the page reads perfectly without it.

reduced motion respected · 2D fallback · hidden from screen readers