Communitygithub.com

ErtanLabs/ertanlabs-motion

決定論的なHTMLから動画へのパイプラインでモーショングラフィックスを直接作成、レンダリング、検証します。各作品は実際の「ソースワールド」のアーティファクトから視覚文法を借用し、すべての選択を意思決定台帳に記録し、フレーム番号ベースのビートシートでタイミングを計画し、同梱の並列レンダラーでフレーム正確なMP4、ProRes(アルファチャンネル付き)、またはWebMをレンダリングし、同梱のチェッカーでホールド、ラウドネス、フラッシュ、カラータグ、プラットフォームのセーフゾーンを測定します。キネティックタイポグラフィ、解説、ナレーションビデオエッセイ、紙コラージュ風ドキュメンタリー(通称「Voxスタイル」)、映画的なショーリールやブランドフィルム、タイトルシーケンス、アニメーションチャート、マップ、地球儀、飛行経路、製品プロモーション、ローワーサード、カウンター、ソーシャルメディア縦型動画(Reels、Shorts、TikTok)、エディターオーバーレイ、RemotionやHyperFramesプロジェクト、そしてアイデアやスクリプト、データセットを短い動画にしたい場合に使用します(「モーショングラフィックス」という言葉が出てこなくても)。

ertanlabs-motion とは?

このスキルは、決定論的なHTML-to-ビデオパイプラインを用いてモーショングラフィックス作品を制作するための包括的なフレームワークです。デフォルトの一般的な選択肢に頼るのではなく、すべての視覚的決定(フォント、色、動きなど)を、実際のソースワールドのアーティファクト(例:潮汐表、薬局のリーフレット、フラップ式案内板)から借用することで、一貫性と独自性を実現します。全工程が「意思決定台帳(ledger.md)」に記録され、各決定の根拠が追跡可能になります。ビートシートを使用してフレーム単位でタイミングを計画し、同梱のレンダリングスクリプト(render.mjs)でフレーム正確なMP4、ProRes、WebMを生成します。また、check.pyスクリプトでホールド比率、ラウドネス、フラッシュ、プラットフォームセーフゾーンなどを自動チェックし、品質を保証します。スプリント(短編)、スタジオ(ブランドワーク)、シリーズ(エピソード制作)、リビジョン(修正)、ナレーテッドエクスプレイナー(ナレーション主体の解説動画)の5つの作業モードをサポートし、RemotionやHyperFramesプロジェクトとも連携可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ErtanLabs/ertanlabs-motion/tree/HEAD/skills/ertanlabs-motion

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

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

ドキュメント

ErtanLabs モーション

モーション制作は予測可能な形で凡庸になります。ブリーフが開いたままにしたすべての選択肢が、最も一般的なもので埋められ、最も一般的な選択肢から組み立てられた動画は、他の何千もの動画と見分けがつかなくなります。このスキルは、開いている選択肢を明示し、それぞれにトレース可能なソースを与え、決定論的にレンダリングし、誰も見る前にファイルを測定します。

ハウスルール: すべての目に見える選択には、所有者がいる。 フォント、色、曲線、音の出所を指し示せないなら、誰もそれを選んでいない。

ルート

フェーズステップ残るもの
A · 決定A1 マシンを調べる--doctor の結果、選ばれたバックエンド
A2 ブリーフを分解するログライン、キャンバス、インベントリ、サウンドトラック、ガードレール、タグ付きの前提
A3 ソースワールドを見つける作品が文法を借用するアーティファクト、ストーリーデバイス、ヒーロービート
A4 デフォルトを書き、それを覆す最も一般的なバージョンとその置き換え
A5 台帳を保管するコンポジションの隣の ledger.md
B · 制作B1 フレームで計画する計画されたホールドを含むビートシート
B2 すべての要素を重み付けするウェイトクラス、リードとフォロー
B3 世界にタイプ、色、サウンドを設定させるソースから埋められた台帳の行
B4 校正してからレンダリングする検査されたヒーフレーム、次にファイル
C · 証明C1 測定して確認するcheck.py レポート、コンタクトシート、テルズインデックス
C2 主張にタグを付け、引き継ぐエビデンスでグループ化されたハンドオフ

