WiggleWorld

Turning Screen Time into Active Playtime.

Comment

Inspiration

Kids spend hours watching cartoons on platforms like YouTube, but most of that time is passive. We wanted to transform that screen time into something active, fun, and educational. Inspired by interactive shows like Dora the Explorer and the need for healthier digital habits, we built WiggleWorld — a game where kids learn through movement.

What it does

WiggleWorld is an exergame that combines cartoons with exercise. While watching interactive videos (Dora where the cartoon character asks different questions), kids are asked questions and can answer them through movements like jumping, clapping, squatting, or raising their hands. The game uses pose detection to recognize these gestures in real time and keeps track of their progress. It makes learning playful while encouraging physical activity. On the other hand, parents can use youtube videdos to create more games for their kid. They can use the built in gemini model to find/fetch better Youtube videos to create games for their kids.

How we built it

  • Frontend: Next.js with Tailwind for a colorful kid-friendly UI, with mascots and video integration.
  • AI & Pose Detection: MediaPipe Pose Landmarker (WASM) running in the browser for real-time gesture recognition.
  • Backend: Spring Boot microservices with MySQL for storing videos, homeworks, and activity data.
  • Integration: React state management for counters, video overlays for skeleton debugging, and API endpoints defined with OpenAPI for smooth front-end/back-end communication.

Challenges we ran into

  • Getting pose detection reliable for kids’ movements (jump vs squat, claps near chest).
  • Managing synchronization between video playback, gesture detection, and UI updates.
  • Handling cross-origin (CORS) issues while connecting React Native / Next.js frontend with the Spring Boot backend.
  • Designing a schema flexible enough to track games, questions, homeworks, and move counts over time.

Accomplishments that we're proud of

  • Built a fully working prototype in just a few days.
  • Successfully integrated real-time pose detection into a web app.
  • Designed a parent dashboard to assign homework and track progress.
  • Created a kid-friendly interface with cartoon mascots that makes exercise fun.

What we learned

  • How to combine computer vision (MediaPipe) with modern web frameworks.
  • The importance of UX for kids — bright visuals, mascots, and clear gesture thresholds.
  • Balancing fun, learning, and fitness in a single product.

What's next for WiggleWorld

  • Add more games and interactive video content.
  • Build personalized fitness/learning plans with AI recommendations.
  • Expand gesture recognition to include dance moves and multiplayer modes.
  • Release a mobile app version so kids can play anywhere.
  • Partner with educators and parents to make WiggleWorld a classroom and home tool for active learning.

Built With

Share this project:

Updates