- Category
- Developer Tools
- Rank
- No. 2936Tools index
Previous survey · No. 2819 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Coding
- Builder
- Manavarya09
- GitHub
- 10 stars
- Latest release
- v1.0.0
- Date
About
Your codebase as a living 3D city. Files become buildings, folders become districts, bugs become fires, deploys become rockets. Powered by Three.js.
What it does
A browser page that fetches a public GitHub repository through the public API and draws it as a navigable 3D skyline. Each source file is a box whose height tracks its estimated line count, directories become labelled blocks on a squarified grid, colour follows language, and up to six top committers walk between towers as small figures. Nothing is cloned and there is no server: you type owner and name, or pass it in the address, and the scene assembles itself in a few API calls.
Why it's ranked here
The hook is real and cheap to try: zero install, MIT licensed, no build step, and a shareable link per repository. The substance is thinner than the pitch. Line counts are guessed from byte size, per-file churn and age are random numbers, every file's bug count is fixed at zero, and the dependency list handed to the renderer is always empty. What you get is an accurate picture of folder structure and relative file size, dressed as something more analytical.
What's good
The layout code is honest work: a recursive treemap sized by estimated lines, so big directories visibly dominate and deep nesting reads as nested blocks. Vendored and generated folders such as dependency caches, build output and coverage are skipped, along with lockfiles and dotfiles, so the skyline reflects authored code. Background filler towers are merged into one mesh and capped at fifteen hundred, which keeps the frame rate sane. Error messages distinguish a missing repository from an exhausted rate limit.
Tradeoffs
Several advertised signals are not wired to data. Churn and file age are generated with a random number call, the commit scan for fix and bug keywords collects messages rather than files and is never used, and dependencies are returned empty. Unauthenticated GitHub access allows sixty requests an hour and each city costs five, so heavy use needs a personal token pasted into browser storage through the console. There are no tests; the test script only prints a notice. Private repositories are not supported.
How to use it well
Use it for a first-look tour of an unfamiliar public repository, or as a visual for a talk or README, where the shape of the folders and the relative weight of files is the point. Do not read fires, glow or roads as findings about quality or coupling. For heavy exploration add a token to lift the rate limit. If you want to extend it, the code is plain browser modules with no build, so edits show on refresh. For real churn or dependency analysis, reach for a dedicated tool.
Technical notes+
app/github-api.js makes five REST calls (repo, recursive git tree, contributors, languages, last 30 commits) and builds the tree client side; loc is Math.round(size / 40), churn and age_days use Math.random(), bug_count is 0, and dependencies is []. The bugFiles set adds commit messages and is discarded. SKIP_DIRS excludes node_modules, dist, build, vendor, target, coverage and similar. app/city.js computes a squarified treemap over a 250-unit square, maps height linearly to a 50-unit cap, and merges up to 1500 random filler boxes into a single BufferGeometry. app/agents.js spawns walkers that path in an L-shape to random buildings. app/index.html loads Three.js from unpkg via an import map. package.json's test script echoes a placeholder.
Observed
- License
- MIT (LICENSE)
- Language
- Plain JavaScript ES modules plus one HTML entry page
- Install surface
- None; static files served with npx serve, Three.js loaded from a CDN import map (app/index.html)
- Interface
- Browser web app; repository selectable via a repo query parameter (app/index.html)
- Data source
- GitHub REST API called directly from the browser, public repositories only (app/github-api.js)
- Line counts
- Estimated from file byte size divided by 40, not counted (app/github-api.js)
- Churn and file age
- Randomly generated per file, not derived from history (app/github-api.js)
- Dependency data
- Always returned as an empty list (app/github-api.js)
- Tests
- None; test script prints a placeholder message and exits (package.json)
- Authentication
- Optional personal token read from browser localStorage (app/github-api.js)
Read from README.md, package.json, app/index.html, app/city.js, app/github-api.js, app/agents.js, LICENSE.
What it can do
Visualize codebase structure as 3D city
Source code repository → Interactive 3D city visualization
Convert files into 3D buildings
Code files → 3D building representations
Map folders to city districts
Directory structure → 3D district layout
Display bugs as fire visualizations
Bug reports or error data → Fire effects on buildings
Show deployments as rocket animations
Deployment events → 3D rocket launch animations
Navigate codebase through 3D exploration
User mouse/keyboard input → Interactive 3D navigation experience
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.