mcpField
R
remotion-animation-rules

remotion-animation-rules

github.com/composio-communityクリエイティブ・メディア1448 回インストール23 週間前に更新
リポジトリ

remotion-animation-rules について

Remotion のネイティブなフレームベース手法でアニメーションを作成する Claude スキルです。字幕、トランジション、モーショングラフィックスを扱い、決定論的な描画とレイアウトの安定性を重視します。

主な機能

  1. 01useCurrentFrame() による時間制御
  2. 02spring() と interpolate() によるアニメーション
  3. 03CSS トランジションとブラウザータイミングの回避
  4. 04字幕同期とフレーム安定性の検証

活用シーン

  1. 01フレームに同期したアニメーション字幕の作成
  2. 02再利用可能なシーンアニメーションとトランジションの構築
  3. 03Remotion の描画結果が一致しない問題の調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/composio-community/opencode-skills --skill remotion-animation-rules

インストール後、Claude Code で/remotion-animation-rulesを入力して読み込まれたか確認します。

詳細

Remotion アニメーションのルール

概要

このスキルを使うと、Remotion にネイティブなレンダリングとアニメーションの原則に従って、Claude が技術的に正しいアニメーションを作成できます。

従来のフロントエンドアニメーションのワークフローとは異なり、Remotion はブラウザー主導のアニメーションシステムではなく、完全に決定論的なフレームベースのレンダリングに依存します。

このワークフローでは、次の点に重点を置きます。

  • useCurrentFrame() の適切な使用
  • スプリング駆動のモーションシステム
  • 決定論的なレンダリング
  • レイアウトの安定性
  • フレームベースのタイミング
  • サポートされていないアニメーションパターンの回避

アニメーションをすべてのフレームで滑らかかつ安定させ、安全にレンダリングでき、一貫性を保つことが目標です。

セットアップ

開始する前に、次の手順を行います。

  1. Node.js をインストールします。 https://nodejs.org

  2. インストールを確認します。

node -v
npm -v
  1. Remotion プロジェクトを作成します。
npm init video
  1. 開発サーバーを起動します。
npm run dev
  1. VS Code でプロジェクトを開きます。

推奨ツール：

  • VS Code
  • Remotion Preview
  • React の知識
  • Prettier 拡張機能

必要な入力

  • アニメーションのコンセプト
  • 動画の長さ
  • シーン構成
  • アセット：
    • テキスト
    • 字幕
    • 画像
    • 音声

任意：

  • ブランディングガイドライン
  • 既存のモーション参考資料
  • ストーリーボード

このスキルを使用する場面

次のような場合に、このスキルを使用します。

  • Remotion アニメーションの作成
  • 字幕システムの構築
  • トランジションの実装
  • モーショングラフィックスのデザイン
  • 再利用可能なアニメーションロジックの作成
  • 不安定なアニメーションのデバッグ
  • レンダリングの一貫性の最適化

使用しない場面

次の用途には、このスキルを使用しないでください。

  • CSS ベースのアニメーションシステム
  • ブラウザー主導のトランジションワークフロー
  • 静的なデザイン作業
  • React ワークフローを使わない従来の動画編集ツール

使用例

スタートアップのローンチ動画向けに、アニメーション付き字幕を作成します。

Claude は次の手順を行います。

  1. すべてのアニメーションのタイミングに useCurrentFrame() を使用する
  2. 字幕の動きにスプリング物理を適用する
  3. CSS トランジションを完全に避ける
  4. フレーム単位で字幕の表示を同期する
  5. レイアウトの寸法を安定させる
  6. 書き出し時にもレンダリングが決定論的であることを確認する

最終的な出力では、次の点を満たす必要があります。

  • 一貫してレンダリングされる
  • タイミングの不具合がない
  • 滑らかな動きを保つ
  • レイアウトの不安定さを防ぐ
  • 安全に書き出せる

Remotion の基本原則

1. すべてをフレームベースにする

Remotion では、アニメーションのタイミングは常に現在のフレームから導き出します。

推奨 API：

  • useCurrentFrame()
  • interpolate()
  • spring()

例：

const frame = useCurrentFrame();

これにより、次のことが実現します。

  • 決定論的なレンダリング
  • 正確な同期
  • 書き出し時の一貫性

次の使用は避けます。

  • setTimeout
  • ブラウザーのタイミングシステム
  • 制御されていないアニメーション

2. 動きにはスプリング物理を使用する

可能な限り、スプリング駆動のシステムを使って動きを表現します。

推奨する方法：

spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

スプリングシステムには、次の利点があります。

  • より滑らかなイージング
  • 予測可能な動き
  • 自然なモーション

特に適した用途：

  • 拡大縮小
  • フェードイン
  • 字幕の表示
  • スライドアニメーション
  • トランジション

次の使用は避けます。

  • CSS のイージングトランジション
  • 制御されていない補間
  • ブラウザー主導のアニメーションタイミング

