Built with: Rive Project Type: Interactive Animation / UI Feedback

I animated an interactive and expressive fox mascot using Rive. The goal was to create an engaging, responsive character that provides immediate visual feedback to the user based on specific inputs. The mascot uses a state machine to transition smoothly between different emotional states, adding a layer of personality to the user experience.

The core of the animation is driven by a custom state machine utilizing a dropdown (enum), allowing the mascot to react dynamically to the environment. The character visually represents varying degrees of success through distinct emotional states:

1_Excellent: The fox throws its paws up in excitement, complete with glowing, star-struck eyes.

2_Good: A positive and reassuring state where the fox smiles and gives a clear thumbs-up.

3_Fair: The neutral, attentive resting state-observant but unbothered.

4_NeedImprovement: The fox gives a skeptical, unimpressed look with a raised eyebrow and slightly drooping ears.

5_Bad: A visibly sad state featuring a frowning face and animated tears falling from its eyes.

6_PureSlop: A comedic, dramatic "failure" state where the fox drops dead with X-ed out eyes and its tongue hanging out.

The mascot is designed to be playful and directly interactive. I incorporated triggers, specifically click, earTwitchRight, and earTwitchLeft to allow users to playfully "poke" the character. Clicking on the fox or hovering over it triggers subtle, satisfying micro-animations, making the interface feel alive and highly responsive to user input.

Seamless Blending: Transitions between states (e.g., from "Fair" to "Need Improvement") are heavily optimized for smooth interpolation, ensuring the character doesn't snap jarringly between emotions.

Lightweight & Web-Ready: Built natively in Rive & Photoshop, ensuring the interactive runtime is exceptionally lightweight, performant, and easily embeddable across web and application environments. The total file size is 185kb!