wizaaahhh!

Storybook home: name your wizard and create or join a duel
Lobby: share a room code with your rival
A storybook intro sets up the duel
Spell clash: trace the golden circle to charge your magic
Incendio: open your fist to hurl a fireball
Taurus: the Hook 'em longhorn charge
Pose race: match the monkey's pose before your rival does.

Inspiration

HackTX 2026's fairytale theme had us thinking about one thing: wizard duels. Every kid who grew up on fantasy stories has pointed a stick at a friend and yelled a spell. We wanted to make that real, with no controller and no keyboard, just your hands and a webcam. Make a fist and fling it open to launch a fireball, throw up both palms to shield, and watch your friend's wizard (wearing their own face) get turned into a teapot. We built it to be the most entertaining thing in the room: fast, loud, a little ridiculous, and just as fun to watch as it is to play.

What it does

wizaaahhh! is a real-time 1v1 wizard duel in the browser where you cast spells with hand gestures tracked by your webcam.

Open a storybook, create a duel, share the room code. A 12-second storybook intro sets the scene, you calibrate your camera in an enchanted-forest lobby, and after a full countdown you're dropped into one of three randomly chosen arenas.
Five gesture spells:
- ✊ Incendio: make a fist, then open your hand to hurl a fireball.
- 🙌 Protego: raise both palms toward the camera to block incoming magic.
- ✌️ Glacius: hold a peace sign to freeze your opponent's attacks.
- 🤘 Taurus: raise your index and pinky (Hook 'em!) for a longhorn charge that breaks shields.
- ☝️ Fulmen: point upward, then bring your finger down to call lightning from the sky. It needs a full ultimate meter and cuts through shields.
Collision challenges. When fireballs or ice spells meet mid-air, the stronger spell pushes through. When both players cast the same spell, the duel freezes and a minigame decides it:
- Charge your magic: point at the screen and trace a golden circle. You get 15 seconds, and you're scored on accuracy and speed.
- Pose race: match five reference poses in order. First wizard to finish wins the combined damage.
Your face, your wizard. Each player's webcam face is overlaid on their wizard, and the game grabs a KO snapshot of the loser's face at the moment of defeat.
Maximum chaos: meme voice lines on every cast, hype callouts, sad trombones, "emotional damage," and fairy-tale defeats like being turned into a teapot.
60-second rounds where the higher HP wins, with sudden death on a tie.
Training mode lets you practice gestures against a dummy, or with two players on one keyboard, so the game still works if the Wi-Fi or a camera gives out mid-demo.

How we built it

wizaaahhh! is a TypeScript monorepo with three packages:

Client: React + Vite for the storybook UI and HUD, with a Phaser 3 scene that renders the arena, wizards, face overlays, spell effects, and wand-to-wand struggle beams. The scene only draws state; it never decides outcomes.
Gesture engine: MediaPipe Tasks Vision runs hand and pose tracking entirely in the browser, inside a Web Worker so the game stays smooth. We self-host the MediaPipe WASM and models so tracking works offline, and we auto-brighten dim frames for dark hackathon rooms. A pose classifier sits on top of the landmarks, and a custom gesture state machine (idle, charging, release, recovery, hold, rearm) makes charge-and-release spells feel intentional instead of twitchy. We also built a gesture recorder to tune poses from real hand data. No camera frames are ever sent over the network.
Shared duel engine: a deterministic DuelEngine owns every rule: HP, cooldowns, shield windows, collisions, the ultimate meter, and power-ups. The same engine runs on the server for online play and in the browser for training, so both behave identically. It emits typed game events that drive visuals, audio, and voice lines.
Server: Node + Express + Socket.IO. Each room gets an authoritative MatchRunner that ticks every 50 ms, de-duplicates cast requests, rejects casts on cooldown, and broadcasts timestamped match state. Clients correct for clock offset so collisions resolve the same way on both screens. Disconnected players can reclaim their seat within a 30-second grace period.
Hosting: the game and multiplayer server run together as a single web service on Render.

Challenges we ran into

Making gestures feel like magic. Raw hand tracking is noisy, and early versions threw accidental shields. We reworked the gesture set until no two poses overlapped, moved tracking into a worker, and tuned every timing window. We also preserved circle traces through camera dropouts.
Finding the right clash. We went through fist-pump clashes and a "6-7" arm-pose challenge before landing on circle tracing and pose races. Those turned out to be the most fun to watch and the fairest to score.
Fair real-time multiplayer. Two people casting within milliseconds of each other is the whole point, so the server had to be the single source of truth, with a deterministic engine, de-duplicated inputs, and clock sync.
Shipping fast as a team. We merged 120+ commits and about 40 pull requests across gestures, visuals, audio, and backend in one weekend, without breaking gameplay along the way.

Accomplishments that we're proud of

Casting a fireball by opening your fist at a webcam actually works, and it feels incredible.
The collision minigames: two people frantically tracing circles in the air is the best moment of every match.
Seeing your friend's face on a wizard, then their KO snapshot as they're turned into a teapot.
One deterministic engine shared by server and client, so online and training play follow exactly the same rules.
A full storybook art and audio pass, all built in about 24 hours.
Privacy by design: all camera inference happens on your own device.

What we learned

How to build responsive gesture input on MediaPipe landmarks, and why a state machine and a worker thread matter more than raw accuracy.
How authoritative-server netcode works in practice: ticks, input de-duplication, and clock synchronization.
That keeping game rules in one deterministic engine makes testing, training mode, and multiplayer dramatically easier.
That the best "entertaining" moments come from making players move their bodies.