Concept
Sol Station imagines a calm operations room for Asteria, a rover crossing the fictional Dunehook Basin at Aeolis Mensae. The visual idea is “distance made actionable.” Earth is far away, commands arrive fourteen minutes late, yet the interface remains deliberate and reassuring. Butterscotch terrain occupies the largest visual field while slate panels frame decisions, validation, energy, and communications. The experience avoids borrowed space-agency marks. Its credibility comes from specific operational language, restrained color, and a working traverse lifecycle.
Visual techniques
Procedural terrain and hazards
In main.js, drawTerrain() paints the planner canvas at device-pixel resolution. Seeded rock positions make the same landscape return on every load. Sine fields create contours and ripples, radial gradients carve crater bowls, and elliptical line families define sand patches. terrainHeight(), sandAt(), and rockRisk() describe that same world numerically, so the map’s danger is functional rather than decorative.
Orbital hazard scan
The Orbital Hazard Scan is a real second reading of the terrain, not a tinted overlay. toggleOrbitalScan() asks drawTerrain() to resample a 24 × 16 analysis grid. Each cell combines slope, sand depth, and rock proximity, then renders a severity tile and a local contour vector. A short CSS sweep in styles.css stages the data fusion; reduced-motion users receive the completed analytical layer immediately.
Route validation and execution
Pointer input adds normalized waypoints. segmentRisk() samples each route leg at twenty-five positions and combines local gradient, nearby rocks, and sand depth. Dangerous segments become dashed red lines. routeStats() converts the route into meters, sol minutes, and watt-hours. During execution, driveFrame() advances the rover along the polyline, pauses when the document is hidden, and stops entirely for reduced-motion users.
Synthetic navcam
drawNavcam() does not replay a video. It builds each frame from a graded sky, a moving ridge, passing rocks, wheel tracks, and a targeting reticle. Surface values beneath the rover alter the slip meter and trigger traction-control status. The result makes the user’s own route feel driven, not merely selected.
Atmosphere and motion
styles.css layers restrained radial light, SVG noise, ruled grids, orbital circles, and sharp console borders. The hero stages its copy, clock, and status rail on load; an IntersectionObserver reveals later sections only as they arrive. Hover motion stays local, while the execution animation carries the meaningful continuous movement.
Palette and type
Outfit handles large, calm display typography with carefully tightened tracking. JetBrains Mono carries coordinates, budgets, states, and clocks. The contrast between human-scale headings and machine telemetry gives the interface its mission-operations cadence.
Reproduce this
Ask an AI coding agent for a static mission console with one procedural canvas that is also the application’s data model. Require deterministic terrain, interactive waypoints, sampled hazards, route animation, synthetic sensor output, device-pixel rendering, reduced-motion behavior, and responsive compositions at phone, tablet, and desktop widths. Name the palette and typefaces, insist that every visual be code-generated, and ask the agent to inspect screenshots before finishing.