Prompt 02: Arc Selection Wheel (Gesture & Layout)

Goal: Build the interactive arc-based selection wheel (the "Card Picker").

Design Requirements (from Master Design Guide):

• OLED Noir: Background must be absolute black (#000000).
• Ritual Pacing: The motion must feel heavy and intentional. Use react-native-reanimated with useAnimatedGestureHandler or useSharedValue.
• Haptic Feedback:
  • Small, sharp haptic "tick" on card select.
  • Subtle, low-intensity haptic vibration while the wheel spins to mimic physical resistance.
• Gesture Control:
  • PanGestureHandler for the rotation.
  • RotationGestureHandler or PanGestureHandler to spin the wheel of cards.
• Layout:
  • Cards positioned along an arc.
  • Visible area: ONLY the upper arc of cards is shown (as in web).
  • Responsive: Handle mobile screens. Use safe areas.
• Animations:
  • Entrance: Cards should stagger in (useAnimatedStyle, stagger).
  • Spin: Inertia-based rotation, similar to the web version.
  • Drag hand: A visual hint (the drag icon) for users to interact, fading after the first user interaction.

Technical Specs:

• Technology: react-native-reanimated, react-native-gesture-handler.
• Logic:
  • Card positions need to be calculated based on an angle on a circle of radius R.
  • Rotation: The wheel rotate value should be a shared value updated on pan.
  • Inertia: Use withDecay for the spin animation to feel realistic.
• Rendering:
  • FlatList is probably bad for circular layouts. Use a View with absolute positioning for cards in a useMemo calculation based on the circle radius.

Deliverable:

• src/components/CardPickerWheel.tsx (The wheel)
• src/components/CardPickerCard.tsx (Individual card rendering with flip state and animations)