feat: [SHORT DESCRIPTION]Build Interactive Mood-Based Mini Audio Player Component

[kritikukreja6-create]

---

🧩 The Goal

The README currently highlights "Music Integration" and "Spotify-style playlists matching your mood," but the current implementation remains largely a static list. This feature updates the experience into a fully interactive, immersive auditory landscape. By introducing a polished mini audio player that plays curated ambient loops matching the active emotional state, we bridge the gap between visual mood tracking and acoustic therapy. Soundscapes drastically enhance emotional grounding and reflection, making the session feel truly personal and calming.

✨ Proposed Change

⏹️ Component to be created/modified:

• Create a new reusable MoodAudioPlayer.tsx component inside frontend/components/.
• Integrate it directly beneath the 3D Orb Visualizer or as a floating dock component that expands on user interaction.
• Create a static data map (frontend/data/soundscapes.ts) mapping the 5 primary emotional categories (Happy, Calm, Sad, Excited, Anxious) to license-free ambient audio streams or asset loops.

🎨 Styling (Tailwind/Glassmorphism):

• Backdrop Blur: Use backdrop-blur-md bg-white/10 dark:bg-black/20 combined with thin, subtle borders (border border-white/20) to create a flawless Apple-style glass container.
• Dynamic Glow: Bind the container's box-shadow to the active emotional state color system (e.g., a warm #FFD93D glow for Happy, peaceful #66BB6A for Calm) using CSS variables or Tailwind arbitrary values.
• Layout: A compact, minimalist horizontal strip housing track info, an interactive progress bar tracking track time, and controls (Play/Pause/Skip) using Lucide React icons.

🎬 Animation (Framer Motion):

• Player Entrance: Use an animate={{ y: [20, 0], opacity: [0, 1] }} transition to gracefully slide the player up into view when an emotional state is selected.
• Pulse & Waves: When audio is playing, trigger a micro-interaction animation loop using Framer Motion variants that pulses a soft gradient ring or an array of minimalist waveform bars behind the play button, syncing visually with the ambiance.

🎨 Visual Reference

(Leaving this section open for the maintainers or your own sketch inserts; the text description sets a vivid mental mockup of an Apple-inspired media widget.)

✅ Impact

• Improves UX: Elevates a passive text list into a fully interactive sound module.
• Enhances 3D Visualization: (Indirectly complements the orb, but primarily operates on the audio layer.)
• Adds New Emotional Data: Introduces an entirely new auditory layer to the user's emotional reflection workflow.

💬 Additional Context

I would love to be assigned to this issue under SSOC'26! I'm familiar with React Hooks (useRef for controlling the HTML5 Audio API element smoothly), Tailwind CSS layout composition, and Framer Motion orchestrations. Ready to start as soon as it's approved.

[github-actions]

👋 Hello! Thank you for raising this issue.

Our team (Nitya-003) will review it shortly. In the meantime, please ensure you've provided all necessary details in the description.

🌟 Feel free to Star the repo if you like our work!

[Nitya-003]

@kritikukreja6-create Feel free to star, fork and contribute to the repo!