A typing game designed for young children learning the keyboard on a MacBook Pro. Turns a professional laptop into a playful, indestructible learning toy that progresses through the entire keyboard — and then teaches spelling.

Guides kids through 12 progressive levels that introduce the keyboard row by row. A target letter is displayed at 140-180px, the matching key glows on an on-screen MacBook keyboard, and each correct keypress triggers particle explosions and spoken encouragement.

100 age-appropriate words to spell letter-by-letter, organized into 5 tiers of increasing difficulty:

The full word is displayed above the target letter, with completed letters highlighted in green. Audio plays for each letter name, the full word, and an excited affirmation on completion.

1. Select Practice Typing on the home screen.
2. A large glowing letter appears on screen — find it on the keyboard below and press it.
3. A correct keypress triggers a particle explosion and praise. An incorrect key plays a gentle correction.
4. After pressing every letter in the level, a score summary appears. Press Next Level to continue.
5. Complete all 12 levels to reach the Victory screen.

1. Select Spelling Words on the home screen.
2. A word prompt plays aloud: "Spell the word: cat". The word appears at the top of the screen.
3. The first letter glows on the keyboard. Press it to advance — each correct letter plays its name aloud.
4. Complete the whole word to hear it pronounced and receive an excited affirmation.
5. An incorrect letter plays "Try Again!" and the same letter must be pressed to continue.
6. Spell all 100 words to reach the Victory screen.

• The F and J keys have a small ridge on them — these are the "Magic Buttons" that anchor both hands.
• Progress is saved automatically. A Resume button appears on the home screen if a session was interrupted.
• Press the floating Home button at any time to return to the mode selection screen.

Both modes use the same point system:

A level or word is "perfect" if no wrong keys were pressed. Perfect completions are tracked and shown on the Victory screen alongside the final score.

• Mac Shield — Intercepts CMD+Q, CMD+W, CMD+R, CMD+T, CMD+N, CMD+H so kids can't accidentally close the browser
• 330+ Audio Clips — ElevenLabs pre-recorded MP3s: letter names, word pronunciations, "Spell the word" prompts, 30 excited affirmations, 45 encouragement phrases, and 25 gentle wrong-key corrections
• AI-Generated Praise — Unique celebration messages generated on the fly for the typing mode (falls back to pre-recorded clips if unavailable)
• Particle Explosions — Framer Motion animations on every correct keypress
• Progress Persistence — localStorage saves level, score, mode, and word index so kids can pick up exactly where they left off
• Space Glass UI — Frosted glass panels, rainbow gradients, animated star background
• SVG Keyboard — Accurate MacBook Pro layout with rainbow glow on the target key

• Next.js 15 (App Router) + TypeScript
• Tailwind CSS with custom Space Glass theme
• Framer Motion for animations
• Shadcn/UI components
• ElevenLabs pre-recorded audio (served as static MP3s — no API calls at runtime)

npm install
npm run dev

Open http://localhost:3000 in Chrome on a MacBook for the best experience. Full-screen mode is recommended.

• Execution plans and verification notes live in tasks/todo.md.
• Session restart and handoff context live in tasks/handoff.md.
• The repo-local Codex skill install path is .agents/skills/raisiqueira-claude-code-plugins-nextjs-expert/SKILL.md.
• After installing or changing repo-local skills, restart Codex in this repo so the new skill definitions are loaded.

src/
  app/
    page.tsx              # Entry point, loads KeyboardEngine
    actions/              # Server actions (AI phrase generation)
  components/
    KeyboardEngine.tsx    # Main game loop and state management
    StarshipKeyboard.tsx  # SVG MacBook keyboard with glow effects
    WelcomeScreen.tsx     # Landing screen with mode selection
    ParticleExplosion.tsx # Confetti/particle effects
    SpaceBackground.tsx   # Animated starfield
  hooks/
    useMacShield.ts       # Blocks dangerous macOS shortcuts
    useGameKeyboard.ts    # Key event handling for gameplay
    useSpeech.ts          # Audio playback and sequencing
  lib/
    game-state.ts         # Reducer-based game state and level definitions
    save-state.ts         # localStorage persistence for progress
    phrases.ts            # Typing mode encouragement phrase pools
    spelling-audio.ts     # Spelling mode audio path helpers
    words.ts              # 100 spelling words in 5 tiers
    keyboard-layout.ts    # MacBook key positions and metadata
scripts/
  generate-audio.mjs           # ElevenLabs batch generator for typing mode clips
  generate-spelling-audio.mjs  # ElevenLabs batch generator for spelling mode clips
public/
  audio/
    positive/             # 45 typing mode celebration clips
    wrong/                # 25 typing mode gentle correction clips
    spelling-positive/    # 30 excited spelling affirmations
    spelling-wrong/       # "Try Again" clip for spelling wrong keys
    letters/              # Letter/number/symbol pronunciation clips
    spell-word/           # 100 "Spell the word {word}" prompts
    words/                # 100 individual word pronunciations

MIT