Prompt 03: Card Reveal Animations

Goal: Implement the "Reveal Spread" and "Flipping" animations.

Design Requirements:

• Noir/Minimalist: Cards are face-down (using the user's active "Card Skin" asset) until tapped.
• Haptic/Slow UI:
  • Flip animation: Needs to be tactile.
  • Vibration: "Reveal" of Major Arcana should be longer, immersive, and "weightier" than Minor Arcana.
• Organic Motion: Avoid jarring cuts. Cards flip along the Y-axis (or X, decide based on UX feel—usually Y feels more like a physical card).
• Animations:
  • Flip animation: rotateY from 0 to 180 degrees.
  • Reveal: Fade in the card face content.
  • Spread: When transitioned from the "Pick" phase to "Reveal" phase, the spread should morph into the final reading layout.

Technical Specs:

• Technology: react-native-reanimated.
• Logic:
  • Shared values for rotation (flipped state).
  • Interpolation to handle the flip perspective (front/back).
  • Need a way to handle "Flipped Face" vs. "Back Face" rendering without double-rendering overhead (conditional transparency or z-index swap).
  • When user flips, trigger the API for the reading result (if not pre-fetched).

Context:

• The web app performs a pre-fetch of the reading result while the cards are still face-down. We should keep this "pre-creation" logic if possible.

Deliverable:

• src/components/CardRevealSpread.tsx (Handles the layout of the revealed spread)
• src/components/FlipCard.tsx (The individual card flip logic)