Memory Pairs
Flip two cards, hope they match, and don't let the animation lie to you.
BeginnerWeb appGame4–10hAI-buildable 5/5no setupworth shipping
A matching game whose difficulty is entirely in the interaction timing: while two cards are flipped and being compared, further clicks must be ignored, and non-matching cards must flip back only after the player has had time to see them.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A grid of face-down cards with shuffled pairs
- Clicking flips a card with a 3D flip animation
- Two flipped cards compare, then either stay or flip back
- Input is ignored while a comparison is resolving
- Move count and elapsed time are tracked
- A win state appears when all pairs are matched
- Grid size is selectable
The interesting part
- Locking input during the comparison window without feeling unresponsive
- A CSS 3D card flip that works reliably in both directions
Once it works
- Persist best scores per grid size
- Add a two-player alternating mode
- Add a peek-at-the-start difficulty option
Suggested stack
reacttypescripttailwindframer-motion