Communitygithub.com

motion-piece — コードでグラフィック、必要に応じてフッテージ

モーショングラフィックス動画(SaaS・プロダクトローンチ動画、機能説明、キネティックUIデモ、タイトル・エンドカード、HUD/テキストオーバーレイ)をClaude Motionフィルムとして作成します。コードで描画し、スクラブ・コメント・MP4出力が可能。実際のフッテージが必要な場合のみHiggsfieldクリップを混合し、グラフィック部分はクレジット消費ゼロで、詳細を再生成不要で変更できます。

motion-piece — コードでグラフィック、必要に応じてフッテージ とは?

このスキルは、Claude Motionのチュートリアルで習得した「コードで描画するグラフィック+生成クリップ」のアプローチを実践し、SaaSやプロダクトローンチ動画、機能説明、キネティックUIデモ、タイトルシーケンス、エンドカード、HUD/カウンターオーバーレイなど、モーショングラフィックス全般を効率的に制作します。コード描画のグラフィックはクレジット0で、数秒で変更可能。実写フッテージが必要な場面(人物、実物、物理的な製品ショット)のみHiggsfieldクリップを最小限使用します。ユーザーのブランドやスタイル(`style.md`や過去作品)を出発点とし、デフォルトのClaudeルック(マスクテキスト、発光オーブ、バネポップインなど)を避け、独自性を重視。音楽(`sound-pass`)のビートに合わせたタイミング設計、オープンソースエフェクト(p5.brush, tsParticles, gl-transitions, moving-letters)のライセンス遵守利用を推奨。制作前に必ず`intake.md`でブランド・フォント・カラー・リファレンスなどを確認し、15~30秒、4~7ビートの構成で計画→Motionアーティファクトで実装→レビューの流れで進めます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SwapnilDawar2004/ai-video-skills/tree/HEAD/skills/motion-piece

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

motion-piece — コードでグラフィック、必要に応じてフッテージ は何をしますか?

Claude Motionチュートリアルの主要な教訓:生成クリップ+編集可能なコードグラフィックにより、壊れたショットだけを再生成すればよく、動画全体をやり直す必要はありません。コードグラフィックはクレジット0で、数秒で変更できます。AIスタートアップは何よりもSaaSやローンチ動画を求めています。

うまくいく傾向(ユーザーの好みに合わせて調整)

  • 「モーショングラフィックス」は通常、抽象的なパーティクルではなく、キネティックタイポ+UI+絶え間ない動きを意味します。
  • キャラクターやストーリーは、タイポ単体よりも効果的なことが多いです。ローンチ動画には、小さな人間味のある瞬間を加えましょう。
  • 画面上のテキストは少なく、すべての単語は大きく、短く、明確に。
  • 実際の製品の言葉のみを使用(例:メモアプリの場合:クイックキャプチャ、検索、共有ノートブック、オフライン同期)。機能をでっち上げないこと。
  • 計画前に ~/.claude/skills/taste/taste.md を読んでください。

デフォルトのClaudeルックにしない

コードで作られたモーション動画はどこも同じように見え始めています。線から浮かび上がるマスクテキスト、柔らかな発光オーブ、スプリングポップイン、ガラスカード、グラデーションワード、同じイージング。フレームが他のClaude動画のものに見えたら、変更してください。構築前に:

  • デフォルトではなく、ユーザーの作品から始める。 style.md、ブランドファイル、ユーザー自身の過去のフィルム(リソグレイン、ペインタリータッチ、16mmゲート、HDピクセルアート、カットペーパーなど、彼らが作ったもの)からルックを引き出します。新しいものを発明する前に、彼ら自身のエフェクトを再利用してください。
  • 音楽を最優先。 sound-pass(ユーザー自身の音楽を優先)からトラックを取得し、すべての大きな動きをそのビート(beats.json)に合わせます。コードではなく音楽がペースを決定します。
  • このフィルムのために1~2の特徴的な動きを選び、それ以外は使用しないでください。ブランドがその動きを必要としない限り、上記のデフォルトの動きは禁止です。
  • オープンソースエフェクトを使用: ブラシストローク(p5.brush)、パーティクル(tsParticles)、シェーダートランジション(gl-transitions / xfade-easing)、アニメーションテキスト(moving-letters)。明確なライセンス(MIT/Apache/CC0)があり、コードを読んだ場合のみ使用。ダウンロードしたコードを盲目的に実行せず、ライセンスが要求する場合は作者のクレジットを明記してください。

