Interactive Character Animation in Rive

This project started with nothing more than a simple PNG generated by ChatGPT. I wanted to see how far I could push a basic illustration using Rive’s real-time animation system. The end result turned into a miniature, expressive version of myself that reacts fluidly to cursor movement. It began as a quick experiment but evolved into a solid example of how small, intentional interactions can make a character feel alive.

The original image wasn’t production ready. If I used it as-is, the animation would look stiff and limited, so I rebuilt it manually as clean vector layers. Goal: preserve the original personality while making it modular enough for rigging.

Key vector prep steps:

Reconstructed the face, eyes, and head as separate layers

Cleaned up curves and anchor points for smooth deformation

Created proper pivot points anticipating movement

This upfront work eliminated 90 percent of future headaches when rigging.

I set up a minimal but functional rig that focused on three areas: eyes, head tilt, and breathing. Instead of over-engineering a complex skeleton, I used a combination of bones and constraints to keep everything responsive.

Rig decisions:

Independent bones for each eye

A parent head bone controlling tilt and depth rotation

A subtle breathing group offset on a loop

The rig is intentionally lightweight, which keeps the animation snappy and CPU-friendly for web use.

This was the core interaction. I used a simple pointer-position input mapped to a two-dimensional blend. Result: the character follows your cursor with just enough lag to feel natural rather than robotic.

This one detail alone adds a surprising amount of personality.

To add depth, I introduced a very slight head tilt that reacts to pointer position. It’s tiny, but it makes the character feel like it’s paying attention instead of staring blankly.

I tuned the falloff so the movement is noticeable but never distracting.

A static character always feels dead, no matter how good the artwork is. A simple Y-axis oscillation with easing created a natural breathing cycle. When combined with eye motion, the character suddenly shifts from “flat illustration” to “tiny companion”.

The plan was to embed this avatar on my portfolio homepage as a welcoming, interactive element. I never finished the full-body version at the time, so the character ended up sitting in my drafts.

Now, I’m revisiting the idea with a more ambitious goal:

Full-body rig

Modular motion system

More expressive states and reactions

Potential for dynamic scenes based on user interaction

This wasn’t “just a fun thing.” It became a clean demonstration of:

Turning generated art into production-ready vectors

Building lightweight interactive rigs in Rive

Crafting micro-interactions that feel premium rather than gimmicky

Designing character motion that enhances personality without overwhelming the UI

It also pushed me to think more deeply about how animation can strengthen a user’s connection with a product.

I’ve added the live Rive file and video preview at the top so you can see the avatar respond in real time.

Rive Marketplace: https://rive.app/marketplace/22458-42050-cursor-follow-avatar/