How Sweet Built a GitHub Wrapped Experience in One Sitting

Spotify Wrapped for your code. That was the prompt. Enter a GitHub username and get a beautiful, slide-by-slide storytelling experience of your year in code: commit activity heatmaps, language breakdowns, hour-of-day patterns, star stats, and a confetti-filled finale. Built by an AI agent in a single session.

The Prompt

"Build a GitHub Wrapped experience. Enter a username, fetch their GitHub data, and present it as a slide-by-slide story with beautiful visuals."

The agent wrote the entire thing — API integration, data processing, chart rendering, animation choreography, export-to-PNG, and mobile polish — as a single self-contained HTML file.

What Got Built

A 1,239-line single HTML file that:

• Fetches live data from the GitHub API for any public user
• Processes and analyzes: commit activity, language distribution, star counts, contribution timing patterns
• Presents as slides: a swipeable/tappable carousel with ~8 distinct slides, each with its own animation treatment
• Renders charts: Chart.js commit heatmaps, language breakdowns, hour-of-day activity
• Interactive particles: a floating particle background that responds subtly to slide transitions
• Export options: download individual slides as PNG images (via html2canvas), or download all slides at once
• Confetti finale: a celebratory burst on the outro slide
• Mobile-native: works perfectly on phones with tap-to-advance, compact layouts, and touch-optimized controls

The Technical Breakdown

1. GitHub API Integration

All data comes from the public GitHub REST API:

const endpoints = [
  `https://api.github.com/users/${username}`,
  `https://api.github.com/users/${username}/repos?per_page=100&sort=pushed`,
  `https://api.github.com/users/${username}/events/public?per_page=100`,
];

The agent fetches the user profile, repository list, and recent events in parallel. Unauthenticated requests get 60/hour — enough for the demo. With a token, that jumps to 5,000/hour.

2. Data Processing Pipeline

Raw API responses are transformed into slide-ready data:

• Commit activity: events are grouped by date, then mapped to a GitHub-style heatmap grid (52 weeks × 7 days)
• Language breakdown: repos are aggregated by primary language, with percentage calculations
• Hour patterns: commit timestamps are bucketed by hour-of-day to reveal coding rhythms (are you a morning coder or a night owl?)
• Stars given vs received: distinguished from the events feed — stars you gave to others vs stars your repos received

3. Chart.js Visualizations

The heatmap uses a custom Chart.js matrix chart plugin. Each cell's color intensity maps to commit count:

0 commits → dark (#161b22)
1-2 commits → light green (#0e4429)
3-5 commits → medium green (#006d32)
6+ commits → bright green (#39d353)

The language breakdown uses a horizontal bar chart with language-specific colors. The hour-of-day chart uses a line chart that reveals surprising patterns in when developers push code.

4. Slide Choreography

Each slide has its own entrance animation, staggered element reveals, and exit transition:

.slide.active .slide-content > * {
  animation: slideUp 0.5s ease-out forwards;
}
.slide.active .slide-content > *:nth-child(1) { animation-delay: 0.1s; }
.slide.active .slide-content > *:nth-child(2) { animation-delay: 0.2s; }
/* ... */

The auto-play mode advances slides on a timer, with a play/pause toggle. Manual swipe/tap also works. Keyboard shortcuts (arrow keys, space) round out the navigation.

5. Export to PNG

Using html2canvas, each slide can be captured as a PNG:

async function captureSlide(slideEl) {
  const canvas = await html2canvas(slideEl, {
    backgroundColor: '#0d1117',
    scale: 2, // retina quality
  });
  const link = document.createElement('a');
  link.download = `github-wrapped-slide-${index}.png`;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

The "Download All" button captures all slides sequentially with a small delay between each. A browser-block warning helps users understand that Chrome limits automatic downloads.

6. Particle Background

A canvas-based particle system runs behind the slides:

• 80 floating particles with gentle drift
• Particle positions are seeded from the username (deterministic, so the same username always gets the same particle layout)
• Opacity pulses subtly on slide transitions
• Mobile performance is maintained by capping particle count

The Agent's Process

The build happened in layers:

1. Scaffold: HTML structure, CSS variables, slide container
2. API layer: fetch functions, error handling, rate limit awareness
3. Data transforms: heatmap generation, language aggregation, hour bucketing
4. Slide rendering: Chart.js integration, dynamic DOM generation
5. Interactions: swipe detection, keyboard nav, auto-play
6. Export: html2canvas integration, sequential download with warnings
7. Polish: particle background, confetti, gradient animations, mobile responsiveness

Several rounds of UX polish followed: the sidebar was made consistently visible, session rename was added, download-all was hardened against browser restrictions, and mobile layouts were tightened.

Why This Matters

A GitHub Wrapped is the kind of project that would take a developer days or weeks: API integration, data processing, chart configuration, animation, export, and cross-device testing. The agent did it in one session.

But more importantly, it's a template. Replace the GitHub API with any data source — Strava, Spotify, Notion, your company's internal metrics — and you get the same storytelling experience. The slide framework, the chart pipeline, the export system — it's all reusable.

Try It Yourself

👉 sweetcli.com/demo/github-wrapped

Enter any GitHub username and experience your year in code.