A sprinkle of personality in a lightweight package

I've meant to dive into Rive more for some time, and I thought freshening up my personal site was a perfect opportunity. I wanted to add a bit more fun and a softer tone.

Rive is mostly known for it's state machines, a concept often used in game development, so I was already comfortable with the concepts.

Bone rigs and vectors

Bone systems are used often in 3d animation, but this was the first time I'd used it within a 2d context. However the principles are still the same: a skeleton is used to simplify motion, while the "skin" (a mesh or vectors) are mapped to different bones.

Here a very simple skeleton (2 bones) is used to fake a 3d motion of a subtle head turn.

Cartoon physiology

The core idea here is that different parts should move at different rates to simulate perspective. Based on that we need to know what that range of motion is. What points would move very little, and what points would move a lot?

In the case of a head, cartoon or otherwise, the rotation point is around the spine, and not the center of the head itself. Points closely aligned with that, such as an ear, would move very little. The point of a nose would be comparison move quite a bit. Eyes would be somewhere in between in terms of movement.

With this in mind I adjusted each vector accordingly, so as your cursor (or touchpoint) moves around, the 2d illustration appears to turn subtly towards it, bringing some life to this character.

End result

With a basic blink cycle this cartoon adds a bit of dynamic personality and a friendly first impression. It's extremely light weight, performant, and fun. In the end it was a helpful exercise to learn more of Rive and it's unique systems.