mcpField
C
chat-motion-overlay

chat-motion-overlay

github.com/nexu-ioクリエイティブ・メディア104.6k864 回インストール今日更新
リポジトリ

chat-motion-overlay について

Chat Motion Overlay は、チャットテキストやスクリーンショットから、設定可能なアニメーションオーバーレイを作るスキルです。チャット枠、アバター、デバイスフレーム、出力形式を選び、Remotion でレンダリングできるシーン一式を用意します。

主な機能

  1. 01チャット記録の正規化
  2. 02シーン設定のカスタマイズ
  3. 03JSON シーン仕様の生成
  4. 04Remotion バンドルの準備
  5. 05透過動画やプロジェクトの出力

活用シーン

  1. 01テキストからチャットオーバーレイを作成
  2. 02スクリーンショットのメッセージをシーン化
  3. 03編集可能な Remotion または Hyperframe プロジェクトの準備

インストール

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

$npx skills add https://github.com/nexu-io/open-design --skill chat-motion-overlay

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/examples/
chat-transcript.txt
config-wechat-phone.json
assets/remotion-template/
package.json
remotion.config.ts
tsconfig.json
assets/remotion-template/src/
chatSpec.ts
index.ts
Root.tsx
assets/remotion-template/src/components/
avatarLibrary.tsx
BubbleScene.tsx
ChatMotionOverlay.tsx
DeviceFrame.tsx
types.ts
references/
config-schema.md
input-format.md
output-modes.md
question-strategy.md
test-matrix.md
test-report.md
scripts/
build_chat_overlay_spec.py
prepare_chat_overlay_bundle.py
run_test_matrix.py

詳細

チャットモーションオーバーレイ

ハードコードされた単一のWeChatモックではなく、設定可能なモーションオーバーレイクリップにチャットコンテンツを変換します。

ワークフロー

  1. チャット入力を正規化します。

    • ユーザーがスクリーンショットを提供した場合は、表示されているメッセージを references/input-format.md のトランスクリプト形式に変換します。
    • ユーザーがプレーンテキストを提供した場合は、1つのビートにつき1メッセージを維持し、信頼性が重要な場合は原文どおりの表現を保持します。
    • スクリーンショットの場合は、参加者の人数やメッセージのグループ分けを判断する手がかりとして、表示されているアバターを使います。ただし、デフォルトではアバター画像を切り抜いたり再現したりしないでください。参加者と左右の配置を推測し、ユーザーがアバターファイルを提供するか、スクリーンショットからのアバター作成を明示的に希望した場合を除き、プリセットのアバターで描画します。

  2. シーン設定を選択します。

    • references/config-schema.md を読みます。
    • バンドルを生成する前に、コンテナのスタイル、アバターモード、デバイスフレーム、ニックネームモード、出力形式を決定します。
    • ユーザーから十分な情報が得られていない場合は、references/question-strategy.md の質問ポリシーに従います。

  3. シーン仕様を作成します。

    • トランスクリプトと任意の設定JSONを使って、scripts/build_chat_overlay_spec.py を実行します。
    • スクリプトは、Remotionで直接レンダリングできる単一のJSON仕様を出力します。

  4. レンダリング可能なバンドルを準備します。

    • scripts/prepare_chat_overlay_bundle.py を実行します。
    • Remotionテンプレートをコピーし、src/chatSpec.ts を挿入して、アップロードされたアバターファイルを public/ にコピーします。

  5. 目的の出力をレンダリングします。

    • references/output-modes.md に記載されているエクスポートコマンドをそのまま使用します。
    • 編集には MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）、ブラウザーには WebM（透明背景，适合网页 / 浏览器播放）、後続の編集を続ける場合は編集可能なプロジェクト出力を優先します。

サポートされる項目

  • container: none、wechat、telegram、messenger
  • avatarMode: preset、upload、mixed
  • deviceFrame: none、iphone-dynamic-island
  • nicknameMode: hidden、first-message-only、always
  • deliveryFormat:
    • mov: MOV（透明背景，可直接导入剪映 / PR / FCP 叠加）
    • webm: WebM（透明背景，适合网页 / 浏览器播放）
    • remotion: Remotion 工程（适合继续编辑和拼装）
    • hyperframe: Hyperframe 工程（适合作为模块继续复用）
    • json: JSON 数据（适合程序处理 / 自定义渲染）
    • preview: 预览图 / 预览工程（适合先确认效果）

出力ルール

  • オーバーレイ出力では、コンポジションのルートを透明に保ちます。
  • アプリの外枠なしで吹き出しのモーションのみを表示する場合は、container: none を使用します。
  • プラットフォームのUIが演出の一部となる場合は、container: wechat|telegram|messenger を使用します。
  • アップロードされたアバターはコンテンツアセットとして扱い、レンダリングバンドル用に public/ にコピーします。
  • ユーザーがアバターファイルを指定していない場合は、プリセットのアバターを優先します。スクリーンショット内のアバターは参加者の特定に役立つ場合がありますが、スクリーンショットからアバターを切り抜いたり再現したりする前に、ユーザー提供のアバターファイルを推奨します。
  • 設定に基づく動作を明示し、スタイルの系統を黙って切り替えないでください。

質問ポリシー

  • 質問よりも推測を優先します。
  • 妥当なデフォルトを選べるだけの情報がユーザーから得られている場合は、そのまま進め、前提を明確に伝えます。
  • 影響の大きい選択肢が不足している場合に限り、質問します。
  • 質問は1～3項目に絞ります。
  • 技術的な表現より、ユーザーにとって分かりやすい表現を優先します。
  • deliveryFormat について尋ねる際は、内部的なレンダリング用語ではなく、「形式（用途の説明）」というラベルを使います。
  • ユーザーがこだわりはないと伝えた場合は、デフォルトで進め、結果にその内容を記載します。

リソース

  • トランスクリプト形式：references/input-format.md
  • 設定項目と例：references/config-schema.md
  • 質問方針：references/question-strategy.md
  • 出力コマンドと対象：references/output-modes.md
  • トランスクリプト／設定から仕様を作成：scripts/build_chat_overlay_spec.py
  • Remotionバンドルの準備：scripts/prepare_chat_overlay_bundle.py
  • Remotionレンダリングテンプレート：assets/remotion-template/

コメント

Markdown 対応