UXS-005 — Earth Orbit Viewer

Status · Draft v0.1 Visual fidelity · Verified against prototype (P05_earth-orbit.html) IA anchor · §surfaces/earth · §topbar-patterns · §shared-tokens Related PRD · PRD-005

Why this UXS exists

The Earth orbit viewer is a single logarithmic-scale canvas. This UXS defines the scale function, object appearance, regime labels, and detail panel.

Principles

• The logarithmic scale must be legible without prior knowledge — labels explain the non-linearity
• Object dots are small; labels are the signal
• Regime bands are subtle — they frame, not overwhelm
• The detail panel is the same component as explore and missions screens

Scope

In scope: nav bar, canvas (scale, objects, regime labels, regime bands), detail panel. Non-goals: object animation (static view — objects don't move). Boundary note: click detection logic belongs in the screen module.

Theme

Dark only.

Tokens

Inherited from IA

All shared tokens.

Defined here

regime-leo:    rgba(75,156,211,0.06)   Low Earth Orbit band
regime-meo:    rgba(68,102,255,0.05)   Medium Earth Orbit band
regime-geo:    rgba(255,200,80,0.06)   Geostationary band
regime-cis:    rgba(255,255,255,0.03)  Cislunar band
scale-fn:      altToVis(alt_km) = 38 + 54 * log10(1 + alt_km/100)   (px from Earth surface)
object-dot:    4–6px radius, object-specific colour
object-label:  Space Mono 8px, object colour, left of dot

Layout

Vertical canvas filling the viewport (minus nav bar). Earth at bottom. Scale labels on left edge. Regime band labels on right edge. Objects as dots at their computed vertical position. Detail panel right 314px on object click.

Component states

Object (default): dot with glow, label to the right Object (selected): larger dot, brighter glow, label bold, panel open Regime band (visible): subtle background colour fill, label right edge

Accessibility

Canvas: aria-label="Earth orbit diagram on logarithmic scale from ISS at 408 km to JWST at 1.5 million km".

Acceptance criteria

• [ ] ISS at bottom (~408 km), JWST near top (~1.5M km) — relative positions correct
• [ ] Moon correctly positioned between cislunar region and L2
• [ ] Geostationary belt at ~35,786 km
• [ ] Regime labels visible and correctly positioned
• [ ] Clicking any object opens detail panel
• [ ] Detail panel shows altitude, orbital period, launch date, description

---

Extension — GALLERY + LEARN tabs (v0.1.10)

The detail panel gains a tab system: OVERVIEW (existing content) · GALLERY · LEARN. CSS sourced from the shared src/lib/styles/panel-tabs.css introduced in v0.1.10.

Layout

• Tabs row sits below the agency-row + name + status header, above the existing data grid.
• GALLERY tab renders only when static/data/earth-object-galleries.json[id] > 0. LEARN tab renders only when the earth-object record has non-empty links[].
• Lightbox dimisses on click anywhere; localised aria-label panel_lightbox_close.

Tokens (extension)

Inherits all panel-tab tokens from UXS-004 §Extension. Active tab border: #4466ff. GALLERY thumb hover border: rgba(68, 102, 255, 0.6). LEARN tier accent colors: teal (intro) · blue (core) · gold (deep).

Acceptance criteria (extension)

• [ ] OVERVIEW tab content (existing data grid + scale-fact + description + credit) unchanged
• [ ] GALLERY tab renders when manifest count > 0; thumbnail click opens lightbox
• [ ] LEARN tab renders tiered intro/core/deep links from earth-object.links
• [ ] No GALLERY/LEARN tab when there's no data — never empty placeholders