Beyond the Cards

## Inspiration

Tarot cards are a rich visual language, yet beginners often start by memorizing fixed meanings. Connecting imagery, spread positions, upright and reversed perspectives, and a personal question can be difficult.

We created Beyond the Cards to make tarot learning a process of observation, interpretation, and creative expression—starting with the art of the cards and moving toward the user's own story.

## What it does

Beyond the Cards connects tarot learning and personal storytelling through **See → Understand → Connect → Express**.

Users draw one or three cards, explore scenes and symbols, compare upright and reversed perspectives on the same card, and add their observations, associations, questions, and emotions.

These elements become starting points for personal stories, storyboards, journal entries, poems, character stories, or Tarot Story Cards. Users can edit, save, and export their work. Interpretations support reflection and creativity, while users decide what fits their experience.

## How we built it

We built on an existing tarot curriculum, 78-card library, journal, and learning structure to create a mobile interactive experience.

The frontend uses **HTML, CSS, and vanilla JavaScript**. Local rules and narrative templates generate creative drafts, **localStorage** preserves drafts and saved works, and **SVG** supports story-card export. **GitHub Pages** hosts the public experience, with automatic deployment through **GitHub Actions**.

The current prototype uses local rules and templates. A live AI model has not yet been integrated.

## What was built during ForgeHacks

**Pre-existing work:** Tarot curriculum, card library, journal, and learning structure.

**Built during ForgeHacks:**

- **AI Interpretation Coach interaction prototype:** A guided flow connecting visual exploration, upright and reversed perspectives, and user feedback.
- **AI narrative reasoning workflow prototype:** A process that combines card knowledge, spread positions, and personal context into editable interpretations and creative drafts.
- **Personalized reflection system:** Inputs for observations, associations, questions, and emotions that help users develop their own meaning.
- **AI interaction workflow:** A complete journey from drawing and exploring cards to creating, editing, saving, and exporting personal narratives.

These features currently use local rules and narrative templates to demonstrate the intended experience. Live AI model integration remains future work.

## Challenges we ran into

Maintaining continuity was a central challenge. Scrolling after a draw, controls covering card artwork, and scattered actions interrupted visual exploration. We brought drawing and interpretation into the same visual area and refined the mobile interaction hierarchy.

Reversed perspectives also required careful design. Instead of redrawing, users can compare perspectives on the same card while preserving their input.

We also needed to distinguish visual observations, teaching interpretations, and personal associations, and clearly communicate the boundary between the prototype and live AI capabilities.

## Accomplishments that we're proud of

We completed a journey from visual exploration to personal reflection, creative editing, saving, and export. The experience includes a complete English library of 78 cards, single-card and three-card exploration, and same-card upright and reversed comparison.

We also published a public repository, a GitHub Pages demo, and an English narrated demo video.

What we value most is that users' observations and words are central to the creative process: the cards offer inspiration, and users write the story.

## What we learned

Tarot learning is about more than remembering meanings. It involves understanding how visual clues connect and how personal context changes an interpretation.

We learned that creative experiences need room for editing and disagreement, so users retain control of their expression. Clear knowledge structures, continuous interaction, and editable outputs are important foundations to establish before integrating a live AI model.

## What's next

We plan to integrate a live AI model and tarot knowledge retrieval, grounding interpretations in specific visual evidence and generating more varied creative suggestions based on personal context.

We will also expand symbol hotspots and learning feedback, explore generative visual narratives, and add cross-device saving and work sharing.

Throughout this development, we will evaluate the relevance, grounding, and narrative quality of AI outputs while preserving users' ability to choose, question, and edit every interpretation.