ステップ0 — 必ず最初にユーザーに確認

計画前に、~/.claude/skills/taste/intake.md でインテークを実行:ブランド、フォント、カラー、リファレンス、好み、音楽、エフェクト。各項目は「スキップ」可能。

ステップ1 — ビートを計画

長さ(デフォルト15~30秒)、アスペクト比(16:9;Reels/Shorts用9:16;フィード用1:1)、4~7ビートを決定:フック → 何か → 動作方法(2~3のプロダクトモーメント) → 証拠またはペイオフ → ロゴ/CTA。各ビートで、どの部分がコード(タイポ、UI、カウンター、チャート、トランジション、ロゴ)で、どの部分がフッテージ(人物、実際の場所、物理的な製品ショット)なのかを指定します。

デフォルトはオールコード。フッテージを追加するのは、ビートに実際の人間や物理的な瞬間が必要な場合のみ。フッテージクリップはファクトリー(asset-sheet → kling-prompt)から取得し、ミュート、3~5秒。

計画を1つの短いカード(「作成」/「変更」)でユーザーに提示し、フィルムのクレジットコスト(オールコードなら0)も合わせて表示してください。

ステップ2 — Claude Motionフィルムとして構築

  • MotionアーティファクトタイプからMotionアーティファクトを開始し(アーティファクトツールの quickstart またはタイプリストから検索)、実際の title(フィルム名)と auto_open: "after_first_write" を設定します。次に、作成結果に含まれる指示に従ってください — それらは、Motionフィルムをどのように埋めるか(ストアドキュメント、シーンモジュール、アセット、スコア)と、何を拒否するか(既存の曲、他社のロゴやプロプライエタリデザイン、既知のキャラクター)に関する権威です。
  • 最初のステップでスタイル/色/長さを尋ねられます。インテーク(ステップ0)で既に回答済みの場合はそれを使用し、そうでなければMotionタイプに質問させてください。
  • ブランド:ユーザーがその会社を所有している、またはそこで働いている場合、あるいはブランドキットを持っている場合に限り、実際の色、フォント、ロゴを使用します。
  • フッテージ:各クリップをビデオアセットとしてフィルムにアップロード(mp4、小サイズ — ミュート挿入には480p/720pで十分)。クリップはミュートで再生され、フィルムのスコアはコードで作曲されます。

ステップ3 — レビュー

Motionフィルムには、スクラブとコメント機能を備えた独自のページがあります。ユーザーの決定のために、タイプのツールが許可する場合のみ完成フィルムをMP4にエクスポートまたは録画し、そうでなければフィルムのリンク(「視聴してから決定」)を「出荷/変更」とともに送信します。オプションでレビューページで表示(~/.claude/skills/taste/desk.md 参照)。変更は、1行の理由またはフィルムのタイムラインへのコメントとして返されます。指定された部分のみ修正します。

Motionが適切でない場合

  • ナレーション、リップシンク、実際のダイアログ音声が必要 → Motionでグラフィックを構築し、エクスポートして rough-cut(またはプレーンなコードパイプライン:index.html + render.mjs → MP4)でVOと合成。
  • 約60秒より長い場合、またはPremiereでさらに編集が必要 → MotionからMP4をエクスポートし、Premiereでカット。オーバーレイを個別のレイヤーとして必要 → コードパイプラインから透明ProRes。
  • チュートリアルではAfter EffectsとBlenderへのエクスポートが示されていましたが、ここでは確認済みのMotion機能ではありません。約束しないでください。

修正

正常に動作している部分はロックし、ユーザーが名前を指定したもののみ変更します。 既存の計画/ファイルはそのまま保持し、指定された部分のみ編集(例:「グレインを強く」、「すべてのビジュアルで一貫したスタイル」、「テキストをもっとポップに」、「テンポをより速く」)。送られてきた新しいリファレンスを追加し、再レンダリングします。1つのノートのためにゼロから作り直さないでください。

絶対にしないこと

  • ユーザーがそこで働いている、またはその会社のブランドキットを持っている場合を除き、他社のロゴ、UI、プロプライエタリデザインを使用しない。
  • 実際の楽曲をスコアとして使用しない。
  • フッテージ内にAI生成テキストを入れない。すべてのテキストはコードで記述する。

関連スキル