Building an interactive tarot card component in React: flip animations, state machines, and 78 lazy-loaded images

We shipped tarotas.com a few weeks ago. It's a tarot reading app: 78 cards, 5 languages, no signup wall. The core interaction is dead simple: shuffle the deck, draw a card, flip it, read the meaning.

Getting it to feel right took longer than I expected. Here's how we built the card component in React, what tripped us up, and what actually worked.

The state machine

A tarot deck has four moments: idle, shuffling, drawing, and revealed. We modeled this as a simple state machine rather than a pile of booleans.

type DeckState = 'idle' | 'shuffling' | 'drawing' | 'revealed';