rive は何をしますか？
2026年10月確認：@rive-app/canvas 2.45、@rive-app/react-canvas 4.37、@remotion/rive 4.0。
.riv ファイルは Rive エディタ（rive.app）で作成されます。コードでファイルを再生・制御することはできますが、ファイル自体を作成することはできません。ユーザーにファイルを依頼するか、Rive マーケットプレイスからコミュニティファイルを入手してください。
パッケージ
| 必要な環境 | パッケージ |
|---|---|
| バニラJS、推奨 | @rive-app/webgl2 |
| バニラJS、Canvas2D | @rive-app/canvas（テキスト、レイアウト、スクリプティング、オーディオが不要な場合は @rive-app/canvas-lite） |
| React | @rive-app/react-webgl2 または @rive-app/react-canvas |
| Remotion | @remotion/rive |
バニラJS
import { Rive } from '@rive-app/webgl2'
const r = new Rive({
src: '/hero.riv',
canvas: document.getElementById('canvas'),
stateMachines: 'State Machine 1', // エディタでの名前
autoplay: true,
autoBind: true, // デフォルトのビューモデルインスタンスをバインド
onLoad: () => r.resizeDrawingSurfaceToCanvas(),
})
window.addEventListener('resize', () => r.resizeDrawingSurfaceToCanvas())
// 後で: r.cleanup()
データバインディング（.riv を駆動する現在の方法）
ステートマシン入力（r.stateMachineInputs(name)、.value、.fire()）は、ランタイムの型では非推奨です。ビューモデルがない古いファイルにのみ使用してください。
const vmi = r.viewModelInstance // autoBind: true が必要
vmi.number('Progress').value = 0.75
vmi.string('Title').value = 'Hello'
vmi.boolean('Active').value = true
vmi.color('Accent').value = 0xFFFF5500 // ARGB
vmi.enum('Mood').value = 'Happy'
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} />
コンテナには明示的なサイズが必要です。RiveComponent は親要素を埋めます。
動画用
Remotion では、@remotion/rive から <RemotionRiveCanvas src="..." /> を使用します。これはファイルを現在のフレームに同期して再生します（プロパティについては remotion-docs を確認してください）。クリックやホバーを待つインタラクティブなステートマシンロジックはレンダリング中には動作しません。動画で使用する場合は、タイムラインアニメーションを持つ .riv を設計してください。