Turn any GitHub repo into a 3D city.
Paste a repo URL → watch it transform into a navigable 3D cityscape with buildings, districts, fires, and walking characters. 100% client-side, no backend, no signups.
| Code | City |
|---|---|
| Files | Buildings (height = lines of code) |
| Folders | Districts with labels |
| Languages | Building colors (blue = TypeScript, yellow = JS...) |
| Dependencies | Roads connecting buildings |
| Bug-fix commits | Fires on buildings |
| Recent changes | Glowing buildings |
| Contributors | Walking characters |
Paste any public GitHub repo and the city builds itself using the GitHub API — no cloning, no backend, no API keys needed.
Go to claude-city.vercel.app and paste a repo.
git clone https://github.com/Manavarya09/code-city.git
cd claude-city
npx serve appOpen http://localhost:3000
https://claude-city.vercel.app?repo=facebook/react
https://claude-city.vercel.app?repo=vercel/next.js
| Action | Control |
|---|---|
| Rotate | Drag |
| Zoom | Scroll |
| Pan | Right-click drag |
| Inspect | Hover building |
| Focus | Click building |
| Reset | Press R |
| Rocket | 🚀 button |
- Three.js — 3D rendering (CDN, zero build step)
- GitHub REST API — Fetches file tree, contributors, languages, commits
- Vercel — Hosting (static site)
- Zero dependencies — No npm install, no build, no backend
This project needs help! Here's what I want to build but can't do alone:
- Better building shapes — Not just boxes. Cylinders, L-shapes, pyramids for variety
- Day/night toggle — Switch between sunset and midnight cyberpunk mode
- Time travel slider — See how the city grew over commit history
- Click building → open file — Link buildings to GitHub file URLs
- Performance for huge repos — Linux kernel, chromium (10K+ files)
- Shareable screenshots — One-click export to PNG/video
- Mobile support — Touch controls, responsive layout
- Private repos — OAuth flow for GitHub token
- Minimap — Small 2D overview in corner
- Multiplayer — See other people's cursors flying around
- VR mode — Walk through your codebase in WebXR
- Sound — Lo-fi beats + ambient city sounds
- Terrain — Hills and rivers based on code complexity
- Weather — Rain when tests fail, sunshine when CI passes
- Fork the repo
- Pick an issue or idea from above
npx serve appto run locally- Open a PR
No build step. No npm install. Just edit the JS files in app/ and refresh.
app/
├── index.html # Landing page + Three.js app entry
├── city.js # Building generation, treemap layout
├── agents.js # Walking character sprites
├── effects.js # Fire, sparkles, rockets, atmosphere
├── controls.js # Camera, UI overlay, tooltips
└── github-api.js # GitHub API client (no backend needed)
Everything runs in the browser. The GitHub API is called directly from the client. No server, no database, no auth (for public repos).
All of these work:
facebook/reacthttps://github.com/facebook/reacthttps://github.com/facebook/react.gitgithub.com/facebook/react/
GitHub API allows 60 requests/hour without auth. For heavier usage, add a personal access token:
- Create token at github.com/settings/tokens
- Open browser console →
localStorage.setItem('gh_token', 'your_token_here') - Rate limit increases to 5000/hour
MIT — See LICENSE
See your code. Like never before.