Show HN: Waiting for LLMs Suck – Give your user a game

react-waiting-game A tiny one-button mini-arcade for filling the void while a long task runs (LLMs, builds, uploads, you name it). Every game is monocolor, pure 1-bit pixel art, single canvas, zero runtime dependencies, and shares the same combo / power-up / high-score / achievement framework. Pick a game with a single prop: <WaitingArcade game="runner" /> One button: keyboard, pointer, and touch all map to the same primary action Tints to any colour via the color prop (defaults to currentColor) SSR-safe; auto-pauses when the tab is hidden Optional localStorage-backed best score and achievements, namespaced per game Same component still ships as <WaitingGame /> for backward compatibility The games Game id Mechanic Skins Jellyfish Drift jellyfish Hold to swim up, release to sink. Avoid coral & stalactites. jellyfish, octopus, paperBoat Pixel Runner runner Tap to jump, hold for higher jumps. Hop cacti, dodge birds. dino, ninja, frog Gravity Flip gravity Tap to invert gravity. Arc between floor and ceiling, dodge spikes. cube, triangle, diamond Invaders invaders Auto-fires bullets to the right. Tap to swap lane — be in the alien's lane to shoot it, out of it when it arrives. ship, fighter, saucer Rhythm Tap rhythm Notes scroll into a hit zone. Tap on the beat for short notes, hold for long ones. 3 lives. bar, dot, arrow All five games share the same set of features: combo multiplier, near-miss bonus (or its game-specific equivalent), milestone flashes, tier ramp, screen shake, parallax background, three power-ups, and a five-achievement set. Death model varies: most games are one-hit, rhythm uses 3 lives. Install npm install react-waiting-game Quick start import { WaitingArcade } from 'react-waiting-game'; function LoadingScreen() { return <WaitingArcade game="runner" autoStart />; } Use it while waiting on an LLM import { useState } from 'react'; import { WaitingArcade } from 'react-waiting-game'; function Chat() { const [loading, setLoading] = useState(false); async function ask() { setLoading(true); await fetch('/api/chat', { method: 'POST', body: '...' }); setLoading(false); } return ( <div> <button onClick={ask} disabled={loading}>Ask</button> {loading && ( <WaitingArcade game="runner" autoStart persistHighScore persistAchievements /> )} </div> ); } Controls Every game uses the same single-button input. Input Action Hold Space / Arrow Up / W / Touch Primary action (game-specific) Release Stop Jellyfish — hold to thrust upward, release to sink under gravity. Walls catch you gently; only obstacles end the run. Runner — tap to jump, hold to jump higher (variable height). Land before the next obstacle. Gravity — tap to flip gravity. The player accelerates toward the active surface; flip mid-arc to thread between floor and ceiling spikes. Invaders — your turret auto-fires bullets to the right at a fixed cadence. Tap to swap between the upper and lower lane. Aliens that escape past you break your combo; aliens that touch you while in your lane end the run. Rhythm — short tap notes scroll right-to-left into the hit zone; tap when one is centred. Long notes are hold notes — keep the button down while the bar passes through the cursor and release at the end. Missing a note, breaking a hold, or false-tapping costs one of your three lives. <WaitingArcade /> props Prop Type Default Description game 'jellyfish' | 'runner' | 'gravity' | 'invaders' | 'rhythm' 'jellyfish' Which mini-game to render width number 600 Canvas width in px height number…

This excerpt is published under fair use for community discussion. Read the full article at GitHub.