Back to Projects

Project

Git Tree Visualizer

Public GitHub history rendered as a growing pixel-art tree, with commit-driven sound, interactive time windows, and a software renderer for browsers without WebGL.

TypeScriptThree.jsCanvasWeb AudioGitHub API

Overview

Paste a public GitHub repository and watch its history grow into a tree whose trunk follows the first-parent chain, with limbs from merge history, commits as leaves, and time as rings. A generated soundtrack follows the growth.

The tree grows flat, then unfolds into an orbitable view. You can select a commit, walk the graph with the keyboard, change the time window, or share the current view through its URL.

Making the picture explainable

Author and churn views give different readings of the history. Color lenses leave the underlying topology in place so you can compare them without losing your position.

Squash merges need special treatment because the original branch commits may no longer be available. Branches reconstructed from pull request metadata are labeled as inferred and drawn dashed and ghosted. If no branch structure can be recovered, the app uses a labeled directory view. It also reports missing file-type data instead of guessing it.

Two renderers, one graph

Three.js draws the WebGL 2 version. When a browser can't create a WebGL context, a Canvas software renderer draws the same layout with growth, orbit, selection, lenses, and the timeline still working. The fallback simplifies decorative lighting and sway.

The TypeScript core is independent of the browser. Layout can run in a worker, in a test, or in the server-side share-image renderer. Audio starts with a user gesture, has a visible mute control, and pauses when the tab is hidden.