DEV CommunityContent type: Blog

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

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 pil...

Read the original article
Sign in to keep reading the full article.

Keyboard Shortcuts

Navigation

Next / previous post
j/k
Open post
oorEnter
Preview post
v

Post Actions

Love post
a
Like post
l
Dislike post
d
Undo reaction
u
Save / unsave
s

Recommendations

Add interest / feed
Enter
Not interested
x

Go to

Home
gh
Interests
gi
Feeds
gf
Likes
gl
History
gy
Changelog
gc
Settings
gs
Discover
gb
Search
/

General

Show this help
?
Submit feedback
!
Close modal / unfocus
Esc

Press ? anytime to show this help