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

We shipped . A few prompts that saved real time:

• "Create a card flip component with CSS 3D transforms, perspective on parent, backface-visibility hidden" got the basic structure right on first try. We tweaked the timing curve manually.


• "Add Fisher-Yates shuffle with scatter animation on each card" produced working code. The random transform values were too aggressive (cards flew off screen), but the structure was solid.


• "Lazy load card images, preload only the back and first 5" nailed it. No corrections needed.

Where Lovable struggled: anything involving the interaction between animation timing and state transitions. The state machine was something we designed on paper first and then implemented ourselves. Prompting for "don't allow taps during animation" kept producing isAnimating booleans that leaked, so we went with the explicit state machine approach.

The result

, where we ship MVPs and see what sticks.