Title:

Mystic Ink Tarot: A Ritual of Drawing, Interpretation, and Divinatory Aesthetics

Sketch Link: https://mystic-ink-tarot.vercel.app/

One Sentence Summary:

Mystic Ink Tarot is an interactive system that analyzes users’ abstract drawings with AI and maps them to corresponding tarot cards to generate structured readings.

Project Summary:

Mystic Ink Tarot reimagines tarot divination for the digital era by merging abstract drawing, interactive ritual design, and AI-powered interpretation. Instead of relying on random card shuffling, this web-based application invites users to actively participate in the reading process by channeling their emotions and intentions through freeform drawing. These intuitive “energy imprints” become the foundation for a deeply personal tarot experience crafted through Gemini’s advanced vision and language capabilities.

The journey begins with a question. Users choose from thematic categories such as Love, Career, Wealth, Health, or General and select a spread type ranging from simple one-card readings to multi-card layouts like the Celtic Cross. Instead of generic instructions, the system generates metaphorical drawing prompts through Gemini AI, encouraging symbolic expression such as “Draw the chains that once bound you” or “Sketch the doorway you hesitate to open.” These prompts emphasize emotional resonance rather than literal representation. Users can choose to draw through the touchpad or the handpose model. The handPose model is based on ml5's gesture model, which can add fun to project and give users the feeling of drawing tarot patterns from a distance.

After the user draws with mystical brush styles and color palettes, the canvas output is analyzed by Large Language Model. The model interprets visual elements about flow, tension, density, symmetry, and abstract gestures and maps them to relevant tarot archetypes. Each assigned card appears upright or reversed, enriching the reading with dual emotional perspectives. Cards then reveal themselves through immersive 3D flip animations, particle bursts, and thematic sound effects, creating a moment of spectacle within the ritual.

Beyond single readings, Mystic Ink Tarot offers a Daily Oracle, a Tarot Library, journaling tools, and AI-powered follow-up questions. Users can review their reading history, annotate interpretations, track symbolic patterns over time, and export spiritual insights. The interface is designed with a mystical aesthetic featuring animated stars, glass-morphism panels, and glowing accents that evoke enchantment and introspection.

Mystic Ink Tarot positions tarot as a creative, embodied process rather than a passive fortune-telling act. By combining drawing, AI interpretation, and ritualistic design, it bridges ancient symbolism with contemporary technology, inviting users to co-create meaning with the machine. The result is an experience that is not only practical and reflective, but also artistic, emotional, and delightfully magical.

Inspiration: 

• Cultural / Personal Curiosity

I have always been fascinated by divination, symbolism, and the emotional narratives behind tarot. The project began as a curiosity about whether digital tools could reinterpret this ancient practice in a contemporary, interactive format.

• Blending Tarot Reading with Digital Technology

Tarot traditionally relies on intuition, imagery, and ritual. I was interested in what happens when these elements meet machine learning, whether a digital tarot system could still feel intimate, symbolic, and emotionally resonant.

• Machine Learning & Model Exploration

The rise of accessible creative ML tools (like ml5.js and large language models) inspired me to experiment with generating meanings, interpreting drawings, and guiding users through an interactive tarot experience. I wanted to test how AI might reshape the role of the “reader” in a divination process.

Process:

• Building the Core Flow with ml5

I started by structuring the basic pipeline: the user asks a question → draws a symbol → the system matches it to a tarot card → a large language model generates an interpretation. This foundational flow made the system functional early on.

• Expanding the Tarot Logic

I extended the system from a single-card reading to a three-card spread, allowing for “past–present–future” interpretations. This added narrative depth and made the interaction feel closer to real tarot practices.

• UI and Interaction Refinement

After testing basic functionality, I designed a softer, more mystical UI, which add transitions, card animations, and clearer prompts that guide users through the ritual-like process.

• Integrating Image Uploads & Multimedia

I implemented image upload so users could see the tarot image when have the intepretation. I also added ambient music and subtle sound effects to create a more atmospheric experience.

• Adding Handpose Interaction

Using ml5 handpose model, I experimented with gesture-based triggers, allowing users to draw motions with hand movements. This made the system feel more embodied and magical.

• AI-Assisted Feature Development

After the basic function completed, I added more functions such as tarot calendar, download diary, daily tarot oracle, and monthly/ yearly summary. In this process, AI acted as a collaborator, helping shape the project’s direction.

Audience/Context:

• Intended Users

This project is designed for people who enjoy tarot, symbolic storytelling, guided reflection, or interactive rituals. It also appeals to those curious about how AI transforms traditional cultural practices.

• Experience Goals

The experience is meant to feel introspective, gentle, and slightly mystical. Users don’t simply “use a tool”; they engage in a small ritual involving drawing, selecting cards, and receiving machine-generated insights.

• Interactive Nature

The system is highly interactive. Users ask questions, draw symbols, upload images, and use hand gestures. The interaction blend makes it both playful and emotionally meaningful.

• Tone & Use Case

It is not made for fortune-telling accuracy, but rather for emotional exploration. The project sits between art, digital ritual, and speculative interface design.

User testing: 

• More Visual Styles Requested

Users wanted greater aesthetic variety, so I expanded the interface to four distinct visual themes.

• Handpose Interaction Suggested

Testers were excited by gesture-based control, which led to the addition of a handpose drawing mode.

• Need for More Features

Users felt the system could be more complete, prompting me to add more functions and refine the tarot flow.

• Brush Color Expansion

Participants wanted more expressive drawing options, so I introduced a broader brush color palette.

• Overall Reaction

Feedback was positive that testers said the updated version felt more immersive, intuitive, and polished.

Challenges:

• Drawing-to-Meaning Pipeline — Designing prompts that help Gemini interpret abstract drawings meaningfully

• Card Image Mapping — Matching Gemini's varied card name outputs to actual image files

• 3D Card Flip Animation — Getting CSS 3D transforms to work with backface-visibility across browsers

• Reversed Card Logic — Implementing visually upside-down cards while maintaining readable text

• State Management Complexity — Managing open/close states across many modal panels

Next Step:

Technical Improvements:

• Add service worker for offline functionality

• Move to Firebase/Supabase for cross-device sync

Feature Additions:

• Multiplayer relationship readings

• AI-generated voice narration

• Custom tarot deck uploads

• Moon phase & astrological integration

• Community features (public readings, trending cards)

Experimental Ideas:

• Palm Reading Mode (camera-based)

• AR Experience (WebXR)

• Meditation Mode (breathing exercises)

Source Code:

https://github.com/VivianaviVi/mystic-ink-tarot