Turn a GitHub profile into a cinematic, interactive story.
Not another dashboard. A Wrapped.
Spotify Wrapped went viral because it wasn't analytics — it was storytelling.
GitHub has millions of developers, yet every recap tool today is just a dashboard wearing colorful clothes.
DevWrapped changes that. Enter a username. Get a 10-slide cinematic story that tells the story behind your year as a developer — what you built, when you coded, how you think, and what your commit history secretly says about you.
| # | Slide | What it shows |
|---|---|---|
 | Opening | Animated reveal with your avatar, gesture instructions, and "Your2026 in Code" |
 | Year in Numbers | Commits, repos, PRs, issues, stars, followers — count-up animation |
 | Tech DNA | Your language breakdown as an animated genome visualization |
 | Commit Psychology | "You typed 'fix' 48 times." — what your messages really say |
 | Project Graveyard | Created 22 repos, maintained 4. The rest are enjoying retirement. |
 | Peak Moment | Your hardest coding day — 47 commits, 3 repos, 9 hours |
 | The Night Owl | Latest commit at2:00 AM — "please work" |
 | Hall of Fame | Most starred, most active, longest-running, fastest-growing |
 | Developer Archetype | The Explorer, The Finisher, The Night Owl — personality from data |
 | Share Studio | 6 themed stat cards + all-in-one poster, 8 theme packs, download/share |
Each theme is a complete visual identity — different backgrounds, decorations, typography, and per-card treatments (the streak card looks different from the language card, even in the same theme).
|
Aurora gradients, stars, constellation dots, nebula depth Best for: Default / signature look |
Black, white, subtle accents, line-graph streak Best for: LinkedIn, professional |
ASCII bars, terminal grids, CRT scanlines Best for: Developers, open-source |
|
Engineering grids, dimension lines, spec sheets Best for: Engineers, architects |
Molten lava gradients, floating embers, forged metal Best for: Power & intensity |
Deep ocean, bubble trails, jellyfish glow Best for: Calm & immersive |
|
Cherry blossom petals, ink brush, matte paper Best for: Elegant & artistic |
Matte black + satin gold, luxury minimal Best for: Premium, LinkedIn |
- Auto-advance — story progresses automatically with per-slide timing (3–6s), pauses on hold
- Hold → pause — press and hold anywhere to pause the story; release to resume
- Hold → hide UI — hold for500ms to hide everything (screenshot-ready artwork)
- 3D Tilt — cards tilt toward your cursor with holo shine, glow, and a
</>watermark - Mobile Gyro — tilt your phone and cards respond (permission granted on first tap)
- Touch Swipe — swipe left/right to navigate between slides
- Tap zones — tap right half = next, left half = previous
- ⋮ Menu — per-card Download PNG, Copy Image, Share, Replay
- Theme Switching — instant live preview, no reload
- Archetype Recommendation — auto-selects the best theme based on your developer personality
| Layer | Technology |
|---|---|
| Frontend | React 19 · Vite · TypeScript · Tailwind CSS |
| Animation | Framer Motion · Custom tilt/holo engine |
| State | Zustand · TanStack Query |
| Export | html-to-image |
| API | Cloudflare Workers (Cache API) |
| Hosting | Cloudflare Pages (web) + Cloudflare Workers (API) |
┌─────────────────────────────────────────────────┐
│ Browser │
│ │
│ React 19 + Vite + Tailwind │
│ ├── Landing Page (username input) │
│ ├── 10-slide Deck (auto-advance, gestures) │
│ ├── Share Studio (theme picker + carousel) │
│ └── WrappedPoster (all-in-one stat card) │
│ │ │
│ ▼ fetch() │
│ ┌──────────────────────────────────┐ │
│ │ Cloudflare Worker (API proxy) │ │
│ │ ├── GitHub REST API │ │
│ │ ├── GitHub GraphQL API │ │
│ │ └── Cache API (1h per user) │ │
│ └──────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
- Node 20+ and npm
- A GitHub account (for the token)
###1. Create a GitHub Token
Go to github.com/settings/tokens → Generate a classic token → select public_repo scope. No other scopes needed.
###2. Set the Token
cd worker
cp .dev.vars.example .dev.vars
# Paste your token into .dev.vars:
# GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxx###3. Run Locally
# Terminal 1 — API proxy (port8787)
cd worker && npm run dev
# Terminal 2 — web app (http://localhost:5173)
cd web && npm run devOpen http://localhost:5173, enter a GitHub username, and press → to start.
No token? Run
VITE_USE_MOCK=1 npm run devinweb/to see the deck with built-in mock data.
cd worker
npm run deploy
wrangler secret put GITHUB_TOKEN # paste your token at the promptcd web
npm run build
npx wrangler pages deploy dist --project-name devwrappedOr push to GitHub and connect the repo in the Cloudflare Pages dashboard (root dir: web).
| Variable | Where | Purpose | Required |
|---|---|---|---|
GITHUB_TOKEN | Worker secret | GitHub PAT (classic, public_repo scope) | ✅ |
VITE_API_BASE | Web .env.production | Worker API URL (baked at build time) | ✅ |
VITE_USE_MOCK | Web .env | Set to 1 for mock data (no token needed) | ⬜ |
DevWrapper/
├── web/
│ ├── src/
│ │ ├── components/ # Deck, slides, ShareStudio, CardEffects
│ │ ├── pages/ # Landing, Wrapped
│ │ ├── lib/ # analysis, personality, tilt, themes, API
│ │ ├── store/ # Zustand deck state
│ │ └── hooks/ # TanStack Query data fetching
│ ├── public/favicon/ # SVG + PNG icons
│ └── vercel.json # SPA routing config
└── worker/
└── src/index.ts # Cloudflare Worker (GitHub proxy + cache)
MIT