Development of TypeVelocity Typing Game
Atul Ranjan
Case Study: TypeVelocity – A Procedural, React-Based Typing Game
1. Overview
TypeVelocity is a browser-based, retro-arcade typing game where the player’s typing speed (WPM) dictates the acceleration of a rocket trying to reach "escape velocity." Spanning 20 progressive levels, the game features dynamic difficulty scaling, procedural HTML5 Canvas environments, a custom Web Audio API synthesizer, and real-time session analytics.
This case study breaks down the technical architecture, implementation strategies, and solutions to complex browser-based game development challenges.
2. Technology Stack
Core Framework: React 18 (Functional Components, Hooks)
Language: TypeScript (Strict typing for game state, analytics, and payloads)
Styling: Tailwind CSS v4, custom CSS Animations, inline dynamic styling
Rendering Engine: HTML5
<canvas> (CanvasRenderingContext2D), inline SVGsAudio Engine: Native Web Audio API (
AudioContext)Data Visualization: Recharts (for session analytics)
Backend / Leaderboard: Firebase Firestore
UI Components: Radix UI primitives (headless accessibility)
3. Architecture & State Management
TypeVelocity eschews heavy state-management libraries (like Redux or Zustand) in favor of a top-down React architecture optimized for game loops.
The Orchestrator (
App.tsx): Acts as the central game controller. It holds the core state (currentWPM, level, phase, combo) and coordinates transitions between game phases (ready, playing, escaping, levelComplete).Decoupled Rendering Loops: To prevent React state updates from causing frame drops, intensive visual tasks (like the scrolling starfield and particle emissions) are offloaded to pure
requestAnimationFrame loops via useRef. React is only used to mount the canvas and pass down high-level game state (like speed or level).Persistence: Game analytics and unlocked levels are stored in
sessionStorage and localStorage, ensuring data survives page reloads without requiring a backend database (until the player submits to the global leaderboard).4. Core Implementation Details
A. The Typing Engine (WordDisplay.tsx)
WordDisplay.tsx)Building a reliable typing interface in the browser—especially one that works across desktops and mobile devices—is notoriously difficult due to varying OS-level keyboard behaviors.
The Hidden Input Hack: Instead of listening to raw
keydown events (which fail on mobile software keyboards), the game forces focus onto a visually hidden <input type="text">. This tricks the browser into handling autocorrect, mobile keyboards, and language inputs natively.AABB Collision Detection: Words spawn randomly on the screen. To prevent text from overlapping and becoming unreadable, an Axis-Aligned Bounding Box (AABB) collision algorithm runs on word generation. It treats the screen as a percentage-based grid, calculates the width of the incoming word, and nudges it until it finds clear space.
Character Highlighting: The current word is split into an array of characters. React renders each character individually, applying different text-shadows and colors based on the
typedCount index, providing instant, sub-millisecond visual feedback.B. Zero-Asset Procedural Environments (StarField.tsx)
StarField.tsx)Perhaps the most technically impressive aspect of TypeVelocity is that it uses zero external image assets for its backgrounds. Every planet, nebula, and galaxy is generated via code.
Canvas 2D Math: Using
ctx.createRadialGradient, ctx.createLinearGradient, and trigonometric functions (Math.sin, Math.cos), the game draws complex celestial bodies. For example, Level 6 (Jupiter) is drawn using dozens of overlapping, slightly wavy bezier curves and gradients to simulate gas storms.Deterministic Hashing: For features like the Milky Way dust lanes or asteroid craters, pseudo-random hashing functions generate stable, repeatable noise. This ensures the environment looks identical every time a specific level is loaded, without storing heavy texture maps.
Parallax Scrolling: Stars are divided into three depth layers (
0, 1, 2). During gameplay, the player's WPM is converted into a power multiplier, which accelerates the Y-axis translation of the stars, creating a hyper-speed parallax effect.C. Procedural Synthesizer Audio Engine (AudioEngine.tsx)
AudioEngine.tsx)Rather than loading large
.mp3 or .wav files, the game generates all sound effects and music on the fly using the browser's native Web Audio API.Mechanical Keyboard Simulation: The typing sound is a composite of four distinct synthesized layers:
Attack: A short noise burst for the plastic "clack."
Thunk: A rapidly dropping sine wave for the key bottoming out.
Ring: A high-frequency, resonant
peaking filter for the metallic echo.Return: A delayed micro-click for the key springing back up.
Dynamic Generative Soundtrack: The background music is an algorithmic sequencer. It uses a
requestAnimationFrame/setTimeout lookahead scheduler to queue notes. As the player's level increases, the engine dynamically alters the BPM, adds new instruments (sub-bass, hi-hats, arpeggios), and opens low-pass filters, resulting in a soundtrack that physically intensifies as the game gets harder.D. Real-time Analytics (sessionAnalytics.ts & AnalyticsModal.tsx)
sessionAnalytics.ts & AnalyticsModal.tsx)TypeVelocity tracks the player's performance at a granular level.
WPM Snapshots: A
setInterval loop records the player's WPM every 200ms.Data Visualization: Using
recharts, this snapshot array is fed into an <AreaChart> to show the player's typing speed over the course of a level. Bar charts and Pie charts break down peak performance and accuracy metrics.Standardized WPM Logic: WPM is calculated using the standard typographical rule (5 characters = 1 word), ensuring accuracy is measured fairly regardless of word length.
E. Backend: Firebase Leaderboard (leaderboard.ts)
leaderboard.ts)To foster competition, the game integrates with Firebase Firestore.
Optimized Queries: To save on database reads and avoid complex composite indexes, the game fetches the top 20 players globally using a simple
orderBy("averageWPM", "desc").Client-Side Ranking: To find the current player's global rank, the app queries Firestore for all users with an
averageWPM greater than the player's, then iterates through them client-side to apply tie-breakers (like peakWPM). This keeps database operations cheap and fast.5. Technical Challenges & Solutions
Challenge 1: React Re-render Performance
React is not inherently built for 60FPS game loops. Updating React state on every single frame for star movements would cause severe stuttering.
Solution: State isolation. The
StarField, Rocket, and SubShips components use useRef to hold animation values and mutate the DOM or Canvas directly inside a requestAnimationFrame loop, bypassing the React reconciliation cycle entirely.Challenge 2: WPM Accuracy During Pauses
If a player pauses the game, standard
Date.now() - startTime math will result in their WPM plummeting to zero when they resume.Solution: The app tracks
pausedAt and accumulates a totalPausedMs variable. When calculating WPM, the formula subtracts the total paused time from the elapsed time, ensuring the typing speed graph remains perfectly accurate.Challenge 3: Audio Context Suspension
Modern browsers block audio playback until the user interacts with the page.
Solution: The audio engine implements an
ensureCtx() callback. It waits for the very first keystroke (triggerClick), instantiates the AudioContext, and begins the background music loop concurrently with the typing sound.6. Conclusion
TypeVelocity is a prime example of pushing standard web technologies (React, Canvas, Web Audio API) to their limits. By utilizing procedural generation for both graphics and audio, the game maintains a near-instant load time and zero asset-bloat. The architecture carefully balances React's declarative UI paradigm with the imperative performance requirements of a 60FPS video game, resulting in a highly polished, responsive, and immersive browser experience.
Levels of Type Velocity
Like this project
Posted Mar 25, 2026
TypeVelocity is a React-based typing game where your WPM drives a rocket. Built with zero assets, it features procedural Canvas graphics and Web Audio synths.
