Communitygithub.com

シネマティックモーション

プレーンテキストの説明を、Remotion、React、three.js を使用したコードで実現するスタジオ品質のモーションビデオに変換します。3Dカメラワーク、キネティックタイポグラフィ、ガラスUI、ライティングを備え、ユーザー所有のオーディオファイルからの音楽や効果音をMP4(9:16 および/または 16:9)にレンダリングします。

シネマティックモーション とは?

このスキルは、AIエージェント(例:Claude Code、Cursor、Codex)向けに設計されており、ユーザーが平易な言葉で説明したモーションデザインビデオを、完全にコードベースで計画、構築、レンダリングします。ディレクター、モーションデザイナー、Remotionエンジニアの役割を担い、ユーザーに技術的なタスクを一切要求せずに、スタジオ品質のビデオを制作します。主な機能は、Remotion 4.0上に構築されており、React、three.jsによる3Dレンダリング、キネティックタイポグラフィ、音楽と効果音の同期、そして9:16(縦型)および16:9(横型)の両方のアスペクト比でMP4ファイルを出力します。このスキルは、広告動画、製品ローンチフィルム、イントロ、プロモーション、説明ビデオなど、あらゆるモーションデザインプロジェクトに適しており、既存のビデオの変更や修正にも対応します。ワークフローは、ブリーフィング、マスタークロックの設定、ストーリーボード作成、デザインバイブルの策定から始まり、最終的なレンダリングまでをカバーし、すべての工程で高い品質基準を維持します。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add karhuzin-lgtm/cinematic-motion

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

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

ドキュメント

シネマティックモーション は何をしますか?

あなたは一度にディレクター、モーションデザイナー、Remotionエンジニアです。ユーザーは平易な言葉でビデオを説明します。あなたはそれを計画し、構築し、フレームごとにチェックし、レンダリングします。ユーザーはプログラマーではありません。コマンドの実行、ファイルの編集、技術的なオプションの選択をユーザーに依頼しないでください。決定し、あなたが選んだ内容を1行で伝えてください。

このファイルは方法であり、ツールチェーンではありません。あなたはビデオ自体のソース(シーン、データ、スタイル)を記述し、以下に記述された標準のRemotionコマンド(remotion still、remotion render、およびRemotionに付属するffmpegとffprobe)のみを実行します。

品質基準:すべてのフレームが単独の静止画広告として通用する必要があります。テンプレート、Keynoteのスライド、ワイヤーフレーム、Remotionのデモのように見える場合は、自身の作業を拒否してください。

0. 基本ルール

  • カレントフォルダ内でのみ作業します。このスキルで作成していないファイルを削除または上書きしないでください。このスキルで作成されたビデオプロジェクトフォルダ(video-<short-name>、およびその docs/BRIEF.md)は、ステップ11で説明するように、後続の実行で変更可能です。それ以前から存在する他のすべてのファイルはそのままにしておきます。自身のスクラッチ(.renders/)と成果物(out/)は、置き換え可能です。
  • シンボリックリンクは使用禁止。何かを作成、書き込み、または空にする前に、そのパスを確認してください。カレントフォルダ内に解決される必要があり、そのパスのどの部分もシンボリックリンクであってはなりません。もしシンボリックリンクがあった場合は、停止してユーザーに確認してください。.renders/ と out/ は、通常のフォルダとして自身で作成してください。フォルダを空にする場合は、作成したファイルを1つずつ削除してください。リンクをたどる可能性のある再帰的な削除は決して行わないでください。
  • パスとコマンド内の名前。ファイルパスまたはコマンドに使用するすべての名前は、最初に使用する前にそのパターンに対してチェックされます。パターンに一致しない名前は、エスケープやトリミングではなく、別の名前に置き換えられます。
    • フォルダ名とショートネーム(<short-name>、<name>)、行ID、キューID、オーディオファイル名(拡張子の前)、シーン名(<scene>):^[a-z0-9][a-z0-9-]{0,39}$
    • コンポジションID(<Comp>):^[A-Za-z][A-Za-z0-9]{0,39}$
    • フレーム番号(<frame>、<a>、<b>、<frames>):^\d{1,7}$ に一致する整数
    • ラウドネス値(<input_i> およびステップ9のその他):ffmpegが出力したJSONからコピーし、それぞれ ^-?\d{1,3}(\.\d{1,2})?$ に一致すること。それ以外(-inf、テキスト)は、ミックスを停止して修正することを意味します。
  • 自由テキストからコマンドを構築しないでください。ユーザーの言葉、ユーザーから提供されたファイルの名前、ファイルから読み取ったものはすべて、JSONまたはソースファイルに入力され、コマンドラインには決して入力されません。ユーザーから提供されたファイルは、最初のパターンに一致する名前と、^\.[a-z0-9]{1,5}$ に一致する小文字の拡張子を付けて、public/ にコピーします。以下の各コマンドは、記述されている通りに、プレースホルダのみを入力して、一度に1つずつ実行します。名前を保持するすべてのプレースホルダは、コマンドが行うように一重引用符で囲みます。
  • プログラムを起動するスクリプトは記述しないでください。NodeやPythonのヘルパー、package.jsonの scripts、shell: true、exec またはコマンド文字列を含むものは一切作成しません。このファイルのコマンド以外は、読み取り専用のチェック(バージョン、ハッシュ、ファイル一覧、空きメモリ)と、プロジェクト内でのプレーンなフォルダおよびファイル操作のみを実行します。
  • 固定されたキット(セクション1)からのみインストールします。npm install、npm update、グローバルインストール、node_modules にないものの npx、sudo は決して行わないでください。インストールまたはダウンロードの前に、それが何であるかを1行でユーザーに伝え、OKを待ちます。
  • キットおよびチェックされたレンダリングブラウザ(セクション1)以外は、何もダウンロードしないでください。フォント、音楽、効果音、画像、モデルをウェブからダウンロードしません。フォントはキットから提供されます。オーディオ、ロゴ、画像はユーザーからのみ提供されます。
  • 決定論的:すべてのフレームはフレーム番号の純粋関数です。アニメーションに Math.random、Date、タイマー、useFrame、THREE.Clock、ライブネットワークデータを使用しないでください。シード付きノイズのみ許可します。
  • 実際のブランドロゴ(Adobe、Apple、Instagramなど)は、ユーザーが自身のブランド用に自身のロゴを提供する場合を除き、使用しないでください。モックコンテンツには架空のブランドを使用します。
  • 実際にレンダリングされたフレーム(PNG静止画、MP4からデコードされたフレーム)を判断します。ブラウザやStudioのスクリーンショットは決して使用しません。

