Rive, Lottie, and other UI fun

Khanmigo AI Assistant

As a way to practice new features with Rive, I decided to build an interactive version of Khan Academy’s new AI assistant Khanmigo.

To match the look and feel of Khanmigo, I not only had to rebuild the character, but figure out what way he would animate that would fit with the hand-drawn style and capture his friendly, helpful personality based on freeze frames from the website

With that in mind, I quantized the animations to 12fps to capture the hand drawn effect, and built custom animations to show Khanmigo’s adorable interactions. Here are some:

When the cursor enters the screen, Khanmigo gets super excited
When the cursor exits the screen, Khanmigo is sad to see it go…
When you click the bottom half of Khanmigo he winks! (to feel something… anything…)
When you click the top half of Khanmigo he wiggles with excitement!
Khanmigo’s body and pupils track with the cursor as it moves across the screen, and the pupils dilate depending on where the cursor is

Apple Event Button Hover

While working on a branding project for a previous Apple event, we decided to include some interactivity in part of the branding pitch. With the event look and feel being dark with orange glow, I replicated some of the design elements and translated them into what one of the apple UI event buttons would be on the Apple Events app.

Here are some of the interactions:

Idle phase is a background glow that subtly highlights the button
When cursor hovers over the card, the card lights up glowing with the brand orange while continuing the moving background glow
While hovering the cursor has a subtle glow that follows
Hovering over the Learn More pill does an animation

Rive, Lottie, and other UI fun

Khanmigo AI Assistant

Apple Event Button Hover

More interaction links below

Rive Links

UI animation mockups

Lottie/Bodymovin Animations

Spline Links