Skip to content

Pixel Path

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

Install

$/plugin marketplace add jonwheatley/pixel-path

Install command taken from the project's README or registry entry. Always review code before running it.

Pixel Path

A Claude Code skill that turns any two places into a pixel-art fly-through of the real road. Ask Claude for "a pixel path from Bath to Bristol" and it:

  • routes the trip
  • bakes the real buildings, land cover, landmarks, hills and horizon along it from OpenStreetMap and elevation data
  • generates scenery art for the region with RetroDiffusion (affiliate link)
  • checks its own work with screenshots
  • hands you a page where you zoom along the route. Scroll to go faster, slower or backwards.

Bath, England: real streets from OpenStreetMap, art generated with the moderate kit.

What it is for

A first-person, pixel-art view of any real road, built from the real map. Useful wherever you want a real place or route on screen:

  • Games: a real road as a level for a driving, racing, idle or endless-runner game, instead of a made-up one.
  • Showing a journey: a commute, a delivery round, a marathon or cycling stage, a road trip you took, a move between cities.
  • Content: trip recaps, travel posts, video intros, stream backgrounds and lo-fi loops.
  • Places and history: Route 66, a pilgrimage route, the road in a news story, a preview of a neighbourhood.
  • Learning: a commented pseudo-3D renderer and an OpenStreetMap bake pipeline to read or build on.

What you get

A folder with an index.html. Open it through any static web server and you are moving down the real road:

  • Buildings on their real footprints. Every building that faces the road is a block on its real line, with the kind of picture its type and height call for. A long frontage becomes a row of different buildings, and cracks and short lots are closed.
  • More of the real place. A second row of buildings shows across squares and car parks, tall buildings make a skyline, and landmarks stand at their real places.
  • The real ground. Fields, forest, water, parking lots and sidewalks are drawn per pixel from the map. The hills are real, and so is the horizon, marched over a 61 × 61 km height grid with the Earth's curvature.
  • Signs drawn by code, so the names are exact: town names, distances, street names, brown landmark signs and railway crossings.
  • No interface apart from a small credits line:
    • Scroll (or drag on a touch screen) to speed up from a crawl to very fast. Keep going the other way to slow down and reverse.
    • The arrow keys do the same, and Space pauses.
    • I shows where you are and M shows a small map.

Three levels of detail

Before anything slow happens, the first step prints an estimate for your route, and the skill asks you to choose. Only the art costs money: $0.18 a picture at RetroDiffusion's rd_pro__default (October 2026). Cost depends on the number of regions (distinct looks along the route), not on distance.

Similar plugs

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…

Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.