Que fait rive ?
Vérifié 2026-10 : @rive-app/canvas 2.45, @rive-app/react-canvas 4.37, @remotion/rive 4.0.
Les fichiers .riv sont créés dans l'éditeur Rive (rive.app). Le code peut les lire et les contrôler, mais pas les modifier. Demandez le fichier à l'utilisateur, ou utilisez un fichier communautaire depuis la marketplace Rive.
Packages
| Besoin | Package |
|---|---|
| JavaScript vanilla, recommandé | @rive-app/webgl2 |
| JavaScript vanilla, Canvas2D | @rive-app/canvas (@rive-app/canvas-lite si pas de texte, mises en page, scripts, audio) |
| React | @rive-app/react-webgl2 ou @rive-app/react-canvas |
| Remotion | @remotion/rive |
JavaScript vanilla
import { Rive } from '@rive-app/webgl2'
const r = new Rive({
src: '/hero.riv',
canvas: document.getElementById('canvas'),
stateMachines: 'State Machine 1', // nom dans l'éditeur
autoplay: true,
autoBind: true, // lier l'instance de modèle de vue par défaut
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// plus tard : r.cleanup()
Liaison de données (méthode actuelle pour piloter un .riv)
Les entrées de machine d'état (r.stateMachineInputs(name), .value, .fire()) sont dépréciées dans les types du runtime. Utilisez-les uniquement pour les anciens fichiers sans modèle de vue.
const vmi = r.viewModelInstance // nécessite autoBind: true
vmi.number('Progress').value = 0.75
vmi.string('Title').value = 'Bonjour'
vmi.boolean('Active').value = true
vmi.color('Accent').value = 0xFFFF5500 // ARGB
vmi.enum('Mood').value = 'Heureux'
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} />
Le conteneur doit avoir une taille explicite ; RiveComponent remplit son parent.
Pour la vidéo
Dans Remotion, utilisez <RemotionRiveCanvas src="..." /> depuis @remotion/rive — il joue le fichier en synchronisation avec l'image courante (consultez la documentation de Remotion pour ses propriétés). La logique interactive de machine d'état qui attend des clics ou des survols ne s'exécutera pas lors d'un rendu ; concevez le .riv avec une animation temporelle pour une utilisation vidéo.