Creating engaging and interactive animations is a true delight for any designer. In this post, I am thrilled to share with you my latest project: an interactive 2D flat-style animation using Rive. Get ready to meet the adorable and captivating Cute Bot! With mouse tracking, a mouse-over effect, and a waving hand, this animation aims to captivate users and bring a touch of magic to their digital experience. Try the Rive animation out here:

The concept behind the Cute Bot animation was to visualize how AI can help artists in the brainstorming process. I envisioned creating an animation that not only charmed users but also invited them to engage and play. The main goal was to provide an enjoyable and visually appealing experience that would leave a lasting impression on the audience. With the Cute Bot, I aimed to evoke smiles and spark curiosity through seamless interaction.

First I created different sketches on paper:

Then I created a detailed sketch in Adobe Fresco:

With all my ideas in place, I took the sketch to RIVE.

Rive, the animation software, became my go-to tool for this project due to its versatility and powerful features. Its intuitive interface and robust functionality allowed me to bring the Cute Bot to life in a step-by-step process. First, I designed the character itself, focusing on a charming 2D flat style that exuded personality.

Then, I utilized Rive's state machine functionality to implement eye-tracking, enabling the bot to follow the user's mouse pointer.

This is my RIVE State Machine Setup for the mouse tracking, using 2 values to transition from the tracking to idle state smoothly. Here's a great tutorial for the process: https://www.youtube.com/watch?v=uLsrLpl2HYE&t=675s&ab_channel=Rive 

Simultaneously, I employed Rive's capabilities to create a mouse-over effect, changing the color of the light bulb above the bot's head from black to yellow when hovered over.

Here's a very similar setup for the bulb turning from black to yellow and back again.

To add an extra touch of charm, I added a a waving hand animation using RIVE's bone functionality, making the bot even more endearing.

The user experience with the Cute Bot animation is intended to be delightful and engaging. As the user moves their mouse, the bot's eyes track their movements, creating a sense of connection and interactivity. When the cursor hovers over the bot's head, the light bulb illuminates in a vibrant yellow, drawing attention and inviting exploration. This dynamic response enhances the overall interaction and adds a layer of immersion. Additionally, the waving hand animation brings a whimsical and playful element to the bot's character, making it feel alive and relatable.

Creating the interactive Rive app animation featuring the Cute Bot has been an exciting journey. Through meticulous design and leveraging Rive's state machine functionality, I was able to infuse life and interactivity into this charming character. The combination of eye-tracking, the mouse-over effect, and the waving hand animation has resulted in a captivating experience for users. I am grateful for the opportunity to work with Rive and bring such an engaging project to life. Stay tuned for more delightful animations and updates in my portfolio!

You can have a closer look at the project files here: https://rive.app/community/5120-10304-ai-helps-brainstorming/