What You'll Build
- A typing speed game with:
- Words-per-minute (WPM) calculation in real time
- Accuracy tracking with error highlighting
- Random text passages of varying difficulty
- A countdown timer with visual urgency cues
- A detailed results screen with stats breakdown
- Personal best tracking with localStorage
Tool: Bolt (no coding needed) Difficulty: Beginner Time: ~20 minutes Coding required: None
Typing speed tests are one of those games everyone has tried at least once. Sites like Monkeytype and TypeRacer have millions of users who come back daily to push their WPM higher. You'll build your own typing test with real-time WPM tracking, accuracy scoring, and a results screen that breaks down exactly how you performed. It's a surprisingly satisfying game to both build and play.
This is a perfect vibe coding project because the mechanics are intuitive — display text, track keystrokes, calculate speed. But the polish is what makes it addictive: smooth character highlighting, live WPM updates, and satisfying results screens. Bolt handles all the keystroke tracking and math so you can focus on describing the experience you want.
What You Need
The Founding Prompt
Go to bolt.new and paste this prompt:
Build a typing speed test game with these features: 1. TEXT DISPLAY: Show a passage of random text (3-5 sentences, approximately 40-60 words) in a large, monospaced font in the center of the screen. Include at least 15 different passages stored in an array and randomly select one for each test. 2. TYPING AREA: The player types in an invisible input field (no visible text box — they type and the passage text highlights as they go). Each correctly typed character turns green. Each incorrectly typed character turns red with a subtle underline. Untyped characters remain gray. The current character has a blinking cursor indicator. 3. REAL-TIME STATS: Show live WPM (words per minute) and accuracy percentage above the text passage, updating every second. WPM formula: (characters typed / 5) / minutes elapsed. Accuracy: (correct characters / total characters typed) * 100. 4. TIMER: A 60-second countdown timer displayed prominently. The timer starts when the player types the first character. Show a progress bar that depletes as time runs out. The bar changes from green to yellow at 30s and red at 10s. 5. RESULTS SCREEN: When the timer hits 0 or the passage is completed, show a results screen with: final WPM, accuracy percentage, total characters typed, correct characters, errors, a letter grade (S/A/B/C/D/F based on WPM), and "Try Again" button. Also show a comparison to the player's personal best. 6. PERSONAL BEST: Save the highest WPM and accuracy to localStorage. Show current personal best on the start screen and highlight "New Personal Best!" in gold if beaten. 7. VISUAL STYLE: Clean, minimal dark theme. Dark gray background (#1a1a2e), white text for the passage, green for correct (#4ade80), red for errors (#f87171). Use a monospaced font like "JetBrains Mono" or "Fira Code" from Google Fonts. Large, readable text (20px minimum). 8. START SCREEN: Show the game title "Type Speed", personal best WPM, and "Start Typing Test" button. Also show a difficulty selector. 9. DIFFICULTY: Three modes — "Easy" (common simple words), "Medium" (mixed sentences with punctuation), "Hard" (complex words, numbers, and special characters). Default to Medium.
Click Generate and wait for Bolt to build your game.
Step 1: Take Your First Typing Test
Click "Start Typing Test" and begin typing the displayed passage. Watch as characters turn green or red in real time. Check that the WPM counter updates as you type and the timer counts down properly. Complete the test or let the timer run out, and verify the results screen shows accurate stats.
Step 2: Add Live Character Feedback
The moment-to-moment typing feel is everything. Each keystroke should give clear, instant visual feedback so the player always knows exactly where they are in the passage.
Improve the typing feedback: - Add a visible cursor (blinking vertical bar) at the current character position - When a character is typed correctly, briefly flash it bright green before settling to a softer green - When a character is typed wrong, shake that character horizontally by 3px for 200ms - Allow backspace to go back and fix errors (re-mark the character as gray/untyped) - Show the current word highlighted with a subtle background color so the player knows which word they're on - Add a subtle typing sound effect using the Web Audio API — a soft key click on correct characters and a dull thud on errors
Step 3: Improve the Results Screen
The results screen should be detailed and motivating. Players want to understand their performance and feel encouraged to try again.
Make the results screen more detailed and engaging: - Animate the final WPM number counting up from 0 to the actual value over 1 second - Show a letter grade with a large styled badge: S (100+ WPM), A (80-99), B (60-79), C (40-59), D (20-39), F (under 20) - Display a speed graph showing WPM over time (a simple line chart with WPM sampled every 5 seconds during the test) - Show problem keys: list the 3 characters the player made the most errors on - Add motivational messages based on performance: "Lightning fast!" for S, "Great job!" for A, "Keep practicing!" for C/D - If the player beat their personal best, show confetti particles and "NEW PERSONAL BEST!" in gold - Add "Share Result" button that copies "I typed XX WPM with XX% accuracy on Type Speed! 🏎️" to clipboard
Step 4: Add Multiple Game Modes
Different modes keep the game fresh and let players practice specific skills. Each mode should feel distinct.
Add three game modes (selectable on the start screen): 1. CLASSIC (60 seconds): The default mode. Type as much of the passage as you can in 60 seconds. If you finish the passage, immediately load the next one and keep going. 2. WORD SPRINT (25 words): No timer. Type exactly 25 words as fast as you can. The clock starts on the first keystroke and stops when the last character is typed. Show completion time and WPM on the results screen. 3. SUDDEN DEATH: No timer, but you can't make any errors. The first mistake ends the test immediately. Show how many characters you typed correctly before the mistake. This mode uses easier text (common words only). Show separate personal bests for each game mode. Add a tab bar or segmented control at the top to switch between modes.
Step 5: Add Sound Effects and Visual Polish
Subtle audio and visual touches make typing feel more satisfying and create a "flow state" experience.
Add audio and visual polish: - Typing sounds using Web Audio API: soft click (2000Hz, 10ms) on correct keystroke, lower thud (200Hz, 30ms) on error - When WPM exceeds 60, add a subtle trailing glow effect behind the cursor (like a speed trail) - Add a combo counter that tracks consecutive correct characters. Show "x10", "x20", "x50" streak milestones with a brief flash animation - At streaks of 50+, add a fire/heat visual effect around the text area border - When the timer reaches 10 seconds, pulse the timer text and add an urgent red glow around the edges - Add a gentle ambient keyboard-clicking background sound loop that plays during the test (toggleable) - Add a mute button in the top corner, save preference to localStorage
Step 6: Make It Mobile Friendly
Typing tests are primarily a desktop experience, but the game should still work on mobile with an on-screen keyboard.
Make the typing test work on mobile: - Detect mobile devices and show a message "Tap the text to begin typing" that triggers the keyboard - Use a hidden text input that receives focus on tap — connect it to the typing logic - Scale the text passage to fit mobile screens (16px font size on mobile, max-width: 100%) - Move the stats bar (WPM, accuracy, timer) to a compact horizontal layout above the text - Make the results screen scrollable on mobile - On mobile, show a "For the best experience, try on desktop" subtle note at the bottom - Ensure the virtual keyboard doesn't overlap the text passage — scroll the view if needed
Step 7: Deploy and Share
Click the Deploy button in Bolt to publish your typing speed game. Share the link and challenge friends to a WPM battle. Each player's personal bests are saved in their own browser. The game is entirely client-side — no server, no accounts, just fast fingers.
Level Up Your Game
Try these follow-up prompts to make your typing game even better:
Add difficulty levels:
Add granular difficulty settings beyond the three modes: allow players to toggle "Punctuation" (on/off), "Numbers" (on/off), and "Capital Letters" (on/off) as separate checkboxes. Generate passages matching the selected options. Show the active settings during the test.
Add a timer:
Add a "Custom Timer" option on the start screen. Let players choose 15s, 30s, 60s, or 120s for the Classic mode. Save the preferred timer length to localStorage. Show separate personal bests for each timer duration.
Add animations:
Add satisfying micro-animations: each correctly typed character scales up briefly (110%) before settling, the WPM counter has a rolling-number animation when updating, the progress bar has a shimmer effect, and the cursor leaves a brief afterimage trail as it moves through the text. When completing a word, add a subtle checkmark that fades in and out.
Add high score saving:
Track comprehensive statistics in localStorage: total tests taken, average WPM across all tests, average accuracy, total words typed, total time spent typing, best WPM for each difficulty, and improvement trend (is their WPM getting better over time?). Show all stats in a "Statistics" dashboard accessible from the start screen.
Add a practice mode:
Add a "Practice" mode that focuses on the player's weak keys. After each test, analyze which characters had the most errors. In Practice mode, generate text passages that heavily feature those problem characters. Show a "Problem Keys" section on the start screen listing the player's 5 weakest characters with error rates.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
Common Errors
Blank screen after prompt If Bolt generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."
Characters not highlighting correctly Add to your prompt: "Split the passage into individual characters wrapped in span elements. Use an index counter to track the current position. Compare each typed character against passage[currentIndex] and update the span's class to 'correct' or 'incorrect' immediately on keydown."
WPM showing unrealistically high numbers at the start Add to your prompt: "Don't calculate or display WPM until at least 3 seconds have elapsed since the first keystroke. Before that, show '--' for WPM. This prevents the initial burst from inflating the score."