作業モード

  • スプリント (短い単一アイデアの作品、または「とにかく作って」): 自分でソースワールドを選び、5行の台帳 (ログライン、ワールド、ヒーロービート、置き換えられた3つのデフォルト、キャンバス) を書き、構築する。校正と測定は依然として実行されます。
  • スタジオ (ブランドワーク、長い作品、不明確なブリーフ): --stills を使用して2つの候補ソースワールドのヒーローフレームをレンダリングし、2つの画像を並べて表示します。人々は説明よりも画像を早く判断します。ユーザーが選びます。誰も選べない場合は、サムネイルの目つぶしテスト (C1) に耐えるヒーローフレームを持つ方を保持し、その理由を台帳に記録します。
  • シリーズ (1つのチャンネルまたはキャンペーンのエピソード): 最初にプロジェクト内のすべての以前の ledger.md を読みます。新しいエピソードは、以前のソースワールドと以前のヒーロービート構造の両方を繰り返してはいけません。ブランド定数には fixed タグが付けられ、免除されます。
  • リビジョン (納品済み作品へのフィードバック): 各フィードバックをビートシートの行にマッピングし、変更をビートシートの差分として古い行 → 新しい行で記述します。例:「最初が遅すぎる」→ grid 6-30 → 4-16、hold 30-60 → 16-40、後続のすべての行は -20 フレームシフトされます。レビュー用に変更範囲のみをレンダリングし (--range)、次に全編をレンダリングし、差分を台帳に追加します。
  • ナレーテッドエクスプレイナー (ビデオエッセイ、ドキュメンタリー、歴史、お金、犯罪、または科学のストーリー、ボイスオーバー駆動、紙コラージュ風): ナレーションが時計となり、各文がビートになります。品質の大部分を決定する2つのルール:ホールドは文で終了し、画面上のすべての事実は話されるか、スリップにソースが記載される。references/paper-collage-explainer.md を読み、assets/collage-template.html から開始します。

プロダクションレベル

モードとは独立して、すべての作品には台帳に記述されたレベルがあります。

  • グラフィック (デフォルト): 平坦なキャンバス上のソースワールドの文法。エディターが合成するオーバーレイ、ローワーサード、UIパーツ、データヒット、その他あらゆるものに適しています。
  • フィルム: カメラを通して見られ、ワールドが説明する光源によって照らされ、マテリアル、ビート間の生命、3~4シーン、音楽を含むデザインサウンドを備えた、その場所にあるアーティファクト。ショーリール、ランディングページとリポジトリのトップページ、ブランドフィルム、ローンチ、マップとルートのショーケース、「映画的」、「生き生きとした」、「プレミアム」、「より平坦でない」と頼まれたときなどに適しています。計画の前に references/film-level.md を読んでください。ビートシートの上にシーンリストとそれ自身のチェックが追加されます。

フェーズA · 決定

A1 マシンを調べる

node scripts/render.mjs --doctor

出力がバックエンドを決定します: Node、Playwright、またはインストールされた Chrome/Edge、ffmpeg、ffprobe、NVENC。それを1行でユーザーに報告します。HTMLパスが利用できない場合、B4に代替案がリストされます。ユーザーが既に Remotion または HyperFrames プロジェクトを持っている場合は、その中で作業します。

A2 ブリーフを分解する

  1. ログライン: 動画が伝える単一の文。これがないと、作品は装飾になります。ドラフトし、確認します。
  2. キャンバス: 比率、長さ、fps、出力先。サイズとセーフゾーン: references/formats-and-safe-zones.md。
  3. インベントリ: フッテージ、スクリーンキャプチャ、ロゴ、写真、データ、AIプレート。既存の素材は、コンセプトの上に重ねられるのではなく、コンセプトを形作ります。
  4. サウンドトラック: ボイスオーバー、音楽、またはなし。VOまたは音楽がある場合、オーディオがタイミングを設定します (references/sound-and-sync.md)。ユーザーが提供するオーディオは最終版です。ユーザーの同意なしに、ポーズの追加や削除、カット、ストレッチ、またはリタイミングを行わないでください。代わりに画像を調整します。
  5. ガードレール: ブランドフォントと色、必須要素と禁止要素、締切。

不明点は台帳では前提となり、assumed とタグ付けされます。答えがソースワールドを変える場合にのみ質問します。

A3 ソースワールドを見つける

