Chronos Visual Time: rescuing a timezone visualizer from the AI Studio pile
Rescuing a Vite + React timezone visualizer from the AI Studio export pile — the gap between a working app and a shipped repository.
Most AI Studio exports need surgery. Chronos needed a haircut.
Exported as a Vite + React timezone visualizer, it was one of the rare apps in the 54-project AI Studio pile that actually did something interesting without leaning on the Gemini API. Twenty world cities, each rendered as a card with a dynamic sky gradient, animated sun/moon arc, and poetic activity labels like "Awakening" and "Dreaming" — all driven by Intl.DateTimeFormat fractional day math.
The rescue was straightforward: strip the dead define block, migrate Tailwind from CDN to npm, kill the importmap scaffold. But shipping it properly took two passes. The first attempt left a bloated GIF, a generic package name, and dead shadcn dependencies nobody imported. The second pass — triggered by the visceral reaction of opening the repo and seeing poor media — became a lesson in what "shipped" actually means. Three Playwright capture rounds to nail the framing. A research subagent audit to catch every last scaffold ghost. And a /learn session that crystallized screenshot capture rules still in use today.
The codebase is 340 lines across 4 files. The real work was the pipeline, not the code.
Timeline
Ran recon on a Chronos timezone visualizer exported from AI Studio and found something rare: an app that's actually good. No Gemini API dependency despite being born in AI Studio. No backend. Just 302 lines of React, 20 hardcoded world cities, and a SkyVisualizer component that maps Intl.DateTimeFormat fractional day values to gradient sky backgrounds, twinkling star fields, and a sun/moon orbiting on a dashed SVG arc. The initial cleanup was trivial — strip one dead define block from vite.config.ts, kill the importmap, migrate Tailwind from CDN to npm. Two sibling repos exist (ais-chronos-visual-time and ais-remix-chronos-visual-time) because the first recon predated the fleet pipeline. The remix is the canonical version.
Looked at the repo after the first rescue pass and got hit with terrible screenshots and leftover cruft. The GIF was 1.4 MB of blurry captures, the package was still named react-example, and dead scaffold files survived the cleanup. So I called a do-over — spawned a research subagent to audit every file, stripped the package name, removed class-variance-authority and other shadcn ghosts that were never imported, recaptured all media via Playwright headless at proper viewport sizes, and added a filtered-state screenshot showing the continent nav. Three Playwright capture passes to get the framing right — the first two had crop issues. The /learn at the end of this session is what eventually became the WebGL capture rules in my global config. Sometimes shipping means shipping twice.