← Kembali ke daftar feature

CSS 3D Flashcard & Web Speech Progressive Enhancement

Animasi flip kartu 3D berbasis CSS murni dan pemutaran audio pengucapan native Web Speech API tanpa beban runtime animasi eksternal.

Diagram arsitektur client-side local-first Pocket English. — Dataset JSON statis, React 19 UI, useFlashcardSession engine, Web Speech API audio, dan browser localStorage.

Masalah

Animasi interaktif flip kartu dan audio pelafalan sering kali membutuhkan library runtime JavaScript tambahan atau ribuan file audio MP3 eksternal.

Keputusan

Menggunakan native CSS perspective & transform: rotateY(180deg) tanpa dependensi library animasi JS, serta memanfaatkan native Web Speech API (en-US) sebagai progressive enhancement on-device.

Hasil

Animasi kartu berjalan lancar tanpa menambah dependensi library animasi eksternal, dan pengucapan audio dapat diputar instan tanpa mengunduh file eksternal.

Implementasi

Dukungan aksesibilitas prefers-reduced-motion mengganti durasi rotasi 3D ke pergantian state instan.
Input teks ke Web Speech API dibatasi panjangnya dan disanitasi untuk mencegah synthesizer lockup.
Navigasi keyboard lengkap (Space untuk flip, 1/2/3 untuk rating, A untuk audio).

Screenshot terkait

Sisi depan flashcard dengan prompt situasi nyata berbahasa Indonesia. — Prompt situasi kerja nyata yang melatih recall spontan sebelum membuka jawaban.

Sisi belakang flashcard dengan ungkapan Formal, Polite, dan Casual serta audio TTS. — Variasi ungkapan multi-tone beserta tombol audio pelafalan dan rating pemahaman.