Mama & Baby Letters

My daughter is fantastic at recognizing uppercase capital letters, but like many toddlers transitioning to early reading, the lowercase versions were leaving her fully stumped. Why does "G" look nothing like "g"? And what is the deal with "A" and "a"?

To literally bridge the gap, I built a highly tactile web game called "Mama & Baby Letters" to form a permanent visual association between the two versions of the roman alphabet.

Core Mechanics

I wanted to move away from standard flash-cards and make learning feel like a tactile digital toy:

• Bi-Directional Dragging: Built entirely using React SVG calculations, you can drag the little babies directly up to the mamas, OR drag the mamas down to rescue the babies!
• Bilingual by design: Integrated native Web Speech API Synthesis that supports dynamic toggling between modern English and German phonetic spelling (e.g. spelling K as "Kay" vs "Kaa")!
• German Public Signage Font: The game utilizes the DIN-1451 stylistic family, perfectly preparing her for precisely how letters are written in real-life Germany.
• Intuitive Animation: The babies literally fly over and sit directly next to the mamas when matched.
• Progressive Learning Loop: A 3-pair random system cleanly scales up difficulty, while ensuring that the last round's paired elements frequently trickle through as reinforcements.