Mood Tracker
Interactive Mood Selector
An interactive Mood Tracker component engineered in Rive using advanced State Machine logic. Designed to enhance digital surveys, wellness apps, and user feedback flows with fluid vector animations and real-time emotional state transitions.
Interactive Motion Design & Vector Illustration
Rive State Machine Architecture & Trigger Logic
UI/UX Micro-interaction Design
Framer Web Integration & Performance Optimization
Australia
1-Week Sprint
Figma, Illustrator, Rive
Other
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.
