A meditation companion that helps you build a consistent practice through immersive 3D environments, mood tracking, and guided breathing techniques.
What It Does
Mindfully combines meditation timers, mood tracking, and breathing exercises into one cohesive experience. The app features immersive 3D environments built with React Three Fiber, providing a calming visual backdrop for your practice. Track your emotional journey over time, save session notes, and explore different breathing techniques – all in a clean, distraction-free interface.
Key Features:
- Immersive 3D Meditation Spaces – Serene environments with dynamic lighting and particle effects
- Flexible Timer System – Quick sessions (5-15 min) or custom durations with breathing guidance
- Mood Tracking – Log how you feel before and after each session, visualize trends over time
- Streak Tracking – Visualize consistency without pressure
- Session Notes – Capture insights and reflections with tags for easy organization
- Breathing Techniques – Guided visualizations for Box Breathing, 4-7-8, and Coherent Breathing
- Dark Mode – Seamless theme switching for any time of day
Why I Built This
I wanted a meditation app that felt modern and engaging without being cluttered. Most apps either overwhelm you with features or feel too clinical. Mindfully attempts to strike a balance between being visually rich but functionally focused. The 3D environments create a sense of presence without being distracting, and the mood tracking provides genuine insight into how meditation affects your emotional state over time.
Tech Stack
- Framework: Next.js 14 (App Router) with React 19
- 3D Graphics: React Three Fiber + Three.js for immersive environments
- Styling: Tailwind CSS v4 with custom design tokens
- UI Components: Radix UI primitives with shadcn/ui
- Data Visualization: Recharts for mood trends
- Storage: LocalStorage for client-side persistence
- Analytics: Vercel Analytics with custom event tracking
- Deployment: Vercel with automatic CI/CD
Key Features Deep Dive
Immersive 3D Environments
The meditation space uses React Three Fiber to render a calming 3D scene with:
- Animated central orb that pulses with your breath
- Floating particle system for ambient movement
- Dynamic lighting that responds to theme changes
- Smooth camera animations and transitions
Mood Tracking System
Track your emotional state before and after each session:
- 5-point scale from “Stressed” to “Peaceful”
- Visual trend charts showing progress over time
- Average improvement metrics
- Filter by date range to see patterns
Breathing Techniques
Three scientifically-backed techniques with visual guidance:
- Box Breathing (4-4-4-4) – Equal parts inhale, hold, exhale, hold
- 4-7-8 Breathing – Calming technique for stress relief
- Coherent Breathing (5-5) – Balanced breathing for focus
Each technique includes:
- Animated visual guide
- Step-by-step instructions
- Benefits and use cases
- Integration with meditation timer
Design Philosophy
Calm by Default The interface uses soft gradients, generous spacing, and subtle animations. Nothing flashes, bounces, or demands attention. The 3D environments are visually interesting but never distracting.
Data That Matters Mood tracking isn’t about gamification – it’s about genuine insight. The charts show trends without pressure, helping you understand how meditation affects your emotional state.
Flexible Practice Whether you have 5 minutes or an hour, Mindfully adapts. Quick presets get you started fast, while custom timers and breathing modes support deeper practice.
Performance Considerations
- 3D Optimization: Uses instanced meshes and efficient particle systems
- Code Splitting: Dynamic imports for heavy 3D components
- Client-Side Storage: No backend means instant load times
- Responsive Design: Works seamlessly on mobile, tablet, and desktop
- Theme Persistence: Smooth transitions without flash of unstyled content
Future Enhancements
- Audio Integration: Ambient soundscapes and guided meditations
- Export Data: Download your mood history and session notes
- Custom Environments: User-selectable 3D scenes and themes
- Progressive Web App: Offline support and installable experience
Live Demo: mindfully.griffen.codes
