Character design, rig, and a seven-state machine built in Rive for a Flutter product.

Character built from scratch: concept, design, rig, animation.

Clay volume in pure 2D vector — no 3D, no baked textures.

Assembled entirely inside Rive, so the approved design and the animated file are the same file.

One state machine, seven states, three booleans and three triggers — the inputs are wired in Flutter on the client's side.

Effects selected by render cost, so the file holds its frame rate on mobile.

RoIAL is a business management app for small business owners across LATAM — sales, inventory, appointments, finance. For most of its users, it is the only place their numbers live.

Flutter with the Rive runtime. Every input is wired in code on the client's side, so the state machine had to behave like a predictable API.

Clay look without 3D. Layered vector shapes and deformation only — the character stays live and riggable.

Mobile runtime. The file has to hold its target frame rate on iOS and Android.

Startup budget. Glow and particles are recreated in code on the client's side; my time goes into the character, its key poses, and the transitions.

Fixed reference. The dragon's face was defined before the project started. Everything below the head was open.

With the face locked to the client's reference, I worked out the rest of the direction: the elongated body of an Asian dragon, Quetzalcoatl wings, scales along the spine, claws, and a sharper muzzle so the silhouette reads as a dragon rather than a generic creature.

A character that looks good standing still can fall apart the moment it moves, so the design decisions were made against the rig. Body parts are separated so they never overlap awkwardly mid-motion, a deliberate gap keeps the head from merging into the wings, and detail density is capped on purpose — in motion, an abundance of small elements reads as noise. All of it was settled during design, so nothing had to be rebuilt once rigging started.

The whole character — first concepts through final design — was built directly in Rive, including work with Shape Builder.

The usual route through Illustrator does not hold up here: effects behave differently in a vector editor and in Rive, so an approved static design looks different once it is imported and animated. That leaves two bad options — accept the gap, or close it with more expensive effects at runtime. Designing in Rive removes the choice: the client approves exactly the file that gets animated and ships.

Bones, bound layers, and joysticks for driving individual parts. The joysticks are what make the animation stage fast: head turns, gaze, and body lean become single controls instead of hand-keyed hierarchies, which keeps poses consistent from one state to the next.

ROI is driven from Flutter on the client's side, so the state machine is the actual product I hand over. It is built to be read from the outside.

Idle — default loop — breathing, blinking isListening — boolean — microphone is active isThinking — boolean — request is being processed isTalking — boolean — assistant is responding celebrate — trigger — action completed error — trigger — something went wrong greet — trigger — session start

Held states run on booleans, one-shot moments on triggers, and every state resolves back to idle. No ordering to respect, no cleanup to remember — set an input, and the character handles the rest.

.riv runtime file for Flutter

.rev source transferred to the client's account, so states can be added later without coming back to me

Public Rive share link with the input panel, for testing states without a build

Input documentation for the developer