Generate an animated Space Invaders game from your GitHub contribution graph. Your contribution cells are plucked from the grid, travel to formation positions, hatch into invaders, and a ship fires lasers to destroy them wave by wave — all in a seamlessly looping CSS animation.

• Space Invaders gameplay from your actual contribution data
• Pure CSS animation — no JavaScript in the SVG, GitHub README-safe
• Light / Dark / Classic themes via color palette system
• Interactive demo with animation scrubber and debug parameter tuning

Add to your profile repository (.github/workflows/commit-invaders.yml):

name: Generate Commit Invaders

on:
  schedule:
    - cron: '0 0 * * *'
  workflow_dispatch:

jobs:
  generate:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v4
      - uses: Goblinlordx/commit-invaders@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          github_user_name: ${{ github.repository_owner }}

The action generates two SVGs — a light-mode and a dark-mode variant — and commits both to the output branch. Add this to your README.md so GitHub automatically picks the right one based on the viewer's theme:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_REPO/output/commit-invaders-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_REPO/output/commit-invaders.svg">
  <img alt="Commit Invaders" src="https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_REPO/output/commit-invaders.svg" width="100%">
</picture>

Or, if you only need a single variant:

![Commit Invaders](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_REPO/output/commit-invaders.svg)

GITHUB_TOKEN=ghp_... npx commit-invaders <username> [output.svg]

Options:

• --no-scoreboard — disable high score board (faster animation)
• --help — show usage

goblinlordx.github.io/commit-invaders — try it with any GitHub username, tune parameters, download SVG.

See it in action on Goblinlordx's GitHub profile — the animation updates daily via the GitHub Action.

1. Fetch — Pull contribution graph from GitHub GraphQL API
2. Simulate — Deterministic physics engine with outcome-first solver (PRNG predetermines hit/miss, ballistics solver computes exact fire positions)
3. Render — Map simulation events to CSS @keyframes percentages with SVG sprite symbols
4. Output — Single self-contained SVG with inline styles, no external dependencies

The simulation uses time-based physics (dt = 1/fps), swept collision detection, target-locked firing, and formation path prediction for accurate laser targeting.

See How the High Score Board Works for details on the sliding-window scoring algorithm and SVG rendering.

pnpm install
pnpm dev:demo     # interactive demo page
pnpm dev:sim      # canvas simulation viewer
pnpm test         # run tests
pnpm build        # bundle for GitHub Action

This project was heavily inspired by Platane/snk — the original snake contribution graph animation that started it all. Built with Kiloforge (skills only) for track-based development workflow.

MIT