YIFU HE / INDEX00—6 / EXPERIMENT

EXPERIMENT / 2026 / Bilingual reflective web game

PangdunTarot

A 78-card, bilingual tarot-inspired experience that turns a question into a structured pause for reflection, without pretending the future is fixed.

Next.jsDeepSeekGSAPInteraction Design
Pangdun Tarot poster featuring The Fool, the card back, and The Sun.
ROLE

Product framing, interaction design, asset pipeline, full-stack development, AI safety, and bilingual content.

STATUS

EXPERIMENT

OUTPUT

OPEN SOURCE / GITHUB

01 / WHY

RITUAL IN THE INTERFACE. UNCERTAINTY IN PLAIN SIGHT.

PROBLEM

Most online card readings either flatten the ritual into a text generator or overstate certainty. The product needed to preserve the tactile pace of drawing and turning cards while staying transparent about AI, privacy, and the limits of interpretation.

SOLUTION

I separated deterministic game rules from contextual language. The browser owns secure random draws, unique cards, orientation, and spread structure; a bounded server request adds context, while complete local meanings keep every reading usable when AI is unavailable.

02 / SYSTEM

ASKFRAMEDRAWREFLECT

  1. 01

    Reframe a short question and recommend one of three fixed spreads while allowing the visitor to choose another.

  2. 02

    Shuffle all 78 card IDs with browser cryptography, draw without replacement, and determine orientation independently.

  3. 03

    Reveal local card meanings immediately while one bounded request prepares a contextual reading for the completed spread.

  4. 04

    Synthesize patterns into practical prompts and actions, always labeling the reading as reflection rather than prediction.

F—1

Seventy-eight optimized card faces load on demand; the initial page downloads only the card back.

F—2

Three- and five-card layouts adapt from a full desktop table to a touch-friendly horizontal mobile rail.

F—3

DeepSeek JSON is treated as untrusted input and accepted only after schema validation.

F—4

Local bilingual meanings and rule-based synthesis replace AI on timeout, invalid output, missing credentials, or provider errors.

F—5

High-stakes questions are intercepted before the model call and redirected away from predictive guidance.

03 / EVIDENCE

BEFORE → BUILT → AFTER

BEFORE

A complete visual deck existed as 273 MB of inconsistently named PNG files with no data model, interaction, or safe interpretation layer.

BUILT

A repeatable asset pipeline produces 78 stable card IDs, a card back, two portfolio posters, bilingual meanings, deterministic draw rules, and validated API boundaries.

AFTER

Visitors can complete a responsive reading even with JavaScript motion reduced or the AI provider unavailable.

LEARNING

AI feels more trustworthy when it is the optional interpretation layer, not the authority that controls the game or decides what happened.

NEXT

Review the complete bilingual deck with experienced readers, measure real mobile completion, and compare local and AI-assisted readings before expanding spreads.

SEE THE BUILD

[ GITHUB ↗ ][ LIVE DEMO ↗ ]