The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Daily Tarot Reading Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished single-page tarot reading toy for the invented brand [BRAND], using the original six-card [DECK_NAME]. The default invitation is '[TAGLINE]' for [AUDIENCE], with reflections centered on [REFLECTION_FOCUS]. Visitors shuffle a tactile fan of card backs, reveal either a persistent daily card or a three-card past-present-future spread, read original upright or reversed interpretations, and download a canvas-rendered share image. This is an original symbolic deck, not a reproduction of a traditional or commercial tarot deck.

- Audience: The primary audience is [AUDIENCE]: adults who enjoy beautiful interactive objects, journaling prompts, and a brief daily ritual. It also suits designers and creators adapting the format for affirmations, oracle cards, or creative reflection. No prior tarot knowledge is expected.
- Goal: Get a first-time visitor from an intriguing visual deck to a complete, understandable reading in two deliberate actions. Make the daily card stable across reloads for the visitor's local day, make three-card readings freely repeatable, and provide a useful downloaded keepsake while keeping every interaction private and client-side.
- Tone: Quiet, poetic, grounded, and non-directive. Use precise reflection prompts rather than prophecy. Never claim to predict the future or advise on health, money, relationships, or safety. A visible 'For entertainment and reflection only' note is part of the experience, not hidden fine print.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Vanilla CSS with custom properties
- Libraries: react (MIT), react-dom (MIT), vite (MIT), typescript (Apache-2.0), lucide-react (ISC), @fontsource/cormorant-garamond (OFL-1.1), @fontsource/manrope (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite 6 React 18 TypeScript project. Set base: './', build.outDir: 'dist', and build.sourcemap: false in vite.config.ts. Use no router and no backend.
  - Keep all variable values, derived brand copy, six card records, upright and reversed meanings, reflection prompts, instructions, and FAQs in src/content.ts. When variable values change, rewrite every dependent headline, label, storage-key namespace, meaning, and prompt to fit [BRAND], [TAGLINE], [AUDIENCE], [DECK_NAME], and [REFLECTION_FOCUS]; do not leave default-brand remnants.
  - Self-host Cormorant Garamond 500 and 600 and Manrope 400, 500, 600, and 700 through the listed Fontsource packages. Import only the required weights in src/main.tsx.
  - Implement the design in src/styles.css with custom properties, an 8px spacing system, named shuffle and flip keyframes, and explicit desktop and mobile layouts. Use inline CSS or a local SVG for subtle paper grain; do not fetch a texture.
  - Use Lucide icons for interface actions only: Sparkles for the original geometric brand accent, RotateCcw for shuffle, Download for share, ArrowRight for the primary action, X for close, and ChevronDown for expandable explanations. Do not use any brand or suit icons.
  - Define the reading interaction as an explicit state machine: idle, shuffling, ready, revealing, and revealed. Clear pending animation timers on reset or mode change so rapid taps cannot create duplicate draws.
  - Use local browser dates, not UTC dates, for the daily reading. Namespace the localStorage key from a slug derived from [BRAND] and the local YYYY-MM-DD date. Store a versioned object containing date, card id, orientation, and mode; validate restored data and recover silently from malformed storage.
  - Implement the downloadable share image with the native Canvas 2D API at 1080 × 1350 pixels, including a text-wrapping helper and a toBlob download. No screenshot service, canvas dependency, Web Share requirement, or remote request is needed.
  - Download the six generated card illustrations to the exact public paths listed in Assets before building. Reference them with relative-safe public URLs and create ASSETS.md with every asset path, source, author or generator, and license.

## Variables
- [BRAND] — Brand (default: "Asterhollow"). An invented, elegant two- or three-syllable name for the reading experience.
- [TAGLINE] — Invitation line (default: "A quiet card for the day ahead."). One short non-predictive invitation to pause and reflect.
- [AUDIENCE] — Audience (default: "curious minds who enjoy a nightly reflection ritual"). A plain-language phrase describing who the ritual is for.
- [DECK_NAME] — Deck name (default: "The Night Field Deck"). An original name for the six-card symbolic deck.
- [REFLECTION_FOCUS] — Reflection themes (default: "creativity, relationships, and everyday choices"). Three approachable themes used to adapt the card meanings and prompts.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/daily-tarot-reading-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Midnight ink `#0C0B12` — Page background and share-canvas ground
- Raised aubergine `#17131E` — Reading table, dialogs, and elevated panels
- Soft plum `#241A29` — Card backs, hover surfaces, and subtle gradient fields
- Parchment `#F2E8D5` — Primary text and light card details
- Muted lavender `#B9ACBE` — Secondary copy and inactive controls
- Antique gold `#D5B77D` — Fine rules, active states, focus rings, and primary-button background
- Deep gold ink `#21180D` — Text on antique-gold buttons
- Hairline plum `#433348` — Borders and dividers at low visual weight

### Typography
- Display, card names, and reading quotations: Cormorant Garamond (OFL), weights 500/600
- Body, controls, labels, and interpretation text: Manrope (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid. The content shell is max-width 1240px with 32px desktop and 20px mobile side padding. Header height is 76px. Desktop sections have 104px vertical padding; mobile sections have 64px. Hero copy and reading table are separated by 64px on desktop and 36px on mobile. Keep reading prose at 62–68 characters per line.
- Radius: Use 28px for large reading and share panels, 18px for physical cards and small content panels, and 999px for segmented controls and buttons. Physical cards have a strict 3:4 aspect ratio, a 1px antique-gold border at 45% opacity, and a soft 0 24px 70px rgba(0,0,0,.38) shadow.
- Motion: On Shuffle, collapse the six-card fan into a stacked deck over 240ms, split alternating cards left and right in three 180ms passes, then return to a fan over 300ms. Disable controls during the 1.1s sequence and use transform and opacity only.
- Motion: On Reveal, move the selected card or cards from the deck into their reading positions over 320ms, then rotate each inner card from rotateY(0deg) showing its back to rotateY(180deg) showing its face over 680ms. Stagger three-card flips by 140ms. Use perspective: 1200px, transform-style: preserve-3d, and backface-visibility: hidden.
- Motion: Use restrained 180ms hover lifts of at most 6px, border-color changes, and icon rotations. Never make the whole page drift or add a custom cursor.
- Motion: Scroll reveals are optional only for the guide and deck sections: 16px upward movement with a 450ms ease-out transition, once per section, without delaying access to content.
- Motion: With prefers-reduced-motion: reduce, remove fan movement, stagger, parallax, smooth scrolling, and 3D rotation. Show the next state immediately with a 100ms opacity change at most; all reading functions remain available.
- Imagery: Use exactly six original generated gouache-and-gold-ink symbolic illustrations, one for each card in [DECK_NAME]. Every image is full-bleed inside a code-built 3:4 card frame with no generated typography or border. The shared visual language is textured midnight indigo, charcoal, dusty plum, parchment, and muted antique gold, with soft candlelit illumination and fine woodblock-like grain. Do not imitate any existing tarot deck. The card back is separately drawn in CSS/SVG from original concentric lines, a central eight-point star, and six small orbital dots; it uses no generated image. The interactive fanned deck is the hero's visual anchor, not typography alone.

## Pages & Sections
### [BRAND] — [TAGLINE] (`index.html`)
1. **Header and reading hero** — Create a compact header with an original eight-point-star Lucide/CSS accent, [BRAND] in Cormorant Garamond 600, and two anchor links labeled 'The deck' and 'How it works'. At the right place a small pill reading 'For entertainment & reflection'. On mobile keep the brand and pill, and place the two links below in a 44px-high row. The hero eyebrow is '[DECK_NAME] · AN ORIGINAL SIX-CARD DECK'. The default H1 is 'One quiet moment. A different perspective.' Put [TAGLINE] directly below, followed by 'A reflective ritual for [AUDIENCE], exploring [REFLECTION_FOCUS]. No sign-up. Your reading stays in this browser.' Use a two-option segmented control labeled 'Daily card' and 'Three cards'. Daily-card helper text says 'One card, held for your local day.' Three-card helper text says 'Past, present, and future — a fresh spread whenever you choose.' The initial primary button says 'Shuffle the deck'; after shuffling it says 'Reveal today's card' or 'Reveal three cards'. A secondary 'How it works' anchor scrolls to the guide.
   Layout: Use a 12-column hero grid inside the 1240px shell, with copy and controls spanning 5 columns and the reading table spanning 7. Set the H1 at clamp(48px, 5.7vw, 80px), line-height .96, letter-spacing -.035em. The reading table is a 600px-high rounded panel with a subtle radial plum glow, a fine border, and six visible card backs fanned from a shared lower-center origin. Each back is 190 × 285px; use rotations of -18, -11, -4, 4, 11, and 18 degrees and horizontal offsets from -150 to 150px. At 390px, stack copy above a 380px-high table, use 92 × 138px backs, and reduce rotations to -12, -7, -2, 2, 7, and 12 degrees so no card overflows. Keep the primary action above the table on mobile and all tap targets at least 44px.
   Motion: The fan enters with a 500ms opacity and 12px rise. Shuffle and reveal follow the state machine in Design. Mode switching returns transient three-card state to idle, while an existing daily reading remains available and is restored rather than redrawn.
2. **Interactive reading and interpretation** — This is the live result area inside and immediately below the reading table, not a separate route. Before a draw show the instruction 'Shuffle, then turn your card face-up.' In daily mode reveal exactly one card and save its id and upright/reversed orientation for the local day. Reloading on that day must show the same result even after a mode switch. Use a date-seeded first draw, then persist it; do not use a remote random service. In three-card mode draw three distinct cards with Fisher–Yates shuffling and independently assign a 25% chance of reversed orientation. Label their positions 'Past', 'Present', and 'Future'. A 'Shuffle a new spread' button resets only the three-card reading. For every result show card name, orientation, a 25–45 word interpretation, and a separate reflection prompt. Rotate only the illustration 180 degrees for reversed cards; keep all labels upright. The default reading language must come from the six original card records in the deck section, not generic fortune-telling text.
   Layout: For daily mode on desktop, place the revealed 240 × 360px card at left and its interpretation in a 360px-wide column at right with a thin gold rule and 'TODAY'S CARD' eyebrow. For three cards, use a three-column card row with 170px maximum card width, position labels above, then show three aligned interpretation panels below. On mobile, daily interpretation sits below a centered 210px card; three cards remain a three-column row with equal widths and 8px gaps, while interpretation panels stack as expandable details with the first open. Use aria-live='polite' for the completed reading heading and move focus to it after the final flip.
   Motion: Reveal the selected cards with the specified 3D flips. Interpretation text fades in only after its card finishes. Reversed orientation is assigned before animation and must never change on rerender or reload.
3. **How the ritual works** — Title the section 'A small pause, in three turns.' Use three numbered steps: '01 — Shuffle' / 'Let the cards gather, separate, and settle. There is nothing to get right.'; '02 — Turn' / 'Choose one card for today or three cards for a wider view. Reversed cards offer another angle, not a warning.'; '03 — Reflect' / 'Keep the sentence or question that feels useful. Let the rest go.' Add a compact explanation strip for three-card positions: 'Past — what you carry in', 'Present — what asks for attention', 'Future — what you might practice next'. This language frames possibility, never prediction.
   Layout: Place the section heading in a narrow left column and three step panels in a stacked right column. Each step is a grid of 64px number, 150px title, and flexible description separated by hairlines. The position strip spans the full width below as three equal cells. On mobile, stack heading and steps, keep each step's number and title on one line, and stack the three position cells without horizontal scrolling.
   Motion: Use only a subtle one-time section reveal and 180ms border highlight on hover or keyboard focus. Do not pin this section or scrub its content.
4. **Meet the original deck** — Title the section 'Six symbols. Another way in.' Introduce [DECK_NAME] as a compact original deck created for [REFLECTION_FOCUS]. Each card is a button that opens its full upright and reversed text in a native dialog. Use these default records verbatim for the default variables, adapting them naturally for alternate variables: The Ember — upright: 'Protect the small beginning. Give one idea your attention before asking it to become more.' reversed: 'Your energy may be scattered. Lower the stakes and return to one warm, manageable task.' prompt: 'What deserves a little more of my care today?'. The Current — upright: 'Let circumstances move without gripping every outcome. A flexible next step will carry farther than a rigid plan.' reversed: 'Notice where resistance has become habit. Change one condition rather than pushing harder.' prompt: 'Where can I allow an easier route?'. The Threshold — upright: 'A useful transition is near, but it asks for a deliberate choice. Name what you are ready to leave and what comes with you.' reversed: 'Pause before forcing closure. An unanswered question may need information, not urgency.' prompt: 'What am I truly ready to step toward?'. The Garden — upright: 'Small routines are shaping more than you can see. Tend the environment around your goal, not only the goal itself.' reversed: 'Something needs pruning. Remove one obligation or distraction before adding another.' prompt: 'What would help my better habits take root?'. The Mirror — upright: 'Look at the story you are telling about yourself. Keep what is honest and soften what is merely familiar.' reversed: 'Avoid using self-reflection as self-judgment. Ask for a kinder, more complete interpretation.' prompt: 'Which assumption about myself can I revisit?'. The Orbit — upright: 'Return to the people and practices that restore perspective. You do not have to solve everything from the center of the problem.' reversed: 'You may be circling the same thought. Change your setting or seek another viewpoint.' prompt: 'What helps me see the wider pattern?'. The dialog also shows 'Upright', 'Reversed', and 'A question to carry' headings.
   Layout: Use a six-column desktop gallery with 16px gaps; each card contains its 3:4 illustration, number 01–06, and name beneath. At tablet use three columns and at 390px use two columns with 12px gaps. The native dialog is max-width 760px with the card image at left and scrollable meanings at right, a visible X button, Escape support, focus trapping, and focus return to the invoking card. At mobile, dialog image and meanings stack within 90svh.
   Motion: Cards lift no more than 6px and brighten their gold border on hover/focus. Dialog entry is a 160ms opacity and 8px rise; reduced-motion users get an immediate dialog.
5. **Share-card studio** — Title the section 'Keep the thought, not the fortune.' Explain: 'Turn your revealed reading into a private image. It is drawn on your device and never uploaded.' Before a reveal, disable the download button and show 'Reveal a card to create your image.' After either reading, enable 'Download reading card'. The 1080 × 1350 PNG contains [BRAND], [DECK_NAME], the visitor's localized date, the card art and names, orientations, one shortened interpretation per card, and the first reflection prompt. A daily layout uses one large centered illustration; a three-card layout uses three narrow illustrations above 'Past · Present · Future'. End the image with 'For entertainment and reflection only'. Generate the filename from the derived [BRAND] slug and local date, such as 'asterhollow-2026-11-05.png', never a hard-coded default brand.
   Layout: Use a two-column section with explanation and download controls at left and a live responsive canvas preview at right. The canvas element has a 4:5 CSS aspect ratio, max-width 440px, rounded 24px border, and exact internal dimensions of 1080 × 1350. Draw parchment text on midnight ink, fine gold frames, and the already-downloaded local images after they have loaded. Wrap text explicitly, clip artwork neatly, and wait for image decoding before enabling download. On mobile, stack controls above the centered preview.
   Motion: Crossfade the updated canvas preview over 180ms after reveal. Show a small inline 'Image ready' state and preserve the download button's width when its label changes.
6. **Questions, disclaimer, and footer** — Title the FAQ 'Before you turn a card.' Include these four exact default questions and answers: 'Does this predict my future?' — 'No. The cards are original visual prompts for entertainment and reflection. They do not predict events and are not medical, mental-health, legal, or financial advice.'; 'Where is my daily reading stored?' — 'Only in this browser's local storage, keyed to your local day. There is no account and nothing is sent to a server. Clearing site data removes it.'; 'Can I draw more than once?' — 'Your daily card stays the same for the local day. The three-card spread can be shuffled again whenever you want another set of prompts.'; 'What does reversed mean here?' — 'It simply opens another interpretation of the symbol. It is not a bad omen, a warning, or a result to worry about.' Below the FAQ place a plainly visible note: 'For entertainment and reflection only. Take what resonates and leave the rest.' The footer repeats [BRAND], 'An original digital deck for a quieter moment.', and the optional [CREDIT] link.
   Layout: Use native details/summary elements in a single max-width 860px column, separated by 1px plum lines, with comfortable 22px vertical padding and a rotating ChevronDown. Place the disclaimer in a bordered parchment-and-gold callout below. The footer is a simple flex row on desktop and stacked on mobile, with no social icons, fake testimonials, or made-up usage numbers.
   Motion: Use a 160ms chevron rotation and no height animation that could clip text. Respect reduced motion.

## Assets
- image: The Ember card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/ember.webp to public/images/cards/ember.webp. Alt: 'A geometric glass lantern glowing above a winding midnight path.' Use on The Ember card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: The Current card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/current.webp to public/images/cards/current.webp. Alt: 'Two luminous streams weaving among smooth stepping stones.' Use on The Current card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: The Threshold card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/threshold.webp to public/images/cards/threshold.webp. Alt: 'An open stone archway with a small brass key and dawn beyond.' Use on The Threshold card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: The Garden card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/garden.webp to public/images/cards/garden.webp. Alt: 'Night-blooming flowers circling a small stone sundial.' Use on The Garden card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: The Mirror card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/mirror.webp to public/images/cards/mirror.webp. Alt: 'An oval hand mirror reflecting an abstract sunrise, with no person present.' Use on The Mirror card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: The Orbit card illustration. Download https://media.vibefather.ai/assets/9a7129f3-3a18-444d-962a-8be79495c87b/orbit.webp to public/images/cards/orbit.webp. Alt: 'A small brass orrery tracing luminous rings beneath a starry sky.' Use on The Orbit card, its reading and dialog, and the share canvas when drawn. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Draw the reusable card back in original CSS or local SVG: a midnight-plum field, two thin antique-gold rectangular frames, one central eight-point star, concentric orbital lines, and six dots. Do not copy the symmetry, motifs, or composition of an existing deck. Use it for all six backs and the pre-draw hero.
- icon: Install lucide-react and use only Sparkles, RotateCcw, Download, ArrowRight, X, and ChevronDown for interface actions. ISC license. Draw no brand logos or proprietary suit icons. Record the package and license in ASSETS.md.
- font: Self-host Cormorant Garamond weights 500 and 600 through @fontsource/cormorant-garamond (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.
- font: Self-host Manrope weights 400, 500, 600, and 700 through @fontsource/manrope (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.

## Don'ts
- Do not copy, trace, recolor, or closely imitate any existing tarot or oracle deck, including its card art, card-back pattern, suit system, signature composition, guidebook passages, names, packaging, or slogans. Keep this six-card deck and its interpretations original.
- Do not use real people's likenesses, celebrities, fictional characters, brand logos, proprietary occult marks, or recognizable commercial products. The illustrations must contain no people, text, letters, numbers, logos, or watermarks.
- Do not present readings as predictions, diagnoses, warnings, instructions, or professional advice. Never generate alarming interpretations. Keep the entertainment-and-reflection disclaimer visible in the header, FAQ, share image, and footer area.
- Do not add accounts, a backend, API routes, databases, analytics, remote randomness, external forms, tracking pixels, social widgets, or any network submission. Daily readings and share images stay on the visitor's device.
- Do not use Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, hotlinked files, or assets with unclear, noncommercial, or share-alike licenses. Use only the six supplied generated images and original code-drawn decoration.
- Do not load fonts from Google Fonts, Adobe Fonts, or any CDN. Use only the specified self-hosted Fontsource packages and do not add commercial fonts.
- Do not add Three.js, a physics engine, a screenshot package, a state-management library, or another animation framework. CSS transforms, React state, and native Canvas 2D are sufficient.
- Do not hard-code [BRAND], [DECK_NAME], the default storage namespace, share-image filename, audience copy, or reflection themes outside src/content.ts. Alternate variable values must produce a coherent site without default-brand remnants.
- Do not redraw the daily card on reload, mode change, resize, or rerender. Use the visitor's local calendar day and validate localStorage contents; three-card mode alone may be reshuffled repeatedly.
- Do not allow repeated taps or unfinished animations to create duplicate draws, timers, or inconsistent card orientations. Disable actions during transitions and make the full flow keyboard and touch accessible.
- Do not hide card meanings behind hover, rotate labels for reversed cards, use tiny low-contrast text, or let the fan create horizontal overflow. Verify the full experience at 1440 × 900 and 390 × 844 with zero console errors.
- Do not use scroll-jacking, pinned sections, a custom cursor, autoplay audio, parallax on the reading controls, or animation that ignores prefers-reduced-motion.
- Do not emit source maps, copy src/ into dist/, use CDN script or style tags, or exceed 20 MB in dist/. Keep Vite base relative and all assets local.
- Do not add extra pages, bare-directory links, SEO markup, structured data, fake testimonials, invented visitor counts, pricing, newsletter forms, or calls to purchase a physical deck.

---
— Prompt by VibeFather · https://vibefather.ai/t/daily-tarot-reading-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.