A beautifully animated emotional wellness platform that helps users explore, visualize, and understand their feelings through interactive mood tracking, 3D visualizations, and personalized insights.
- 38 Emotional States: From happiness to melancholy, each with unique colors and personalities
- Floating Card Interface: Disney-inspired 3D animations with shimmer and hover effects
- Intuitive Design: Beautiful gradient backgrounds and smooth transitions
- Dynamic Visualization: Interactive orbs that change color, glow, and animation based on selected mood
- Particle Effects: Floating particles and ripple rings for immersive experience
- Responsive Animations: Smooth Framer Motion animations with customizable states
- Journal Prompts: Thoughtful questions tailored to your emotional state
- Inspirational Quotes: Curated quotes from renowned authors and thinkers
- Keyword Clouds: Emotion-related words to expand emotional vocabulary
- Music Recommendations: Spotify-style playlists matching your mood
- Mood Tracking: Visual charts showing emotional patterns over time
- Statistics: Daily, weekly, and overall mood insights
- Recent Activity: Timeline of your emotional journey
- Progress Visualization: Beautiful bar and pie charts
- Curated Playlists: Genre-specific music recommendations for each mood
- Interactive Player: Play/pause functionality with beautiful UI
- Mood-Based Organization: Easy switching between emotional soundscapes
- Frontend: Next.js 13 with App Router
- Styling: TailwindCSS with custom design system
- Animations: Framer Motion for smooth, professional animations
- Icons: Lucide React for consistent iconography
- Data Storage: Local Storage for client-side persistence
- TypeScript: Full type safety throughout the application
graph TB
subgraph "Presentation Layer"
A[Home Page]
B[Mood Detail Page]
C[Analytics Dashboard]
D[Music Player]
end
subgraph "Component Layer"
E[MoodCard]
F[OrbVisualizer]
G[SuggestionPanel]
H[FloatingBackground]
I[MoodChart]
end
subgraph "Data Layer"
J[moodData.ts]
K[getQuote.ts]
L[useLocalStorage Hook]
end
A --> E
A --> H
B --> F
B --> G
C --> I
D --> J
E --> J
F --> J
G --> K
I --> L
flowchart LR
A[User Selects Mood] --> B{Multi-Select?}
B -->|Yes| C[Store Selections]
B -->|No| D[Single Mood]
C --> E[Navigate to Detail]
D --> E
E --> F[Load Mood Config]
F --> G[Render 3D Orb]
G --> H[Fetch Quote]
H --> I[Generate Prompt]
I --> J[Show Music Recs]
J --> K[Persist to Storage]
K --> L[Update Analytics]
stateDiagram-v2
[*] --> Idle: Component Mount
Idle --> Active: User Clicks Activate
Active --> Idle: User Clicks Pause
Idle --> Animating: Mood Selected
Animating --> Idle: Animation Complete
Active --> Particles: Trigger Particles
Particles --> Active: Particles Fade
InnerHue follows Apple-level design aesthetics with:
- Glassmorphism: Backdrop blur effects and translucent cards
- Micro-interactions: Subtle hover states and tap feedback
- Color Psychology: Carefully chosen colors that match emotional states
- Responsive Design: Mobile-first approach with perfect cross-device experience
- Accessibility: High contrast ratios and intuitive navigation
Quick start for local development:
# Clone the repository
git clone https://github.com/Nitya-003/innerhue.git
cd innerhue
# Install dependencies
npm install
# Run the development server
npm run devFor detailed setup instructions, environment configuration, and troubleshooting, see SETUP.md.
InnerHue uses a comprehensive emotional color palette:
- Happy: Golden yellows (#FFD93D)
- Calm: Peaceful greens (#66BB6A)
- Sad: Soothing blues (#42A5F5)
- Excited: Vibrant purples (#AB47BC)
- Anxious: Warm oranges (#FF7043)
- User Authentication: Secure login with NextAuth.js
- Cloud Sync: Backup mood history to cloud storage
- Enhanced Analytics: Weekly/monthly trend reports
- AI-Powered Insights: OpenAI integration for personalized suggestions
- Voice Journaling: Audio recordings with sentiment analysis
- Social Sharing: Share mood insights with friends
- Mobile App: React Native companion app
- Wearable Integration: Apple Watch and Fitbit mood tracking
- Meditation Module: Guided meditations based on mood
- Community Features: Anonymous mood boards
- Therapist Integration: Professional dashboard
- Advanced NLP: Cohere API for deeper emotional analysis
Thanks to these amazing people for contributing
We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License - see the LICENSE file for details.
- Framer Motion for incredible animation capabilities
- TailwindCSS for the flexible design system
- Next.js for the amazing developer experience
- Inspiration from emotional wellness platforms and modern design trends
InnerHue - Discover the colors of your emotions