Motion Mission is an interactive fitness game for kids. Spin the wheel to deploy active missions, follow animated guides with voice coaching, and complete 90-second movement objectives!
4/23/2026 Date app was updated 3 Number of views Show QR code
Target Audience
K Grade 1 Grade 2 Grade 3 Grade 4
AI Attribution
Built w/ Gemini: Canvas; animations w/ Canva: AI
Additional Details
- Web Speech API Voice Coaching: Utilizes voice directly built into browsers to read exercise instructions aloud and provide real-time vocal encouragement during the mission.
- Intelligent Media Detection: A hybrid media player that automatically detects and displays looping Google Drive GIF animations based on the provided URL.
- Dynamic Skeleton Screens: Implements a shimmering placeholder UI during the transition between spinning the wheel and accepting a mission to improve perceived performance.
- Adaptive Mission Logic: Features a strategic selection workflow where users must "Accept" a mission, including a three-spin limit and "Mission Loading" toast notifications.
- Interactive Exercise Previews: A custom-built modal system that allows users to click wheel icons to view exercise details, types, and difficulty levels before committing to a spin.
- Progressive Encouragement System: An automated coaching toggle that triggers vocal feedback at specific intervals (1:15, 0:50, and 0:25) using a randomized variety of motivational phrases.
- Precise Geometric Rendering: A mathematically calibrated SVG wheel system ensures perfectly aligned 60-degree wedges and centered icons that remain legible at any rotation.
- Multi-Sensory Celebration: Combines physical visual feedback (confetti particles) with an auditory "Ta-da" completion sound and a success modal to reward effort.
- Responsive Two-Column Layout: A modern, mobile-optimized design built with Tailwind CSS that maintains hierarchy between the "Mission Control" (wheel) and the "Tactical Display" (instructions).
- Google Sites Native Optimization: Specifically architected as a self-contained, sandboxed-safe HTML file that requires zero external hosting for its code and logic.
Comments
Sign in to leave a comment.
