Key features
Quick start
Get the app running locally in under 5 minutes
How it works
Understand the three-card spread and AI interpretation flow
78 tarot cards
Complete deck with 22 Major Arcana and 56 Minor Arcana cards
AI-powered readings
Google Gemini 2.5 Flash generates unique interpretations for each consultation
What’s included
Luz de Arcanos combines modern web technology with tarot wisdom to create an engaging user experience:- AI integration with Google Gemini 2.5 Flash for unique readings on each consultation
- 3D card animations using pure CSS with
transform-style: preserve-3d - Video background on loop with overlay and fully responsive design
- Progressive reveal where cards appear while the AI processes the response
- Staggered text display as reading paragraphs fade in one by one
- Usage limits of 5 consultations per day per user via
localStorage - Automatic fallback between Gemini models when quota errors occur (429)
- Complete SEO including Open Graph, Twitter Card, JSON-LD Schema.org, canonical URLs, and favicons for all devices
Technology stack
| Technology | Purpose |
|---|---|
| Astro 5 | Framework — SSR with Server Actions |
| Google Gemini API | AI-generated readings |
| Vercel | Deploy with SSR adapter |
| TypeScript | Type safety in actions and components |
| Pure CSS | 3D animations, layout, visual theme |
Next steps
Installation
Install dependencies and configure your environment
Three-card spread
Learn how the past-present-future reading works