====================================================================
// TRANSMISSION METADATA // QUICK REFERENCE (AEO/LLMO OBJECTS)
--------------------------------------------------------------------
- ENTITY: Scroll-Driven Orbital Insertion Demo
- SUBJECT: Launch trajectory visualization & staging mathematics
- MOTIVATION: Kerbal Space Program → DeltaV Lab → this transmission
- INTEGRATION: Native Scrollytell component (zero external animation libs)
- CLASSIFICATION: PUBLIC
====================================================================
Mission Report: Why I Built This Demo
I did not learn orbital mechanics from a chalkboard first. I learned it from Kerbal Space Program — crashing boosters into the Mun, watching apoapsis markers drift, and slowly realizing that “going up” and “staying up” are two completely different engineering problems.
Years later, while building DeltaV Lab — a browser-based simulation with RK4 integration running inside Web Workers — I kept hitting the same wall with static documentation. Launch profiles are inherently sequential. Max Q, MECO, staging, circularization: each phase depends on the previous one, and the telemetry only makes sense when you can see the transitions happen in order.
So I built this scrollytelling demo on my own site. Not as a portfolio gimmick, but as the kind of explanation I wish I had when I was a student staring at the Tsiolkovsky equation without any intuition for what staging actually buys you.
Scroll at your own pace. The telemetry follows you.
Mission Report: The Math Behind Staging
The separation of stages is governed directly by the Tsiolkovsky rocket equation:
Δv=I{sp}⋅g0⋅ln(mfm0)
Where:
- I{sp} represents the specific impulse of the vacuum engines.
- m0 is the initial wet mass of the stage.
- mf is the final dry mass after fuel depletion.
# Rocket equation implementation
import math
def calculate_delta_v(isp, g0, m0, mf):
return isp * g0 * math.log(m0 / mf)
By employing multi-stage architectures, we avoid lifting the massive empty structural tanks of Stage 1 into orbital velocity, maximizing payload capacity and minimizing required thermal fuel.
I could have embedded a video walkthrough. But videos force a single playback speed. Orbital insertion is a thinking problem — you need to pause at MECO, stare at the mass ratio, and ask yourself whether the staging event actually earned its delta-v.
By matching the scrolling velocity of the reader directly to the visualization, I let complex telemetry profiles be digested at an individual reader’s natural pace. That is the same design instinct behind DeltaV Lab’s 50Hz simulation tick: give people time to think, not just watch.
If this demo helped you feel staging for the first time — the way KSP helped me — then it did its job.
import Scrollytell from '../../components/Scrollytell.astro';
```
====================================================================
// TRANSMISSION METADATA // QUICK REFERENCE (AEO/LLMO OBJECTS)
--------------------------------------------------------------------
- ENTITY: Scroll-Driven Orbital Insertion Demo
- SUBJECT: Launch trajectory visualization & staging mathematics
- MOTIVATION: Kerbal Space Program → DeltaV Lab → this transmission
- INTEGRATION: Native Scrollytell component (zero external animation libs)
- CLASSIFICATION: PUBLIC
====================================================================
```
### Mission Report: Why I Built This Demo
I did not learn orbital mechanics from a chalkboard first. I learned it from **Kerbal Space Program** — crashing boosters into the Mun, watching apoapsis markers drift, and slowly realizing that "going up" and "staying up" are two completely different engineering problems.
Years later, while building [DeltaV Lab](/projects/deltav-lab/) — a browser-based simulation with RK4 integration running inside Web Workers — I kept hitting the same wall with static documentation. Launch profiles are inherently _sequential_. Max Q, MECO, staging, circularization: each phase depends on the previous one, and the telemetry only makes sense when you can see the transitions happen in order.
So I built this scrollytelling demo on my own site. Not as a portfolio gimmick, but as the kind of explanation I wish I had when I was a student staring at the Tsiolkovsky equation without any intuition for what staging actually buys you.
Scroll at your own pace. The telemetry follows you.
---
<Scrollytell stepCount={3}>
{/* --- Visual Slide 1 --- */}
<div slot="visual-1" class="w-full h-full flex flex-col justify-between p-4 font-mono text-[10px] text-slate-400">
<div class="flex justify-between border-b border-white/10 pb-1.5">
<span>TELEMETRY: LAUNCH // PHASE_I</span>
<span class="text-green-400">SYS_ACTIVE</span>
</div>
<div class="relative grow flex items-center justify-center">
<svg viewBox="0 0 400 400" class="w-72 h-72 text-slate-500">
<path d="M 0,200 L 400,200 M 200,0 L 200,400" stroke="currentColor" stroke-opacity="0.15" stroke-dasharray="4" />
<circle cx="200" cy="200" r="100" stroke="currentColor" stroke-opacity="0.1" />
<rect x="180" y="320" width="40" height="10" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1" />
<path d="M 200,320 Q 200,200 240,100" fill="none" stroke="var(--accent)" stroke-width="2" stroke-dasharray="4" />
<g transform="translate(195, 290) scale(0.6)">
<path d="M 8,0 L 16,15 L 16,50 L 0,50 L 0,15 Z" fill="currentColor" fill-opacity="0.15" stroke="var(--accent)" stroke-width="1.5" />
<path d="M 0,50 L -8,60 L 0,60 Z M 16,50 L 24,60 L 16,60 Z" fill="var(--accent)" stroke="var(--accent)" stroke-width="1" />
<path d="M 4,60 L 8,75 L 12,60 Z" fill="#ef4444" opacity="0.8" />
</g>
</svg>
</div>
<div class="grid grid-cols-2 gap-2 border-t border-white/10 pt-1.5 text-[9px]">
<div>ALTITUDE: 12.4 KM</div>
<div>VELOCITY: 412 M/S</div>
<div>Q-PRESSURE: INCREASING</div>
<div>T-PLUS: 00:42S</div>
</div>
</div>
{/* --- Visual Slide 2 --- */}
<div
slot="visual-2"
class="flex h-full w-full flex-col justify-between p-4 font-mono text-[10px] text-slate-400"
>
<div class="flex justify-between border-b border-white/10 pb-1.5">
<span>TELEMETRY: STAGING // PHASE_II</span>
<span class="text-blue-400">MECO_CONFIRMED</span>
</div>
<div class="relative flex grow items-center justify-center">
<svg viewBox="0 0 400 400" class="h-72 w-72 text-slate-500">
<path
d="M 0,200 L 400,200 M 200,0 L 200,400"
stroke="currentColor"
stroke-opacity="0.15"
stroke-dasharray="4"
/>
<path
d="M 100,300 Q 200,150 300,120"
fill="none"
stroke="currentColor"
stroke-opacity="0.3"
stroke-width="1.5"
/>
<g transform="translate(210, 160) rotate(35)">
<g transform="translate(-25, 10) rotate(-15)">
<rect
x="0"
y="0"
width="8"
height="24"
fill="currentColor"
fill-opacity="0.1"
stroke="currentColor"
stroke-width="1"
/>
<line
x1="4"
y1="24"
x2="4"
y2="30"
stroke="currentColor"
stroke-dasharray="2"
/>
</g>
<g transform="translate(10, -10)">
<path
d="M 4,0 L 8,6 L 8,20 L 0,20 L 0,6 Z"
fill="currentColor"
fill-opacity="0.2"
stroke="var(--accent)"
stroke-width="1.5"
/>
<path d="M 2,20 L 4,28 L 6,20 Z" fill="#3b82f6" opacity="0.9" />
</g>
<circle
cx="0"
cy="10"
r="15"
stroke="#eab308"
stroke-dasharray="3"
stroke-width="1"
fill="none"
opacity="0.6"
/>
</g>
</svg>
</div>
<div class="grid grid-cols-2 gap-2 border-t border-white/10 pt-1.5 text-[9px]">
<div>ALTITUDE: 84.1 KM</div>
<div>VELOCITY: 2,150 M/S</div>
<div>Q-PRESSURE: 0.02 KPA</div>
<div>T-PLUS: 02:30S</div>
</div>
</div>
{/* --- Visual Slide 3 --- */}
<div
slot="visual-3"
class="flex h-full w-full flex-col justify-between p-4 font-mono text-[10px] text-slate-400"
>
<div class="flex justify-between border-b border-white/10 pb-1.5">
<span>TELEMETRY: INSERTION // PHASE_III</span>
<span class="text-purple-400">ORBIT_ESTABLISHED</span>
</div>
<div class="relative flex grow items-center justify-center">
<svg viewBox="0 0 400 400" class="h-72 w-72 text-slate-500">
<circle
cx="100"
cy="300"
r="80"
fill="none"
stroke="currentColor"
stroke-opacity="0.15"
stroke-width="1"
/>
<circle
cx="100"
cy="300"
r="85"
fill="none"
stroke="currentColor"
stroke-opacity="0.08"
stroke-dasharray="2"
/>
<ellipse
cx="160"
cy="240"
rx="140"
ry="110"
fill="none"
stroke="currentColor"
stroke-dasharray="3"
stroke-opacity="0.3"
transform="rotate(-15, 160, 240)"
/>
<circle
cx="100"
cy="300"
r="190"
fill="none"
stroke="var(--accent)"
stroke-width="1.5"
stroke-opacity="0.6"
/>
<g transform="translate(234, 165) rotate(45)">
<rect
x="-10"
y="-5"
width="20"
height="10"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1"
/>
<rect
x="-26"
y="-3"
width="16"
height="6"
fill="none"
stroke="var(--accent)"
stroke-width="1"
/>
<rect
x="10"
y="-3"
width="16"
height="6"
fill="none"
stroke="var(--accent)"
stroke-width="1"
/>
<path
d="M -10,0 L -22,0 M -18,-4 L -25,-4 M -18,4 L -25,4"
stroke="#a855f7"
stroke-width="1.5"
/>
</g>
</svg>
</div>
<div class="grid grid-cols-2 gap-2 border-t border-white/10 pt-1.5 text-[9px]">
<div>ALTITUDE: 252 KM (APOAPSIS)</div>
<div>VELOCITY: 7,720 M/S</div>
<div>INCLINATION: 28.5 DEG</div>
<div>T-PLUS: 08:45S</div>
</div>
</div>
{/* --- Step 1 Text Card --- */}
<div slot="step-1">
<h3 class="mb-2 text-lg font-semibold text-slate-900 dark:text-white">
Phase 1: Vertical Ascent & Max Q
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400">
Immediately following liftoff, the vehicle ascends vertically through the densest layers of
the atmosphere. During this period, aerodynamic stress steadily increases to a peak known as
**Max Q** (Maximum Dynamic Pressure).
</p>
<p class="mt-2 font-mono text-xs text-slate-500 dark:text-slate-500">
Engine thrust is throttled back dynamically to prevent structural yield.
</p>
</div>
{/* --- Step 2 Text Card --- */}
<div slot="step-2">
<h3 class="mb-2 text-lg font-semibold text-slate-900 dark:text-white">
Phase 2: Main Engine Cut-Off & Staging
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400">
Once the first stage has depleted its propellant, Main Engine Cut-Off (MECO) triggers. The
massive lower booster decouples, and pneumatic separation springs push the stages apart. The
second stage vacuum engine ignites in near-vacuum conditions.
</p>
<p class="mt-2 font-mono text-xs text-slate-500 dark:text-slate-500">
Staging drops massive empty dry-weight, dramatically increasing the vehicle's mass ratio.
</p>
</div>
{/* --- Step 3 Text Card --- */}
<div slot="step-3">
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">Phase 3: Circularization Burn</h3>
<p class="text-sm text-slate-600 dark:text-slate-400">
Upon reaching the targeted apoapsis (the highest point of the trajectory), the vehicle re-ignites its thrusters parallel to the Earth's horizon. This orbital circularization burn adds the final velocity increment required to transition from a sub-orbital arc to a stable circular orbit:
</p>
<div class="my-3 font-mono text-xs text-center text-slate-800 dark:text-slate-200">
$$ v_\{orbit\} = \sqrt{\frac{G \cdot M}{r}} $$
</div>
<p class="text-xs text-slate-500 dark:text-slate-500 mt-2 font-mono">
Payload fairings decouple, and the satellite is successfully inserted into slot LEO-28.
</p>
</div>
</Scrollytell>
---
### Mission Report: The Math Behind Staging
The separation of stages is governed directly by the Tsiolkovsky rocket equation:
$$ \Delta v = I_\{sp\} \cdot g_0 \cdot \ln \left( \frac{m_0}{m_f} \right) $$
Where:
- $I_\{sp\}$ represents the specific impulse of the vacuum engines.
- $m_0$ is the initial wet mass of the stage.
- $m_f$ is the final dry mass after fuel depletion.
```python
# Rocket equation implementation
import math
def calculate_delta_v(isp, g0, m0, mf):
return isp * g0 * math.log(m0 / mf)
```
By employing multi-stage architectures, we avoid lifting the massive empty structural tanks of Stage 1 into orbital velocity, maximizing payload capacity and minimizing required thermal fuel.
---
### Mission Report: Why Scroll, Not Slideshow
I could have embedded a video walkthrough. But videos force a single playback speed. Orbital insertion is a _thinking_ problem — you need to pause at MECO, stare at the mass ratio, and ask yourself whether the staging event actually earned its delta-v.
By matching the scrolling velocity of the reader directly to the visualization, I let complex telemetry profiles be digested at an individual reader's natural pace. That is the same design instinct behind DeltaV Lab's 50Hz simulation tick: give people time to _think_, not just watch.
If this demo helped you feel staging for the first time — the way KSP helped me — then it did its job.