¿Qué hace rive?
Verificado 2026-10: @rive-app/canvas 2.45, @rive-app/react-canvas 4.37, @remotion/rive 4.0.
Los archivos .riv se crean en el editor de Rive (rive.app). El código puede reproducirlos y controlarlos, pero no crearlos. Pide al usuario el archivo, o usa un archivo de la comunidad desde el marketplace de Rive.
Paquetes
| Necesidad | Paquete |
|---|---|
| Vanilla JS, recomendado | @rive-app/webgl2 |
| Vanilla JS, Canvas2D | @rive-app/canvas (@rive-app/canvas-lite si no requiere Texto, Diseños, Scripting, Audio) |
| React | @rive-app/react-webgl2 o @rive-app/react-canvas |
| Remotion | @remotion/rive |
Vanilla
import { Rive } from '@rive-app/webgl2'
const r = new Rive({
src: '/hero.riv',
canvas: document.getElementById('canvas'),
stateMachines: 'State Machine 1', // nombre del editor
autoplay: true,
autoBind: true, // vincula la instancia de modelo de vista por defecto
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// luego: r.cleanup()
Enlace de datos (forma actual de controlar un .riv)
Las entradas de máquina de estado (r.stateMachineInputs(name), .value, .fire()) están obsoletas en los tipos del runtime. Úsalas solo para archivos antiguos sin modelos de vista.
const vmi = r.viewModelInstance // necesita autoBind: true
vmi.number('Progress').value = 0.75
vmi.string('Title').value = 'Hola'
vmi.boolean('Active').value = true
vmi.color('Accent').value = 0xFFFF5500 // ARGB
vmi.enum('Mood').value = 'Feliz'
vmi.trigger('Jump').trigger()
vmi.number('Progress').on((e) => console.log(e.data))
React
import { useRive, useViewModel, useViewModelInstance,
useViewModelInstanceNumber, useViewModelInstanceTrigger } from '@rive-app/react-canvas'
const { rive, RiveComponent } = useRive({ src: '/hero.riv', stateMachines: 'State Machine 1', autoplay: true })
const vm = useViewModel(rive)
const vmi = useViewModelInstance(vm, { useDefault: true, rive })
const { setValue: setProgress } = useViewModelInstanceNumber('Progress', vmi)
const { trigger: jump } = useViewModelInstanceTrigger('Jump', vmi)
return <RiveComponent style={{ width: 400, height: 400 }} onClick={jump} />
El contenedor necesita un tamaño explícito; RiveComponent llena su elemento padre.
Para video
En Remotion usa <RemotionRiveCanvas src="..." /> de @remotion/rive — reproduce el archivo sincronizado con el fotograma actual (revisa la documentación de Remotion para sus props). La lógica interactiva de la máquina de estado que espera clics/eventos de ratón no se ejecutará en un render; diseña el .riv con una animación de línea de tiempo para uso en video.