Super Metroid 100% - Speedrun Progress Tracker

A web app to help track Super Metroid 100% speedrun progress.

The source code can be found on GitHub.

Try App Here

Overview

This web application helps speedrunners track their progress during Super Metroid 100% completion runs. It provides an interactive checklist of all 80 collectible items required for 100% completion, organized by route, region, or item type.

Coverage

The tracker includes all items required for 100% completion:

• 14 Energy Tanks
• 10 Super Missiles
• 10 Power Bombs
• 26 Missiles
• 4 Reserve Tanks
• 16 Major Upgrades

Total: 80 collectible items for 100% completion.

Features

Multiple View Modes

• By Route: Items organized in optimal collection order for speedruns
• By Region: Items grouped by Zebes areas (Crateria, Brinstar, Norfair, Maridia, Tourian, Wrecked Ship)
• By Type: Items categorized by function (Energy Tanks, Missiles, Power Bombs, etc.)

Interactive Tracking

• Click items to mark as collected
• Real-time progress percentage calculation
• Visual indicators for collected vs. uncollected items
• Reset functionality for new runs

Filtering System

• Filter by item type (Energy Tanks, Missiles, etc.)
• Filter by region to focus on specific areas
• Combine filters for precise item searches

Speedrun-Optimized

• Route view follows optimal collection paths
• Quick visual identification of remaining items
• Minimal interface to avoid distracting from gameplay

Technical Implementation

Built with modern web technologies:

• React + TypeScript: Component-based architecture with type safety
• CSS Modules: Scoped styling for maintainable UI
• Responsive Design: Works on desktop and mobile devices
• Local Storage: Progress persists between sessions
• Sprite Integration: Uses authentic Super Metroid item and boss sprites

Usage

1. Select View Mode: Choose between Route, Region, or Type organization
2. Apply Filters: Narrow down items by type or region if needed
3. Track Progress: Click items as you collect them during your run
4. Monitor Completion: Watch your percentage increase in real-time
5. Reset for New Runs: Use the reset button to start fresh

For the Speedrunning Community

This tool was built specifically for Super Metroid speedrunners who need:

• Quick Reference: Fast identification of remaining items
• Route Optimization: Items organized in collection order
• Progress Tracking: Real-time completion percentage
• Minimal Distraction: Clean interface that doesn't interfere with gameplay

The route view follows established speedrun strategies, making it easy to stay on track during attempts.

Installation & Development

npm install
npm start

Open http://localhost:3000 to view the app.

TODO

• Support other & custom routes

Credits

• Adapted from the 100% guide: https://wiki.supermetroid.run/100%25
• Room images from: https://metroid.retropixel.net/games/metroid3/ & https://metroid.fandom.com/wiki/Metroid_Wiki
• All game content © Nintendo

Built for the speedrunning community to help achieve those perfect 100% completion runs on Planet Zebes.