TypeVelocity: Software case study

Pushing standard web tech (React, Canvas, Web Audio API) to its limits with procedural generation for both graphics and audio.

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. 20 progressive levels, dynamic difficulty scaling, procedural HTML5 Canvas environments, a custom Web Audio API synthesizer, and real-time session analytics.

Architecture

Top-down React architecture optimized for game loops, no Redux/Zustand needed.
Decoupled rendering loops via requestAnimationFrame + useRef so React state updates don't drop frames.
Game analytics and unlocked levels persist via sessionStorage and localStorage.
Firebase Firestore powers a global leaderboard, with optimized client-side ranking to keep DB reads cheap.

Zero-asset procedural environments

Every planet, nebula, and galaxy is generated via code. No external image assets. ctx.createRadialGradient, trigonometric noise, and bezier curves draw celestial bodies on the fly.

Deterministic hashing produces stable noise (Milky Way dust lanes, asteroid craters) without storing texture maps. Stars use 3 parallax depth layers, accelerated by the player's WPM.

Procedural synthesizer audio

All sound effects and music are generated on the fly via the Web Audio API. The mechanical-keyboard sound is a composite of four synthesized layers: attack noise burst, thunk sine, ringing peaking filter, and a delayed micro-click for key return.

The soundtrack is an algorithmic sequencer driven by a lookahead scheduler. As the player levels up, the engine raises BPM, adds instruments, and opens low-pass filters, so the music physically intensifies with the difficulty.

Solved problems

60FPS in React: state isolation via useRef and direct Canvas mutation, bypassing React reconciliation.
Mobile typing: a hidden <input type='text'> instead of raw keydown so software keyboards, autocorrect, and IME all work.
Word collision: AABB algorithm on word spawn so text never overlaps.
Pause-aware WPM: tracks totalPausedMs so accuracy stays correct after pauses.
Audio context unlock: ensureCtx() boots the AudioContext on the first keystroke.