Interactive Rive character with an IK rig

A little mascot rigged, animated, and shipped to production. Built for fun in the Rive editor, then wired into a Next.js site where anyone can fire his wave, jump, hug, and kiss animations and recolor his outfit in real time through Rive's data binding. One character, one state machine, fully live.

Try it here → https://rive-character-animation.vercel.app

The character was designed directly in Rive, with quick pose sketches for each action pulled into the Assets panel for reference. He's built on a proper bone skeleton, not grouped shapes. The arms are the technical highlight: each one runs a target-driven flex chain with an IK constraint, so posing a hug or a wave means dragging a hand into place instead of rotating bones one by one.

The face never touches a bone. Eyes and mouth are Solo nodes: one lidded eye setup that swaps between open and closed, and four interchangeable mouth shapes (smile, grin, wave mouth, pout) that match whatever the body is doing.

The state machine runs two layers. The body layer holds a looping breathing idle, with Any State transitions firing jump, hug, kiss, and wave off triggers, each crossfading back into the idle over 100ms eased transitions. The face layer runs independently on top: blinks, half-blinks, and eye-darts that keep him alive no matter which body animation is playing.

Every input is exposed through a ViewModel rather than legacy state machine inputs: four triggers for the actions, four color properties for the band, shirt, pants, and shoes. No pointer listeners in the editor at all. The file is designed to be driven entirely from the runtime.

The web side is Next.js with TypeScript and Tailwind, running the WebGL2 React runtime. autoBind picks up the ViewModel instance, triggers fire through useViewModelInstanceTrigger, and the four color pickers convert hex straight into setRgb calls on the ViewModel color properties, so the outfit recolors live while the animation keeps playing.

The scene itself took some care. The character's feet are anchored to the backdrop's floor line with a viewport-proportional calc(), so he stands on the floor on any screen instead of drifting up the wall on phones. The control strip is filled with the exact floor color sampled from the artwork, fading in with a gradient so it never hard-cuts the furniture. Mobile gets the full treatment: no scrolling, no tap highlight, everything in one fixed viewport.

Looking for a Rive animator who can also ship the production code around it? Get in touch.