The mechanism is a graph. Each node is a state that plays one timeline, and each edge is a transition guarded by a condition on an input. Inputs come in three types: booleans for on/off states like isHovered, numbers for continuous values like a cursor position or an item count, and triggers for one-off events like a celebration. The application sets these inputs from code, and the state machine checks the conditions every frame, transitioning whenever one is met.
This is what makes Rive different from Lottie for character work. Lottie plays pre-baked timelines, and the application has to orchestrate which one runs. Rive moves that orchestration inside the file: the application just sets inputs, and the .riv decides the rest. So a single file can render a mascot that idles, blinks, follows the cursor with its eyes, waves when something is added to the cart, and celebrates on purchase, without the application ever knowing which timeline maps to which state.
In practice, a mascot might take a cart-count input that triggers a celebration bounce, cursor-position inputs that drive the eye-tracking, and a wave trigger that fires when the agent first appears. The application sends those values; the state machine handles the animation.
Related implementation patterns: the Rive state machines blog post covers input-design discipline; the Next.js Rive wrapper tool generates the React boilerplate for binding inputs; and the Rive in Next.js use-client patterns covers the Server Component boundary.
Related terms: ai-website-mascot, behavioral intervention, intent signal, in-session engagement.
Last updated May 31, 2026.