Pixelsnake: Play your GitHub contribution graph
I built Pixelsnake from a small footer itch: the GitHub contribution graph had rows, rhythm, and enough tension for a small game. On desktop, you can click a pixel and play snake through the year with a clean start wave, keyboard steering, pause, and game-over states. On smaller screens, you get a recent-activity view because touch controls made the game worse.
Live preview
View on GitHubView on GitHubAdd to your site
I keep the reusable widget in the Pixelsnake repo, and this page imports that repo as a dependency. I update the widget there first, then bump this page's dependency so the demo uses the same code. You import the component and its CSS module together, without an iframe or a separate demo shell.
1. Install the package
npm install github:getkishore92/pixelsnake#main
2. Fetch data & render
import { ContributionSnake, getGithubContributions } from "pixelsnake";
// In a Server Component:
const data = await getGithubContributions("yourusername");
return <ContributionSnake data={data} />;How it behaves
On desktop, click a pixel to start, steer with WASD or arrow keys, press Escape or click outside to pause, and click the board again to resume. On mobile, the widget shows recent weeks only, disables the game controls, and avoids horizontal scrolling.
Compact footer mode
<ContributionSnake
data={data}
showCalendarLabels={false}
/>Widget API
I kept the public API small. Most sites only need the data prop. The extra props cover the cases I use here: full demo, compact footer, shared top score, and wrapper copy tied to the game state.