Phase 5 — Vertical-Feed Console
Duration: ~10 working days Critical-path predecessor: Phase 3 Status: in progress
Deliverables (§6.1)
The console orchestrates ten decision-relevant frames in a deliberate sequence, each carrying a defined information payload, expected dwell time, and primary user action. This is the same discipline used in operations-room display design.
| # | Section | Dwell | Primary action |
|---|---|---|---|
| 0 | Operational status | 1–2 s | Drill into alert |
| 1 | Live cryospheric overview | 8–15 s | Toggle layers, click zone |
| 2 | Prediction-zone panel | 4–8 s | Select zone for deep dive |
| 3 | 3D photorealistic flyover | 6–12 s | Pause, rotate, freeze-frame |
| 4 | Spectral-unmixing simulator | 20–60 s | Adjust fractions |
| 5 | Telemetry stream | continuous | Watch / acknowledge |
| 6 | Forecast horizon ribbon | 4–6 s | Scrub timeline |
| 7 | Mass-balance tracker | 6–10 s | Compare years |
| 8 | Knowledge layer | on demand | Read |
| 9 | Provenance & audit | on demand | Verify |
Acceptance Gate
Full ten-section walkthrough, accessibility audit clean.
Run:
cd snow-ir-app
pnpm dev
Open http://localhost:5173. Scroll through all ten sections. The right-hand nav rail must update active section as you scroll. Reduced-motion preference must hard-bypass Lenis smooth scroll. axe-core must report zero critical or serious violations in the dev console.
Architecture
| Component | Responsibility |
|---|---|
| LenisProvider | Smooth scroll wrapper + GSAP scrollerProxy integration |
| VerticalFeedLayout | Section iteration, pin-on-scroll for the map and 3D sections |
| SectionNavRail | Right-side anchor rail with active-section indicator |
| SECTIONS | Single source of truth — order, labels, dwell targets |
| OntologyBrowser | Tree view backed by src/domain/ontology.ts |
| ProvenanceDetails | Per-alert PROV-O lineage panel |
| AcknowledgeButton | Local-first acknowledgement; Phase-7 wires to /alerts/{hash}/acknowledge |
| useAxe | Dev-only accessibility audit hook |
Discipline
- §6.1 sequencing — registry-driven, one component per section.
- §6.2 transitions — 120/240/480 ms triad enforced via Framer-Motion durations.
- §6.4 colour tokens — every severity uses both colour and text/icon shape.
- §6.7 performance budgets — sections lazy-load, map and 3D pin to viewport.