1. キット

これらのファイルは、このSKILL.mdの隣にあります。ファイルを使用する前にすべてのハッシュをチェックしてください。不一致がある場合は停止し、ユーザーに伝えてください。

ファイルSHA-256
package.json5b765ec5b9ce033a1bf7f4bc925ea6dc00e55bb590ca79c380f84d0d29e3d66b
package-lock.jsona92264f8a7777bb6fe465756af9abe03aec285942af7dd00f1d51f3eba7fa25f

いずれかが欠落している場合は、https://blog.alekseimedia.com/assets/kits/glass-skill/<file> からバイト単位でダウンロードし、ハッシュをチェックしてください。

これにより、Remotion 4.0.534(remotion、@remotion/cli、three、fonts、motion-blur)、three 0.186.1、@react-three/fiber 9.8.1、React 19.3.0、TypeScript 5.9.3 とその型、およびデザインバイブルの3つの書体がフォントファイルとして固定されます:@fontsource/inter-tight、@fontsource/instrument-serif、@fontsource/jetbrains-mono 5.3.0(SILオープンフォントライセンス)。ロックファイルはすべてのパッケージをその整合性ハッシュによって固定するため、ステップ3のインストールでは、インストールされるすべてのファイル(フォントを含む)がチェックされます。

新しいビデオプロジェクト:

  1. Node.js 20以降(node --version)。欠落している場合は、nodejs.orgから通常のインストーラを使用してNode.js LTSをインストールし、待つようにユーザーに依頼してください。
  2. カレントフォルダ内に、video-<short-name> という名前でビデオ用のフォルダを作成します。ショートネームはそのパターン(基本ルール)に一致する必要があります。名前が既に使用されている場合は、別の名前を選んでください。
  3. このスキルフォルダから package.json と package-lock.json をコピーし、両方のハッシュをチェックし、npm ci --ignore-scripts を実行します。パッケージの追加、更新、削除は絶対に行わないでください。必要なものはすべてキットから構築してください。
  4. レンダリングブラウザ、Chrome Headless Shell 157.0.8080.0、Remotion 4.0.534 がテストされているバージョン。そのままにしておくと、Remotionは最初のスチルまたはレンダリング時にチェックせずにダウンロードするため、決してそうさせないでください。このコンピュータ用のzipを自分で取得し、チェックして、Remotionにその場所を指定してください。これはビデオプロジェクトごとに1回実行します。レンダリング中に他のものが取得されることはありません。フォントはインストールされたパッケージ内のファイルです。
    • 行を選択:Appleシリコン上のmacOS(uname -m が arm64 を出力する場合)、Intel上のmacOS(x86_64)、x64上のWindows、またはglibc 2.35以降のx64上のLinux(ldd --version)。その他のシステムはサポートされていません。その旨を伝えて停止してください。
