The bold hero of LiftMyMind — where Vanta.js, Three.js, and Framer Motion unite to welcome your mood.
LiftMyMind breaks down its 4-step wellness journey: understand your mood, get a song, find peace, enjoy.
One click away from your personalized soundtrack. We built this clean, calming entry point for mood check-ins.
Survey in Action 10 questions. One mood score. The ElasticSlider captures how you truly feel, then finds your perfect song.
Built to share peace of mind, LiftMyMind connects music and mental wellness.

🧠 LiftMyMind — Project Proposal

Your mood has a soundtrack. We help you find it.

💡 Inspiration

Mental wellness is one of the most overlooked aspects of daily life — especially among students and young professionals. We noticed that people often struggle to articulate how they feel, but music has always been a universal language for emotion. The idea behind LiftMyMind was born from a simple observation: what if an app could listen to how you feel today, and respond with the perfect song?

We were inspired by the intersection of emotional intelligence and technology — the belief that something as small as the right song at the right moment can meaningfully shift a person's mental state. We wanted to build something that felt human, calming, and genuinely helpful — not clinical or overwhelming.

🎵 What It Does

LiftMyMind is a modern mental wellness web application that:

Guides users through a daily mood reflection survey, where they rate their satisfaction across different life dimensions using an intuitive slider (0–100).
Calculates a personalized mood score based on their responses.
Instantly recommends a curated song matched to their emotional state:
- 🎵 Score < 30 → A comforting, empathetic song for low moods
- 🎶 Score 30–59 → A balanced, grounding song for neutral moods
- 🎉 Score ≥ 60 → An uplifting, energetic song for positive moods
Delivers the experience through a visually immersive interface with dynamic animated backgrounds, fluid transitions, and a design built to feel as calming as the music itself.

🛠️ How We Built It

LiftMyMind was built as a modern Single Page Application (SPA) using a carefully chosen stack:

Layer	Technology
Framework	React 19 + TypeScript
Build Tool	Vite
Styling	Tailwind CSS v4
Animations	Framer Motion, Three.js, React Three Fiber
Backgrounds	Vanta.js
Icons	Lucide React, React Icons
Routing	React Router DOM v6

Key implementation highlights:

The ElasticSlider component powers the survey — a custom-built, smooth drag-based input that makes rating feel tactile and engaging.
Vanta.js drives the living, animated background on the landing page, creating an immersive first impression.
The mood scoring engine averages all slider responses and maps the result to one of three song categories, redirecting users to a curated YouTube track.
The GooeyNav navigation bar and ClickSpark interaction effects add layers of polish that make the experience feel premium and alive.

🚧 Challenges We Ran Into

Building LiftMyMind came with its share of real engineering and design challenges:

Balancing performance with visual richness — Running Vanta.js, Three.js, and Framer Motion simultaneously required careful optimization to keep the app smooth and avoid frame drops.
Designing for emotional context — A wellness app demands a level of care in UI/UX that goes beyond typical apps. Every color, animation speed, and font choice had to feel intentional and calming — not just "pretty."
Responsive layout with complex animations — Making animated components like the ElasticSlider and GooeyNav behave correctly across all screen sizes (mobile, tablet, desktop) required extensive testing and refinement.
Touch support for custom sliders — Ensuring the ElasticSlider worked seamlessly on touch devices (not just mouse) was a non-trivial implementation challenge.
Routing with dynamic redirects — Cleanly handling the survey completion → YouTube redirect flow within React Router without breaking the navigation history took careful state management.

🏆 Accomplishments That We're Proud Of

✅ Built a fully functional mood-to-music pipeline from survey input to personalized song recommendation.
✅ Achieved a genuinely immersive visual experience that feels distinct from generic wellness apps — the animated backgrounds and fluid transitions create a real sense of calm.
✅ Designed and implemented a custom ElasticSlider component from scratch that is both visually satisfying and functionally precise.
✅ Successfully integrated multiple animation libraries (Framer Motion + Three.js + Vanta.js) into a single cohesive app without performance degradation.
✅ Delivered a complete, polished product — from landing page to survey to result — with a consistent design language throughout.
✅ Ensured the app is accessible and responsive across all modern devices and screen sizes.

📚 What We Learned

LiftMyMind taught us a great deal beyond just writing code:

Design is never an afterthought — for a wellness app, the emotional experience of the UI is the product. We learned to design with empathy first.
Animation libraries have trade-offs — combining Three.js, Framer Motion, and Vanta.js in one app forces you to understand rendering pipelines, z-index layering, and performance budgets deeply.
User emotional context shapes UX decisions — choices like animation speed, color temperature, and font weight carry more weight when your user might be having a hard day.
Component architecture matters at scale — building reusable components like RippleButton, SlideArrowButton, and ElasticSlider early paid dividends as the app grew.
Shipping is a skill — scoping features intentionally and delivering a complete experience is harder than building features endlessly.

🚀 What's Next for LiftMyMind

LiftMyMind is just getting started. Here's where we're headed:

🎧 Spotify API Integration — Replace static YouTube links with dynamic, real-time song recommendations pulled directly from Spotify based on mood score and user listening history.
📊 Mood Tracking Dashboard — Store daily mood scores using localStorage (and eventually a backend) to visualize emotional trends over time with charts and insights.
🔐 User Authentication — Allow users to create accounts so their wellness journey is saved, private, and accessible across devices.
🤖 AI-Powered Reflection — Integrate a conversational AI layer that asks follow-up questions, identifies patterns, and provides personalized mental wellness tips alongside music.
🌐 Community Playlists — Let users contribute to shared mood-based playlists, creating a community-driven music wellness experience.
📱 Native Mobile App — Bring LiftMyMind to iOS and Android using React Native for a true mobile-first wellness companion.