A 10-minute speech-to-text build on the way to a soccer game
Outcome
Prompted entirely by voice on the highway. Shipped in 10 minutes with zero external dependencies so my son could keep solving.
- 10-minute road trip build
- Voice-prompted on the highway
- 20+ flags with step-by-step solver
My son and I were on an hour-and-a-half drive to an away soccer game, and he had a Rubik’s cube in the passenger seat. We started challenging each other to make national flags out of the cube - scrambling faces to see if we could get the red circle on white for Japan, or horizontal stripes for Germany and Colombia.
About 40 minutes into the drive, we ran out of flags we could pull from memory.
Instead of waiting until we got home, I opened Antigravity on my phone and used speech-to-text to dictate what we needed: a 3D interactive cube that maps out flag patterns, walks you through the moves step by step, and runs right in the browser.
Ten minutes later, the app was live. He pulled it up on his phone and spent the rest of the drive riffing on new countries and turning the physical cube in his hands.
Why the Architecture Matters on the Road
When you’re building an app from the front seat of a car over a spotty cellular connection, bloated tech choices fall apart fast. A few decisions made this actually work in real life:
1. Pure CSS 3D (No Heavyweight Engine)
Loading Three.js or Babylon.js would have meant waiting on massive JS bundles to download over roadside cell towers. Instead, the cube is rendered using pure CSS 3D matrix transforms (preserve-3d and Euler angles). It weighs under 50KB and runs at a buttery 60 FPS without breaking a sweat.
2. Synthesized Web Audio
Instead of shipping MP3 audio files for the tactile clicks and completion chimes, the app synthesizes every sound in real time using the browser’s native AudioContext. Zero audio asset downloads, instantaneous feedback.
3. Move-by-Move Directions for Real Hands
Standard Rubik’s cube notation (M', E, R2) makes sense to seasoned speedcubers, but an 11-year-old holding a physical plastic cube in a moving car needs plain-English directions. The app translates algorithmic notation into simple spatial cues: which face to hold forward, which direction to turn, and an animated 3D preview of what the cube should look like after each twist.
4. Six Flags on One Cube
Once the basic flags worked, we started testing whether a single cube could display different flags on all six sides simultaneously (like Japan on top, Colombia in front, and Palau on the bottom). The app includes these combo patterns for when you want to take the challenge up a notch.
Live Links
- Interactive 3D Studio:
/rubiks-flags - Standalone Version:
/apps/rubiks-flags/index.html - Interactive Exhibit:
/betaland#district-01