Mood Tracker
Hover & click to explore · See it in action ↓
Description
Mood animation is an interactive UI component built around a simple emotional scale — five minimalist faces arranged from the saddest to the happiest state. Each face reacts to user interaction: on hover, the eyes smoothly track the cursor, creating a subtle sense of life and responsiveness, while a click triggers a playful, expressive animation that reinforces the selected mood. The component is designed to feel lightweight, intuitive, and emotionally engaging.
Design Process
The faces were first designed as clean, vector-based illustrations in Figma, with a strong focus on clarity, consistency, and emotional readability using minimal shapes. The designs were then imported into Rive, where the animation and interactivity were built. Cursor tracking was implemented to give immediate feedback on hover, and click animations were carefully timed to feel smooth and satisfying. The final result is a reusable, interactive mood selector that combines simple visuals with expressive motion.
