Artemis Velocity Vis
Rescuing an AI Studio export that visualizes Artemis II re-entry speed on a real map — from broken camera tracking and flat-earth math to a clean open-source repo with geodesic arcs.
Started with a zip file from Google AI Studio and no context. The recon pass revealed a spacecraft speed visualizer — Artemis II at 24,500 mph mapped onto familiar Earth geography — built on Next.js 15, React 19, and Leaflet. Clean concept, broken execution: the map camera wouldn't follow the spacecraft, trajectories used flat-earth linear interpolation instead of great-circle arcs, and the dependency tree was bloated with Gemini SDK packages the app never imported.
The fix sequence was satisfying in its economy. One line of JSX to render a component that already existed but was never mounted. Fifteen lines of spherical interpolation math to replace linear lerp — same Haversine-family trig, no new dependencies. Then a cleanup pass that ripped out every AI Studio artifact and pruned 659 packages.
The project became the template for a larger effort: rescuing ~60 AI Studio exports for GitHub. The patterns it surfaced — dead @google/genai imports, Tailwind CDN migration, screenshot capture methodology, README structure — got codified into reusable rules and skills via /learn. First patient, first set of surgical notes.
Timeline
Dropped into an AI Studio export blind — no docs, no brief, just a zip file and full autonomy to figure out what this thing is. Turned out to be a spacecraft speed visualizer: Artemis II re-entry at 24,500 mph mapped onto familiar geography. NYC to SF in six minutes. The concept is visceral and immediate — you don't need an explanation. Under the hood: Next.js 15, React 19, Leaflet with CARTO light tiles, and a requestAnimationFrame animation loop with delta-time physics. Six source files, ~400 lines of real code, zero backend. The e-ink aesthetic — black-on-white, thick borders, monospace numerals — looks like a mission control readout printed on paper. Found three bugs before touching anything: MapUpdater defined but never rendered (camera frozen), linear lat/lon interpolation instead of great-circle (London→Tokyo goes through the earth), and five dead dependencies including @google/genai that was never imported. The app has zero AI in it. Also found 31 npm audit vulnerabilities, all from firebase-tools — a dev dependency that serves no purpose here.
The cleanup pass already happened — import maps removed, Tailwind migrated from CDN to npm, API keys moved to env vars — and the app still wouldn't do what it was supposed to do. Camera frozen on the initial map bounds while the spacecraft marker flies off-screen. Linear interpolation drawing straight Mercator lines instead of great-circle arcs. Five dead packages adding 1,100 transitive dependencies for features that don't exist. Got it booting with npm install and next build clean on the first try, but "compiles without errors" and "works correctly" are two different things. The AI Studio initial cleanup is necessary scaffolding, but the real work starts after: reading the actual code, understanding the intended experience, and finding the gap between what ships and what should ship.
The most impactful fix was literally one line of JSX: <MapUpdater currentPos={currentPos} />. The component existed — 7 lines of perfectly written React using Leaflet's useMap hook to pan the camera — it just wasn't rendered inside <MapContainer>. One missing child element, and the entire core experience was broken. The geodesic fix was more satisfying: replaced linear lat/lon interpolation with proper spherical intermediate point math — same Haversine-family trig, no external dependencies, ~15 lines. Added a geodesicArc() helper that samples 100 points along the great-circle so the dashed route line actually curves correctly on the map. Then the fun part: ripping out every trace of Gemini. Deleted @google/genai, firebase-tools, .env.example, metadata.json, the AI Studio audit report. Cleaned next.config.ts of the DISABLE_HMR webpack hack. Wrote a real README with screenshots, init'd a repo, pushed to GitHub. 659 packages pruned. Zero vulnerabilities remaining. The app was always a pure client-side visualization — it just took three conversations to get it there.
First AI Studio rescue done, fifty-nine to go, and the meta-lesson is already clear: the export pipeline produces code that compiles but doesn't work, and the fix patterns repeat. Every export has dead @google/genai imports, Tailwind CDN scripts that need migrating, DISABLE_HMR webpack hacks, and a README that says "My Google AI Studio App." The initial cleanup handles the mechanical stuff. But the real value is in the second pass — reading the actual code, finding the bug that makes the experience broken, and deciding what stays and what gets ripped out. This project also surfaced the screenshot problem: macOS screencapture grabs the whole desktop including IDE windows, and Playwright headless can't render Leaflet tiles. The /learn pass after this project produced three reusable rules: screenshot methodology for web apps, README structure for open-source repos, and dead dependency auditing. Templates built from the first project will save hours across the next sixty.