MoodFlow is an interactive website that transforms its design based on your emotions. Choose your mood and watch the UI change with colors, animations, and personalized messages, creating a smooth, immersive, and visually engaging experience.
Used AI in readme and help me in design.
MoodFlow is officially live 🚀
Built an emotion-driven web experience where the interface adapts to how you feel. From dynamic themes and smooth transitions to mood tracking and persistent states, everything was designed to feel simple, human, and immersive.
No frameworks. Just clean HTML, CSS, and vanilla JavaScript.
Still a lot to explore and improve, but proud of this version.
More updates coming soon.
Started working on the interactive side of MoodFlow using JavaScript.
The main focus right now is handling user input and connecting it to the UI system that was already built.
I’m implementing mood selection logic so that once a user chooses a mood, the entire interface updates dynamically — including background, text content, and overall theme. I’m also integrating localStorage to store the selected mood and restore it automatically when the user revisits the site.
Another part of this phase is building the “Mood History” feature, which tracks how many times each mood has been selected and displays it in a simple, clean UI.
Currently, the core functionality is in progress.
Next step: finish all JavaScript features and refine animations and transitions to ensure everything feels smooth and seamless.
Log in to leave a comment
Progress on MoodFlow is going smoothly.
I’ve completed the full UI structure along with the overall design system. The layout is fully responsive and built with a clean, centered card-based interface that works well across different screen sizes.
Each mood state (Happy, Sad, Angry, Tired, Confused) already has its own visual identity prepared — including color palettes, background styles, typography adjustments, and subtle animations. The goal was to make every mood feel distinct while keeping a consistent design language across the whole experience.
I also focused on polishing small UI details like spacing, shadows, and transitions to give the project a more premium and smooth feel.
At this stage, the website looks complete from a design perspective, but it’s still static.
Next step: implement the JavaScript logic to bring everything to life and make the experience interactive.
Log in to leave a comment