O que rive faz?
Verificado em 2026-10: @rive-app/canvas 2.45, @rive-app/react-canvas 4.37, @remotion/rive 4.0.
Arquivos .riv são criados no editor Rive (rive.app). O código pode reproduzi-los e controlá-los, mas não pode criá-los. Peça ao usuário o arquivo ou use um arquivo da comunidade no marketplace da Rive.
Pacotes
| Necessidade | Pacote |
|---|---|
| Vanilla JS, recomendado | @rive-app/webgl2 |
| Vanilla JS, Canvas2D | @rive-app/canvas (@rive-app/canvas-lite se não precisar de Texto, Layouts, Scripts, Áudio) |
| React | @rive-app/react-webgl2 ou @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', // nome do editor
autoplay: true,
autoBind: true, // vincula a instância de view model padrão
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// posteriormente: r.cleanup()
Data binding (forma atual de controlar um .riv)
Os inputs da máquina de estado (r.stateMachineInputs(name), .value, .fire()) estão obsoletos nos tipos do runtime. Use-os apenas para arquivos antigos sem view models.
const vmi = r.viewModelInstance // requer autoBind: true
vmi.number('Progress').value = 0.75
vmi.string('Title').value = 'Olá'
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} />
O contêiner precisa de um tamanho explícito; RiveComponent preenche o elemento pai.
Para vídeo
No Remotion, use <RemotionRiveCanvas src="..." /> do @remotion/rive — ele reproduz o arquivo em sincronia com o frame atual (consulte a documentação do remotion para suas props). A lógica interativa de máquina de estado que espera cliques/passagem do mouse não será executada em uma renderização; projete o .riv com uma animação baseada em timeline para uso em vídeo.