Mobile Build Prompt: 02 - Discover Screen (The Ether)

Goal

Design the Discover Screen ("The Ether")—an immersive space for Tarot discovery, moving away from static lists toward intent-driven exploration.

Design Constraints (Refer to Master Design Guide)

• Theme: OLED Noir (#000000) base with Ethereal Glaze accents (Lavender, Sage Green, Dusk Blue).
• Philosophy: "Intent-Driven Discovery"—content categorized by user search/need (Love, Career, Shadow Work).
• Aesthetic: "Anti-AI"—high-quality grain overlay on glass containers.
• Interaction: "Tactile Discovery"—horizontal scroll carousels with physical momentum and snappy haptic feedback.

Implementation Tasks

1. Layout & Components

• FlashList: Used for vertical "Learning/Categories."
• Horizontal Carousels: For "Trending Spreads" and "Featured Readers."
• IntentPill: Animated filter chips for quick filtering (smooth scale-in).
• SpreadCard: Immersive cards with deep parallax effects (use react-native-reanimated interpolation based on scroll position).

2. Interaction & Haptics

• Haptic: HapticEngine.trigger('TICK') (Light) for every carousel snap point.
• Physics: react-native-reanimated for smooth, elastic scroll deceleration.
• Entry: Smooth, staggered fade-in animations for all listed elements.

3. Visual Polish

• Persistent grain overlay on container.
• Ethereal Glaze accents for interactive elements (pills, cards).
• Parallax-driven layering to simulate depth.

Technical Specs

• Layout: FlashList (masonry for categories, horizontal for carousels).
• Visuals: react-native-reanimated (parallax, interpolation), react-native-gesture-handler (scroll physics).

Prompt for AI Developer

"Build the DiscoverScreen.tsx.

1. Layout: Use FlashList for vertical lists, ScrollView with horizontal for 'Trending Spreads' and 'Featured Readers'.
2. Theme: OLED-black base (#000000). Use 'Ethereal Glaze' accents (Lavender, Sage, Dusk Blue) for pills and cards.
3. Components:
   • IntentPill: Interactive chips. Animate scale-up on tap using withSpring (damping: 10).
   • SpreadCard: Use react-native-reanimated to create a 3D parallax effect based on scroll position (useAnimatedStyle).
4. Haptics: Trigger HapticEngine.trigger('TICK') when carousel items snap to center.
5. Aesthetic: Apply a persistent, high-frequency grain overlay over the container to maintain the 'Anti-AI' look.
6. Interaction: Ensure all horizontal scroll carousels have a natural, elastic bounce (use spring physics)."