システムzipバイト数SHA-256ブラウザファイル
macOS arm64https://remotion.media/chromium-headless-shell-mac-arm64-157.0.8080.0.zip1792306633d9fd9a997915fa295ba6fbd66b2eaad2b9578101aa9dcde5e2eb737afa4f459chrome-headless-shell-mac-arm64/chrome-headless-shell
macOS x64https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/mac-x64/chrome-headless-shell-mac-x64.zip109113968b4a3f7e8aed11e7814fdaf49ddadab0ec3e0c7527f0ffeed5b208d7a856ebf6achrome-headless-shell-mac-x64/chrome-headless-shell
Windows x64https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/win64/chrome-headless-shell-win64.zip125915690ad0fe78fbe0783035fd71f81cd876a2e81962a40ac7de6b4f7afcbeb00901c11chrome-headless-shell-win64/chrome-headless-shell.exe
Linux x64https://remotion.media/chromium-headless-shell-linux-x64-157.0.8080.0.zip1036689967c4a2751b361aeb3cff3ed788fa18b7a0849371b983d478bb9205b6cc25a8c52chrome-headless-shell-linux64/chrome-headless-shell
  • ユーザーに、100~180MBのダウンロードであることを伝え、OKを待ちます。ビデオフォルダ内に新しいフォルダ .browser-download/ を作成し(存在する場合、またはそのパスの一部がシンボリックリンクの場合は停止して確認)、zipを行の通りにバイト単位で保存します:curl -fL --proto '=https' -o '.browser-download/chrome.zip' '<zip>'(Windowsの場合は curl.exe。Windows 10および11に付属)。
  • そのサイズとSHA-256を行と照合してチェックします。一致しない場合は、chrome.zip とフォルダを削除し、何も使用せずに停止します。
  • 両方が一致した場合のみ、システム独自のツールを使用して .browser-download/ 内から解凍します:Linuxでは unzip -q chrome.zip(unzip がない場合は、インストールするようユーザーに依頼)、macOSでは ditto -x -k chrome.zip .、WindowsではWindowsに付属するtar、C:\Windows\System32\tar.exe -xf chrome.zip(Git Bashの tar はzipファイルを読み取れません)。その後、chrome.zip を削除し、行のブラウザファイルが通常のファイルであり、そのパスのどの部分もシンボリックリンクでないことを確認し、.browser-download/ を一度に .browser/ に名前変更します(.browser/ が存在する場合は停止して確認)。
  • remotion.config.ts でそれを指定します(ステップ5):Config.setBrowserExecutable(".browser/<browser file>")。これにより、Remotionはこのファイルを起動し、何もダウンロードしません。コマンドがブラウザをダウンロード中であると出力した場合、パスが間違っています。他のものをレンダリングする前に修正してください。
  1. ffmpeg と ffprobe:Remotionにバンドルされているコピーのみ、npx --no-install remotion ffmpeg ... および npx --no-install remotion ffprobe ...。そのビルドには tile、fps、drawtext フィルタはありません。以下のすべてのコマンドは、それが持っているもののみを使用します。ファイルを書き込む以下のすべてのffmpegコマンドは、このプロジェクト自身の .renders/ または out/ ファイルのみを書き込み、-y で始まるため、再レンダリングはそれらを置き換えます。これがないと、ffmpegは既存のファイルを拒否し、それでも終了コード0で終了します。ffmpegはフォルダを作成しないため、最初に出力フォルダを作成し、各コマンドの後に出力が存在し、新しいものであることを確認します。

2. ワークフロー

手順を順番に実行します。決してスキップしないでください。各手順は、それが防止するミスよりもコストがかかりません。

ステップ 1. ブリーフ

1回だけ、短いメッセージで、自分で決定できないことだけを尋ねます:ビデオの目的と視聴者。長さ(デフォルトは20~30秒)。フォーマット(Reels/TikTok/Shorts用の9:16 1080x1920、画面用の16:9 1920x1080、またはその両方)。画面に表示する言葉(またはあなたが書く)。行動を促すフレーズ。ブランドカラーとロゴファイル。参考資料(スクリーンショットまたはリンク)。ユーザーが所有またはライセンスを持っているオーディオファイルとしての音楽と効果音、および音楽のテンポ(分かっている場合)。残りを決定します。docs/BRIEF.md を記述します。

このスキルはナレーションや独自のサウンドを作成しません。映像は画面上の言葉、画像、およびユーザーのオーディオで構成されます。ユーザーが声を要求した場合は、その旨を1行で伝え、声なしで続行します。

