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.
- PHP 8
- JavaScript
- MariaDB
- Tailwind CSS
- OpenRouter
- Stripe
- WebAuthn
- Apache
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) |
| 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
- Quick Start Guide
- Reading System
- AI Integration
- Theme System
- Authentication
- Card Data
- Gaming World Integration
Version
See CHANGELOG.md and VERSION file.
License
All rights reserved. Contact the project owner for licensing inquiries.
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.