MomentsMatter

• 

  Homepage 1

• 

  Homepage 2

• 

  Time Capsule

• 

  Bucket List

• 

  Productive Mode

Inspiration

Expand MomentsMatter by adding a focused productivity mode with calming green breathing orb animation.

What it does

Provides a soothing green breathing orb with smooth animations, ambient sounds, and music controls to support mindful productivity.

How I built it

Used HTML, CSS, and JavaScript to create a distinct green orb animation and linked it as a separate page accessible from the main app.

What I learned

Improved CSS animation layering and modular page design for consistent UI/UX across multiple app modes.

What makes this unique

Combines mindfulness breathing cues with productivity focus in a seamless, visually calming experience distinct from typical timer or focus apps.

What’s next

Add customizable session timers, focus reminders, and sync preferences between modes for a holistic mindfulness-productivity tool.

Built With

• animation
• audio
• breathingexercise
• css
• frontend
• html
• javascript
• lifeprogress
• mentalhealth
• opensource
• uxdesign
• vanillajs
• webapp