TypeCosmic
A typing speed test, reimagined with a cosmic twist
A space-themed typing speed test web app—built out of a genuine passion for typing and a desire to create a daily typing companion that never feels boring or clinical.
Why I Built This
I love typing—it is a random, simple hobby, but deeply satisfying to me. However, most existing typing speed test tools feel purely clinical. While functional, their flat and generic interfaces make daily practice feel repetitive and uninspiring over time.
I wanted to build a version that remains technically precise (accurate WPM calculations, granular error metrics, sub-millisecond real-time feedback), while offering a living, vibrant experience. Taking inspiration from deep-space aesthetics, TypeCosmic transforms every typing session into a journey through space—making typing feel like piloting a spacecraft rather than filling out a form.
End-to-End Craft & Execution
This was a solo project built from scratch—I handled product thinking (determining feature priorities), UI/UX design, and full front-end implementation. Being a passion project allowed me full creative and technical freedom to experiment with approaches rarely requested in client projects:
Key Features
Engineered for typists who value speed, accuracy, and aesthetic delight.
Typing Test Engine
- Time mode (15 / 30 / 60 / 120 seconds) & Word count mode (10 / 25 / 50 / 100 words).
- Quote mode & Custom paste text mode.
- Real-time correct (green) & error (red) character highlighting with animated caret.
- Live WPM, accuracy %, and error count calculations.
Results & Analytics
- Summary screen displaying final WPM, accuracy %, raw WPM, and consistency score.
- Per-second speed progression charts using lightweight data visualization.
- Test history logging & speed progression over time (Phase 2 account feature).
Customization & Controls
- Language selection (Indonesian & English text catalogs).
- Glassmorphism visual themes & monospace font options.
- Keypress sound toggles & blind mode option (hiding live stats for pure focus).
Design Approach: Cosmic Aesthetics Meets Legibility
Balancing immersive 3D space visuals with high-contrast text readability during fast typing sessions.
The primary visual challenge was ensuring that the cosmic theme remained immersive without compromising legibility during intense, high-speed typing (100+ WPM). The solution: the starfield/particle background operates on a deep background layer with low opacity and subtle motion, while the typing canvas uses high-contrast typography over semi-solid liquid glass cards. This ensures zero distraction while maintaining an ethereal space atmosphere.
Tech Stack
Technologies selected to deliver smooth rendering, precise timing, and elegant UI design.
Phased Product Roadmap
A structured evolution showing clear direction beyond initial MVP implementation.
MVP Foundation
Core typing test engine (time & word count modes), instant summary page, base glassmorphic UI, guest session playback.
Accounts & Analytics
User profiles (OAuth/Email), test history logging, long-term WPM progression graphs, and global/weekly leaderboards.
Multiplayer & Customization
Real-time multiplayer typing race rooms (friend codes & bot matches), achievements/badges, custom font upload & mechanical keypress soundpacks.
Lessons Learned & Key Takeaways
Because TypeCosmic was a personal passion project without strict client deadlines, it served as an unrestricted technical playground. I had the freedom to experiment with state management and rendering boundaries—including testing architectural dead ends and pivoting when initial approaches felt clunky.
The key technical takeaway was learning how to decouple high-frequency DOM input listeners from React re-render trees and delegate 3D particle animations directly to GPU shaders. These optimization techniques have since become part of my core engineering toolkit for client web applications.