「スタイル」を選ばないでください。被写体の世界から実際のアーティファクトを選び、その文法を借用します: 潮汐表、薬局のリーフレット、フラップ式案内板、地震計ロール、編集済み文書、クリッピングの編集机。1つのアーティファクトが複数の決定を同時に確定させます – 設定されたタイプ、パレットを与えるインクとマテリアル、物事が変化する方法 (フリップ、プリント、スタンプ、塗りつぶし、プロット)、その表面 – そのため、決定は互いに一致します。

  1. 被写体と共に生活する人々が実際に扱ったり読んだりする5つのアーティファクトをリストします。
  2. 動きが組み込まれているものを優先します: それ自体でフリップ、プリント、塗りつぶし、プロット、スタンプ、またはスクロールするもの。
  3. 画像ではなくルールを借用します。テキストの背後にあるチケットの写真ではなく、チケットのロジック: ミシン目が分離し、シリアル番号がカウントし、スタンプがキャンセルする。

references/source-worlds.md は、動き方でグループ化された31のワールドを説明しています。キャリブレーションとして扱ってください。仕事に最適なワールドは、リストにないことがよくあります。

さらに2つのことを挙げてください:

  • ストーリーデバイス: ログラインがどのように可視化されるかについての1文 (「潮汐曲線がプロットされ、フレーム内の水がペンに従う」)。
  • ヒーロービート: ログラインを伝えるビート。最も長い計画ホールドと、作品内で最も大きな状態またはスケールの変化を得ます。レンダリング後、check.py が測定する最も長いホールドはヒーローのものであるべきです。そうでない場合、強調が間違った場所にあります。ボイスオーバーの下でも、ホールドは文とその後のポーズで終了します。ヒーローがより多くの時間を必要とする場合、ボイスがまだ書かれているか録音されている間に、より長いポーズを依頼します。完成したボイスオーバーの場合は、ホールドを収まるようにし、次の行にわたって画像を保持しないでください。

A4 デフォルトを書き、それを覆す

最初のアイデアは通常、最も一般的なものです。それを可視化し、次に置き換えます:

  1. この動画のデフォルトバージョンを正直な1行で書きます: 平均的なモデルがこのプロンプトから作成するもの。
  2. その行の中から少なくとも3つの決定 (タイプ、パレット、レイアウト、登場、トランジション、サウンド) を選び、それぞれにそのソース (ソースワールド、マテリアル、データ、またはサウンドトラック) を伴う置き換えを書きます。
  3. 理由を持って置き換えられないデフォルトは残しても構いません。台帳に owned default とマークして追加します。

A5 台帳を保管する

構築する前に記入し、表示し、コンポジションの隣に ledger.md として保存します。これは次のエピソードのためのメモリでもあります。

LEDGER · <project> · <date>
Logline:
Canvas: 1080×1920 · 30 fps · 8 s · Reels · safe zone: vertical
Source world:
Story device:
Hero beat (frames):
Default version (one line):

| Layer       | Decision                  | Source / reason                 | Default it replaces |
|-------------|---------------------------|---------------------------------|---------------------|
| Type        |                           |                                 |                     |
| Palette     | hex values + job of each  | sampled from ...                |                     |
| Layout      |                           |                                 |                     |
| Time base   | fps, weight classes, holds|                                 |                     |
| Texture     |                           |                                 |                     |
| Sound       |                           |                                 |                     |
| Transitions |                           |                                 |                     |

Rights (fonts, music, data, imagery):
Assumptions:

フェーズB · 制作

B1 フレームで計画する

ビートシートはコンパクトな露出シートです: コードの前にデータとして書かれたモーション。範囲はフレームの [in, out) です。ホールドはそれ自身の行を取得します。

BEAT SHEET · 30 fps · 240 frames (8 s) · 1080×1920
| Beat | Frames   | Element     | Class     | Action                          | Carries | Sound        |
|------|----------|-------------|-----------|---------------------------------|---------|--------------|
| 1    | 6-30     | grid        | mark      | lines plot, staggered           | enter   | pen          |
| 1    | 30-60    | -           |           | HOLD                            |         |              |
| 2    | 60-168   | tide curve  | set piece | plots; water follows the tip    | link    | low swell    |
| 2    | 168-198  | -           |           | HOLD (hero)                     |         | silence      |
| 3    | 198-200  | headline    | stamp     | lands in the water              | land    | one knock    |
HOLDS: 30-60, 168-198, 200-240  →  planned hold ratio 42%

