A hand-tracked bartending game for your browser. Stand behind the bar of a golden-hour speakeasy, take orders from patrons, and mix real cocktails — by literally reaching out with your hands. Your webcam tracks your hands; you grab bottles, tilt your wrist to pour, shake, stir, muddle, garnish, and slide the glass across the bar. You're scored on how correctly every drink is made.
Runs entirely in the browser as a static site (GitHub Pages friendly). All hand tracking is on-device — no video ever leaves your machine, and camera access starts only after you click.
- Camera mode (the real thing): allow camera access, run the 10-second calibration, then use your hands — pinch or make a fist to grab, roll your wrist to pour (real forearm pronation, read from 3D hand landmarks — tip it further and it pours faster), shake the tin, circle to stir, press to muddle, flick the bitters.
- Mouse mode (no webcam needed): move to aim, hold left-click to grab, mouse wheel (or hold both buttons and drag down) to tilt the bottle and pour, hold Space to shake, hold right-click alone and circle to stir, press D to dash bitters, R to level the bottle.
Reaching toward the left or right edge of the screen turns your view along the bar — the middle of the screen is a dead zone, so building a drink never drifts the camera. Whatever you point at names itself, so you never have to squint at a label.
Modes: Training Shift (guided tutorial) · Opening Shift (relaxed, one patron at a time, recipe book open) · Friday Rush (timed, up to three simultaneous orders, difficulty ramps) · After Hours (sandbox).
npm ci
npm run assets:fetch # downloads the MediaPipe hand model + wasm (one-time)
npm run dev # http://localhost:5173npm test runs the unit suite (recipes, mixing math, scoring, gesture logic); npm run build typechecks + produces dist/.
Generated textures/labels are committed. To regenerate, put OPENAI_API_KEY=… in .env (never committed) and run npm run assets:gen — see docs/ASSET_PIPELINE.md. The game runs fine without any generated art (procedural fallbacks).
- Create a GitHub repo and push
main. - Repo Settings → Pages → Source: GitHub Actions.
- Push — .github/workflows/deploy.yml builds and publishes automatically. Camera requires HTTPS, which Pages provides.
- Architecture — systems, contracts, data flow
- Game design — mechanics, scoring, modes, recipes
- Art direction — the look, the fictional brand catalog
- Asset pipeline — build-time image generation
Desktop Chrome/Edge/Safari with WebGL2. Hand tracking wants decent light and your hand roughly 30–60 cm from the camera. All liquor brands in the game are fictional parodies; recipes are the classics. Drink responsibly; pixels only.