Pixelsnake — play your GitHub contribution graph
I was building the footer of this portfolio and wanted something more interesting than a static grid. One afternoon I turned the GitHub contribution graph into a playable snake game — arrows or WASD to steer, retro chip audio, and a ripple animation when you lose. It felt too specific to keep buried in a footer, so I extracted it into a self-hostable widget. Clone the repo, deploy it in one click, and embed it on any website with a single <iframe>.
Live preview
Clone on Github327 contributions in the last year
Add to your site
Pixelsnake is a React component — drop it directly into your existing Next.js project. No separate deployment, no iframe.
1. Copy the files
contribution-snake.tsx → your components folder github-contributions.ts → your lib folder
2. Fetch data & render
import { ContributionSnake } from "@/components/contribution-snake";
import { getGithubContributions } from "@/lib/github-contributions";
// In a Server Component:
const data = await getGithubContributions("yourusername");
return <ContributionSnake data={data} />;Customization
Edit the constant at the top of contribution-snake.tsx to change speed. All colors are CSS custom properties — override them in your stylesheet to match your site.