GitHub - jonwheatley/pixel-path: Turn any two places into a pixel-art fly-through of the real road. A Claude Code skill.

Open the original

Short summary

Pixel Path is a Claude Code skill that generates interactive pixel-art first-person fly-throughs of actual roads between any two locations, pulling real building footprints, elevation, and landmarks from OpenStreetMap data and generating scenery with AI. You ask Claude for a route, it bakes the visuals, and you get a scrollable webpage where you fly down the real road at variable speeds.

  • The tool uses real map data (OpenStreetMap, elevation grids, Wikidata landmarks) to construct accurate 3D geometry, then generates pixel-art visuals through RetroDiffusion at $0.18 per image, with costs ranging from $0 (code-drawn placeholders) to $11.16 for detailed multi-region routes.
  • It includes an automated quality-control pipeline: screenshots validate every frame for sky leaks and building solidity, cleanup removes corrupted images, and Claude reviews the worst frames to flag problems before delivery.
  • The output is a static HTML page with minimal UI—scroll to control speed, arrow keys to navigate, I for position and M for map—making it usable as game level geometry, video content, travel documentation, or interactive historical navigation.

Full summary

Pixel Path is a Claude Code skill that generates first-person pixel-art fly-throughs of real roads. You ask Claude for a route—say, Bath to Bristol—and it pulls actual building footprints, elevation data, and landmarks from OpenStreetMap, generates pixel art for the scenery using RetroDiffusion, then outputs an interactive HTML page where you scroll to speed up, slow down, or reverse through the route. The buildings sit on their real lines with accurate heights, the ground cover (fields, water, parking) comes from the map, and the horizon accounts for Earth's curvature across a 61 × 61 km height grid. Signs are drawn by code so street names and distances are exact. The tool costs nothing for placeholder art but charges $0.18 per picture from RetroDiffusion for real generations. A sparse route (4 pictures per region) runs $0.72 for one region; moderate (14 pictures plus landmarks) costs $3.24 for one region or $5.76 for two. The Bath-to-Bristol example at moderate quality used 32 pictures across two regions for $5.76. You can budget an extra 25% for re-rolls since some pictures come back cut off or with unwanted backgrounds, but the skill's self-check catches these and regenerates them within the quote. Setup requires Node 18+, a RetroDiffusion API key, and optional Playwright for screenshot validation. The real work happens in the baking phase: routing through OSRM, pulling elevation from AWS Terrain Tiles, fetching landmarks from Wikidata, and generating art. The skill runs multiple quality checks before declaring a route done—every building gets a shaded end wall so it reads solid, gaps under 3 meters are closed, and a "sweep" test moves the camera every 75 meters checking for sky bleeding through or between buildings. If problems appear, Claude reviews the worst frames and keeps fixing until they're clean. The whole process takes 20 to 60 seconds per 10 km. All data sources are credited properly: OpenStreetMap contributors, OSRM, Nominatim, Mapzen terrain tiles, and Wikidata.

Ask about this article