State-driven interactive animations with built-in state machines. Use when animations must REACT to user input (hover, click, drag), have multiple states/transitions, or respond to data values (progress bars, counters). Ideal for animated buttons, toggles, checkboxes, characters. For simple play/loop animations use Lottie instead.
Interactive animations with built-in state machines. Animation logic inside the .riv file.
┌─────────────────────────────────┐
│ Rive State Machine │
│ ┌──────┐ hover ┌───────┐ │
│ │ Idle │ ──────► │ Hover │ │
│ └──────┘ └───────┘ │
│ ▲ click │ │
│ └──────────── ◄──┘ │
│ │
│ Inputs: hover (bool), click │
└─────────────────────────────────┘
You control inputs → Rive handles animations
SETUP → CONNECT → CONTROL
npm install @rive-app/react-canvasuseStateMachineInputimport { useRive, useStateMachineInput } from '@rive-app/react-canvas';
function InteractiveButton() {
const { rive, RiveComponent } = useRive({
src: '/button.riv',
stateMachines: 'ButtonState',
autoplay: true,
});
const hover = useStateMachineInput(rive, 'ButtonState', 'hover');
const press = useStateMachineInput(rive, 'ButtonState', 'pressed');
return (
<RiveComponent
onMouseEnter={() => hover && (hover.value = true)}
onMouseLeave={() => hover && (hover.value = false)}
onMouseDown={() => press && (press.value = true)}
onMouseUp={() => press && (press.value = false)}
/>
);
}
Boolean: input.value = true/false # hover, isActive
Number: input.value = 75 # progress (0-100)
Trigger: input.fire() # onClick, onComplete
Toggle:
- Boolean input "isOn"
- onClick: toggle value
Progress:
- Number input "progress" (0-100)
- useEffect: sync with prop
Notification Bell:
- Number input "count"
- Trigger input "ring"
- onClick: fire() trigger
| Need | Use |
|---|---|
| Just plays/loops | Lottie |
| Reacts to hover | Rive |
| Controlled by data | Rive |
| Multiple states | Rive |
| Simple loader | Lottie |
// Container controls size
<div className="w-64 h-64">
<RiveComponent />
</div>
// Responsive with aspect ratio
<div className="w-full aspect-video max-w-2xl">
<RiveComponent />
</div>
// Always 'use client'
'use client'
// Dynamic import for heavy animations
const Animation = dynamic(() => import('./RiveAnimation'), { ssr: false })
// Or mounted check
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />
// Lazy load
const Rive = dynamic(() => import('./RiveComponent'), { ssr: false })
// Pause when not visible
const { ref, inView } = useInView()
useEffect(() => { inView ? rive?.play() : rive?.pause() }, [inView])
"Animation not playing":
→ Check autoplay: true
→ Check stateMachines name (case-sensitive)
→ Check .riv path in public/
"Inputs undefined":
→ Always check: if (input) input.value = x
→ Verify input names match Rive editor
"Hydration mismatch":
→ Add 'use client'
→ Use dynamic(() => ..., { ssr: false })
"Wrong size":
→ Container needs explicit width/height
→ Use aspect-ratio utilities