AH
Type to search...
2 min read
PlayAble

Browser-based reimplementation of the 90s Hugo TV show game with three simultaneous input methods for accessibility. Built with my 10-year-old son at Hackathon Heilbronn (200+ participants, 70 teams) in a single 24-hour session.

Input methods

  • Keyboard: arrow keys, WASD, numpad
  • Voice: 18-word TensorFlow.js model running client-side (up, down, go, stop, three, six, nine)
  • Hand gestures: MediaPipe HandLandmarker via WebAssembly with GPU acceleration (open hand = jump, fist = duck, thumbs up = confirm)

All three work simultaneously. The game merges inputs every frame.

Tech stack

LayerTechnology
FrontendVanilla HTML5 Canvas + ES Modules (no framework, no bundler)
VoiceTensorFlow.js Speech Commands (4 MB, browser-only)
GesturesMediaPipe Tasks Vision HandLandmarker (WebAssembly + GPU)
RenderingWebGL 2 with custom GLSL CRT shader (scanlines, barrel distortion, chromatic aberration)
AudioWeb Audio API with preloaded buffers
DeploymentVercel (static)

All processing happens locally in the browser. No server, no cloud API, no data leaves the device.

Video demo