Getting Started
Quick start guide for implementing Elements AI visuals in your project.
Elements provides animated AI visuals powered by Rive for designers and developers. Each visual includes dynamic animations for listening, thinking, speaking, and more. Implementation requires programming knowledge.
Demo application
You can view an AI visual in action in our demo application.
Source code is available on GitHub.
Runtime
Install the Rive runtime for your platform. For react web applications, we recommend using the WebGL2 runtime as our Elements use Rive's vector feathering feature. Read more about this and the other Runtime options in the Rive documentation.
npm install @rive-app/react-webgl2Example component
Here's a simplified example using the Command visual from the demo application that supports listening, thinking, and speaking states:
import { useRive, useStateMachineInput } from '@rive-app/react-webgl2';
import { useEffect } from 'react';
import type { FC } from 'react';
type AIVisualProps = {
isListening?: boolean;
isThinking?: boolean;
isSpeaking?: boolean;
};
export const AIVisual: FC<AIVisualProps> = ({
isListening = false,
isThinking = false,
isSpeaking = false,
}) => {
// The state machine name is always 'default' for Elements AI visuals
const stateMachine = 'default';
const { rive, RiveComponent } = useRive({
// Change the src to the visual you want to use
src: '/command-1.0.0.riv',
stateMachines: stateMachine,
autoplay: true,
onLoad,
});
const listeningInput = useStateMachineInput(rive, stateMachine, 'listening');
const thinkingInput = useStateMachineInput(rive, stateMachine, 'thinking');
const speakingInput = useStateMachineInput(rive, stateMachine, 'speaking');
useEffect(() => {
if (listeningInput) {
listeningInput.value = isListening;
}
if (thinkingInput) {
thinkingInput.value = isThinking;
}
if (speakingInput) {
speakingInput.value = isSpeaking;
}
}, [
isListening,
isThinking,
isSpeaking,
listeningInput,
thinkingInput,
speakingInput,
]);
return <RiveComponent className="h-[64px] w-[64px]" />;
};