Vibeleaderboard
Index / tool
Visit claude-city-six.vercel.app
Category
Developer Tools
Rank
No. 2936Tools index

Previous survey · No. 2819 ·

Pricing
Open Source
Type
TOOL
Use case
Coding
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

3dvisualizationcodebasethreejsdeveloper-tools

Tech Stack

Node.js

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.