Custom illustration, rig and interactive animation in Rive — built end to end for an AI-guided interview product.

A product team building an AI-guided interview app needed a character to sit at the centre of their interface. The user talks; the character listens, thinks and responds.

The technical requirements were clear from the start: a .riv file with four states — idle, listening, thinking, speaking — driven by triggers, plus one number input for real-time lip sync.

The harder requirement was the one behind those specs. Interviews in this product run up to an hour. The character is on screen the entire time. Anything that reads as repetitive, restless or off-tone doesn't just look wrong — it actively pulls attention away from the conversation the product exists to have.

I handle both illustration and animation, so the character started as a drawing, not a spec.

Three directions, each drawn in three expressions rather than a single portrait. A static concept only tells you what a character looks like. Showing the same design across expressions tells you whether it will hold up in motion — whether the silhouette stays readable, whether the face can carry emotion without redrawing it.

That's the part that decides everything downstream. A design that can't shift expression cleanly becomes a rigging problem later.

The project ran 21 days. 16 of them happened before a single animation existed.

Layers, bones, and four joysticks:

Face turn — head rotation with the features following correctly

Pupils — gaze direction, independent of head position

Upper eyelid — separate control

Lower eyelid — separate control

Splitting the eyelids is the detail that mattered most. With them on one control, a character can only really open and close its eyes. Separated, the upper lid can hood for a warm or thoughtful moment while the lower lid lifts into a genuine smile — the difference between a face that blinks and a face that expresses.

The reason for spending two thirds of the project here is straightforward: fixing a rig while animating destroys performance. Every technical problem you solve mid-animation is attention you're not spending on how the movement actually feels.

With the system built first, the animation phase was fast — and more importantly, it was spent entirely on movement quality and variety instead of on troubleshooting.

Four states, driven by triggers from the app: idle, listening, thinking, speaking.

Lip sync runs on a single number input, mouthOpen, ranging 0.0 to 1.0 and wired to live audio amplitude on the product side. The mouth isn't keyframed against a script — it's driven by whatever the character is actually saying, in real time, with no animation work needed per response.

That's the core advantage of building this in Rive rather than shipping video or a Lottie file: the character reacts to real data instead of playing back a recording.

3 original concepts, each in three expressions

Full illustration and rig in Rive — layers, bones, 4 joysticks

State machine: four states, two variants each on the high-frequency ones

mouthOpen number input (0.0–1.0) for real-time amplitude-driven lip sync

Transparent build as primary, plus a dark-background version

.riv file, source assets, naming documentation for the dev team