Create a landscape-only, fullscreen tummy-time motivator for babies 6–18 months. Up to ten friendly animal icons drift around the screen; when the baby taps one, it plays a matching sound and disappears with a gentle visual flourish. The activity auto-pauses after ten minutes, in line with American Academy of Pediatrics guidance to keep shared screen sessions brief for this age group (publications.aap.org, aap.org).
| Phase | What happens |
|---|---|
| Spawn loop | Every 10 s the app checks: if fewer than 10 animals are visible, spawn one new animal. |
| Movement | All animals move continuously in a calm, “organic random-walk” pattern and wrap to the opposite edge if they leave the viewport. The exact movement algorithm is up to the developer, provided motion remains smooth and does not exceed 5 °/s (infant visual-tracking comfort zone). |
| Tap interaction | Tapping an animal: 1. Plays its tap sound (if defined). 2. Triggers one random effect from the fixed list in § 4.3. 3. Removes the animal from the screen. |
| Session timer | The game auto-pauses and shows the parent menu after 10 minutes of cumulative play. Parents can change this to 3 or 5 minutes in the menu. |
| Topic | Requirement |
|---|---|
| Orientation | Lock to landscape after the first parent gesture using the standard ScreenOrientation API (developer.mozilla.org, developer.mozilla.org). |
| Fullscreen entry | Enter browser fullscreen as early as permitted by user-gesture rules. |
| Audio engine | May be any library or native API; must support simultaneous playback of short WAV files and provide a master volume the parent slider can adjust. (Howler.js is one lightweight option) (jsdelivr.com, cdnjs.com). |
| Installability | Implement as a “light PWA”: pre-cache core HTML/CSS/JS and the OpenMoji font; stream BBC sounds on demand and cache them after first use. |
| Framework | Pure HTML/JS is acceptable; teams may adopt a bundler or framework if desired, provided runtime size stays mobile-friendly (< 150 kB gzipped excluding fonts & sounds). |
Use the OpenMoji Color COLR/CPAL web-font (current release on GitHub) (github.com, github.com). Each entry below must be represented by its Unicode code point:
| # | Animal | Code point |
|---|---|---|
| 1 | Cat | U+1F431 |
| 2 | Dog | U+1F436 |
| 3 | Sheep | U+1F411 |
| 4 | Cow | U+1F404 |
| 5 | Bird | U+1F426 |
| 6 | Chick | U+1F424 |
| 7 | Duck | U+1F986 |
| 8 | Frog | U+1F438 |
| 9 | Rabbit | U+1F430 |
| 10 | Penguin | U+1F427 |
Icons must be rendered at a random size between 60 px and 120 px on spawn.
Sounds will be sourced from Openverse.
Licensing note: Ensure compliance with the licensing terms of each individual audio file obtained from Openverse.
The app must randomly pick one of these ten effect IDs at tap time; the visual execution is up to the developer as long as each runs ≤ 1 s and stays gentle (no flashes > 3 Hz):
fade_out, shrink_fade, sparkle_burst, confetti_pop, bounce_drop, particle_dissolve, pulse_glow, wiggle_spin, slide_away, star_trail.
| Element | Behaviour |
|---|---|
| Escape icon | 24 px translucent “X” at top-right. Tapping it reveals a dim overlay with a visible padlock target. Swiping any direction so the pointer crosses the padlock within 3 s unlocks the centred settings panel. |
| Settings panel | Single view containing: • A horizontal master-volume slider (0–100 %). • Three buttons: 3 min / 5 min / 10 min session length (selected one highlights). |
| Resume | Closing the panel resumes the spawn loop where it left off. |
All touch targets must be ≥ 44 × 44 px for accessibility compliance (developer.mozilla.org).
- Audio safety: Waveforms must be pre-normalised so that playback on typical tablet speakers does not exceed ~60 dB SPL at 30 cm distance.
- Visual safety: No element may flash faster than 3 times per second; background patterns must remain low-contrast pastels.
- Reduced motion: If the device signals
prefers-reduced-motion, suspend drifting and effects, leaving only gentle opacity changes. - ARIA roles: All interactive widgets must expose appropriate ARIA attributes (slider, buttons).
- Asset integrity: All ten OpenMoji glyphs render correctly at three random sizes within 60–120 px.
- Audio mapping: Each appear/tap event triggers the exact WAV file assigned in § 4.2; verified by logging URL before playback.
- Spawn rule: With the loop running, the screen never exceeds ten simultaneous animals.
- Edge wrap: An animal exiting the viewport must re-enter from the opposite side with no visible jump.
- Timer: Default 10 min pause fires within ±5 s tolerance.
- Offline retry: After one fully online session, reloading the app in flight-mode launches successfully and plays any previously cached sounds.
- Orientation lock: On supported browsers, the screen stays landscape until the user manually rotates after exiting fullscreen.