Code waterfall countdown — 90 minutes from export to gallery
A code-waterfall countdown to Google I/O — from raw AI Studio export to shipped repository in a single evening session.
An AI Studio export — two glowing code-waterfall pillars forming the number "11" with spring-physics cursor trails and a cycling plasma background — goes from a 309-dependency raw export to a gallery-ready GitHub repo in a single evening session.
The build moved through three phases. First: triage. The app ran on first try but carried dead weight — four unused dependencies, generic metadata, a countdown timer showing 00:00:00:00 because Google I/O had already happened. Stripped it down to 157 packages, froze the timer at Day 11, and discovered the real problem only by looking at the browser: the heading's serif font was falling back to Times New Roman.
Second: a dense visual sweep. Seven fixes in one pass — tightened the pillar gap so "11" reads as a number instead of "1 1", added serif feet to complete the letterform, loaded Playfair Display for the heading, staggered the entrance animations into a cinematic cascade, elevated the SVG accent paths from invisible to contributing, and made the plasma background breathe.
Third: ship. Git init, commit, push, demo GIF. Two commits. First message at 22:40, done by 00:05. The kind of project that reminds you most of the work is knowing what to cut.
Latest Update
One night, two commits, shipped
Sat, Aug 1, 2026
Timeline
Opened an AI Studio export and it ran on the first try. 309 packages, zero errors, dev server up in 521ms. The app is two glowing capsule pillars filled with scrolling code forming the number "11" — a countdown to Google I/O 2026 with spring-physics cursor trails and a cycling plasma background. Visually striking out of the box. Dead simple under the hood: 329 lines in a single React component, no API keys, no backend, no state management. Just animation.
The surgery was cosmetic. Stripped express, @google/genai, dotenv, lucide-react — all template residue, never imported. 309 packages became 157. Typed the any prop. Froze the timer at 11:00:00:00 since the event already happened — this is Day 11's build, the timer says Day 11. Swapped the generic subtitle for // the code was counting too.
Then I asked what else needed work and looked at the actual browser. The heading said "11 Days" in italic serif — and the serif was Times New Roman. We loaded Inter for the body but never loaded a display serif. The most prominent text on the page was using a system fallback nobody chose. Everything after that fix — Playfair Display, the pillar gap, the entrance animations — traces back to actually looking at what the browser rendered instead of what the code said.
The number "11" was reading as "1 1". gap-16 md:gap-24 — four to six rems between the pillars. Two separate capsules floating on a dark background, not two digits of the same number. Tightened to gap-6 md:gap-10 and the composition snapped into focus. But the gap was one of seven things wrong.
The pillars had no feet. A numeral "1" has a serif beak at the top (we had that) and a horizontal foot at the bottom (we didn't). Added a glowing base bar at the bottom of each pillar — gradient-fading at the edges, brightening on hover. Now it reads as a serif "1" instead of a thermometer. Killed the pl-8 md:pl-12 centering hack that was pushing everything right. Staggered the entrance: pillars rise first (0.1s, 0.25s), then heading (0.6s), subtitle (1.0s), timer (1.3s) — cinematic cascade instead of everything appearing at once. Elevated the SVG accent paths from 2 invisible wisps to 4 animated dashed paths in Google's brand colors with staggered delays. Made the plasma breathe — opacity oscillating 30→50% instead of sitting flat at 40%.
Seven changes, one pass. The user's response: "well done, let's do all of them." Sometimes the best iteration is a single dense sweep after you've actually looked at the thing.
First user message at 22:40, last at 00:05, two git commits, live on GitHub. The whole arc — AI Studio export to gallery-ready repo — in 90 minutes on a weeknight. No prior git history. No CI pipeline. Just init, stage, commit, create-repo, push.
The demo GIF was the wrinkle. MCP screencast hit workspace root restrictions, so it fell back to ffmpeg -f avfoundation to capture the screen, trimmed the frames, assembled a 4.3MB GIF at 720px wide and 10fps showing the code waterfall scrolling and the plasma aura breathing. The README leads with the GIF, then the static screenshot, then a four-command quick start. Before: 309 packages, Times New Roman, dead timer. After: 157 packages, Playfair Display, frozen at Day 11, spring-physics cursor trail, staggered entrance, breathing plasma, serif feet on the pillars. Apache 2.0. Done.