Route Pix: Idea Week one-shot entry

Route Pix

One prompt. A KidPix-style route planner with real RWGPS routing, sound on everything, and a game.

🔨 Built by Brian in 1 shot.

i want to build a version of our route planner on the web using elements from KidPix software - please make this fuckin legit and as much sound effects, fun things to do, and tools as possible. Brian, Tue Oct 27, typed into Claude Code in the rwgps-ui repo
Route Pix with a purple road-snapped route shaped like a heart, a giant heart stamp, sparkles and the elevation strip
Scribble a heart, it snaps to real Portland roads.
<1 hrprompt to draft PR
4,543lines added, 15 files
0"please fix this" prompts
0audio or image files

Everything Brian typed

  1. BrianThe prompt above. That's the build request, start to finish.
  2. ClaudeAsked three setup questions: where should it live, want a minigame, and run the Impeccable design skill first?
  3. Brianrwgps-ui but it doesnt need translations, etc - this is internal and can skip most of our checks - lets just yolo it, then Yes, add it and Yes, run Impeccable.
  4. ClaudeBuilt the whole thing, tested it in a headless browser, found and fixed its own bugs, and handed over a working link.
  5. Briansubmit to PR and we will continue to iterate
  6. Briani made an experiment kid_pix gate it behind that, then 3 (a Route Pix button on the planner map).
  7. Brianthats it this is a oneshot

Nothing after the prompt asked for a fix. The follow-ups were packaging: open a PR, put it behind an experiment, add a way in.

What came out

A 13.7 mile route scribbled in one stroke and snapped to roads, a goose stamp, rainbow and sparkle paint, and the letters HI
One scribble became a 13.7 mile road route. Paint, stamps and talking letters ride on top.
Go! minigame: a pixel rider on the route in night mode with a score and three hearts
Go! A pixel rider rides your route. Hop the cows and geese.
Wipeout results card with score, sick hops, snacks and a blinking new high score
Three crashes and you're out. High scores stick.
The map run through a wobbly posterized crayon filter
Wacky mixer: Crayon World redraws the real map in crayon.
Dynamite clear: tiles of the route and a cow flying off the map
Dynamite blows the canvas into flying tiles. Undo brings it back.
Stamp palette with 14 pixel stamps and a giant cow on the map
14 hand-drawn pixel stamps, each with its own synthesized sound.
Route Pix at phone width with tools in a row and stamps below
It even works on a phone.

The toolbox

  • Route pencilClicks snap to roads with the same GH11 router as the real planner.
  • Scribble snapDraw any shape, get a rideable route.
  • 6 paint brushesCrayon, spray can, rainbow, bubbles, tire tracks, sparkles.
  • 14 stampsCow moos, goose honks, dog barks, pothole thunks.
  • Talking lettersThe browser says each letter as you stamp it.
  • Eraser + black holeRub things out or slurp them into a spiral.
  • Wacky mixerCrayon World, Pop Art, Night Ride, Rainbow Road, Party Mode, Swoop 3D, Spin, Earthquake, Melt.
  • 3 ways to clearDynamite, down the drain, dissolve. All undoable.
  • Undo buddyA pixel rider in a helmet who heckles you.
  • Real statsMiles, feet climbed, elevation strip and "cupcakes earned".
  • Go! minigameHop hazards, grab snacks, stamp dares ahead of yourself.
  • Save + GPXSaves a private RWGPS route or downloads GPX with stamps as waypoints.

How one prompt got that far

It didn't fake the planner. Before writing code, Claude read how the real planner routes, fetches elevation, saves routes and mounts its map, then reused those exact pieces. Everything else it made from scratch: pixel art written as text grids, every sound built live in WebAudio, a canvas draw loop for paint, stamps and the game.

Then it tested itself. It drove headless Chrome against ridewithgps.com with the local build, took about 20 screenshots, and fixed what it found without being asked:

  • Pressing 3 did nothing. The hidden regular planner underneath was eating the key, so Route Pix now catches keys first.
  • Party Mode's disco colors wiped out Crayon World. The two effects now stack.
  • In letter mode, number keys typed digits instead of switching tools.
  • The phone layout squeezed the map to a sliver, so the phone layout was redone.
  • React Compiler flagged three spots, so it fixed two and opted the canvas toy out on purpose.

Minigame: Beat the One-Shot

You get ONE click. Drop the stamp on the flag as it rides the route.

Try it

Route Pix isn't merged, so these links load it from the PR's build and switch on the kid_pix experiment for you. Turn your sound on.

Play with Route Pix now (PR build) Open the regular planner with the Route Pix button (PR build)

Works on desktop best. The links are pinned to the PR build at commit 6a2a3a1, and the build goes away if the PR closes.