Skip to content
Back to Transmissions
// DATE
// AUTHOR
DHAATRIK
// CLEARANCE
PUBLIC
// INTERACTION

DeltaV Lab Scrollytelling Demo — Orbital Insertion Walkthrough

DeltaV Lab 
====================================================================
// TRANSMISSION METADATA // QUICK REFERENCE (AEO/LLMO OBJECTS)
--------------------------------------------------------------------
- ENTITY: Scrollytell component demo (DeltaV Lab launch profile)
- COMPONENT: src/components/Scrollytell.astro (IntersectionObserver)
- STEPS: 4 (visual-1..4 + step-1..4 slots)
- CONTEXT: DeltaV Lab 50Hz sim — telemetry fields mirror flight computer DSL
- PURPOSE: Show scroll-driven storytelling on dhaatrik.github.io
====================================================================

Mission Report: What This Transmission Is

SYS.STATUS: SCROLLYTELL_DEMO // CLEARANCE: PUBLIC

This is not a generic orbital mechanics essay. It is a working demo of the Scrollytell component I ship on this site — sticky telemetry on the left (desktop), scrollable step cards on the right, layers swap as you scroll.

I built it while working on DeltaV Lab because launch profiles are sequential. Max Q, MECO, staging, circularization — each phase only makes sense after the last one. Static prose cannot pace that story. A video forces one playback speed. Scrolling lets you stare at MECO until the mass-ratio intuition clicks.

The telemetry panels below are simplified teaching graphics, not live sim output. For the real integrator story, read the science transmission. For honest limits, read why it is not professional-grade.

How to use this demo: scroll slowly. Watch the sticky panel change when each step card hits the center of your viewport. That handoff is the whole feature.

Mission Report: How Scrollytell Works (For Authors)

If you want to build one of these on this site, the API is intentionally small:

Prop / slotPurpose
stepCount={4}Number of scroll steps (max 6 in the component today)
id="optional-id"Custom container id for multiple dossiers on one page
slot="visual-N"Sticky panel content for step N (SVG, HUD, image)
slot="step-N"Scroll card prose for step N

Under the hood, Scrollytell.astro uses an IntersectionObserver with rootMargin: '-30% 0px -40% 0px' so the active step is whichever card sits in the middle third of the viewport. Active classes fade visual layers and highlight the current card — no animation libraries, vanilla JS, re-inits on astro:page-load for view transitions.

The block below is the live instance. Four steps, four visual slots, one launch narrative tied to DeltaV Lab’s flight vocabulary.

TELEMETRY: PAD // T-0CHECKLIST: GO
ALTITUDE: 0 M
VELOCITY: 0 M/S
WIND: 8 M/S (LIMIT 15)
T-PLUS: 00:00S
TELEMETRY: ASCENT // MAX-QTHROTTLE: 72%
ALTITUDE: 11.2 KM
VELOCITY: 445 M/S
DYNAMIC_PRESSURE: 34 KPA
T-PLUS: 00:58S
TELEMETRY: STAGING // MECOSTAGE_SEP
ALTITUDE: 84 KM
VELOCITY: 2,180 M/S
FUEL (S1): 4%
T-PLUS: 02:34S
TELEMETRY: INSERTION // ORBITAPOAPSIS: MET
ALTITUDE: 251 KM (APOGEE)
VELOCITY: 7,710 M/S
INCLINATION: 28.5°
T-PLUS: 08:52S

Step 1 — Pad, Checklist, Liftoff

In DeltaV Lab, you arm the stack in the VAB, run the pre-launch checklist (C), and ignite with SPACE. The sim’s environment module checks surface wind against a Go/No-Go limit — same idea as real range weather, just simplified.

Flight computer DSL can wait for altitude: WHEN ALTITUDE > 1000 THEN PITCH 80

Step 2 — Gravity Turn & Max Q

Dynamic pressure peaks when atmosphere is still thick and velocity is climbing. DeltaV Lab exposes DYNAMIC_PRESSURE as a flight-computer variable — the worker integrates drag from q=12ρv2q = \frac{1}{2}\rho v^2 at 50 Hz, not a cinematic throttle hack.

This is where I throttle back in the sim before pitching harder — structure matters.

Step 3 — MECO & Staging

Main Engine Cut-Off (X in the sim) or fuel depletion ends the booster burn. SPACE stages; the worker spawns separated entities with configured separation velocity — booster tumbles away, upper stage ignites. Map view (M) is where you see apoapsis start to matter.

Staging is a mass-ratio event. The rocket equation is about to matter.

Step 4 — Circularization at Apoapsis

Coast to apoapsis, burn prograde, circularize. DeltaV Lab reads APOGEE from the integrator — if you are 200 m/s short, you get an ellipse, not a success banner. Export CSV (E) and open analysis.html if you want the post-flight plot.

vorbit=G⋅Mrv_{\mathrm{orbit}} = \sqrt{\frac{G \cdot M}{r}}

Circular LEO at ~251 km — teaching profile, not Falcon 9 replay data.

Mission Report: The Math Behind Staging

The Tsiolkovsky rocket equation is the contract every staging event must respect:

Δv=Isp⋅g0⋅ln⁡(m0mf)\Delta v = I_{sp} \cdot g_0 \cdot \ln \left( \frac{m_0}{m_f} \right)

Where:

  • IspI_{sp} is specific impulse (seconds) — DeltaV Lab uses separate sea-level and vacuum values per engine.
  • m0m_0 is wet mass before the burn; mfm_f is mass after propellant depletion.
  • Each stage drops dry mass you no longer need to accelerate — that is why asparagus staging memes exist, and why KSP taught us the intuition before the integral did.
# Same math the VAB uses for Δv budgeting
import math

def calculate_delta_v(isp, g0, m0, mf):
    return isp * g0 * math.log(m0 / mf)

Run the numbers, then run the sim. If the plot disagrees with your spreadsheet, the integrator is telling you something your hand-wave missed.

Mission Report: Why I Chose Scroll Over Video

Videos pick one pace. Orbital insertion is a thinking problem — pause at MECO, check fuel percent, ask whether staging earned its Δv. Scrollytell exists so you control that pace while the sticky telemetry stays in view.

That is the same instinct behind DeltaV Lab’s 50 Hz worker tick and black-box recorder: give people time to inspect, not just watch a pretty flame.

FormatPaceBest for
VideoFixed FPSHype reels
Static articleInstant jumpReference
ScrollytellReader-controlledSequential physics stories

Mission Report: Fuckups & Learnings

  • First draft was only three steps. Fine for a blog post, weak as a component demo. Four steps show multi-layer handoff without exhausting readers.
  • I almost faked telemetry. These HUD numbers are illustrative; the sim’s SharedArrayBuffer fields are real but uglier. Label the difference or you lie by accident.
  • Mobile stacks vertically. The sticky panel becomes in-flow above each card — test on a phone before you ship your own dossier.

Closing Transmission

Scroll back up and run through the dossier again. Watch when the active card border lights up — that is IntersectionObserver doing the only job that matters.

Want the full DeltaV Lab arc? Why it exists → science → limitations → clone the repo and fly it yourself.

If you build your own Scrollytell story, copy the slot pattern from this file’s source. Keep the dull truth in the telemetry labels.

← PREVIOUS IN SERIES DeltaV Lab Flight Computer — Teaching Autopilot Without Faking Physics
NEXT IN SERIES → What Is Next for DeltaV Lab — A Roadmap to Professional-Grade Launch Simulation