gitlogue is a terminal-based Git commit visualization tool that animates repository history as a cinematic typing experience. It replays commits with realistic character-by-character typing animations, syntax highlighting via tree-sitter, and dynamic UI panes showing file trees, editor views, and terminal output. The application is built in Rust using ratatui for terminal rendering, git2 for repository access, and features a modular architecture with separate concerns for Git processing, animation engine, theme management, and UI components. Key features include commit filtering, configurable playback speed, screensaver mode, and 16 built-in color themes.
LearnGitBranching is a client-side interactive web application that teaches Git branching through visualization and gamified levels. It simulates a full Git command set (commit, branch, merge, rebase, push, pull, etc.) in the browser, rendering commit trees as SVG graphics using Raphael.js. The application follows a Flux-like architecture with a dispatcher, stores (CommandLine, Level, Locale, GlobalState), and actions, all running entirely in the browser with no backend. Users progress through 36+ levels organized into sequences (intro, ramp-up, remote, advanced), each with a goal tree, solution command, hints, and multi-language dialogs. A sandbox mode allows free experimentation, and a level builder enables custom level creation. The app supports 20+ locales with dynamic import of translation strings, and includes a certificate of completion generated as SVG. The architecture is modular: a headless Git engine (src/js/git/headless.js) provides the core simulation logic, decoupled from the visualization layer (src/js/visuals/). Commands are defined as a config object with regex matchers and execute functions. Level definitions are self-contained JSON objects with goal trees, start trees, and localized content. The app uses Vite for bundling with a custom CommonJS lazy interop plugin to handle circular dependencies. Testing is done with Jasmine, covering the Git engine, command parsing, stores, and level validation. Key reusable components include the tree comparison algorithm (treeCompare.js) with multiple comparison modes, an event baton pattern for coordinated event handling, a standalone SVG certificate builder, and a composable command parsing waterfall. The internationalization system features locale detection, fallback chains, and dynamic imports. Despite some legacy patterns (Backbone views, jQuery UI), the codebase is well-structured and actively maintained, with CI/CD pipelines for GitHub Pages and Docker deployment.