94 titles. 8 phases. One timeline. No escape.
A cinematic, maximalist Marvel watch order tracker built for the obsessed — packed with JARVIS-style HUD effects, canvas animations, and a fully playable minigame. All in vanilla HTML, CSS, and JavaScript.
Live at → https://itsrudraksh.github.io/doomsday/
Full-screen boot sequence on every load. Canvas-rendered hex grid, 3 rotating arc rings (CW/CCW/CW), radar sweep with fading ghost trail, random radar blips, and corner targeting brackets. Iron Man ASCII helmet types in character by character, followed by 8 boot terminal lines. Ends with the DOOMSDAY PROTOCOL reveal. Click anywhere to skip.
94 Marvel titles across 8 phases in strict chronological order:
- 🦊 Fox X-Men Universe (13 titles)
- 🕷️ Sony Legacy Spider-Men (5 titles)
- ⚙️ MCU Infinity Saga (38 titles)
- 📺 Defenders Universe (11 titles)
- 🌀 MCU Multiverse Saga (13 titles)
- 🕸️ Sony Spider-Verse (7 titles)
- ⚡ MCU Phase 5–6 (7 titles)
- 🔥 2026 Pre-Doomsday Drops (7 titles — updates as they release)
Sticky 6-stone progress bar (Power · Space · Reality · Soul · Time · Mind). Each stone tracks phase-specific completion and pulses gold when the phase is fully watched.
Between each phase, a jagged SVG crack tears across the full width as it scrolls into view — color-coded per phase, with pulsing energy spark dots on the tear.
Concentric 4-ring SVG countdown to December 18, 2026. Each ring rotates independently at different speeds and directions, with glowing arcs that shrink as time passes.
Mark any title as watched and it dissolves into a canvas particle burst — genuine Thanos snap dust physics on every card.
Scroll to a certain depth and branching lightning strikes across a fixed canvas overlay, with a white screen flash.
Click the ENTER THE MULTIVERSE CTA and a sling-ring spark animation expands into a full portal reveal.
Each phase section has a colored atmospheric glow blob that drifts at 0.28× scroll speed, creating genuine multi-depth layering.
Fully playable arena game at the bottom of the page:
- Move your cursor to control a glowing hero
- Collect all 6 hexagonal Infinity Stones (magnetic pull when close)
- Dodge Outrider enemies that home in on you — every stone collected spawns a new enemy
- 3 lives, escalating speed, local best-time leaderboard
- Win screen: GAUNTLET COMPLETE
- Search — filter titles by name in real-time
- Phase pills — filter to a single phase
- ✓ ALL DONE — mark all 94 titles watched instantly
- ↺ RESET — clear all progress
- All state persists via
localStorage
| Layer | Tech |
|---|---|
| Structure | HTML5 (semantic) |
| Styling | Vanilla CSS (@property, mask-composite, clamp()) |
| Logic | Vanilla JavaScript (no frameworks, no dependencies) |
| Animation | Canvas API + requestAnimationFrame |
| Fonts | Syne · Chakra Petch · Share Tech Mono (Google Fonts) |
| Storage | localStorage |
Zero build step. Zero dependencies. Open index.html and it runs.
git clone https://github.com/YOUR_USERNAME/doomsday.git
cd doomsday
# Open index.html in any browser — no server neededOr serve with any static server:
npx serve .
# → http://localhost:3000doomsday/
├── index.html # Full page structure + splash overlay
├── styles.css # ~1700 lines — design system, animations, HUD styles
├── app.js # ~1500 lines — all canvas engines + game logic
├── latest-data.md # Watch order source data
└── README.md
| System | Implementation |
|---|---|
| JARVIS HUD | Canvas RAF loop — hex grid, 3 arc rings, radar sweep |
| Void background | Canvas particle field (150 floating dots) |
| Cursor trail | Multi-dot smooth lerp trail |
| Thanos snap | Per-card canvas particle simulation |
| Thor lightning | Branching recursive line canvas |
| Strange portal | 2-phase sling-ring spark → portal expand |
| Doom Clock | SVG stroke-dasharray driven by tickCountdown() |
| Reality tears | SVG path with stroke-dashoffset animation |
| Phase parallax | getBoundingClientRect() + RAF scroll handler |
| Infinity Trial | Full game loop — physics, collision, particle FX |
Avengers: Doomsday — December 18, 2026
The Doom Clock ticks in real time.
Built for the obsessed. Not affiliated with Marvel Studios.