Selected work
Let’s talk

CaTarot

A one-screen web tarot game where mystic cats read your design life — gently or with a roast.

Let’s shuffle
Role:
Product Designer and front-end builder — copy, interaction, UI, accessibility and React build
Challenge:
CaTarot began as an AI-assisted side project for colleagues. Keyboard and screen-reader checks exposed the real problem: the reading itself was unreachable. A tarot app that cannot tell you your fortune is only a handsome deck of cats.
Five illustrated cat tarot cards fanned across a purple night sky.

1 screen, 78 cards

  • Writing — 78 cards, each with 2 Soft and 2 Spicy readings: 312 lines per language, plus 20 “touch grass” endings
  • Interaction — a draggable fan with inertia, in-place card flips and arrow-key controls
  • Interface — 1 responsive screen for the art, card name, headline and reading, without scrolling inside the card
  • Engineering — React 19, TypeScript, Vite and Tailwind

Soft and Spicy were written separately

Soft and Spicy are written separately, not run through a filter. Every card carries its own headline and 2 readings for each tone — Soft points at what to do next, while Spicy names what the dashboard is hiding. That makes 312 lines per language.

3 blockers, 3 fixes

This was automated QA, not user testing. Playwright covers all 78 cards in both tones and languages, including text fit, keyboard access, language settings and visual regressions.

  1. 01

    BeforeA 3.5-second reveal video

    AfterReduced-motion mode reveals the card instantly

    WhyThe reading matters more than the trailer, and the system preference should be respected without comment.

  2. 02

    BeforeAn open card with no way out but Shuffle

    After“Pick another card”, which keeps the spread

    WhyThe escape hatch and the re-roll were the same control, so leaving a reading meant losing it.

  3. 03

    BeforeAn unannounced “Toxic” mode and 7% easter egg

    AfterSpicy, with both surprises explained up front

    WhyThe surprise was funny in my head and alarming on screen. Both now say what they are before they say anything else.

The whole reading loop

The deck, face down 1 screen, no menu, no onboarding. The fan drags with inertia and steps with the arrow keys. Only the front card opens, so the game is clear without instructions.
A reading in Soft The card holds 4 things: the art, the name, the gold headline and the reading. With no other decoration in the panel, the headline lands before the paragraph.
A reading in Spicy Same deck, the other voice. The headline turns with the tone, so the roast is never a suffix on a compliment — and the toggle names which voice it is before you pick, which is what stops a joke reading as an insult.
The touch-grass ending About 7 in 100 draws ignore the card and tell you to close the laptop. After 3 empty shuffles, the next card is guaranteed to be one. It identifies itself as an easter egg in its first 2 words so it does not look like a broken reading.

Pick a tone, drag, draw, read, repeat

The reading became accessible

  • 78 cards, 2 tones, 2 languages 312 readings per language plus 20 easter-egg endings, all about design work.
  • The reading is reachable Keyboard users can reach the card, move focus into the reading and hear the full text as one sentence.

What I learned

  • A model can produce a working screen in an evening. Everything that makes it usable by somebody who is not me was still the longer half of the project.
  • Reviewing my own silly project with the eye I use on client work found the 3 things a stranger would have hit first.
The Clay Landing · booking flow · brand Tunto Product design · iOS · design-to-code