rive-interactive

Use the useRive hook with your state machine name, then call useStateMachineInput to get an input reference. Set boolean or number inputs via input.value, and fire trigger inputs with input.fire() in response to user events like hover or click.

Rive supports state machines, input handling, and two-way data binding, making it suited for interactive animations that react to user input or live data. Lottie plays fixed timeline animations and fits simpler playback without runtime logic.

Set autoBind to false in useRive, then get the ViewModel with useViewModel and an instance with useViewModelInstance. Use hooks like useViewModelInstanceString or useViewModelInstanceNumber to set property values whenever your React state changes.

useStateMachineInput returns null when the input name does not exactly match the name defined in the Rive editor, or when the state machine name is wrong. Verify both names in the editor and always check that the input exists before setting its value.

Rive events require automaticallyHandleEvents set to true in the useRive options. Then subscribe with rive.on(EventType.RiveEvent, callback) inside a useEffect and unsubscribe in the cleanup function to receive custom events and their properties.

Enable useOffscreenRenderer, preload files with useRiveFile, and keep artboards under 2MB with vector graphics instead of raster images. You can also disable automatic event handling and canvas auto-resize when you do not need them.