GitSound

April 10, 2026 · View on GitHub

Transform any GitHub repository's commit history into generative algorithmic music.

Live demo: yoglib.github.io/gitquest

Features

  • Commit-driven music: BPM, scale, voices, and energy are derived deterministically from your repo's commit patterns, fix ratios, and contributor activity — the same repo always sounds the same.
  • Tone.js synthesis: Up to 4 layered voices (melody, bass, pad chords, kick drum) synthesized entirely in the browser.
  • Manual overrides: Tune BPM, scale, reverb, voices, and energy on top of the computed defaults without leaving the page.
  • Light / dark / system themes: Two custom OkLch purple themes that follow your OS preference or a manual toggle.
  • GitHub token support: Add a Personal Access Token in settings for higher API rate limits.
  • No backend: Fully static — runs on GitHub Pages with no server.

Tech Stack

LayerLibrary / Tool
UIReact 18, TypeScript 5.6
RoutingReact Router 6 (hash-based)
StateZustand 5
AudioTone.js 14
StylingTailwind CSS v4, DaisyUI v5
BuildVite 8, vite-plus
TestingVitest 3, V8 coverage
Component ExplorerStorybook 10

Getting Started

git clone https://github.com/YogliB/gitquest.git
cd gitquest
npm install
npm run dev

Open http://localhost:5173 in your browser.

Available Scripts

ScriptDescription
npm run devStart the Vite dev server
npm run buildProduction build to dist/
npm run previewPreview the production build
npm testRun unit tests with Vitest
npm run test:coverageRun tests with V8 coverage (80% threshold)
npm run knipDetect unused exports and dependencies
npm run jscpdDetect duplicated code blocks
npm run storybookStart Storybook dev server at port 6006
npm run build-storybookBuild static Storybook to storybook-static/

How It Works

  1. Enter a GitHub repo URL on the landing page.
  2. Commits are fetched via the GitHub API (up to 100, cached for 1 hour).
  3. Analysis computes commit patterns: fix ratio, feature ratio, commits per day, peak hour, author count, etc.
  4. Music parameters (BPM, scale, voices, energy, reverb) are derived deterministically from the analysis using a seeded RNG.
  5. Tone.js builds the synthesis graph — melody, bass, pads, and drums — and plays it in the browser.

License

MIT