Serenity sessions

Landing - Choose Session Duration (Desktop view)
Landing - Custom ElevenLabs-generated soundscapes (Desktop view)
Landing - Apple Music integration (Desktop view)
Full Screen session timer (Desktop view)
Full Screen session timer - controls hidden (Desktop view)
Custom Colour themes (Mobile view)
Custom Audio (Mobile view)

Inspiration

I noticed how people always struggle with creating the perfect relaxing atmosphere - juggling timer apps, adjusting lights, and finding the right music for massages, meditation, or just chilling out. I wanted to build something that turns any screen into a calming ambient light while keeping track of time and playing the perfect soundscape. Whether you're a professional massage therapist or just someone who wants to create a zen moment at home, this should make it effortless.

What it does

Serenity Sessions transforms your device screen into a soothing ambient lamp with a built-in timer and custom soundscapes. You set how long you want your session to last, pick a color theme, and either describe the soundscape you want AI to generate or connect your Apple Music. Then your screen becomes a gentle, slowly-shifting light source perfect for massages, meditation, or any relaxation session. It works on any device - phone, tablet, laptop, or even a big TV.

How I built it

I built this using Bolt.new, which made the development process incredibly smooth. The app is a single HTML file with vanilla JavaScript, CSS animations for the color transitions, ElevenLabs API for AI-generated ambient sounds, and Apple's MusicKit JS for music integration. The responsive design ensures it looks great whether you're using it on your phone during a home massage or displaying it on a large screen in a professional setting.

Challenges I ran into

The biggest challenge was creating a truly minimalistic interface that wasn't oversimplified - striking that delicate balance where users have all the essential features without any unnecessary clutter. I spent considerable time considering how people would actually use their screens for ambient lighting, which shaped every decision from color palettes to brightness intensity. The design process involved multiple complete restarts as I refined my understanding of what makes a genuinely calming digital experience - each iteration revealed new insights about user-centered design. Managing the integration of two distinct audio APIs while maintaining interface simplicity proved complex, and mastering ElevenLabs' full capabilities required significant experimentation and learning.

Accomplishments that I'm proud of

I created something that actually works as advertised - the screen genuinely functions as beautiful ambient lighting while handling timing and audio seamlessly. The color transitions feel therapeutic rather than gimmicky, and the dual audio system gives users real creative control over their soundscape. Plus, it works perfectly on everything from phones to big displays without any additional setup.

What I learned

Building this taught me a lot about the subtle art of creating calming digital experiences. I learned that sometimes the most important feature is what you don't include - keeping the interface minimal was crucial. Working with AI-generated audio also opened my eyes to creative possibilities I hadn't considered before. The responsive design challenges taught me to think beyond typical web layouts.

What's next for Serenity Sessions

I'm planning to add user profiles so people can save their favorite ElevenLabs-generated sounds and build libraries of custom soundscapes. The roadmap includes free and pro tiers - the pro version will let users become their own DJ by layering multiple sounds, saving complex custom soundscapes, and sharing creations with others. I also want to add more dynamic background animations beyond just color transitions, and maybe even community features where people can discover and share the perfect ambiance combinations.