A spatial mental health journaling app built with React and WebSpatial for Apple Vision Pro.

• Journal Entries: Record your thoughts with voice or text input
• Mood Tracking: Select your current mood/emotion for each entry
• Emotion Spheres: Visualize your emotional patterns as interactive glass-jar bubbles
• Soul Summary (Mood Wrap): Get AI-powered insights and summaries of your emotional journey
• Spatial Experience: Immersive 3D interface designed for Apple Vision Pro

• Voice-to-text journaling with AI mood detection
• 8 emotion categories: Sad, Angry, Anxious, Calm, Excited, Grateful, Reflective, Overwhelmed
• Percentage-based mood visualization showing emotional distribution
• Tap emotions to view related journal entries
• Works in both web browser and Vision Pro simulator

• React 19 + TypeScript
• WebSpatial SDK for Vision Pro
• Vite for build tooling
• Google Gemini AI for mood analysis

npm install

npm run dev

Open http://localhost:5173

Terminal 1 - Start the AVP dev server:

npm run start:avp

Terminal 2 - Launch the simulator:

npm run simulate:avp

src/
├── pages/
│   ├── LandingPage.tsx      # Home screen
│   ├── FeatureSelection.tsx # Choose Journal/Mood Wrap/Emotion Sphere
│   ├── EmotionBubble.tsx    # Emotion visualization spheres
│   ├── NewJournalEntry.tsx  # Create new entries
│   └── MoodWrap.tsx         # AI-powered mood summary
├── components/
│   ├── VoiceInput.tsx       # Voice recording
│   ├── MoodSelector.tsx     # Mood picker
│   └── MoodWrapSlides/      # Carousel slides for summaries
└── services/
   └── moodDetection.ts     # AI mood analysis

Create a .env file:

VITE_GEMINI_API_KEY=your_gemini_api_key
XR_DEV_PORT=5174
XR_DEV_SERVER=http://localhost:5174/webspatial/avp