AI-powered 3D game that teaches kids descriptive thinking through play.
Built solo in 7 days for the Built with Opus 4.6 — Claude Code Hackathon (Feb 10-16, 2026).
Kids ages 7-11 type a description like "the skeleton juggles birthday cakes while riding a unicycle" and Claude Opus 4.6 builds a 3D animated scene in real time — characters spawn, props appear, animations play, and a funny narration reads aloud. Vague descriptions produce hilarious failures (the skeleton drops everything and slips on frosting), making kids want to try again with better descriptions. No grades, no "wrong answers" — just comedy and concrete hints.
Kid types a description
|
v
+-------------------+ +------------------+ +------------------+
| 1. Cache Lookup |---->| 2. Claude API |---->| 3. Fallback |
| 166 pre-computed | | Opus 4.6 live | | Never shows an |
| instant responses | | 6s timeout | | error screen |
+-------------------+ +------------------+ +------------------+
| | |
+-------------+-----------+-------------------------+
|
v
JSON Scene Script
{ spawn, move, animate, emote, react }
|
v
React Three Fiber renders
3D scene with audio + effects
- A kid types a description ("a giant cake falls from the sky")
- The three-tier system finds the best response — cache, live API, or fallback
- Claude Opus 4.6 generates a JSON scene script with characters, props, animations, and narration
- React Three Fiber renders it as a 3D animated scene with real audio and particle effects
- The kid gets funny, concrete feedback and tries again
| Layer | Technology |
|---|---|
| UI | React 18 + TypeScript + Tailwind CSS |
| 3D Engine | React Three Fiber + Drei + Three.js r170 |
| State | Zustand |
| AI | Claude Opus 4.6 (scene script generation) |
| Audio | Web Audio API + 666 OGG files (Kenney) |
| Build | Vite 5 |
| Deployment | Vercel |
Every player description flows through a vocabulary-contract system that constrains Claude's output to valid assets:
- Scene scripts — Claude generates JSON with
spawn,move,animate,emote, andreactactions, each referencing only assets from the 1,694-entry prop registry and 27 character models - Comedy calibration — The system prompt instructs Claude to make failures funnier than successes. A vague description about a birthday party produces a skeleton slipping on frosting, not a generic error
- Three-tier response — (1) Instant cache lookup against 166 pre-computed golden responses, (2) live Opus 4.6 API call with vocabulary enforcement, (3) pre-written fallback scripts so the demo never shows an error
- Five difficulty levels — Mad Libs fill-in-the-blank (levels 1-3) progresses to free-text description (levels 4-5), scaffolding kids from structured to open-ended thinking
- Loading vignettes — While the AI thinks, characters act out "thinking" animations on stage so the 3D world stays alive during API calls
- Serverless proxy — API key stays server-side via Vercel serverless function; the game works without any key using the built-in cache
Play the live demo — hosted on Vercel's free tier, so the initial load may take a moment while the 3D assets stream in. Once loaded, cached responses play instantly.
Best on Google Chrome. Chrome ships high-quality neural text-to-speech voices that make narrations sound natural and kid-friendly. Other browsers fall back to their built-in system voices, which work but sound more robotic.
git clone https://github.com/DrewWasem/kids_ai_game.git
cd kids_ai_game/frontend
npm install
npm run devOpen http://localhost:5175. The game works immediately using the built-in cache of 166 pre-computed responses — no API key needed for the demo.
To enable live AI generation for any description:
cp ../.env.example .env
# Add your VITE_ANTHROPIC_API_KEY to .env| Metric | Count |
|---|---|
| Quest zones | 8 (7 themed + 1 sandbox) on a medieval village circle |
| Hand-crafted vignettes | 421 across 7 zone files |
| Movement templates | 53 reusable choreography patterns |
| Golden cache entries | 166 instant demo responses |
| 3D models | 9,500+ GLTF assets |
| Animated characters | 27 with shared skeleton rig |
| Animation clips | 139 (idle, walk, run, attack, dance, cheer...) |
| Registered props | 1,694 with fuzzy name resolution |
| Audio files | 666 OGGs + synthesized fallbacks |
| Named emotions | 61 semantic mappings to pixel-art emotes |
| TypeScript errors | 0 |
+-------------------------------------------------------------+
| React App (Zustand) |
+------------------+------------------+-----------------------+
| Village World | Scene Player 3D | Prompt Input |
| Hex terrain | Action executor | Mad Libs + Free |
| Zone markers | ~4,650 lines | Voice input |
| Camera fly | Zone-relative | TTS narration |
+------------------+------------------+-----------------------+
| React Three Fiber Canvas |
| Characters (27) | Props (1,694) | Atmosphere | Audio |
+-------------------------------------------------------------+
| Three-Tier Response System |
| Cache (166) --> Claude Opus 4.6 --> Fallback (8) |
+-------------------------------------------------------------+
Village World — A persistent medieval hex-tile village with buildings, roads, mountains, and glowing quest markers. The camera smoothly flies between village overview and quest zones.
Scene Player 3D — Executes scene scripts action-by-action: spawning characters with skeletal animations, placing props with bounce entrances, triggering movement along arc/linear paths, playing emotes as pixel-art emoji bubbles, and firing particle effects with sound.
Eight Quest Zones — Each quest has its own atmosphere (fog, lighting, particles, music), environment props, and cast of characters:
| # | Quest | What the kid does |
|---|---|---|
| 1 | Skeleton's Surprise Birthday | Plan a party in the dungeon |
| 2 | Knight's Space Mission | Launch a knight into orbit |
| 3 | Mage vs. Kitchen | Cook a meal with magic |
| 4 | Barbarian's School | Teach a barbarian to sit still |
| 5 | Dungeon Rock Concert | Stage a concert underground |
| 6 | Skeleton Pizza Delivery | Deliver pizza across the village |
| 7 | Adventurers' Picnic | Set up an outdoor feast |
| 8 | Creative Playground | Sandbox — all characters, all props, no wrong answers (unlocks after 3 zones) |
All 3D assets are open-source and free for commercial use:
| Pack | Models | License | Author |
|---|---|---|---|
| Kenney | 1,636 GLBs + 666 OGGs | CC0 | Kenney |
| KayKit | Characters, animations, buildings | CC0 | Kay Lousberg |
| Tiny Treats | 96 props (kitchen, park, furniture) | CC0 | Tiny Treats |
| Quaternius | 150 props | CC0 | Quaternius |
| FoodMegaPack | 91 food models | CC0 | Binbun |
| Poly Pizza | 95 assorted props | CC-BY | Various artists |
This entire project — every line of code, every system prompt, every cache entry — was built using Claude Code and Claude Opus 4.6 over 7 days. The .claude/ directory contains the orchestration setup:
- 7 domain-expert SMEs — story-writer, character-director, ece-professor, prompt-writer, child-game-design, 3d-game-development, 3d-scale-tester
- 32 workflow skills — conductor orchestration, research, planning, implementation, validation, content review, memory management
- Persistent memory tree — cross-session knowledge storage for decisions, patterns, bugs, and preferences
- Custom hooks — automatic TypeScript checking, context management, pre-commit validation
For a detailed walkthrough of the project — architecture, educational design, the 7-day build journey, and how Opus 4.6 powers everything — see the Judge's Guide.
No user accounts, no data collection, no cookies, no tracking. API key stays server-side via Vercel serverless proxy. All kid-facing content reviewed for age-appropriateness. See SECURITY.md for details.
Built solo by Drew for the Built with Opus 4.6 — Claude Code Hackathon (Feb 10-16, 2026)