Lumos

A cozy, ambient virtual study room that feels like your favorite café — complete with glowing visuals, soft jazz, animated timers, and subtle social presence. Study never felt this warm.

Comment

🌟 Inspiration

We were tired of how dull and isolating online studying can feel. While physical cafés and libraries have comforting atmospheres, most digital study tools are sterile and uninspiring. We wanted to recreate that cozy, emotionally rich experience — a space that makes people feel good about sitting down to focus.

Lumos was born from the idea that studying should feel like entering a warm, glowing world — something between your favorite café and a meditative game lobby.

✨ What it does

Lumos: Café Glow Edition is a frontend-only virtual study room designed to create a cozy, ambient experience for solo or social studying. It features:

  • A beautiful Café Glow environment with animated steam, jazz music, and soft lighting
  • A focus timer with animated visual feedback (Pomodoro-style)
  • Selectable avatars with study presence status (Focused, Break, Idle)
  • Ambient sound layering with background chatter and rain
  • Smooth microinteractions using Framer Motion for delight and flow

It’s simple, immersive, and designed to help students enjoy their focus sessions — all with no login or backend needed.

🔧 How we built it

We used a fully frontend tech stack:

  • React.js for interactive UI components
  • Tailwind CSS for rapid responsive styling and themes
  • Framer Motion for smooth page and element animations
  • Lottie for animated visual effects (steam, ambient particles)
  • HTML5 Audio & Howler.js for layered ambient sound
  • Vite for bundling and Vercel for deployment

We carefully designed our components around emotion-first UX and cozy theming. Every animation and interaction was crafted to feel soft and intentional.

🧩 Challenges we ran into

  • Achieving immersive ambiance using only frontend tools
  • Timing animations and audio together without disrupting flow
  • Creating a UI that felt alive but not distracting
  • Keeping load times fast even with motion and media elements
  • Ensuring the theme looked good across devices and screen sizes

🏆 Accomplishments that we're proud of

  • Designing an entire immersive, cozy UI with no backend at all
  • Making a study timer that actually feels fun to use
  • Creating a mood and atmosphere that people described as “soothing” and “beautiful”
  • Polishing every interaction to feel delightful, not just functional

📚 What we learned

  • How to use animation and sound as emotional UX tools
  • The power of tiny details: a glow, a breath, a shadow, a flicker
  • Ways to balance aesthetics and productivity without adding bloat
  • Designing for mood, not just usability

🚀 What's next for Lumos

  • 🌎 Add more immersive environments (e.g., Nature Retreat, Futuristic Lab)
  • 🧑‍🤝‍🧑 Introduce simple P2P presence sync via WebRTC or Firebase Lite
  • 🌱 Add a “Focus Garden” where progress visually grows
  • 🎨 Support user customization of avatars, music, and environment themes
  • 🕯️ Introduce soft notifications and “light rituals” for starting/ending sessions

Built With

  • framer
  • howler
  • lottie
  • react
  • tailwind
  • vite
Share this project:

Updates