Mobile Build Prompt: 01 - Home Screen (The Sanctuary)

Goal

Design the "Sanctuary" Home Screen—the user's daily altar. This is the central hub for their spiritual practice, moving away from rigid navigation toward a modular, ritual-based dashboard.

Design Constraints (Refer to Master Design Guide)

• Theme: OLED Noir (#000000) base with Ethereal Glaze accents.
• Philosophy: "Ritual-as-a-Service"—Home screen widgets must feel like physical objects on an altar.
• Pacing: "Slow UI"—staggered, deliberate entry animations (staggered withSpring animations).
• Aesthetic: "Anti-AI"—high-quality grain overlay on all glass containers, avoiding perfect linear gradients.
• Interaction: Organic Motion—all widget interactions must trigger tactile haptic feedback.

Implementation Tasks

1. Modular "Altar" Grid

• Use FlashList with masonry columns for a modular, custom-widget feel.
• Widgets:
  • DailyDrawWidget: Interactive card, focus of the screen.
  • EnergyAura: Reanimated-driven, liquid-morphing SVG radial-gradient that shifts hue based on time of day (Solar vs. Lunar palettes).
  • RitualFAB: Floating Action Button for initiating readings (the "Ritual" button).
• Design: Widgets must use floating glass (low-opacity, heavy blur, grain overlay).

2. Interaction & Haptics

• Haptic: HapticEngine.trigger('TICK') (Light) for every interaction (drag, expand).
• Physics: Widgets must use withSpring (high damping, low mass) to mimic physical objects shifting under light touch.
• Entry: Staggered fade-in (delay: 100ms per widget) to enforce intentional, "slow" entry.

3. Visual Polish

• Persistent grain overlay on the entire container.
• Bio-responsive colors (Solar/Golden morning vs. Lunar/Deep night) integrated into the container gradient logic.

Technical Specs

• Layout: FlashList (masonry).
• Visuals: BlurView, Skia (for grain/overlay), react-native-reanimated (physics).
• Theme: OLED Noir (#000000).

Prompt for AI Developer

"Build the HomeScreen.tsx as a 'Sanctuary' altar.

1. Layout: Implement a FlashList masonry grid for modular widgets.
2. Theme: Deep OLED-black background (#000000). Widgets must use floating glass (blur, grain overlay texture).
3. Widgets:
   • DailyDrawWidget: Focus component.
   • EnergyAura: An organic, liquid-morphing SVG radial-gradient. The gradient hue MUST shift between warm/solar (morning) and cool/lunar (night).
   • RitualFAB: A floating button with a subtle, looping pulse animation using withRepeat and withSequence.
4. Animations: Use withSpring (high damping) for a staggered, graceful fade-in of widgets. Ensure it feels like a physical reveal.
5. Aesthetic: Apply a persistent grain overlay over the background to ground the UI.
6. Interaction: Trigger HapticEngine.trigger('TICK') for any interaction.
7. Privacy: Privacy-first design: ensure local-only data access markers are visible."