mcpField
W
wechat-2d-render

wechat-2d-render

github.com/vibe-motionクリエイティブ・メディア1.4k840 回インストール3 週間前に更新
リポジトリ

wechat-2d-render について

Remotion のワークフローを実行し、WeChat の 2D アニメーションを MOV に描画するスキルです。利用可能ならローカルプロジェクトを再利用し、カスタム props に対応します。既定の ProRes 4444 出力は透明背景のワークフローに適しています。

主な機能

  1. 01Remotion 描画スクリプトの実行
  2. 02ワークスペースと出力先の指定
  3. 03カスタム props JSON の指定
  4. 04既定の ProRes 4444 出力
  5. 05プロジェクトの複製または再利用

活用シーン

  1. 01WeChat チャットアニメーションの描画
  2. 02透明背景 MOV の作成
  3. 03カスタム合成 props による描画

インストール

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

$npx skills add https://github.com/vibe-motion/skills --skill wechat-2d-render

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

同梱ファイルscripts/render_wechat_2d.sh

詳細

WeChat 2D レンダリング

ワークフロー

  1. このスキルの scripts/render_wechat_2d.sh を使用します。
  2. ユーザーがフォルダーを指定した場合は、workspace_dir を最初の引数として渡します。指定がない場合は、現在のディレクトリを使用します。
  3. ユーザーが出力先を指定した場合は、output_path を2番目の引数として渡します。指定がない場合は、out/wechat-2d-transparent.mov を使用します。
  4. ユーザーがカスタム Remotion プロパティを指定した場合は、プロパティ JSON ファイルのパスを3番目の引数として渡します。指定がない場合は、shared/project/render-presets/default.json を使用します。
  5. スクリプトを実行し、完了するまで待ちます。
  6. スクリプトが出力した最終的な絶対パスを返します。

コマンド

bash scripts/render_wechat_2d.sh [workspace_dir] [output_path] [props_file]

インストール済みスキルの解決

ソースリポジトリのチェックアウトではなく、インストール済みのスキルのコピーを使用します。

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/wechat-2d-render" ]; then
    skill_dir="$base/skills/wechat-2d-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "wechat-2d-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

bash "$skill_dir/scripts/render_wechat_2d.sh" "$(pwd)" "$(pwd)/out/wechat-2d-transparent.mov"

動作

  • workspace_dir/wechat-2d が存在する場合は、ローカルリポジトリを再利用します。存在しない場合は、GitHub からクローンします。
  • 既存のリポジトリを更新する際は、リモートのデフォルトブランチ（origin/HEAD）を追跡します。
  • pnpm install で依存関係をインストールします。pnpm がない場合は、corepack で有効にします。
  • プロジェクトの Remotion スクリプトを実行します。
    • pnpm run remotion:ensure-browser
    • REMOTION_OUTPUT=... REMOTION_PROPS_FILE=... pnpm run remotion:render
  • デフォルトのレンダリング対象は、shared/project/projectConfig.js のアクティブなコンポジションです。現在は ScaffoldDemo30fps を使用する wechat-chat-motion プラグインです。
  • デフォルトの出力は ProRes 4444、yuva444p10le ピクセル形式、PNG 画像形式で、透明背景のワークフローに適しています。

プロジェクトに関する注意事項

  • このプロジェクトは、スキャフォールドとプラグインを分離した構成を使用しています。
    • preview/* はローカル UI コントロールとブラウザプレビュー用です。
    • remotion/* は Remotion のエントリーラッパー用です。
    • shared/scaffold/* は共通ランタイム用です。
    • shared/project/* はプラグインとコンポジションのレジストリ用です。
    • shared/features/demoMotion/* は WeChat のチャットシーン用です。
  • アニメーションの状態は、フレームごとに決定的でなければなりません。Remotion はフレームを並列かつ順不同でレンダリングするため、タイマー、変更可能なカーソル、以前のレンダリング結果、レンダリング順序に依存しないでください。
  • フレーム固有のデータは、buildSceneProps 内で {frame, fps, loop, sceneContext, pluginParams} から構築してください。
  • videoWidth と videoHeight はレイアウト用プロパティとして維持し、サイズをカスタマイズする場合はプロパティ JSON ファイルを使用してください。

必要条件

  • git
  • node
  • corepack または pnpm
  • クローン／更新および依存関係のインストールに必要なネットワークアクセス

コメント

Markdown 対応