State Machines

States

All AI visuals use Rive state machines to control its animations.

idle - Default looping animation, cannot be controlled
listening : Boolean - Designed to activate when receiving audio input
thinking : Boolean - Designed to activate during any processing/loading state
speaking : Boolean - Designed to activate during text-to-speech output
asleep : Boolean - A dormant/inactive state that can be toggled on and off
color : Number - Legacy color mode state, used in v1.0 visuals to switch between predefined color themes (values 0-8)

React example

Use the useStateMachineInput hook to control visual states. See a full example on GitHub.

import { useRive, useStateMachineInput } from '@rive-app/react-webgl2';

export function ControlledAIVisual() {
  const { rive, RiveComponent } = useRive({
    src: '/command-2.0.riv',
    stateMachines: 'default',
    autoplay: true,
  });

  const listeningInput = useStateMachineInput(rive, 'default', 'listening');
  const thinkingInput = useStateMachineInput(rive, 'default', 'thinking');
  const speakingInput = useStateMachineInput(rive, 'default', 'speaking');

  const setListening = (value: boolean) => {
    if (listeningInput) listeningInput.value = value;
  };

  const setThinking = (value: boolean) => {
    if (thinkingInput) thinkingInput.value = value;
  };

  const setSpeaking = (value: boolean) => {
    if (speakingInput) speakingInput.value = value;
  };

  return (
    <div>
      <RiveComponent className="w-32 h-32" />
      <div>
        <button onClick={() => setListening(true)}>Start Listening</button>
        <button onClick={() => setThinking(true)}>Start Thinking</button>
        <button onClick={() => setSpeaking(true)}>Start Speaking</button>
      </div>
    </div>
  );
}

View models and data-binding

v2.0 visuals include color customization which is controlled via view models, not state machines. Continue reading the customization docs for more details.

State Machines

States

React example

View models and data-binding

On this page