CSS 3D Flashcard & Web Speech Progressive Enhancement

Pure CSS 3D card flip animation and native Web Speech API audio playback with zero external animation runtime overhead.

Pocket English client-side local-first architecture diagram. — Static JSON dataset, React 19 UI, useFlashcardSession engine, Web Speech API audio, and browser localStorage.

Problem

Smooth card flip animations and voice pronunciation typically demand heavy JavaScript animation runtimes or hosting thousands of static MP3 files.

Decision

Leveraged native CSS perspective & transform: rotateY(180deg) without additional JS animation libraries, paired with native browser window.speechSynthesis (en-US) as an on-device progressive enhancement.

Result

Smooth card flips with zero external animation library overhead, and instant pronunciation playback without downloading external audio files.

Implementation

Accessibility support for prefers-reduced-motion switches 3D rotation duration to instantaneous state changes.
Text inputs to the Web Speech API are bounded and sanitized to avoid browser speech synthesizer lockups.
Full desktop keyboard navigation (Space for flip, 1/2/3 for rating, A for audio).

Related screenshots

Flashcard front face presenting a real-world Indonesian situation prompt. — Real-world workplace situation prompt stimulating active recall before revealing.

Flashcard back face displaying Formal, Polite, and Casual expressions with TTS audio. — Multi-tone expression variants with pronunciation audio buttons and rating controls.