Serenus

Landing Page

Project Track

Best Beginner

Inspiration

The project grew from the idea of creating a calm digital space where users could reflect, decompress, and manage emotional tension. The symbolism of cherry blossoms, ideas from mindfulness practices, and the desire for a simple yet meaningful interface shaped the early direction. The concept of pairing soft aesthetics with supportive guidance drove the motivation to build Serenus.

What it does

Serenus provides mood selection, AI-guided emotional support, journaling with reflections, and interactive breathing exercises. Users can track emotional states, write entries in a distraction-free space, review insights generated from their writing, and practice paced breathing through an animated interface. All data stays on the device, and the experience is designed to feel gentle and immersive.

How we built it

The application runs on vanilla HTML, CSS, and JavaScript.

A sakura-themed layout sets the tone using a looping video background, subtle animations, and a palette of rose and pink hues.
The mood dial and breathing animation rely on JavaScript timing loops and CSS transitions.
The journal system uses browser local storage to save entries, tags, timestamps, and deletion actions.
The Gemini 2.5 Flash API powers mood guidance and journal reflections, loaded dynamically to simplify integration.
Particle effects, responsive layout rules, and ambient audio round out the interface.

Challenges we ran into

Balancing visual richness with quick load times took multiple iterations. Designing particle animations without overwhelming the interface required fine-tuned performance adjustments. Ensuring journal storage remained secure on the client side meant careful sanitization of input. Structuring AI prompts so insights stayed relevant to user emotions also required thoughtful refinement.

Accomplishments that we're proud of

Achieving a cohesive aesthetic that promotes calmness while keeping the interface fully responsive across devices stands out as a major success. The integration of AI reflections into both mood guidance and journaling created a supportive and personalized experience. Building the entire project with no frameworks while maintaining smooth transitions and animations was another meaningful milestone.

What we learned

The process highlighted the value of pairing design psychology with functional elements. Working with local storage for structured entries improved understanding of browser-based data handling. Integrating AI with emotional content required precise prompt crafting. The project reinforced how small sensory cues—sound, color, movement—shape user perception.

What's next for Serenus

Planned developments include cross-device syncing, user accounts, cloud backups, export features, additional mood categories, analytics for mood trends, and multi-language support. A native mobile version and integrations with meditation timers are under consideration to expand the wellness toolkit.