Hamtre

• 

  Start in seconds: choose English or Japanese, review four webcam exercises, and begin with one tap.

• 

  Privacy-first calibration confirms your upper body is visible while pose landmarks stay in the browser.

• 

  Four playful exercises turn arm movements into reps: pull-ups, monkey bars, hamster wheel, and Sunny Munch.

• 

  Hamtre works on a phone too, with the hamster game and mirrored L/R targets stacked for a compact screen.

• 

  A complete workout ends with a hamster rank, total score, and rep breakdown across all four exercises.

Inspiration

What should you do between vibe-coding sessions? Exercise, of course! Long coding sessions make it easy to postpone even a short movement break. Hamtre replaces the pressure of a formal workout with a playful reason to stand up: when you move, a hamster trains with you. With just a webcam and a few simple arm movements, screen time becomes a cheerful everyday workout.

What it does

Hamtre turns the screen people already sit in front of into a reason to move. On a camera-equipped computer or phone, a quick upper-body calibration starts a short, playful workout—no wearable or gym equipment required. When the player moves, the hamster trains with them, making every rep feel visible and rewarding.

Players take on four timed exercises: Air Pull-Ups, Air Monkey Bars, Air Hamster Wheel, and Sunny Munch. A separate tracking window shows where to move next with blue L and red R targets, while exercise-specific motion detection turns completed movements into reps.

Successful reps increase the score and energize the hamster through combo celebrations, a one-time FEVER!! moment, reps-per-minute feedback, and a final hamster rank. Bilingual guidance, tracking-loss recovery, and reduced-motion support keep the experience approachable across different play styles.

How we built it

A teammate gave Fable (Claude) a rough brief. Acting as the coordinating agent, Fable used GPT and GPT Image to create the first playable base. I then took over the repository and worked with Codex to turn that prototype into the submission-ready product—improving motion judging, tracking reliability, UX, animation, regression testing, and the Issue → focused PR → independent review → merge workflow.

Hamtre is a static TypeScript web app built with Vite and HTML5 Canvas. All image assets were generated with GPT Image, while MediaPipe Tasks Vision performs pose estimation directly in the browser. Four exercise-specific state machines translate pose landmarks into reps, and a shared tracking coordinator safely handles incomplete frames and tracking loss.

The initial AI-assisted implementation tried to judge each exercise with detailed, precise motion rules. It was technically sophisticated—but too strict to feel good as a game. We redesigned the interaction around simple panel-based movement: players reach clearly indicated positions, and the game turns those transitions into reps. This made the expected movement easier to understand and improved the overall experience. We learned that smarter detection does not always mean better UX.

We also separated the hamster game from the tracking window, keeping the character visible while showing mirrored pose feedback, L/R targets, accepted movements, combos, and recovery guidance. Codex helped us inspect the codebase, implement changes, generate regression tests, and maintain development evidence. Humans decided the motions, thresholds, UX tradeoffs, privacy boundaries, and final public claims.

Challenges we ran into

Webcam pose tracking is messy in the real world. Lighting, framing, device choice, motion speed, and momentary landmark loss can all change the result. A rule that looks perfect in an isolated test may still miscount when live frame timing drifts or a half-finished movement survives a tracking gap. We had to make four exercise judges forgiving enough to be fun without letting partial movements, a held pose, or stale frames become reps.

Mirrored left/right guidance was equally tricky. The on-screen target, MediaPipe's anatomical left/right, the judge's expected panel, and the accessible description all had to tell the same story. Early feedback also covered too much of the player's body. We iterated toward low-coverage panels and centered L/R bubbles, while keeping circular arrows that make the wheel's two-handed motion understandable.

Finally, the webcam had to be central to play without becoming a data collection feature. That led us to in-browser processing, a static architecture, synthetic test fixtures, and a strict boundary around private reference videos and submission materials.

Accomplishments that we're proud of

We are proud that Hamtre became a complete camera-to-results game, not just a pose-tracking demo. It guides players through four distinct exercises, reacts to their pace and combos, recovers safely from tracking loss, and finishes with a final hamster rank.

GPT Image produced Hamtre's animation assets surprisingly close to final in the first pass. We complemented that speed with an asset factory: a repeatable quality loop for reviewing, testing, and refining generated images before they entered the game. This combination helped us build a coherent animated world quickly without leaving quality to chance.

We also built Hamtre as a team. Once the prototype was working, we enforced a strict GitHub workflow as our standard: Issue → focused PR → independent review → merge. It made individual changes slower, but it freed us from the chaos that can come with rapid AI-assisted coding. We gained traceability, explicit human decisions, and confidence that each improvement would not break what came before.

What we learned

The smartest detector is not always the best experience. Our detailed first motion rules were technically impressive, but the simpler panel-based system was easier to understand and more fun to repeat. In a camera game, recognition and feedback have to be designed as one system: the target, mirrored hand, accepted state, and rep counter must all tell the same story.

We also learned that fast AI output needs a quality system around it. GPT Image could produce strong animation assets quickly, but the Asset Factory made the process repeatable. Codex could help us move fast, but our standard of Issues, focused PRs, tests, and independent review made the work inspectable and kept human decisions explicit. AI worked best when the team designed the verification loop, not just the prompt.

Finally, privacy and reproducibility can coexist. We used private motion references locally to understand real tracking behavior, then captured the important boundaries in synthetic test fixtures without committing camera frames or a person's landmark trace.

What's next for Hamtre

Next, we want Hamtre to become more than a finished app: a public case study of how humans and AI can build together without losing control. We plan to share the reviewable trail—Issues, focused PRs, design tradeoffs, rejected approaches, regression tests, and quality loops—while keeping private conversations, personal data, and camera material out of the public record.

By making the process reproducible, we hope other builders and future AI coding agents can build on these practices: not only generating features, but questioning overly strict implementations, improving UX, working as a team, and verifying their own output. Hamtre's next contribution may be as much the development method as the game itself.

Built With

• browser-game
• cloudflare-pages
• codex
• computer-vision
• fitness
• github
• gpt-5.6
• gpt-image
• html5
• mediapipe
• pose-estimation
• typescript
• vite
• webcam