A high-performance, distraction-free typing application built with an intentional, zero-gradient solid design system, MonkeyType smooth caret physics, Web Audio API procedural mechanical switch synthesis, ANSI virtual keyboard, and comprehensive telemetry analytics.
- Anti-AI-Slop Solid Aesthetic: Clean, high-contrast, zero-gradient solid design system with 5 selectable themes (Original Midnight Blue, Paper Light, Nord Slate, Amber CRT, Espresso).
- MonkeyType Caret Physics: Continuous multi-line auto-scrolling with smooth sliding caret motion and real-time character state validation.
- 100vh Single-Page Architecture: Distraction-free layout perfectly fitted within 100vh without window scrollbars.
- Multi-Mode Test Engine:
- Time: 15s, 30s, 60s, 120s tests.
- Words: 10, 25, 50, 100 word sessions.
- Quotes: Curated philosophical and technical literature.
- Code: Real JavaScript, Python, TypeScript, and Rust code snippets.
- Custom: User-supplied custom text practice.
- Modifiers: Punctuation and number generators.
- Interactive ANSI Keyboard: Authentic mechanical key proportions, real-time keypress depress state, and touch-typing finger guidance.
- Procedural Sound Synthesizer: Zero-dependency Web Audio API sound generator (Mechanical Click, Typewriter Strike, Soft Pop, and Error tones).
- Telemetry & Results Analytics:
- Second-by-second SVG speed progression timeline graph.
- Mistake review with one-click Practice Missed Words mode.
- Persistent LocalStorage personal best records and history logs.
| Key | Action |
|---|---|
Tab / Esc |
Instant restart test session |
Shift + Enter |
Load new test content |
Ctrl + Backspace |
Delete entire previous word |
Space |
Advance to next word |
? |
Open keyboard shortcuts menu |
- Framework: React 19 + Vite
- Styling: Tailwind CSS v4 + Solid Design Tokens
- Typography: JetBrains Mono + Inter
- Audio: Web Audio API Procedural Synthesizer
- Visuals: Canvas Confetti
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Run linter
npm run lint