Rive CLIとコーディングエージェントで作るホバー対応アニメーション

カーソルやタップに反応するインタラクティブなグラフィックは、Spotifyの年間まとめ企画WrappedやFigJamのローディングアイコンのように、Riveで作られています。これまでは作るのにRiveのデスクトップエディターで何時間もかかっていました。アートボードを用意し、ボーンを仕込み、状態の遷移をつなぎ、インタラクションを一つずつ手作業でスクリプト化する必要があったからです。RiveはClaude CodeやCodexといったコーディングエージェントと連携するコマンドラインインターフェース（CLI）を公開し、同じ作業をテキストのプロンプトから始められるようになりました。シンプルな物理エフェクトから3Dのデスクランプ・タイマーまで、5つの制作例をもとに、エージェントが得意なことと、人が手を入れるべきところを整理します。

RiveがLottieやMP4と違う点

Riveのグラフィックはアプリ内のランタイムがリアルタイムで描画し、ステートマシン（入力に応じてアニメーションの状態を切り替えるルールの集まり）を持たせることができます。そのため、ポインターのホバー、タッチ、ジェスチャー、入力値に反応できます。これに対し、LottieファイルやMP4動画は決まったシーケンスを再生するだけです。

よく知られた例がDuolingoのキャラクターです。何層にも重なったステートマシンがキャラクターをIdle、Correct Answer、Incorrect Answer、Neutralの各状態の間で切り替え、口の動きも同期させます。スマートウォッチの文字盤やスマートホームの操作パネルも同じ方法で作られています。

難点は常に手作業の手間でした。Rive CLIはその手間をコーディングエージェントに任せます。エージェントは自然言語の指示から、インタラクティブなベクターグラフィックを生成し、スクリプトを書き、プレビューできます。

準備を整える

無料プランでもエディターとCLIの両方を利用できます。

試すだけなら無料プランで十分です。ただし、無料プランで書き出したアニメーションには必ずRiveのスプラッシュ画面が入ります。製品版としてリリースする際にこれを外すには有料プランが必要です。

準備は4つの手順で済みます。

1. Riveの無料アカウントを作成します。
2. Claude Codeのデスクトップアプリで、Riveの作業専用のプロジェクトフォルダーを作ります。
3. Claude Opus 5.5を選び、推論のエフォートをHighにします。ファイルを立て続けに編集する間に承認の確認が何度も出ないよう、Bypass permissionsもオンにします。
4. Riveのウェブサイトにある1行のインストールスクリプトを、そのフォルダーでClaude Codeから実行します。

これで、Claude CodeがローカルでRiveのアートボードを作成し、スクリプトを書き、プレビューできるようになります。Bypass permissionsは承認の確認を省く設定なので、このように専用フォルダーに限って使うほうが安全だと考えられます。

静止画から反応するエフェクトへ

最初の制作例は、最もシンプルな種類のインタラクションです。中央がフェードする縦のグラデーションバーの参考画像をClaude Codeに渡し、黒い背景に青い線で描き直したうえで、カーソルが通ると張りの強いギターの弦のように動くよう依頼します。

エージェントはRiveが使うスクリプト言語のLuauで、物理の動きを自ら書きます。スクリプトはポインターを追跡し、触れた位置で線を引っかけてたわませ、離すと5Hzで弾けて鳴るように振動させ、その後、徐々に減衰させます。プレビューでカーソルをキャンバス上に走らせると、触れた位置の線だけが押しのけられ、やがて滑らかに落ち着きます。

2枚のスクリーンショットからUI部品を作る

2つ目の制作例では、静止画を動くインターフェース部品に変えます。OpenAIのプロモーション素材から2枚のスクリーンショットを用意します。1枚は「Ask ChatGPT」と書かれた、折りたたまれた錠剤形のプロンプトバー。もう1枚は、同じバーが水槽のサムネイルと入力済みの質問を含む白いカードに広がった状態です。指示は、ホバーするとプロンプトの四角形が開くアニメーションを作ってほしいという1文だけです。

Claude Codeは2つの状態を読み取り、角の丸いベクターのコンテナを作ります。ホバーすると、カードはわずかに行き過ぎてから戻るイージング（動きの加速と減速の曲線）で大きくなり、アイコンが切り替わり、画像がフェードインし、点滅するカーソルの後ろでテキストが打ち込まれていきます。

ここで得られる教訓は、開始状態と終了状態の両方を渡すことです。2枚のスクリーンショットがあれば、モデルはアニメーションの始まりと終わりを正確に把握し、その間の動きを埋められます。

同じ方法はハードウェア風のインターフェースにも使えます。円形のスマートホーム用サーモスタットのスクリーンショットを何枚か渡すと、Claude Codeは冷房から暖房までドラッグで回せるダイヤル、更新される温度の数字、モード切り替えボタン、設定に合わせて変わる背景の柔らかな光を備えたプロトタイプを一から作ります。

ウェブサイトのホバー効果を読み取って作り直す

