Concept
KP-9 Station is an arctic geomagnetic observatory above the treeline, so the page is not arranged like a brochure. It behaves like a dark instrument hut with a vast sky pressing on the roof. The opening view keeps the hut low and small, makes the snow ridge blunt, and gives most of the viewport to aurora curtains, sparse stars, and telemetry. The invented content is operational rather than promotional: fluxgate vaults, VLF loops, UTC nights, dome-heater notes, -31°C diary entries, fox tracks near the coil trench, and Kp forecasts that sound like someone has to wake up and act on them.
Visual Techniques
The signature sky is in main.js, inside initAurora(). A transparent native WebGL canvas draws segmented curtain grids across the hero. The vertex shader bends each strip with hash noise and fbm(); the fragment shader turns those displaced strips into vertical ribs using sine bands, soft foot fades, additive emerald oxygen, violet nitrogen edges, and a white overexposure line near Kp 9. The range input updates state.kp, then updateReadouts() pushes the same value into the shader uniforms, CSS custom properties, body storm classes, and every telemetry readout.
Because the audit runner uses automated Chromium, initCanvasAuroraFallback() recreates the same composition with a 2D canvas: stars, layered curved strokes, a moving horizon glow, and high-Kp white ignition ribs. The magnetometer strip chart is separate in initMagnetometer(). It maintains a rolling array, draws a gridded paper-feed background, and plots emerald and violet traces whose amplitude, roughness, and clipping rise with Kp. startLoops() owns animation scheduling, respects reduced motion, and cancels requestAnimationFrame while the document is hidden.
The field-probe interaction added in initIonProbe() converts pointer position over the hero into CSS variables for a spectral slit and a small data plaque; updateProbeReadout() recomputes altitude, particle energy, and oxygen/nitrogen band labels from the same Kp state as the sky. The station silhouette remains pure styles.css: clipped snow polygons, CSS hut geometry, heated glass, thin masts, guy lines, and a masked grain/grid overlay. The first load moment combines @keyframes loadSweep, @keyframes probeWake, and staggered .reveal transitions from initReveal(), so the page wakes like a recorder coming online rather than simply appearing.
Palette And Type
The palette stays polar and additive: #060b14 blue-black for the dominant field, #eef7ff for ice text, #3dffb0 for oxygen-green signal, and #9d7bff only as violet glow and storm-edge voltage. The typography is deliberately thin: self-hosted Outfit at light weights for the tall station headings, and self-hosted JetBrains Mono for coordinates, Kp values, table labels, slider ticks, and equipment notes.
Reproduce This
Prompt an AI agent to build a static HTML/CSS/JS observatory with no external assets. Ask for a full-viewport WebGL aurora made of fbm-displaced vertical curtain strips, a Kp 2-9 slider wired into shader intensity, body state, and telemetry, a pointer-driven spectral probe, a 2D canvas magnetometer chart, a CSS-only arctic hut and ridge, responsive operational forecast rows, diary fragments, self-hosted Outfit and JetBrains Mono, reduced-motion handling, hidden-tab rAF cancellation, and screenshot QA at 390, 834, and 1440 pixels.