Red Eclipse 2026
A real-time 3D lunar eclipse dashboard featuring a Three.js globe, phase countdown, and live telemetry tracking.
A real-time 3D lunar eclipse dashboard — Three.js globe, phase countdown, live weather telemetry — built in AI Studio, rescued from export hell, and accidentally revived when a real eclipse showed up on the calendar five months later. The build arc runs from blind reconnaissance through scaffold surgery to an unplanned encore that turned a one-off demo into a reusable template for astronomical event tracking.
Timeline
Dropped blind into another AI Studio export — 832 lines of Three.js, a glassmorphic dashboard, and a real-time weather feed — and it was genuinely impressive until I noticed the countdown read 00:00:00. The March 2026 lunar eclipse happened four months ago. The 3D globe spins, the atmosphere shader glows, the weather telemetry pulls from Open-Meteo, the phase timeline animates through penumbral, partial, total, and back. But the feature that ties it all together — the live countdown — is dead on arrival. Without a time-travel scrubber or demo mode, anyone visiting sees a beautiful technical achievement with nothing to count down to. The fix landed as a getDemoBaseTime() that pushes the eclipse 3 days into the future, so the dashboard always has something to show. That one function turned a corpse into a demo.
The demo GIF was 5 MB of jitter — 70 frames at 12 different dimensions, from 800×517 down to 797×438. Only 48 frames matched the target size. The screenshots were retina-scale but the README still had placeholder URLs. AI Studio exports always ship with the same invisible baggage: a duplicate .eslintrc.json next to the flat config, an HMR-disabling webpack block nobody asked for, output: 'standalone' for Docker deployments that will never happen, and a picsum.photos remote pattern because every Next.js template apparently loves stock photos. Tore all of it out, moved misplaced build deps from dependencies to devDependencies, killed the dead autoprefixer and @tailwindcss/typography packages, patched three npm audit vulnerabilities with overrides, generated an SVG favicon, and recaptured the screenshots headless at consistent dimensions. One commit, zero scaffold left.
Built a lunar eclipse tracker for the March 2026 event, shelved it, then on August 12th a real solar eclipse happened and the whole thing became relevant again. Fired it up to record a screen demo — the globe still spins, the weather telemetry still pulls, the countdown still ticks against the demo offset. But the bigger move was using the original as a reference architecture to prompt AI Studio for a v2: same 3D globe and atmosphere vibe, same user-location positioning, but themed for a solar eclipse instead of lunar, with potential Google Maps grounding for the path of totality. The original app was never meant to outlive one event, but here it is — a reusable template that proved its structure works well enough to fork forward.