A stunning, modern web application for visualizing and analyzing brain activity with AI-powered insights. Built with React, featuring glassmorphism design, smooth animations, and real-time analytics.
- Glassmorphism Design: Beautiful glass-effect cards with backdrop blur
- Animated Gradients: Dynamic background animations
- Smooth Transitions: Framer Motion powered animations
- Dark/Light Theme: Toggle between themes seamlessly
- Responsive Design: Works perfectly on all devices
- 3D Brain Visualization: Interactive 3D brain model with highlighted regions
- Neural Network Display: Real-time neural pathway visualization
- AI-Powered Insights: Intelligent analysis of cognitive effects
- Brain Region Mapping: Accurate mapping of brain activities to regions
- Mood Transition Tracking: Visualize emotional state changes
- Real-time Dashboard: Comprehensive analytics with charts and graphs
- Activity History: Track all analyzed activities with timestamps
- Performance Metrics: Monitor brain efficiency and focus scores
- Interactive Charts: Area charts, bar charts, and radar charts
- Stress Level Monitoring: Track stress indicators
- Activity Tracking: Automatic history of all analyzed activities
- Quick Scenarios: Pre-configured mood transition scenarios
- Search Suggestions: Smart activity suggestions
- Export Data: (Coming soon) Export analytics data
- Multi-view Navigation: Dashboard, Brain View, Analytics, History
- React 19.1.0 - Latest React with concurrent features
- Framer Motion - Smooth, production-ready animations
- Recharts - Beautiful, composable charts
- Three.js - 3D brain visualization
- React Three Fiber - React renderer for Three.js
- Lucide React - Beautiful, consistent icons
- CSS3 - Modern styling with glassmorphism
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/neuroease.git
cd neuroease- Install dependencies
npm install- Start the development server
npm startThe app will open at http://localhost:3000
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run buildUse the sidebar to navigate between different views:
- Dashboard: Overview with analytics and charts
- Brain Activity: 3D brain visualization and neural networks
- Analytics: Detailed performance metrics
- History: View and manage past activities
- Scenarios: Quick access to mood transitions
- Learn: Educational content (coming soon)
- Wellness: Health recommendations (coming soon)
- Settings: Customize your experience (coming soon)
- Enter an activity in the search bar (e.g., "reading", "speaking", "learning")
- Click "Analyze Brain Activity" or press Enter
- View the highlighted brain regions in the 3D model
- Explore neural network connections
- Read AI-generated insights about cognitive effects
Try pre-configured mood transitions:
- 😊 → 😢 Mood Shift: See how happiness transitions to sadness
- 😔 → 🤔 Deep Thinking: Observe grief transforming into contemplation
Click on any suggestion chip for instant analysis:
- Speaking
- Reading a book
- Listening to music
- Writing an essay
- Learning a language
- Giving a speech
- Having a conversation
- Translating text
Beautiful frosted-glass effect with:
- Backdrop blur filters
- Semi-transparent backgrounds
- Subtle borders and shadows
- Smooth hover effects
Powered by Framer Motion:
- Page transitions
- Component entrance animations
- Hover and tap interactions
- Loading states
- Smooth scrolling
- Primary: Purple gradient (#667eea → #764ba2)
- Success: Neon green (#06ffa5)
- Danger: Hot pink (#ff006e)
- Info: Cyan (#4cc9f0)
- Warning: Yellow (#ffd60a)
Enable/disable mock data for testing without a backend:
- Toggle in the control panel
- Useful for development and demonstrations
- Simulates AI analysis responses
Switch between light and dark modes:
- Click the sun/moon icon in the navbar
- Preferences are saved locally
- Smooth theme transitions
- Sidebar: Navigation with glassmorphism design
- Dashboard: Analytics hub with charts
- BrainCanvas: 3D brain visualization
- NeuralNetwork: Neural pathway display
- BrainInsights: AI-powered analysis results
- ActivityHistory: Activity tracking and management
- StatsCards: Animated metric cards
- Textbox: Smart search input
- Navbar: Top navigation bar
- ThemeProvider: Theme management
- Lazy Loading: Components load on demand
- Optimized Animations: 60fps smooth animations
- Efficient Rendering: React 19 concurrent features
- Code Splitting: Reduced initial bundle size
- Memoization: Optimized re-renders
# Kill process on port 3000
lsof -ti:3000 | xargs kill -9
npm start# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm install# Clear build cache
rm -rf build
npm run buildContributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
- React Team for the amazing framework
- Three.js community for 3D visualization tools
- Framer Motion for smooth animations
- All contributors and users
For support, email support@neuroease.com or open an issue on GitHub.
Made with ❤️ and 🧠 by the NeuroEase Team