Work pct
web

Playing Card Tarot

Cartomancy with a standard 52-card deck — animated, AI-read, free.

Playing Card Tarot is a mobile-first web app that runs honest tarot-style readings off a normal 52-card playing deck — single draws, three-card past/present/future, and the full 10-card Celtic Cross — with AI interpretation, custom skeleton-royal artwork, passkey login, and a Stripe-backed credit store. Vanilla PHP, vanilla JS, MariaDB, no framework bloat.

Last updateApr 2, 2026 PrimaryPHP
  • PHP 8
  • JavaScript
  • MariaDB
  • Tailwind CSS
  • OpenRouter
  • Stripe
  • WebAuthn
  • Apache
Playing Card Tarot — Cartomancy with a standard 52-card deck — animated, AI-read, free.
Playing Card Tarot media
Playing Card Tarot media
Playing Card Tarot media
Playing Card Tarot media

Playing Card Tarot turns the deck on the kitchen table into a real tarot instrument. There's no esoteric 78-card Rider–Waite knowledge required — the reader picks up an ordinary 52-card playing deck, the app handles the spread mechanics, and the interpretation comes back with full AI-written commentary in the cadence of a thoughtful cartomancer.

What it does

  • Three live spread types — single-card pulls, three-card past/present/future, and the full ten-card Celtic Cross with animated reveals and 3D flip transitions.
  • AI-enhanced interpretation on every reading via OpenRouter, streamed in with a typewriter cadence so the reading actually reads rather than dumping a wall of text.
  • Combination engine that recognises pairs, trips, quads, and curated card-pair interactions, then layers ribbon annotations over the spread to surface them.
  • Interactive 52-card legend — every card in the deck is clickable, with its meaning, suit symbolism, and pair interactions pre-written.
  • Passkey-first auth using WebAuthn, with passphrase fallback and email-based recovery — passwords never need to exist unless the user wants one.
  • Theme system with dual accent colors, light/dark toggle, glassmorphism, and animated suit-symbol backgrounds that recolor live when accents change.
  • Stripe-backed economy — free AI on every reading, plus optional credit packs and monthly / six-month premium subscriptions for higher-tier models and daily allowances.
  • Reading history with paginated previews, 3D outcome cards, and AI summaries that survive across sessions.
  • Admin panel covering user management, API key rotation, AI tooling, a reading browser, analytics, and system settings.

How it ships

The whole app is vanilla PHP 8 — no Laravel, no Symfony, no framework — fronted by Apache with mod_rewrite and a single index.php entry point routing into hand-written controllers. State lives in MariaDB; migrations are plain numbered SQL files. The frontend is vanilla JavaScript + Tailwind CSS with custom card-animation and theme layers, no build step beyond Tailwind itself. Custom artwork — the skeleton-royal court cards, the joker, the splash — was drawn for the project and ships as WebP. Lucide SVG icons are inlined through a PHP helper. The PWA manifest + service worker make the whole thing installable to a phone home screen, where it behaves like a native reading app.

Why it exists

Cartomancy with playing cards is older than the tarot deck most people picture, and a 52-card deck is sitting in almost every drawer in the house. The app makes the practice approachable without sanding off the texture: the meanings are real, the spreads are real, the AI commentary stays in voice instead of flattening every reading into the same vague horoscope. It's a free tool first — credits and premium tiers exist so the AI bill is sustainable, not as a paywall around the actual reading.

Straight from the source

The project's own README.

Rendered in place — every link, image, and code block carried over from the repo. The page below is what a contributor would see opening the project for the first time.

PlayingCardTarot.app

A modern, mobile-first card reading web app using a standard 52-card playing deck. Built with vanilla PHP, vanilla JavaScript, MariaDB, and Tailwind CSS. Features AI-enhanced reading analysis, 3D card animations, and custom artwork.

Features

  • Multiple Reading Types - Single card draws, three-card past/present/future spreads, and 10-card Celtic Cross with animated reveals
  • AI-Enhanced Analysis - Free AI reading interpretations for all users via OpenRouter, with typewriter display
  • AI Credit Store - Purchasable credit packs via Stripe Checkout with volume discounts and premium pricing
  • Premium Subscriptions - Monthly and 6-month plans with enhanced AI models and daily credit allowances
  • Interactive Card Legend - Full 52-card deck display with clickable cards showing meanings
  • Combination System - Pair interactions and value combinations (pairs/trips/quads) with colored ribbons
  • Passkey Authentication - WebAuthn passwordless login with passphrase fallback, password recovery via email
  • Theme System - Dual accent colors, light/dark mode, glassmorphism, animated suit backgrounds
  • Custom Art - Original skeleton royal artwork with animated backgrounds throughout
  • Reading History - Paginated history with card previews, 3D outcome cards, and AI summaries
  • Admin Panel - User management, API keys, AI tools, reading browser, analytics, system settings
  • Feedback System - Global bug report and feature request modal accessible from every page
  • Privacy & Terms - Legal compliance pages, FAQ, and public roadmap

Tech Stack

Layer Technology
Backend PHP 8.x (vanilla, no framework)
Frontend Vanilla JavaScript, Tailwind CSS
Database MariaDB
Auth WebAuthn (passkeys) + passphrase fallback
AI OpenRouter (free + premium models)
Payments Stripe (subscriptions + credit packs)
Email GamingWorld.uk mail API (Postmark)
Icons Lucide SVG (inlined via PHP helper)
Fonts Cinzel (headings), Inter (body)
Hosting Self-hosted, Apache with mod_rewrite

Getting Started

See docs/quick-start.md for the full developer onboarding guide.

# Database setup
mysql -u root -p -e "CREATE DATABASE pct;"

# Environment
cp .env.example .env
# Edit .env with your database credentials and encryption key

# Migrations & seed data
php db/migrate.php
mysql -u root -p pct < db/defaults/cards.sql
mysql -u root -p pct < db/defaults/positions_celtic_cross.sql
mysql -u root -p pct < db/defaults/combinations.sql
mysql -u root -p pct < db/defaults/value_combinations.sql

Architecture

index.php                  # Entry point (all web requests)
src/
  core/                    # Bootstrap, router, database, utils, art helper
  controllers/             # Page controllers
  views/                   # View templates
  services/                # OpenRouter, Stripe, Email, Credits, ApiKeyManager, etc.
  middleware/              # Auth, RoleGuard, RateLimit
api/                       # REST API endpoints
assets/
  css/                     # Theme CSS, card animations
  js/                      # Frontend JS (reading, cards, themes, suit-backgrounds)
  images/art/              # Custom artwork (skeleton royals, joker, etc.)
  icons/                   # Lucide SVG icons
db/
  schema.sql               # Database schema
  migrations/              # Numbered migration files
  defaults/                # Seed data
docs/                      # Documentation

Documentation

Version

See CHANGELOG.md and VERSION file.

License

All rights reserved. Contact the project owner for licensing inquiries.

Gallery

The full set.

Build something like this

Want a tool like this for your shop?

We've shipped this kind of thing before. Twenty-minute intro call, no slides.