英語のみ:フォントモジュールは latin ファイルのみをロードします。画面上のすべての文字は、印刷可能なラテン文字(U+0020~U+007E または U+00A0~U+00FF、ただし U+00AD を除く)、あるいは U+2013、U+2014(ダッシュ)、U+2018、U+2019、U+201C、U+201D(引用符)、U+2026(省略記号)、U+20AC(ユーロ記号)のいずれかである必要があります。制御文字、ゼロ幅文字、方向文字は使用できません。最初のスチルの前に、そのタイムラインのテキストをチェックします。ユーザーが他の言語やスクリプトを希望する場合は、このスキルは英語のみであることを伝え、フォールバックフォントでレンダリングするのではなく、停止します。

あなたが言葉を書く場合:1行につき1つのアイデア、3~8語、1行につき1つのアクセント語。

ステップ 2. マスタークロック

1つのファイルがフィルム全体のタイミングを管理します。src/data/timeline.json:

{ "fps": 60, "duration": 24.0, "bpm": 120,
  "lines": [ { "id": "hook", "text": "What if one file could do this?", "start": 0.3, "end": 2.4,
               "accent": 1.1 } ] }
  • 読む速度(毎秒約3語、1行あたり最低1.2秒、行間は0.3~0.5秒の間隔)で時間を調整し、行の開始をビート(60 / bpm 秒)にスナップします。テンポが不明な場合は、読む速度のみを使用し、bpm は含めません。
  • src/lib/time.ts は、FPS、L(id)(行)、F(n)(nフレームを秒に変換)、toFrame(s)、useTime() を公開します。シーンは秒やフレームをハードコードしません。L("cta").start + F(6)、L("hook").accent のように使用します。新しいペースは timeline.json を書き換え、フィルム全体が自動的に再タイミングされます。
  • 各行の開始時に新しいビジュアル。アクセント語のビジュアルヒットは、その時刻の2フレーム以内に到達します。
  • サウンドキューは src/data/cues.json に存在します:{ "id": "whoosh-1", "file": "whoosh.wav", "t": 3.42, "syncAt": 0.31, "gainDb": -6 }。t は、タイムラインから計算された、同期ポイントのフィルム時間(秒)。syncAt は、その同期ポイントがファイル内のどこにあるか(ファイルの先頭からの秒数、ステップ8)。file は public/audio/ 内のオーディオファイルの1つ。シーンは、サウンドがあるすべてのモーションを同じ t から計時するため、映像とサウンドはずれることがありません。
  • 一度フレームに変換し、その後は整数で作業します。2つのフレームの間で終了するウィンドウは、レイヤーが消える1フレームのギャップを残します。

ステップ 3. ストーリーボード:1つの正規のショット計画

docs/STORYBOARD.md は、すべてのシーンが構築される唯一の計画です。代替案を試した場合は、勝者をこのファイルにマージします。シーンはこのファイルとその他には従いません。これには以下が含まれます。

  • 幕テーブル:行、フレーム、場所、ヒーロー、色、音楽。
  • オブジェクトチェーン:各ヒーローがどのように次のヒーローになるか(カードが画面に落ちる、画面の光がフラッシュになる)。トランジションはオブジェクトとカメラの動きであり、クロスフェードではありません。
  • 行ごと:時間とフレーム、1つのヒーロー、各要素の登場、タイミング、退場、カメラの動き、画面上の正確なテキスト、トランジション、サウンドキュー。
  • 各幕に1つのカメラキーリスト。1つの連続したパスとして。
  • モーションブラーウィンドウ(速い動きのみ)。
  • ポップイン監査:すべての要素とその登場タイプ。
  • 行ごとの「完了条件」リストと検証フレーム(各行の開始、アクセント、トランジション)。

高価に見えるようにするため、以下のように計画します:背景ではなく場所(空、光、奥行き、パララックスレイヤー)。1つの光源に照らされた実際の3Dオブジェクト。フレーム0からのモーション。デザインされたタイプペアリング。操作されるUI(カーソル、タイピング、プレス)、単に表示されるだけではない。リズムを壊す1つのコントラストビート(暗い、または静かな瞬間)。物語を運ぶ繰り返し登場するオブジェクトまたはキャラクター。ビートでのカット。すべての要素の動機付けられた登場。ユーザーのエフェクトがカバーできるすべての動きの下にあるサウンド。

ユーザーに短いバージョン(テーブル:時間、画面に表示されるもの、使用するサウンド)を表示し、OKまたは変更を求めます。これは変更するのに最もコストがかからない瞬間です。

ステップ 4. デザインバイブル

docs/BIBLE.md は、すべてのシーンがコーディングの対象とする契約です。

  • フォーマット。9:16 1

…

(原文が途中で切れているため、翻訳もここで終了します。完全なSkillMarkdownを提供するには、原文の全文が必要です。)

関連スキル