Start with observable states
Name states after what the product knows: idle, listening, waiting, speaking and failed. Avoid a separate boolean for every pose when those poses are mutually exclusive. Write down which event can enter or leave each state.
Separate values from events
A persistent value describes the current condition; a one-shot event marks a moment. A completion event should be handled once, while a progress value should be safe to apply repeatedly. For new files, review data binding support; existing files may expose legacy inputs.
Specify interruption and reset
Define what happens if a new request arrives during a celebration, the user cancels speech or the screen unmounts. An explicit idle fallback makes testing and recovery simpler.
A small starting point
// Pure JavaScript transition model.
export function nextState(state, event) {
if (event === "cancel") return "idle";
if (event === "listen") return "listening";
if (event === "submit") return "thinking";
if (event === "audio-start") return "speaking";
if (event === "audio-end") return "idle";
return state;
}Before calling it done
- Record the exact runtime version and exported asset used in validation.
- Test the normal sequence, an interruption, a failed load and screen re-entry.
- Confirm the same information remains readable with reduced motion or no animation.
Use the official Rive runtime documentation for current APIs and feature support.