Contribution Board

Contribution Board turns the GitHub contribution graph into a small animated scene that replays your real commits: a cannon that aims and fires, a tide that uncovers shells, a sonar that detects activity, a meteor shower, a garden that grows, a laser sweep, a breakout game. Every style reads the same data — the GitHub GraphQL API — and only the staging changes.

It is a GitHub Action written in plain Node.js 20 with zero external dependencies: native fetch, no bundling, and self-hosted from the user's own profile repository, so there is no third-party instance that can go down. A workflow runs daily on a cron schedule, regenerates an SVG and commits it, and the profile README simply embeds the image.

One shared module fetches the contributions and lays them out on the grid; each style is an independent module that exports its metadata and a render function taking the days and returning an SVG string. Adding a style means adding one file and registering it. The animations are pure CSS keyframes generated from the data, so the SVG animates anywhere GitHub renders it — no GIF needed.

The main lesson: a bug in a generated animation can't be caught by reading the code — an element landing in the wrong place only shows when you watch it run. Checking every style in a browser became part of the workflow, and each style lives on its own branch merged by pull request, as in any open-source project (MIT licence).