3D GITHUB VISUALIZER

A GitHub profile is a flat list. It tells you what someone built, but not how their work is shaped — which repositories are old and quietly popular, which are new experiments, which are forks of forks. The harder problem turned out to be the visitor who never types a username at all: that is the majority case, and the version of this app that existed before the audit showed them a blank white page while looking, to every automated check, entirely healthy.

The whole scene is one InstancedMesh, so draw calls stay constant as repository count grows — three for nodes, wireframe shells and every label at 250 repositories. Labels are baked into a single canvas atlas drawn as one instanced quad and billboarded in the vertex shader, so they cost no per-frame CPU work. Axes are mapped by rank rather than by linear min-max, because stars and forks are power-law distributed and a linear map collapses the universe into one mass. Three.js is code-split out of the critical path and advertised with a build-time modulepreload, and the GitHub token lives in a serverless function behind a four-endpoint allowlist, with edge caching doing the real work of protecting the quota.

You give it a GitHub username and it builds a universe out of that profile. Every repository becomes a geodesic icosahedron: its radius scales with the square root of its star count, its colour comes from its primary language, and its position encodes three axes at once — age on X, stars on Y, forks on Z. You orbit it, hover it, click into a repository, filter by language, and export what you are looking at.

The distinctive problem was never rendering the spheres. It was the empty state. A visitor who never types a username is the majority case, and this app used to show them a blank white page. So the empty state became the product: on cold load, before any network request, a seeded procedural generator streams 88 uncoloured placeholder spheres into a drifting galaxy. It works offline, it can never rate-limit, and it dims on your first keystroke before dissolving as real data arrives. The scenery is deliberately uncoloured, because language colour carries meaning here and decoration must not borrow it.

Positioning turned out to be the hard part. Stars and forks are power-law distributed — one repository with 60,000 stars and ninety under fifty is the normal shape of a profile — so a linear min-max map collapses almost every node onto the same coordinate and renders the universe as one overlapping mass with a couple of outliers stranded far away. The axes are mapped by rank instead, which is distribution-free, followed by a deterministic relaxation pass that separates anything still closer than the sum of its radii.

The page is two layers over one warm-black ground: a HUD at z-index 10 and up, where a single layout component owns every fixed position on the page, and the scene at z-index 0. Eleven components each positioning themselves independently is what produced a preferences panel floating detached in a corner, and a canvas with no z-index at all is what painted over the header.

The scene is a single InstancedMesh, so draw calls stay constant as repository count grows: three for the entire scene at 250 repositories, covering nodes, wireframe shells and the full label set. Line geometry cannot go in an InstancedMesh, so the wireframe shells are drawn as one merged buffer rather than as N line segments. The labels are baked into a single canvas atlas, drawn as one instanced quad and billboarded in the vertex shader, so there is no per-frame CPU work for them at all.

Three.js is code-split out of the critical path and advertised to the browser with a build-time modulepreload, so it downloads beside the app rather than behind it: 85.07 kB gzip blocks first paint, 139.94 kB is deferred. Total JS did not go down — it rose slightly with the Three.js 0.185 upgrade — and the win is entirely on the critical path. Any copy implying the app got smaller would be unbacked.

GitHub is reached through a serverless function on Vercel. The token is read from the environment and attached to the outbound fetch only; it is never sent to the browser, never echoed in a response body, and appears in none of the client chunks. Because the incoming request carries no Authorization header of its own, responses are safely cacheable, and the CDN cache — not the rate limiter — is what protects the token's 5,000 requests/hour budget, since demo traffic concentrates on a handful of famous usernames. Per-IP throttling is a WAF rule at the edge rather than code in the function, so a throttled request costs no invocation at all.

The repository was audited in August 2026, and the audit is the reason it looks the way it does now. `npm run build` exited 0, transformed every module and printed no console errors — and the app rendered a near-blank white page. None of the causes was visible to a compiler: the canvas mounted `position: fixed; inset: 0` with no `z-index`, so it painted over the header rather than the header being missing; the renderer was created with `alpha: true` against a theme that defaulted to `prefers-color-scheme: light`, so the page background showed through as white; eleven components each declared their own fixed position; and the sphere geometry was built at radius `size` and then scaled by `size`, so rendered radius was size squared and small repositories disappeared entirely. The finding that mattered more than any single bug was that the verification itself was broken: headless Chromium has no WebGL, `canvas.getContext('webgl2')` returns null, and every automated check ever run against this project had been screenshotting an empty canvas and passing.

The presentation bugs were fixed at the layer they belonged to — one z-index, an opaque renderer, and a single component that owns every fixed position on the page. The squared radius came out. A WebGL failure had been setting an error state that nothing ever rendered, so a visitor without WebGL got a silent empty page; it now prints a message. Two more gates turned out to be measuring nothing: a WebGL canvas cannot be read back with `drawImage` without `preserveDrawingBuffer`, so the first motion checks scored zero every time, and the browser suite hardcoded a port and started no server, so on a machine where another project held that port it had run end-to-end against a different application and scored that application's page as a rendered scene. The replacement test suite found three bugs on its first run, the best of them being that `"C++".toLowerCase()` is `c++` while the colour map's key is `cpp` — so C++ and C# repositories were falling through to the grey "Other" bucket, and a grey sphere among grey spheres reads as data rather than as a bug, which is exactly why nobody had noticed. Blue and indigo had survived a design-system purge by hiding inside `rgba()`, invisible to a hex-only guard. The favicon had never resolved: `index.html` referenced a scaffold file the repo never contained. Ten test reports claiming comprehensive coverage were deleted along with 27 other process documents, because there were zero tests behind them.

Three numbers changed the code rather than describing it. Frame *interval* turned out to be useless on fast hardware — 100 and 250 repositories both reported an identical 4.2 ms, which is the display refresh rather than the app — so the harness now records time spent inside the render loop instead, and that is why this page quotes frame work and not fps. Splitting Three.js into its own chunk is the obvious optimisation and was a regression until it was measured: a dynamic import is not requested until the chunk containing the import statement has downloaded, parsed and run, so the largest asset queued behind the two smallest and cost 944 ms to first frame on Fast 3G. A build-time `modulepreload` fixed it, and it exists only because the number was checked. And a linear min-max mapping of stars and forks collapsed the universe into one overlapping mass, because those metrics are power-law distributed — one repository with 60,000 stars and ninety under fifty is the normal shape of a profile — so the axes are mapped by rank, which is distribution-free, followed by a deterministic pass that separates anything still closer than the sum of its radii. The blocking payload landed at 85.07 kB gzip; masterplan.md records the before figure as 223.81 kB, but only the after number is reproducible from a clean build today, so only the after number is published as a metric.