✦ MCUverse

The Marvel multiverse, mapped like a cosmic transit system.

Every title is a station. Every universe is a line. Every collision becomes an interchange.

Explore features · My Marvel Journey · Run locally · Deploy

_{Story chronology at 55% — eight glowing universe lines crossing one shared timeline.}

MCUverse turns Marvel movies, television seasons, alternate realities, and confirmed crossovers into an interactive cosmic metro map.

Built with plain HTML, CSS, JavaScript, and JSON. No framework. No build pipeline. No account system. No backend.

---

Why it feels different

Most Marvel timelines are lists. MCUverse is something you explore.

• Story chronology and release order — jump between when events happen and when titles premiered.
• Eight universe lines — follow the MCU, X-Men, Sony Spider-Man, Spider-Verse, Marvel Television, Disney+, and more.
• Interactive crossover paths — select crossover titles such as Spider-Man: No Way Home or Deadpool & Wolverine to illuminate connected movies, shows, character routes, and universe jumps.
• Animated connections — energy travels across active crossover lines while unrelated parts of the map fade into the background.
• Trace routes — isolate Spider-Man, Wolverine, Deadpool, Avengers, Marvel Television, or Marvel on Disney+.
• Cinematic title details — explore posters, story dates, creators, runtimes, ratings, box office, seasons, episodes, and summaries.
• Responsive cosmic map — pan, pinch, zoom, reset, or fit the complete timeline on desktop and mobile.
• Shareable filtered views — search, chronology, routes, and universe filters are represented in the URL.

One map, every screen

Desktop command center Search, change chronology, filter universes, trace characters, inspect crossover routes, and navigate the complete multiverse from one wide cinematic canvas. 55% default overview Lower-corner map controls Progress-ring universe picker Animated crossover energy Keyboard-friendly interaction
Mobile multiverse The complete transit map stays intact on phones—no simplified replacement view. Pan with one finger, pinch to zoom, or use the compact 50% map controls. The responsive header, safe-area-aware bottom dock, and device-local Journey tracker are designed specifically for small screens.

_{The same connected universe map, optimized independently for desktop and mobile.}

My Marvel Journey

Turn the timeline into a personal watch tracker:

• Mark titles as Watched, Watching, or Planned.
• See status badges directly on timeline stations.
• Track completion across every universe and saga.
• Explore universe progress through animated progress rings.
• Generate a cinematic PNG progress card.
• Share through the native device share sheet when supported.
• Export or import a JSON backup.

WATCHED  ✓        WATCHING  ▶        PLANNED  +

Privacy first

Journey progress is stored only in the browser using localStorage.

• No account
• No cookies for journey tracking
• No database
• No progress uploaded to a server
• No cross-device synchronization

Clearing browser site data removes the journey, so the dashboard includes backup export and import controls.

At a glance

🎬 Timeline	📺 Television	🌌 Universes	🚀 Deployment
80 movies + 56 seasons	31 series	8 lines	GitHub Pages

Runtime	Data source	Personal data	Build step
Static browser app	data/movies.json	Device-local localStorage	None

Run locally

Opening index.html directly can block JSON loading, so use a local static server:

git clone <your-repository-url>
cd MCUverse
python3 -m http.server 4173

Open http://localhost:4173.

Node users can alternatively run:

npx serve .

Deploy to GitHub Pages

MCUverse deploys directly from the repository—there is nothing to compile.

1. Push the project to GitHub.
2. Open Settings → Pages.
3. Set Source to Deploy from a branch.
4. Select main and / (root).
5. Save and open the generated Pages URL.

GitHub Pages provides HTTPS, allowing compatible mobile browsers to use the native Web Share API for journey cards.

Project structure

MCUverse/
├── index.html              # Application shell and accessible UI
├── Desktop.png             # Wide project showcase
├── Mobile.png              # Mobile project showcase
├── css/
│   └── style.css           # Cosmic transit-map design system
├── js/
│   ├── app.js              # Rendering, interactions, journey tracking
│   └── timeline-utils.js   # Chronology, routing, and formatting helpers
├── data/
│   └── movies.json         # Movies, seasons, universes, and connections
├── scripts/
│   ├── fetch-box-office.js
│   ├── fetch-posters.js
│   └── fetch-tv-series.js
├── tests/
│   ├── timeline.test.js
│   └── validate-data.js
└── README.md

Editing the timeline

All timeline content lives in data/movies.json.

Movie example

{
  "id": "some-unique-kebab-case-id",
  "title": "Movie Title",
  "line": "mcu",
  "releaseDate": "2028-05-05",
  "director": "Director Name",
  "runtimeMinutes": 130,
  "rating": "PG-13",
  "status": "released",
  "synopsis": "One or two original summary sentences."
}

Television season example

{
  "id": "series-example-season-1",
  "title": "Example — Season 1",
  "type": "series",
  "seriesTitle": "Example",
  "seasonNumber": 1,
  "line": "disneyPlus",
  "releaseDate": "2028-01-15",
  "creator": "Creator Name",
  "episodes": 8,
  "status": "released",
  "synopsis": "An original season summary."
}

Important fields

Field	Purpose
id	Stable, unique kebab-case identifier used by routes and local journey progress
line	Universe ID from the top-level lines array
releaseDate	ISO date in YYYY-MM-DD format
inUniverseYear	Optional story-placement year used by Story Chronology
status	released, upcoming, or shelved
type	Set to series for television seasons
phase / saga	Optional grouping used by search and journey statistics
joinsFrom	Universe IDs that merge into this title
worldwideBoxOffice	Worldwide theatrical gross in raw USD

Undated titles can use null for releaseDate; they remain outside the plotted timeline until a date is known.

Connections

MCUverse supports three kinds of relationships:

1. Universe merges through a title’s joinsFrom field.
2. Crossover teases through the top-level crossoverTeases array.
3. Timeline connections between television seasons and Sacred Timeline events.

The crossover-path engine combines these relationships with character routes to build the illuminated network shown on selection.

Data maintenance

Create a local .env file when running optional TMDB-powered maintenance scripts:

TMDB_API_KEY=your_key_here

Then use:

npm run fetch-posters
npm run fetch-box-office
npm run fetch-tv-series

The deployed application itself does not need this key.

Testing

Run behavior tests:

npm test

Validate the complete dataset and JavaScript syntax:

npm run validate

Browser storage

Journey data uses this local storage key:

mcuverse:journey:v1

The stored value maps stable title IDs to one of:

watched | watching | planned

Changing an existing title’s id will disconnect its previously stored journey status, so IDs should remain stable.

Accuracy

Marvel’s release calendar changes frequently. Upcoming dates and project statuses are reference data, not guarantees. Verify future releases against current official announcements before relying on them.

Disclaimer

MCUverse is an unofficial, fan-made reference project for personal and educational use. Marvel, the MCU, X-Men, Spider-Man, Disney, 20th Century Studios, and Sony Pictures are trademarks of their respective owners.

This project is not affiliated with, endorsed by, or sponsored by Marvel Entertainment, Marvel Studios, The Walt Disney Company, 20th Century Studios, or Sony Pictures.

---

Choose a universe. Follow the line. Watch everything collide.