AI Developer Prompt: Reading Flow (Selection, Streaming, Result, Chat) Screens

Context

You are building the reading/* screens for the MysticX Expo mobile app. Screen Goal: The core ritual. 1) Card Selection: based on the spread, display 78 cards in a fan for user selection. 2) Streaming: progress bar, glowing aura, card-by-card streaming text. 3) Result: card interpretations, summary, and follow-up CTA. 4) Chat: follow-up Q&A with the AI tarot reader via chat bubbles.

Wireframe & Layout Reference

Base the layout on the structural flow for this screen from wireframes. The UI should feel spacious and native, avoiding cramped web-view layouts.

Design System Rules (Strict)

The app must follow the Mystical Minimalism & Velvet Noir philosophy.

1. Colors & Backgrounds

• OLED Noir Base: Background must be OLED-friendly deep black (#000000), midnight navy (#0a192f), or rich deep purple. Never use flat gray-black.
• Ethereal Glaze: Use expo-blur for navigation elements, floating action bars, or modal backgrounds to create a frosted, translucent depth.
• Accents: Use Antique Gold (#c5a059) for primary interactive elements. For active states, use ultra-thin metallic borders or subtle neon glow (cyan, amethyst).

2. Typography

• Headers: Use high-contrast, elegant serif fonts (e.g., Playfair Display).
• Body: Use clean sans-serif fonts (e.g., Inter).
• Spacing: Enforce a minimum 1.6 line-height for any long-form reading text.

3. Interactions, "The Ritual" & Animation Flow (Critical)

The reading flow is the app's core. It must use react-native-reanimated and expo-haptics to match the complex, physics-driven interactions of the web app.

• Phase 1: Card Selection (Arc & Rotation)
  • Cards are displayed in a bottom-anchored arc (like a wheel).
  • Users can drag to rotate the wheel. Use Reanimated shared values (useSharedValue, withDecay, withSpring) for velocity, friction, and rubber-band edge bounce.
  • Granular Haptics: Trigger impactAsync(ImpactFeedbackStyle.Light) as cards rotate past the center point. Implement distinctly different haptic patterns for Major Arcana vs Minor Arcana draws.
• Phase 2: Reveal, Loading Transition & Breathwork
  • When a user taps a card, use a 3D flip animation (rotateY with withTiming or withSpring).
  • Mindful Pacing: Integrate brief guided breathwork prompts (e.g., 3-second inhale animation) between UI interactions to slow users down and enhance the ritual experience.
  • Loading Choreography: When all cards are selected, do not use a spinner. Replicate the web app's choreography:
    1. Cards flip face-down.
    2. The entire arc shrinks and moves to screen center (scale down, translateY up).
    3. The circular formation begins continuous, smooth rotation while a glowing "aura" ring (dashed border) fades in and counter-rotates.
• Phase 3: Reading (Streaming Chat)
  • AI text must stream in rhythmically, mimicking real-time conversation (typewriter pacing).
  • While waiting for AI responses, use a glowing aura pulse below 0.1Hz around chat bubbles.
• "Slow UI": Transitions between phases must be deliberate and unhurried. Avoid instant snapping. Use ease-out-back spring physics for card operations, giving them tangible "weight."

Task

Write React Native (Expo) code for this screen. Ensure you use react-native-reanimated for animations, expo-haptics for touch feedback, and style strictly with the OLED Noir theme above. Ensure the code is modular, well-typed (TypeScript), and visually stunning.