Create and visualize custom tarot spread layouts with our free browser-based tool. Drag, drop, and define card positions for unique tarot reading templates.
AI Generation Prompt
Tarot Spread Layout Visualizer Specification
Overview
This tool is a browser-based, interactive canvas for tarot practitioners to design, visualize, and document their custom tarot spread layouts. It is a single-file utility that functions purely in-memory, providing a clean, professional aesthetic for mapping out card positions without the need for accounts or database persistence.
Technical Constraints & Compliance
- Strictly Single-File: All CSS, JS, and HTML must reside in one file.
- No Persistence: Use no
localStorage,sessionStorage, or cookies. In-memory state only. - Sandbox Compatibility: Avoid all blocking calls (
alert,confirm,prompt). Use custom modals. - No Branding: The app is purely descriptive; no fictional names or branding.
- Light-Mode Aesthetic: The application must force a vibrant, clean, light-mode interface. No dark mode.
Feature Set
- Interactive Canvas: An infinite-scroll (or large fixed-area) workspace where users can drag and drop card placeholders.
- Card Slot Configuration: Clicking a card slot opens a popover to label the position (e.g., 'Outcome', 'Hidden Influence').
- Export to Image: Uses
html2canvas(or standard Canvas API) to allow the user to download a clean PNG of their custom layout. - Clear & Reset: A button to instantly wipe the canvas for a new project.
- Responsive Controls: Floating toolbar that adjusts for mobile touch-screens, allowing users to move and delete cards easily.
UI/UX Design
- Visual Language: Modern, minimalist "SaaS" aesthetic. Use high-contrast gray text on a soft white or very light gray background.
- Color Palette:
- Background:
#f8fafc(Slate 50) - Primary Buttons:
#475569(Slate 600) - Accent (Card Borders):
#cbd5e1(Slate 300) - Text:
#1e293b(Slate 800)
- Background:
- Animations:
- Smooth transitions on hover (subtle scale-up for cards).
- Fade-in animations for modals and popovers.
- Smooth dragging transitions using CSS
transform.
Layout Architecture
- Header: Simple tool title and a primary 'Export PNG' button.
- Sidebar (Left/Top): Contains the 'Add New Card' button and a 'Clear Canvas' warning button.
- Main Content Area: A centralized grid-pattern workspace where the cards live.
- Editing Modal: Appears centrally when a user selects a card, allowing text input for the card label and position details.
Development Directives
- Use Tailwind CSS via CDN for all styling to maintain a consistent professional look.
- Use Vanilla JavaScript (ES6+) for all drag-and-drop logic.
- The application must remain fully responsive; on mobile, the sidebar should collapse into a bottom-sheet menu.
- Every external dependency must be loaded via secure HTTPS CDN tags in the
<head>.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How can I create a custom tarot spread layout using this tool?
You can easily drag and drop placeholder tarot cards onto the canvas area. Each card position can be assigned a specific label (e.g., 'The Past', 'Current Situation', 'Outcome') to create a structured spread tailored to your specific question. The interface allows for precise positioning to mirror complex patterns like the Celtic Cross or unique custom spreads you have envisioned. Once satisfied, you can rearrange positions as needed using standard mouse or touch interactions.
Is this tarot spread visualizer compatible with physical tarot decks?
This tool is designed to be completely agnostic, meaning it works perfectly regardless of which tarot deck you use. Since it focuses strictly on the geometry and positioning of the card slots rather than providing card meanings, you can use it to map out spreads for any physical deck. It serves as a visual guide or template creator for your readings, helping you maintain consistency in how you lay out your physical cards. This makes it an ideal companion for both beginners learning specific spreads and experienced practitioners designing their own unique patterns.
How can I save my layout if browser storage is not used?
Because this application prioritizes privacy and functions within a sandboxed environment without browser storage, it does not persist your data automatically. To save your design, use the built-in 'Export to Image' function which generates a clean, shareable snapshot of your layout. This ensures that your custom tarot spread diagrams can be downloaded, printed, or saved locally as image files to your device. By offloading the storage to the user's file system, we ensure a lightweight, secure experience without relying on cookies or databases.
What kinds of spreads can I build with this layout tool?
There are no limits to the spreads you can design, ranging from simple three-card past-present-future layouts to complex ten-card patterns. The flexibility of the drag-and-drop system allows you to experiment with non-linear designs, circular spreads, or horizontal timelines. Whether you are preparing a spread for a career query or a personal growth reflection, the custom label feature allows you to define the narrative structure of your cards. Simply label each position to correspond to the specific question or theme you are addressing in your reading.