3. CSS トランジションを完全に避ける

CSS トランジションは、Remotion のワークフローでは信頼性がありません。

不適切な方法：

transition: all 0.3s ease;

CSS トランジションによって発生する問題：

  • レンダリングの不一致
  • 書き出し結果の不一致
  • タイミングの不安定さ
  • ブラウザーに依存する動作

推奨する方法：

  • フレームの値から直接モーションを計算する
  • 補間またはスプリングを使用する

4. レイアウトの安定性を保つ

Remotion でよくある問題のひとつは、アニメーション中のレイアウトのずれです。

問題の例：

  • タイピングアニメーション中にテキストが跳ねる

推奨する解決策：

  • 背景に透明な全文を描画する
  • アニメーション付きテキストを別途重ねる
  • レイアウトの寸法を安定させる

Claude は次の問題を事前に防ぐ必要があります。

  • テキストの再配置
  • アニメーション中のサイズ変更
  • 不安定な位置決め
  • 動的なレイアウトのずれ

安定したレイアウトは、次の改善につながります。

  • レンダリングの一貫性
  • 字幕の読みやすさ
  • アニメーションの滑らかさ

5. アニメーションの決定性を保つ

アニメーションは、どのレンダリングでも同じように動作する必要があります。

モーションシステムでは、次の点を守ってください。

  • 予測可能なタイミングを使用する
  • ランダム性を避ける
  • フレームで制御する
  • 音声と正確に同期する

決定論的なレンダリングにより、次の点が向上します。

  • 書き出しの信頼性
  • デバッグ
  • 同期
  • 制作の安定性

ワークフロー

1. アニメーションの構成を定義する

まず、次の項目を特定します。

  • 動画の長さ
  • シーンの構成
  • 字幕のタイミング
  • トランジションの要件

アニメーションを再利用可能なシーンコンポーネントに整理します。

構成例：

scenes/
  Intro.tsx
  Features.tsx
  CTA.tsx

2. フレームロジックを実装する

シーン内で useCurrentFrame() を使用します。

例：

const frame = useCurrentFrame();

すべてのアニメーション状態は、フレームの進行に基づいて決定する必要があります。

3. モーションシステムを追加する

次を使用します。

  • spring()
  • interpolate()

推奨されるアニメーションの動作：

  • 滑らかな動き
  • 制御されたスケーリング
  • タイミングを制御したトランジション
  • 同期された字幕

次の使用は避けてください。

  • CSS アニメーションシステム
  • ブラウザーが制御するタイミング
  • 制御されていないイージング

4. レイアウトの安定性を検証する

次の点を確認します。

  • テキストの跳ね
  • サイズ変更
  • 字幕のずれ
  • 不安定な配置

レンダリングする前に、不安定な箇所を修正してください。

5. 最終動画をレンダリングする

書き出す前に、次の点を検証します。

  • タイミングの一貫性
  • モーションの滑らかさ
  • 字幕の同期
  • レイアウトの安定性

出力をレンダリングします。

npm run build

または：

npx remotion render

推奨される書き出し形式：

  • MP4
  • プラットフォームに最適化された設定

出力の要件

最終出力には、次の内容を含める必要があります。

  • フレームベースの滑らかなアニメーション
  • 決定論的なレンダリング
  • 安定したレイアウト
  • 同期された字幕
  • 制作に使える動画の書き出し

ワークフロー自体は、次の特性を維持する必要があります。

  • 再利用可能
  • モジュール化されている
  • 保守しやすい
  • レンダリング時に安全

実行戦略（AI エージェント向け）

エージェントは次のことを行う必要があります。

  1. Remotion ネイティブのアニメーションシステムのみを使用する
  2. すべてのモーションをフレーム単位で制御する
  3. サポート対象外のブラウザーアニメーションパターンを避ける
  4. 決定論的なレンダリング動作を維持する
  5. レイアウトの不安定さを事前に検出し、防止する
  6. 書き出す前にアニメーションの一貫性を検証する

ワークフローでは、次の点を最適化します。

  • レンダリングの一貫性
  • タイミングの精度
  • レイアウトの安定性
  • 滑らかな動き
  • 書き出しの信頼性

ベストプラクティス

  • すべてのタイミングに useCurrentFrame() を使用する
  • 手動のイージングよりスプリングアニメーションを優先する
  • シーンをモジュール化する
  • アニメーションをフレーム単位で検証する
  • レイアウトに依存するモーションを避ける
  • 字幕システムを安定させる
  • シーン間でモーションパターンを再利用する

注意事項

  • useCurrentFrame() は Remotion ワークフローの中核です
  • CSS トランジションに依存してはいけません
  • スプリングシステムは、より自然な動きを生み出します
  • レイアウトの安定性は、レンダリング品質を大幅に向上させます
  • 決定論的なレンダリングは、プロフェッショナルな動画制作ワークフローに欠かせません

コメント

Markdown 対応