Japanese Kana Drills

A minimal language practice tool

Built this for myself before a trip to Japan to brush up on hiragana and katakana. The interaction design concept: flashcards physically "meld" into traditional manuscript paper (Genkō yōshi) once you've learned them, transforming from digital learning aids into inked script.

Date

September 2025

I created a custom animation foor the transition of flashcards to handwritten characters on traditional manuscript paper.

Available at kanadrills.figma.site

Design concept: Unknown cards appear as raised, clean flashcards. Once marked as known, they sink into the page background, transition to a serif font, adopt subtle rotation variations, and reveal genkō yōshi grid lines—mimicking ink soaking into paper. An animated "ink-in" effect makes the transition feel organic rather than digital.

Component architecture:

  • Unknown state: Elevated white cards with sans-serif typography, clear shadows, hover effects

  • Known state: Flat cards that blend into the background, serif font, randomized rotation, traditional writing grid overlay

  • Transition: Custom ink-in animation bridges the two states

The card component adapts its visual treatment based on state, using CSS animations and pseudo-elements to create the paper texture and grid patterns.

Key features:

  • Stateful grid view for quick selection

  • Focused drill mode for deliberate practice

  • Cultural references woven into the interaction design

Built with: React, TypeScript, Tailwind CSS, custom keyframe animations

Design adapts responsively
Design adapts responsively
Design adapts responsively

The design differs for mobile vs desktop.

Keyboard Shortcuts Panel
Keyboard Shortcuts Panel
Keyboard Shortcuts Panel

Keyboard shortcuts for speed.