Carries は視聴者が得るものを示します: 要素が 入場 (enters)、2つのものが リンク (link)、状態が 変化 (changes)、またはビートがサウンドトラックに 着地 (lands) します。空の Carries セルは装飾を示します。削除してください。

ホールド比率 は、意味のある動きがないフレームの割合です。解説やタイトル作品は通常約20-35%、ミュージックカットモンタージュはより低く、瞑想的な作品はより高くなります。グレインや2px未満のスロードリフトはテクスチャであり、動きではありません。check.py が比率を測定するため、計画と結果を比較できます。

VOまたは音楽がある場合、単語とビートのタイムスタンプをフレーム番号に変換し、シートに書き込みます。ボイスオーバーの下では、各ビートは キュー (最初の強調単語) も取得します。ビートの主要要素はキューまでに配置され、ホールドが次の文に及ぶことはありません。

B2 すべての要素を重み付けする

すべての要素にウェイトクラスを与えます。クラスは references/motion-and-timing.md のセットからカーブと持続時間を選択します。そのため、持続時間は好みではなく質量が異なるために異なります。

クラス典型的な要素到着出発カーブ
propドット、タグ、小さな数字6-12 f4-8 fsettle イン、launch アウト
panelタイトル、カード、チャートブロック14-24 f10-16 fheavy
set pieceカメラ、水面、地図、大きなフィールド30-90 f20-45 fheavy; 機械の場合は linear
mark線、ルート、下線、手書き長さ ÷ ~30 px per frameフェードpen
stamp消印、最終値、カット1-2 f-step
  • リードとフォロー: どの瞬間にも1つの動きがリードし、他の動きはそれによって引き起こされます (ペンが極限に達するので、そのラベルが開く)。
  • 依存関係の順序: 要素は、依存するものが画面上に現れた後にのみ現れます: 軸の前にデータ、ルートの前にマーカー。
  • ポスターフレーム: フレーム0はサムネイルであることが多いので、完成した読み取り可能な画像として構成し、モーションがそこから成長するようにします。
  • フレームピュア: すべての値はフレーム番号のみから計算されます。ウォールクロックCSS、タイマー、またはシードされていないランダム性は使用しません (references/composition-contract.md)。

B3 世界にタイプ、色、サウンドを設定させる

  • タイプはソースワールドから継承されます。強調はサムネイルの目つぶしテスト (C1) に耐える必要があります: 色調だけでマークされた単語は、小さなサイズでグレースケールでは消えるため、サイズ、ウェイト、配置、またはタイミングで強調します。<html lang> を設定し、ロケール対応の大文字小文字を使用します。render.mjs は実際にページ上のテキストをグリフテストします。詳細: references/typography.md。
  • 色: すべての色には名前付きの役割があります (地面、タイプ、信号、データ系列)。役割のない色は削除されます。発明するのではなく値をサンプリングします: python scripts/check.py --palette reference.jpg。詳細: references/color-and-texture.md。
  • サウンド ステートメントは、「測定済み (Measured)」または「未検証 (Not verified)」のみです。オーディオは目で検査できないためです。サウンド列のすべてのエントリは、可視原因またはベッドを指しています。詳細: references/sound-and-sync.md。

B4 校正してからレンダリングする

バックエンドいつ
HTML + render.mjs--doctor が成功する限りのデフォルト。assets/composition-template.html (またはナレーテッドエクスプレイナーの場合は assets/collage-template.html) から開始。契約内容は references/composition-contract.md。
Remotion / HyperFramesユーザーが既にどちらかで作業している場合。同じ台帳とビートシート、異なる構文: references/backends.md。
アーティファクトプレビュー環境がモーションまたはビデオアーティファクトタイプを提供する場合のみ、プレビューとしてのみ。納品物は依然としてレンダリングされたファイルです。
プレートコードでは説得力を持って描画できないショット (人物、動いている実際の場所) は、テキストなしのプレートとしてフッテージまたはビデオモデルから来ます。タイポグラフィ関連はすべてコンポジションに残ります。references/backends.md。

マップ、地球儀、ルート: references/maps.md (§7a ショーケースルート) も参照してください。

残りを構築する前にヒーロービートを校正します:

node scripts/render.mjs comp/index.html --stills 0,170,last             # ポスター、ヒーロー、エンドフレーム
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # 半分のサイズのヒーロービート
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # フルレンダリング
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # アルファ付きProRes 4444

校正画像は、画像ツールで開きます。

…

[truncated for translation]

関連スキル