Dark
mode
Light
mode
This animated toggle switches between light and dark modes with a smooth, intuitive transition. In light mode, a sun with clouds rotates into a moon while stars appear, reinforcing the change in state.
Built in Rive, the interaction uses two timelines (light and dark) connected through a state machine, controlled by a boolean input.
Rating
system
This evaluation system was designed to measure the customer experience within a digital product.
It uses a five-point scale consisting of the following states: “Angry”, “Meh”, “Satisfied”, “Happy”, and “Super Happy”.
Hover effects are handled through listeners, providing visual feedback on interaction. The system is connected through a state machine, allowing the rating to be activated by clicking on the emoji, which triggers the corresponding animation.
In Rive,
each state includes three timelines:
Idle, Hover, and Pressed.
They are mapped by a “number” input, with value from 1 to 5, where 1 corresponds to “Angry” and 5 to “Super Happy.”
Upload
Button
This component was designed to improve clarity and feedback during file uploads. The goal was to transform a static action into a responsive, state-driven experience that clearly communicates progress and completion.
The system was built in Rive using five timelines and a two-layer state machine. The first layer controls the loading progress through a number input, blending between timelines as the value increases. The second layer manages the visual states and transitions.
Three inputs drive the interaction: two booleans, being one for the hover state and one to trigger the morph into the loading state, and one number input that controls the progress until it reaches 100%.
Shopping
cart
Button
This “Add to Cart” microinteraction enhances feedback and clarity during user actions. In its idle state, the button displays a label, while on hover, a shopping cart icon smoothly slides in from the left, signaling interactivity. When pressed, the button updates with a small badge inside the cart, indicating the number of items added.
Interactive
eye
that follows
the cursor
lottie
Lottie animations can be created in After Effects and exported as lightweight, scalable files for seamless use in digital products.
They enhance user experience by providing clear, engaging feedback during key moments in a journey.
In this project, I developed a set of animations for a food app to guide users through the order process. From acceptance, to preparation, to delivery, and final completion.
Once the journey ends, users can rate their experience, creating a more interactive and satisfying flow.
Back to top