A modern space-themed typing speed trainer inspired by Monkeytype and NASA mission control aesthetics.
Practice typing with beautiful animated starfields, live WPM tracking, accuracy monitoring, mission-style progression, background music, and a final celebration screen.
Built using pure HTML, CSS, and JavaScript — no frameworks, no build tools, no dependencies.
Enable GitHub Pages: Repository → Settings → Pages → Branch:
main→ Save
- Character-by-character highlighting
- Current cursor indicator
- Live typing feedback
- Automatic passage progression
- Live WPM calculation
- Live Accuracy calculation
- Lifetime mistake tracking
- Real-time statistics panel
- Complete 3 unique passages
- Automatic loading of new passages
- No repeated passages until the pool is exhausted
- Mission completion system
- Confetti animation
- Final mission report
- Average WPM calculation
- Average Accuracy calculation
- One-click Start Over button
- Animated starfield background
- Smooth particle movement
- NASA-inspired visual design
- Glassmorphism UI
- Looping ambient soundtrack
- Hover-to-expand volume slider
- Modern SVG volume controls
- Adjustable audio levels
| Key | Action |
|---|---|
| Tab | Skip to next passage |
| Esc | Restart current passage |
| Click Anywhere | Refocus typing input |
- Start typing the displayed passage
- Monitor your WPM and Accuracy
- Complete 3 unique passages
- View your final mission statistics
- Start another mission
Accuracy is calculated using all typing mistakes made during the challenge rather than only the final corrected text.
| Layer | Technology |
|---|---|
| Structure | HTML5 |
| Styling | CSS3 |
| Logic | Vanilla JavaScript |
| Audio | HTML5 Audio API |
| Animation | Canvas API |
| Effects | Web Animations API |
No frameworks.
No libraries.
No build process.
blitz-type/
│
├── index.html
├── style.css
├── script.js
├── bgm.mp3
├── README.md
│
└── assets/
└── screenshots/
Simply download the repository and open:
index.html
in your browser.
- Install Live Server extension
- Right-click
index.html - Click "Open with Live Server"
The page will automatically reload whenever changes are saved.
Type normally → Start test
Tab → Next passage
Esc → Restart passage
Hover speaker icon → Show volume slider
Drag slider → Change volume
Calculated using:
Typed Characters ÷ 5
--------------------
Elapsed Time
Calculated using:
Correct Keystrokes
------------------
Total Keystrokes
Every mistake counts, even if corrected later.
- Global leaderboard
- User profiles
- Multiplayer races
- Daily challenges
- Quote API integration
- Custom themes
- Typing analytics
- Achievement system
- Difficulty levels
- Mobile optimization
Pull requests are welcome.
Feel free to:
- Improve UI
- Add new game modes
- Fix bugs
- Add animations
- Enhance accessibility
MIT License
Free to use, modify, and distribute.