React Mission Timeline
A launch sequence, done the way mission control shows it: a large T-minus/T-plus clock on the deep-blue surface (flipping to the electric accent at liftoff), over a vertical list of sequenced events. Each event carries its T-time and a state — completed (filled), active (pulsing), or upcoming (hollow) — driven off the current mission time. Provide now for a controlled clock synced to real telemetry, or autoStartOffset to run a live demo countdown.
AXM-1 · Launch sequence
T−00:12
- T−10:00Terminal count startFlight computer to internal power
- T−03:00Propellant load completeLOX/RP-1 topped
- T−01:00StartupVehicle on internal power
- T−00:03Ignition9 engines to full thrust
- T+00:00LiftoffTower cleared
- T+01:12Max-QPeak aerodynamic pressure
- T+02:42MECOMain engine cutoff
- T+02:48Stage separation
- T+09:00SECOSecond engine cutoff — orbit insertion
The clock runs live from T−12 s — events light up as their T-time passes, and the active phase pulses.
Installation
npx shadcn@latest add "http://localhost:3000/registry/mission-timeline.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| events | MissionEvent[] | — | { t (sec rel T-0), label, detail? } |
| now | number | — | Controlled mission time (seconds rel T-0) |
| autoStartOffset | number | — | Run a live clock from this offset (if now omitted) |
| title | string | — | Header label |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.