Mission Control Timeline
Space-program terminal aesthetic with T-minus countdown, telemetry rows, status pills (GO, HOLD, CRIT) and per-event gauge bars driven by --g custom properties. CRT scanlines and phosphor glow give a Cape Canaveral readout feel. Built for launch logs, deploy timelines, and ops postmortems.
Mission Control Timeline the 5th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tl5-wrap">
<header class="tl5-head">
<div>
<h2 class="tl5-title">HALCYON-7<br><span class="tl5-sub">::Lunar South Pole Insertion</span></h2>
</div>
<div class="tl5-telemetry">
<div class="tl5-row"><span>VEHICLE</span><span>FALCON H · BLOCK 5</span></div>
<div class="tl5-row"><span>PAYLOAD</span><span>HALCYON-7 LANDER</span></div>
<div class="tl5-row"><span>PAD</span><span>KSC-39A</span></div>
<div class="tl5-row"><span>WINDOW</span><span>04:12:00 UTC</span></div>
<div class="tl5-row"><span>AZIMUTH</span><span>084.7°</span></div>
<div class="tl5-row"><span>STATUS</span><span>NOMINAL</span></div>
</div>
<div class="tl5-countdown">
<div class="tl5-cd-label">T-MINUS</div>
<div class="tl5-clock">00:00:07<span class="tl5-blink">_</span></div>
</div>
</header>
<div class="tl5-log">
<div class="tl5-log-head">
<span>T-Time</span>
<span>Stat</span>
<span>Event</span>
<span>Telem</span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T−14h</span>
<span class="tl5-stat tl5-go">GO</span>
<span class="tl5-msg"><strong>WET DRESS REHEARSAL</strong>Tanking sequence completed. LOX/RP-1 propellant load confirmed at 100%. All vent valves cycled.</span>
<span class="tl5-gauge">100%<span class="tl5-bar" style="--g: 100%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T−02h</span>
<span class="tl5-stat tl5-go">GO</span>
<span class="tl5-msg"><strong>RANGE GREEN</strong>Eastern Range clear. Air traffic and maritime traffic confirmed outside exclusion zone. Wx 76% favorable.</span>
<span class="tl5-gauge">76%<span class="tl5-bar" style="--g: 76%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T−45m</span>
<span class="tl5-stat tl5-hold">HOLD</span>
<span class="tl5-msg"><strong>TANKING HOLD · LH2</strong>Upper-stage LH2 fill pressure 2.3 PSI above nominal. Bleed valve cycling. Recovery in progress.</span>
<span class="tl5-gauge">HOLD<span class="tl5-bar tl5-bar-hold" style="--g: 38%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T−42m</span>
<span class="tl5-stat tl5-go">RESUME</span>
<span class="tl5-msg"><strong>HOLD RELEASED</strong>LH2 fill pressure nominal at 14.8 PSI. Count resumed. Loss-of-window risk: low.</span>
<span class="tl5-gauge">98%<span class="tl5-bar" style="--g: 98%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T−10m</span>
<span class="tl5-stat tl5-go">GO</span>
<span class="tl5-msg"><strong>TERMINAL COUNT</strong>FTS armed. APU spin-up complete. Launch director polls all stations: GO for launch.</span>
<span class="tl5-gauge">99%<span class="tl5-bar" style="--g: 99%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T+00:00</span>
<span class="tl5-stat tl5-go">LIFT</span>
<span class="tl5-msg"><strong>IGNITION & LIFTOFF</strong>27 Merlin engines at 100% throttle. Tower cleared at T+7. Pitch program initiated at T+9.</span>
<span class="tl5-gauge">7.6M LBF<span class="tl5-bar" style="--g: 100%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T+01:08</span>
<span class="tl5-stat tl5-nom">NOM</span>
<span class="tl5-msg"><strong>MAX-Q</strong>Vehicle passes maximum dynamic pressure at 11.2 km altitude. Throttle-down complete, throttling back up.</span>
<span class="tl5-gauge">Q=33<span class="tl5-bar" style="--g: 100%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T+02:42</span>
<span class="tl5-stat tl5-go">SEP</span>
<span class="tl5-msg"><strong>BECO & STAGE SEP</strong>Boost engine cutoff. Side cores separate cleanly. Upper stage MVac ignition confirmed.</span>
<span class="tl5-gauge">+147km<span class="tl5-bar" style="--g: 84%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T+08:34</span>
<span class="tl5-stat tl5-crit">CRIT</span>
<span class="tl5-msg"><strong>UPPER STAGE ANOMALY</strong>Telemetry dropout on FCC-2. Backup channel active. Crew safe; redundancy nominal but logged for review.</span>
<span class="tl5-gauge">REDX<span class="tl5-bar tl5-bar-crit" style="--g: 65%"></span></span>
</div>
<div class="tl5-event">
<span class="tl5-tmin">T+12:18</span>
<span class="tl5-stat tl5-go">ORB</span>
<span class="tl5-msg"><strong>ORBITAL INSERTION</strong>Parking orbit confirmed: 185 × 192 km @ 28.5°. TLI burn scheduled for T+02:14:00.</span>
<span class="tl5-gauge">ORBIT✓<span class="tl5-bar" style="--g: 100%"></span></span>
</div>
</div>
<div class="tl5-status-bar">
<div class="tl5-item">ALT<span class="tl5-v">187km</span></div>
<div class="tl5-item">VEL<span class="tl5-v">7.79km/s</span></div>
<div class="tl5-item">DOWNRANGE<span class="tl5-v">2,140km</span></div>
<div class="tl5-item">ΔV LEFT<span class="tl5-v">3,148m/s</span></div>
<div class="tl5-item">SIGNAL<span class="tl5-v">−104dBm</span></div>
<div class="tl5-item">CREW<span class="tl5-v">N/A</span></div>
</div>
</section> .tl5-wrap {
background: #000;
color: #00ff88;
font-family: 'JetBrains Mono', ui-monospace, monospace;
padding: 2rem;
position: relative;
overflow: hidden;
}
.tl5-wrap::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(0,255,136,0.06), transparent 60%),
repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,136,0.02) 2px 3px);
pointer-events: none;
z-index: 1;
}
.tl5-wrap > * { position: relative; z-index: 2; }
.tl5-head {
margin-bottom: 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.25rem;
border-bottom: 1px solid #006633;
padding-bottom: 1.25rem;
}
.tl5-title {
font-family: 'Major Mono Display', 'JetBrains Mono', ui-monospace, monospace;
font-size: clamp(1.25rem, 3vw, 2rem);
color: #00ff88;
line-height: 1;
text-shadow: 0 0 12px rgba(0,255,136,0.5);
letter-spacing: -0.02em;
margin: 0;
}
.tl5-sub {
display: block;
font-size: 0.5em;
color: #ffaa00;
margin-top: 0.5rem;
text-shadow: 0 0 8px rgba(255,170,0,0.5);
}
.tl5-telemetry {
font-size: 10.5px;
line-height: 1.7;
color: #00cc6a;
}
.tl5-row {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #003322;
padding: 2px 0;
}
.tl5-row span:last-child { color: #00ff88; }
.tl5-countdown { text-align: right; }
.tl5-cd-label {
font-size: 10px;
letter-spacing: 0.3em;
color: #ffaa00;
}
.tl5-clock {
font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
font-size: 3rem;
line-height: 1;
color: #ff3355;
text-shadow: 0 0 14px rgba(255,51,85,0.7);
margin-top: 0.25rem;
}
.tl5-blink { animation: tl5-blink 1s steps(2) infinite; }
@keyframes tl5-blink { 50% { opacity: 0; } }
.tl5-log {
border: 1px solid #006633;
background: rgba(0,20,12,0.6);
}
.tl5-log-head {
display: grid;
grid-template-columns: 90px 60px 1fr 80px;
gap: 1rem;
padding: 0.6rem 1.25rem;
background: #003322;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #00cc6a;
border-bottom: 1px solid #006633;
}
.tl5-event {
display: grid;
grid-template-columns: 90px 60px 1fr 80px;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px dashed #003322;
align-items: center;
transition: background 0.2s;
cursor: pointer;
}
.tl5-event:hover { background: rgba(0,255,136,0.06); }
.tl5-tmin { font-size: 13px; color: #ffaa00; font-weight: 700; }
.tl5-stat {
font-size: 9.5px;
letter-spacing: 0.15em;
text-align: center;
padding: 2px 6px;
border: 1px solid;
}
.tl5-stat.tl5-go { color: #00ff88; border-color: #00ff88; }
.tl5-stat.tl5-hold { color: #ffaa00; border-color: #ffaa00; }
.tl5-stat.tl5-nom { color: #00cc6a; border-color: #00cc6a; }
.tl5-stat.tl5-crit {
color: #ff3355;
border-color: #ff3355;
animation: tl5-blink 0.8s infinite;
}
.tl5-msg { font-size: 12px; color: #d4ffe8; line-height: 1.4; }
.tl5-msg strong { color: #00ff88; display: inline-block; margin-right: 0.5rem; }
.tl5-gauge {
font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
color: #00cc6a;
text-align: right;
}
.tl5-bar {
display: block;
height: 4px;
margin-top: 2px;
background: #003322;
position: relative;
}
.tl5-bar::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: var(--g, 50%);
background: #00ff88;
box-shadow: 0 0 6px #00ff88;
}
.tl5-bar-hold::after { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }
.tl5-bar-crit::after { background: #ff3355; box-shadow: 0 0 6px #ff3355; }
.tl5-status-bar {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid #006633;
font-size: 9.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.tl5-item {
padding: 0.5rem;
border: 1px solid #006633;
text-align: center;
}
.tl5-item .tl5-v {
display: block;
font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
font-size: 20px;
color: #00ff88;
margin-top: 2px;
text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
@media (max-width: 720px) {
.tl5-head, .tl5-log-head, .tl5-event { grid-template-columns: 1fr; gap: 0.5rem; }
.tl5-status-bar { grid-template-columns: repeat(3, 1fr); }
.tl5-countdown { text-align: left; }
}