Surface Hotspots Redesign — Visual Preview

Status: Slice 0 visual anchor for #283. Generated by: node scripts/mockups/render-surface-mockups.mjsAspect: 1920 × 1080 PNG, full Orrery chrome + proposed UI.

These 12 mockups exist to anchor the redesign direction before any code or schema work begins. Each frame composites the proposed UI elements (rectangular region polygons, bounding-rect selection halos, scale-aware markers, flat-patch HUD, etc.) onto the actual planet textures from static/textures/. They are not photoreal app screenshots — they are schematic mockups in the Orrery design system.

Re-run the script after design tweaks. The script and inline SVG templates are the source of truth.

Frames

#	File	State
01	01-mars-planet-wide.png	Mars planet wide · rectangular region polygons replace 3D-model + circular-ring markers
02	02-mars-mid-zoom-region.png	Mars mid-zoom · selection halo = bounding rectangle (no decoupled ring, no pulse)
03	03-mars-threshold-transition.png	Sphere → flat ground patch threshold · fade transition
04	04-mars-flatpatch-hud.png	Flat ground patch · CTX (regional) + HiRISE (detail) as true rectangles + traverse + waypoints + scale bar + lat/lon
05	05-mars-deep-zoom-markers.png	Deep zoom · markers at real-world scale (rover ≈ 6 px) · curated traverse stops · upsample-limit cue
06	06-mars-stationary.png	Stationary site (InSight) · single marker · no traverse polyline
07	07-moon-planet-wide.png	Moon planet wide · multi-agency rectangular regions (NASA / CNSA / JAXA / Roscosmos)
08	08-moon-mid-zoom-region.png	Moon mid-zoom · bounding-rect selection · explicit annotation of REMOVED elements (giant blue ring, pulse)
09	09-moon-threshold-transition.png	Moon sphere → flat patch threshold · lunar palette
10	10-moon-flatpatch-hud.png	Moon flat patch · LROC NAC ROI (regional) + LROC NAC detail + single Apollo 11 marker
11	11-moon-deep-zoom-markers.png	Moon deep zoom · LM at TRUE scale (4.3 m → 18 px) · annotated equipment · upsample-limit cue
12	12-moon-stationary-change.png	Hybrid CNSA site · Chang'e 3 lander (1 marker) + Yutu rover short traverse

What each frame is meant to anchor

• 01 / 07 — Planet wide. Multiple rectangular region polygons, agency-coloured borders, sit on the planet without occluding it the way 3D lander silhouettes do today. Labels with backdrop strips read against the surface texture. Anchors: the "stop crowding the planet" decision (current moon image 11 is over-stuffed) and the "regions are the data shape" decision.
• 02 / 08 — Mid-zoom region selected. A single region polygon sits stylized on the curving sphere surface; its selection halo is a thin bounding rectangle pinned to the region itself, not a separately-floating ring. Microcopy ("Zoom in to enter ground view ↓") signals the upcoming threshold transition. Anchors: fix for moon image 13 (decoupled halo) and explicit "no pulse" rule.
• 03 / 09 — Threshold transition. The sphere fades out as the flat ground patch materializes below. Anchors: the architectural decision to abandon spherical-quad rendering in favour of a flat 2D patch at deep zoom. ADR-062 territory.
• 04 / 10 — Flat patch open. Two rectangular layers (regional + detail) are honest about ground extent — labels show "5 m/px · 10 × 6 km" and "25 cm/px · 500 × 300 m". Traverse polyline (Mars frame) goes from LANDING (SOL 0) to ROVER (SOL 5,045) with curated waypoint pins. Scale bar bottom-left, lat/lon bottom-right, "← BACK TO PLANET" top-left. Anchors: the entire flat-patch primitive — Slice 4.
• 05 / 11 — Deep zoom. Markers are at real world scale. Rover on Mars ≈ 6 px; Apollo LM descent stage on moon ≈ 18 px. Annotation lines point to features at true scale ("U.S. FLAG", "RETROREFLECTOR"). A vignette + microcopy ("Approaching native pixel limit") tells the user the imagery isn't blurry — they've zoomed past the data's resolving power. Anchors: the scale-aware marker rule ("marker stays proportional and never gets bigger") and the upsample-warning rule.
• 06 — Mars stationary. Single landing marker, no traverse, simpler HUD. Anchors: the "stationary landings get exactly 1 marker" rule.
• 12 — Moon hybrid (Chang'e 3 + Yutu). Lander gets one marker; rover traverse adds start + end markers along a short Q-curve path. Anchors: the rover-vs-stationary marker count distinction and explicit non-US-agency representation (CNSA red).

What's intentionally NOT here

• Mobile layout. These are desktop mockups. Mobile-specific HUD reflow ships in Slice 6.
• i18n. Strings are EN-only. Translation pass is Slice 6.
• Real terrain at the right resolution. Backgrounds are 2K planet textures and pattern fills, not actual CTX/HiRISE/LROC tiles. The mockups encode layout intent, not data fidelity.
• Pixel-precise positions. Region rectangles are placed where the missions roughly are on the texture, but they're not lat/lon-projected. Slice 1 backfills the real region_bounds per site.

Iterating

To tweak the design, edit scripts/mockups/render-surface-mockups.mjs (frame template functions) and re-run:

node scripts/mockups/render-surface-mockups.mjs

The Orrery design tokens are mirrored at the top of the script (T = { bg, accent, teal, mars, nasa, ... }); keep them in sync with src/lib/styles/tokens.css when those drift.