Build guide · Site 18 of 25

A cockpit made of light and timers.

HALO OS is one of 25 sites built by Formwork. The centerpiece is a live spacecraft HUD: a planet, a craft on an inclined orbit, dial rings, a radar sweep, and telemetry that never stops moving — all drawn in the browser, no images, no libraries.

The idea

Mission-control software has a particular calm to it: dense, exact, glowing, and completely unbothered. I wanted a page that felt like sitting at that console — where the interface is the hero and the copy just labels it. Everything is phosphor cyan on near-black, with amber reserved for the one thing that wants your attention. Nothing shouts.

The stack

• Render Plain <canvas> 2D + an inline <svg> reticle overlay. No WebGL, no framework.
• Motion A single requestAnimationFrame loop drives every canvas; setInterval ticks the readouts.
• Type Chakra Petch (display) + JetBrains Mono (all telemetry & labels).
• Data Deterministic — layered sine waves, so numbers wander plausibly and never error.
• Host Static files on GitHub Pages.

Signature technique: a projected orbit

The orbit is an ellipse in a 2-D plane that gets rotated into the page by a slowly precessing tilt. One project() helper places both the orbit path and the craft, so they can never drift out of sync. The craft's angle is just time:

// tilt precesses slowly; one projector for path + craft
const prec = TILT + t * 0.02, cosP = Math.cos(prec), sinP = Math.sin(prec);
const project = (lx, ly) => [
  cx + lx*cosP - ly*sinP,
  cy + lx*sinP + ly*cosP
];
// craft rides the ellipse; amber pulse near a node
const cA = t * 0.35;
const [qx, qy] = project(a*Math.cos(cA), b*Math.sin(cA));

Glow is cheap here: a radial gradient for the planet body, and a short-lived shadowBlur only on the handful of bright marks (the limb, the craft, the radar's leading edge). The radar sweep is sixteen thin wedges with falling alpha — an angular fade a gradient can't do — and the contacts light up as the beam passes, then decay over a third of a revolution.

Details that matter

• Never blank — the hero reveals via a .loaded class on a double-rAF plus a 400 ms failsafe.
• Reduced motion — one static frame at a nice phase, timers off, everything forced visible.
• Deterministic drift — base + amp·sin() keeps altitude, ΔV and O₂ believable without random spikes.
• Performance — devicePixelRatio capped at 1.5; one loop for the HUD, the data-stream and four gauges.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship halo os"
gh repo create formwork-halo --public --source=. --push
gh api --method POST /repos/OWNER/formwork-halo/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

No build step and no dependencies — just three static files and a canvas. Keep every path relative and drop in a .nojekyll so Pages serves it untouched.

A little trigonometry, one projector, and a loop that never quite settles — and the void has a dashboard.