Skip to content

Latest commit

 

History

114 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🏙️ Gitilla

Turn any GitHub profile into a living cartoon city.

Every repository becomes a building. Stars make it tall, the language paints it, and the last 90 days of activity play back as the developer flies across the skyline — beaming pushes, pull requests and stars onto the rooftops.

▶ Open Gitilla · torvalds · sindresorhus · antfu · gaearon · schlunsen

Deploy Three.js No build step License: MIT

Gitilla rendering sindresorhus: a dense cel-shaded city of yellow JavaScript, pink CSS and blue TypeScript towers on a grass island

What you're looking at

On GitHub In the city
📦 A repository A building on its own lot
⭐ Stars Height and footprint (log scale — a 100k★ tower still leaves room for the rest)
🎨 Primary language Facade colour, and the district it's zoned into around the central plaza
🏆 Most-starred repos Closest to the plaza; 100★+ get a glowing rooftop beacon
🔥 Public activity (90 days) Gource-style playback: the avatar flies to each repo and beams it — teal pushes, purple PRs and reviews, blue issues, orange stars and releases
📅 Daily activity A heatmap ring of bricks around the plaza

Small profiles still get a lived-in town: empty lots are planned into themed blocks — green belts, sports corners, civic rows — with little squares around the intersections (fountain plazas, markets, gardens) and trees, benches and lamps dressing the parks.

Gallery

Night: windows glow, streetlamps and stars come out
Night falls — windows light up one by one, lamps and stars come out. Day/night follows your local clock.
Close-up of painted facades, helipads and rooftop gardens
Up close — painted facades, tiered towers, helipads, rooftop gardens and solar roofs.
Repository panel with a link to watch its history in Gource View
Click any building for the repo's stats — then watch its full commit history in Gource View.
Zoomed out: the city on a grass island with hills, a lighthouse and a ferris wheel
Zoom out — the city sits on its own island, with villages, woods, a lighthouse and hot-air balloons.

Things to try

  • Scrub the timeline at the bottom, or change the speed (0.5×–4×)
  • Press T for a cinematic fly-through, Space to play / pause, Esc to close panels
  • Toggle Day / Night / Auto / Cycle, then make it rain or snow
  • Click a repo in the explorer on the left to fly the camera to it
  • Turn Follow on and the camera drifts after the developer as they work

Customize your city

Your island is generated from your profile, but you can take over the parts you care about with one file in your profile repository, <login>/<login>/.git-city/city.json: name the island, write the welcome boards, pick the biome, city shape and landmarks, feature or hide repositories, give buildings their own colours, signs and billboards, choose your neighbours, set the look (accent, time, weather, TV / FX), the player's soundtrack, the far horizon and your plane's livery.

Organizations get a city too (?user=<org>), built from the org's public repositories and members. They keep the same file in their .github repository: <org>/.github/.git-city/city.json.

{
  "$schema": "https://gitilla.com/schema/city-config.v1.json",
  "version": 1,
  "island": { "name": "Schlunsen Isle", "biome": "tropical" },
  "welcome": "Welcome to my city!",
  "featured": ["git-city", "gource-view"]
}

Or open your city, press Customize, preview your changes live on the island, and Publish: it opens GitHub's own editor with the file filled in (no tokens, no OAuth). The file is data only, strictly validated, and never makes Gitilla load anything.

Maintainers can style a single repository's building too (graffiti, roof, neon windows, a flag, colour, silhouette) with .git-city/building.json in the repository itself; the owner's city.json wins, field by field.

How it's built

Plain ES modules and Three.js from a CDN — no bundler, no framework, no build step. The whole app is the public/ folder.

  • Toon renderingMeshToonMaterial on a shared stepped ramp, inverted-hull ink outlines, a hand-written post pass (bloom, day/night grade, vignette, grain) and a banded cel-shaded sky
  • Facades are painted per building onto canvases, with a separate emissive map so individual windows light up at night
  • The world (world.js) is paper cutouts: generated, chroma-keyed sprites for trees, houses, props and landmarks, billboarded to face the camera, plus top-down decals for roofs and empty lots
  • Layout clusters repositories into language districts on a grid with a rounded boulevard; traffic follows the curves
  • Timeline (history.js) merges GitHub events into paced "steps" the flying actor acts out
  • Code layoutapp.js is the orchestrator: it loads a profile and runs the HUD, the activity timeline, input, day/night and the render loop. The city itself is built by small modules in public/city/ (scene, layout math, block, plaza, buildings, facades, traffic, townsfolk, the showcase tour, the Gource TV, …); the island is world.js, the explore modes explore.js (bomb run: game.js), and the rides live in public/attractions/

Running locally

node server.mjs            # → http://localhost:8000
node --test tests/         # unit tests: layout, timeline, configs, game rules, README excerpts

Any static file server works. Add ?user=<login> to load a profile, or ?demo=1 to use the bundled snapshots only.

The GitHub rate limit

The browser talks to the GitHub API directly, and anonymous visitors get 60 requests an hour. So the featured developers ship with snapshots in public/fixtures/, refreshed every day by a GitHub Action. Gitilla uses a fresh snapshot when it has one, goes live otherwise, and falls back to the snapshot if GitHub says no.

GITHUB_TOKEN=$(gh auth token) node scripts/scrape.mjs          # refresh all
node scripts/scrape.mjs torvalds antfu                          # just a few

Snapshots only name repositories the profile owns — activity elsewhere is kept for the daily heatmap but anonymised.

Companion: Gource View

Gource View replays a single repository's entire commit history as a Gource-style animation. The two link to each other: open a building here to watch its history there, and click an author there to see their city here.

Credits

The cutout sprites, tiles and backdrop in public/assets/ were generated with an image model, then chroma-keyed and split by script. The prompts, the scripts and a step-by-step guide to adding new art are in docs/assets.md. They are part of this repository and covered by its license. Language colours follow GitHub's linguist palette.

License

MIT — see LICENSE.

About

Turn any GitHub profile into an interactive cartoon city

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages