Was macht rive?
Geprüft 2026-10: @rive-app/canvas 2.45, @rive-app/react-canvas 4.37, @remotion/rive 4.0.
.riv-Dateien werden im Rive-Editor (rive.app) erstellt. Code kann sie abspielen und steuern, aber nicht selbst erstellen. Frage den Benutzer nach der Datei oder verwende eine Community-Datei aus dem Rive-Marktplatz.
Pakete
| Bedarf | Paket |
|---|---|
| Vanilla JS, empfohlen | @rive-app/webgl2 |
| Vanilla JS, Canvas2D | @rive-app/canvas (@rive-app/canvas-lite falls kein Text, Layouts, Scripting, Audio) |
| React | @rive-app/react-webgl2 oder @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: 'Statusmaschine 1', // Name aus dem Editor
autoplay: true,
autoBind: true, // Standard-View-Model-Instanz binden
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// später: r.cleanup()
Datenbindung (aktueller Weg, um eine .riv zu steuern)
Zustandsmaschinen-Eingaben (r.stateMachineInputs(name), .value, .fire()) sind in den Runtime-Typen veraltet. Verwende sie nur für alte Dateien ohne View Models.
const vmi = r.viewModelInstance // benötigt autoBind: true
vmi.number('Fortschritt').value = 0.75
vmi.string('Titel').value = 'Hallo'
vmi.boolean('Aktiv').value = true
vmi.color('Akzent').value = 0xFFFF5500 // ARGB
vmi.enum('Stimmung').value = 'Glücklich'
vmi.trigger('Springen').trigger()
vmi.number('Fortschritt').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: 'Statusmaschine 1', autoplay: true })
const vm = useViewModel(rive)
const vmi = useViewModelInstance(vm, { useDefault: true, rive })
const { setValue: setProgress } = useViewModelInstanceNumber('Fortschritt', vmi)
const { trigger: jump } = useViewModelInstanceTrigger('Springen', vmi)
return <RiveComponent style={{ width: 400, height: 400 }} onClick={jump} />
Der Container benötigt eine explizite Größe; RiveComponent füllt sein Elternelement aus.
Für Videos
In Remotion verwende <RemotionRiveCanvas src="..." /> aus @remotion/rive – es spielt die Datei synchron zum aktuellen Frame ab (siehe Remotion-Dokumentation für die Props). Interaktive Zustandsmaschinenlogik, die auf Klicks/Hover wartet, läuft während des Renderns nicht; entwerfe die .riv mit einer Timeline-Animation für die Videoverwendung.