Screenshots
Overview
概要
Rive(@rive-app/canvas)で作る実行時インタラクティブアニメーションが「何ができるか」を、触れるデモで体感させるサイトです。動画やGIF、Lottieと違い、ユーザー操作やデータに反応してその場で表情を変えられるのが特徴。すべてのアニメーションはブラウザ上でWebAssembly＋Canvas2Dによりリアルタイム描画しています。
How to use
遊び方・使い方
ヒーローのアニメーションに続く「触って分かるRiveの機能」セクションで、8種の機能別デモカードを操作できます。トリガー発火でトラックを揺らす、数値スライダーで状態を連続ブレンドする、キャンバスを直接ホバー／クリックする、カーソルを目で追従させる、といった操作を試せます。各デモはState／Event／Dataの3層ログで内部の状態遷移をライブ観測でき、最下部のプレイグラウンドでは15個の.rivファイルを切り替え、中身(アートボード／ステートマシン／入力)を自動解析して操作UIが自動生成されます。
Tech stack
技術スタック
@rive-app/canvasWebAssemblyNext.js 16React 19TypeScriptTailwind CSS v4
wasmはCDN依存を排し RuntimeLoader.setWasmUrl でローカル配信してバージョン不整合を防止。resizeDrawingSurfaceToCanvas＋ResizeObserverでDPR対応の高精細描画を行い、autoBindしたView Modelのプロパティを型別(string／number／color／enum／trigger等)に列挙して編集UIを自動生成しています。
Highlights
工夫した点
- ステートマシン名や入力名をハードコードせず、ロード後に rive.contents から実在の定義を解決して再生。未知の.rivでもエラーを出さず動く
- 入力の型(Number／Boolean／Trigger)やデータバインディングのプロパティ型に応じて操作UIを自動生成し、どんなファイルでも触れる
- IntersectionObserverで画面外は一時停止、各デモカードは接近時に初めて生成する遅延マウントでCPU負荷を抑制
To improve
改善したい点
- 入力を持たない(イベントのみの).rivでは自動生成UIが空になるため、その場合の説明表示を補強したい
- 約100ms間隔のポーリングで表示値を同期しており、よりイベント駆動の同期方式に置き換えたい
What's next
今後の展望
- 自作の.rivアセットを追加し、自社サービスのブランド表現としての活用例を示す
- データバインディング／Eventsを使った、外部データ連動の実用デモを拡充する