Daily Vibe Challenge

Challenge #007 ·

Repo Time-Lapse: Turn Any Git History into a Playable Visual Timeline

Intermediate2–3 hoursDev tools

Description

Build a tiny command-line dev tool that reads the git history of any local repository and writes one self-contained HTML file you can open in a browser and press play. Files appear as glowing dots grouped by folder, pulse when they change, fade when they are deleted, and a scrubber lets you jump through time while commit messages scroll by. It is a fun way to see how a project really grew, and a perfect weekend screenshot for your README.

Starter Prompt

Build "Repo Time-Lapse", a command-line tool that turns a git repository's history into a single self-contained, playable HTML visualization. Use Python 3 standard library only (subprocess, json, argparse, html) for the CLI, and vanilla JS + Canvas inside the generated HTML. No external libraries, no CDN, no network calls.

CLI:
- Usage: python3 timelapse.py [REPO_PATH] [-o out.html] [--since 2024-01-01] [--max-commits 2000] [--branch main]
- Default REPO_PATH is the current directory; exit with a friendly error if it is not a git repo.
- Read history with: git log --reverse --no-merges --date=iso-strict --pretty=format:'%H|%an|%ad|%s' --name-status
  Parse each commit into {hash, author, date, message, changes:[{status A/M/D/R, path, old_path?}]}. Handle renames (R100 old new) and paths with spaces.
- Anonymize option: --hide-authors replaces author names with "Dev 1", "Dev 2" in order of first appearance.
- Embed the parsed data as JSON inside one HTML file (escape "</" safely) and print the output path plus a one-line summary (commits, files, authors, date range).

Visualization (inside the HTML):
- Full-window canvas, dark background. Each file is a dot; files cluster around their top-level folder, and folders are arranged in a circle with their name labels.
- Use a simple force layout or deterministic spiral placement within each folder cluster so dots don't overlap much.
- Dot color by file extension (stable hash -> hue), with a legend of the top 8 extensions.
- Playback: on each commit, added files fade in, modified files pulse (brief glow + grow), deleted files shrink and fade out, renames slide to the new position.
- Bottom bar: Play/Pause, speed (1x, 4x, 16x), and a scrubber across the whole date range. Scrubbing rebuilds the state at that commit quickly (precompute snapshots every 100 commits).
- Overlay in a corner: current date, commit number / total, author, and the commit message, with the last 5 messages fading upward.
- Small live stats panel: total files alive, commits so far, most-changed file so far.
- Keyboard: Space play/pause, Left/Right step one commit, Home/End jump to start/end.

Robustness:
- Works on a fresh repo with 1 commit and on a large repo (cap at --max-commits, keep 60 fps by drawing only changed regions or batching).
- Binary or huge paths are fine; never read file contents, only history.

Ship it with a README that shows how to run it on its own repo, plus a sample output generated from this project's history.

When done, explain the data flow (git log -> parser -> JSON -> canvas), the layout choice, and 3 ideas for using an LLM later (for example, auto-generating chapter titles for phases of the project).

Success Criteria

Optional Extensions

Built it? Share your build and get featured in the showcase & weekly roundup: Submit your build →

Plain markdown: 007-git-history-time-lapse.md

⚡ Get tomorrow's challenge before everyone else

One fresh challenge + copy-paste starter prompt in your inbox every morning, plus a weekly roundup of the best community builds. Free, no spam, unsubscribe in one click.

Or follow on Bluesky · RSS/Atom · Newsletter archive