より複雑なレイアウトの題材は、Dropboxのブランドガイドラインのサイトです。ページ下部には、大きさの違うタイルを弁当箱のように組み合わせたベントーグリッドがあり、Framework、Voice & Tone、Logo、Typography、Color、Imagery、Iconography、Motionの8つのタイルが並びます。各タイルには独自のホバー効果があり、ベジェ曲線がしなる、引用文がスライドする、ロゴのひし形が広がる、南京錠のつるが開く、といった動きをします。

プロンプトでは、Claude Codeにサイトのアドレスを渡し、ページの一番下までスクロールしてベントーグリッドを分析し、ホバーアニメーションも含めてRiveで作り直すよう指示します。エージェントはページを読み込み、1024x768のビューポートを基準に、すべての行と列の幅、間隔、RGBの色の値を割り出し、同じトリガーを持つベクターグラフィックとしてグリッドを再現します。

最初の出力は構造と動きをよく捉えていますが、南京錠の留め金のような細かなマイクロアニメーションは、まだ手作業で仕上げたほうがよくなります。完成品ではなく、素早く作れる下書きと考えるほうが正確です。

作り直したグリッドは、スタイルを変えることもできます。Xで見かけた、暗いネオンのボタンが付いた未来的な携帯型ゲームコントローラーを参考に渡すと、Claude Codeはレイアウトを暗いClaude Codeテーマに変えます。Chat、Write、Code、Edit、Work、Analyze、Researchと書かれた角の丸いカードが、ホバーすると紫と白のワイヤーフレームの光で浮かび上がります。

MCPを使ったキャラクターのローディング画面

キャラクターアニメーションでは、MCP（Model Context Protocol、AIエージェントを外部のツールやデータにつなぐための標準規格）を通じてさらに多くのツールを使います。

1. ノートパソコンの前に座る白いウサギのベースアートをChatGPTで生成します。
2. Mobbin MCPサーバーを通じてClaude Codeをアプリ画面のライブラリであるMobbinにつなぎ、動きのあるモバイルのローディング画面を探します。円形のプログレスリングの中にキャラクターを置くセルフケア用ペットアプリFinchを参考にします。
3. ウサギが普段は猛烈な勢いでタイピングし、カーソルが重なると顔を上げて手を振るようにClaude Codeに依頼します。
4. 1枚のイラストを動くパーツに分割すると腕の動きがぎこちなくなるため、Higgsfield MCPでGPT Image 2.5を使い、ポーズごとに一貫した画像を別々に生成します。
5. 完成したウサギをFinch風の円形スピナーの中に置き、「準備中」を示す短いキャプションを添えて、インタラクティブなオンボーディング用ローダーを作ります。

1枚の静止イラストを自動で分割すると、関節がぎこちなくなったり縁が粗くなったりしがちです。ポーズごとに一貫した画像を生成して重ねるのが、実用的な解決策です。

▲ キャラクターのローダーとポーズ画像

Blenderの3DモデルをRiveのウィジェットに

最も手の込んだ制作例は、Blenderでの3DモデリングとRiveを組み合わせるものです。ここでは作業をCodexから始めます。CodexはオペレーティングシステムとBlenderアプリケーションを直接操作し、3Dアセットのモデリングとリギングを行えます。リギングとは、モデルが動けるようにボーンの骨格を仕込む作業です。

Codexには、折りたたまれたスリープの姿勢と、まっすぐ立って点灯した姿勢を切り替える、関節のあるセージグリーンのレトロなデスクランプを依頼します。Codexはモデルを作り、機械的なボーンの拘束を設定し、アニメーションのキーフレームを確認したうえで、プレビュー動画とともにアセットを書き出します。

これらのファイルを、Blenderで宝箱をリギングしてRiveに読み込み、そのボーンをRive CLIで操作できるようにした3Dアーティストのデモと一緒にClaude Codeに渡します。そして、ウサギと同じイラストのスタイルで、次の仕様の集中タイマーを作るよう依頼します。

完成したウィジェットは、ホバーするとなめらかに動き、点灯させると25:00からカウントダウンするタイマーが動作します。Blenderの作業では、システムレベルで操作でき、Blenderの画面を直接扱えるCodexのほうが、現時点では適したエージェントだと考えられます。

エージェントに任せることと自分で確認すること

Rive CLIとコーディングエージェントを組み合わせると、何時間もかかっていたタイムライン作業が、数分でできる下書きに変わります。最初の結果が丁寧に手作りしたアニメーションに並ぶことはまれなので、手作業での調整を一度は見込んでおきましょう。始め方としては次の流れが妥当です。

• Riveの無料アカウントを作り、専用フォルダーにCLIをインストールします。
• 大きな作品に取りかかる前に、ギターの弦のようなシンプルなホバー効果でエージェントの出力を確かめます。
• UIを作るときは、開始状態と終了状態の両方のスクリーンショットを必ず渡します。
• 最初の結果は下書きとして扱い、細部は手作業で仕上げます。
• リリース前に、Riveのスプラッシュ画面を外すために有料プランが必要かどうかを確認します。