TinyTaps is a deeply interactive, sensory-rich web application built specifically for toddlers. It transforms any standard computer keyboard or mobile touchscreen into an explosion of colors, sounds, and educational feedback.
Initially designed for my niece, this project aims to turn random key-mashing into a structured, delightful exploration of the alphabet and music!
🔗 Play it live here: tinytaps.space
Every letter from A to Z maps to a spoken word and a giant emoji!
- Press
Ato see an Apple 🍎. Press it again to see an Ant 🐜! - The app uses real-time Text-to-Speech (TTS) to read the letters and words out loud ("A for Apple!") so toddlers can learn auditory associations.
- Built-in rate limiting prevents the voice engine from queueing up and lagging when a toddler inevitably mashes the keyboard.
Built with a mobile-first philosophy, toddlers can tap anywhere on a phone screen to trigger the alphabet sequentially.
- Endless Learning Cycles: Tapping loops perfectly from A to Z in uppercase, followed by a transition into lowercase a-z.
- Reward Charts: Finishing an alphabet cycle triggers a massive "Capital Letters!" or "Small Letters!" chart that gracefully slides up, reads itself aloud, and highlights the current letter sequentially to reinforce reading skills.
Pressing the number keys 1 through 8 maps directly to a perfect C-Major music scale (C4 to C5). Toddlers can accidentally (or purposefully!) play real musical melodies with synthesized audio oscillators.
- 3D Starfield: A continuous, highly performant CSS/JS animated starfield falls infinitely in the background.
- Mouse Scribbling: Moving the mouse or swiping leaves a magical, fading trail of randomized stars.
- Reward Systems: Repeated key presses trigger massive starburst showers and constellation reveals with magical harp sweeps!
TinyTaps is built using Vanilla JavaScript (ES6 Modules), raw CSS, and HTML. It utilizes Vite for fast development and bundling.
- AudioEngine (
audio.js): Extensively utilizes the native browserWeb Audio APIfor synthesizing the piano scale and reward sweeps entirely from scratch using mathematical oscillators. It also hooks into theSpeechSynthesis APIfor the voice engine. - VisualEngine (
visuals.js): Handles heavy DOM manipulation and CSS transition classes, strictly following the Single Responsibility Principle. Complex particle showers are dynamically generated and garbage-collected to ensure smooth mobile performance. - GameController (
game.js): The central brain managing state, sequencing, cycle tracking, and event delegation (Keyboard, Mouse, Touch). It features strict DeltaTime performance throttling to prevent memory leaks during rapid inputs.
If you'd like to clone this repository and run it on your own machine:
- Clone the repo:
git clone https://github.com/RegondaChandan/tinytaps.git
- Navigate into the directory:
cd tinytaps - Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser to the URL provided by Vite (usually
http://localhost:5173).
Built with ❤️ (and endless keyboard mashing testing)