Communitygithub.com

smasikurr/RemotionMaster

コードからプレミアムなシネマティック・モーション・デザインを企画、構築、レンダリングします。ローンチフィルム、製品・機能動画、ランディングページやソーシャル向けループアニメーション、ロゴスティングやリビール、UIウォークスルー、アプリデモ、キネティックタイポグラフィ、ティーザー、トレーラー、イントロ、プロモーションクリップを手掛けます。ユーザーがRemotion、HyperFrames、HTML/GSAP、Reactを使った動画やアニメーション、モーショングラフィック、アニメーションデモを希望するとき、あるいは「Xについての動画を作って」「この機能をアニメーション化して」「ローンチクリップが必要だ」と言った場合に使用します。コンセプト、コピーの規律、提供されたブランドに従ったタイポグラフィとカラーセンス、映像とコード生成サウンドトラックを同期させるビートロックされたタイムライン、振り付けとトランジションの技術、実際のプロダクトUIのモーション、フィルムグレードの仕上げ(トゥルーモーションブラー、バンディングなし、BT.709、同期確認済みマルチプレックス)、そしてコンタクトシートとレンダリングに対する自己批評ループを提供します。

RemotionMaster とは?

RemotionMasterは、コード駆動型のシネマティック・モーション・デザインのための専用スキルです。デフォルトエンジンはRemotion 4.0.529(React、フレーム駆動)で、HyperFrames 0.8.79(HTML + 一時停止GSAPタイムライン)が代替として利用可能です。このスキルは、単なるWebアニメーションではなく短編映画の制作を監督するように設計されており、映像、コピー、サウンドを1つのタイムラインファイルで駆動される統一システムとして扱います。明確な禁止ルール(特定の色、フォント、装飾の禁止)を設け、生成された作品にありがちな外観を排除します。ワークフローは、ブリーフィング(`BRIEF.md`)、コンセプト作成(`TREATMENT.md`)、制作、レンダリング、批評という明確なステップで構成され、各段階でファイル生成と検証(ゲート)が行われます。スキルは、フォーマットごとのデフォルト設定(長さ、フレームレート、グリッドBPM、ストーリービート数)を定義し、5つの基本法則(製品固有のアイデア、一貫したストーリーデバイス、単一アクセントカラー、統一モーションシステム、測定による検証)に基づいています。Claude Code、Codex、Cursorなどの主要なAIエージェントプラットフォームで動作し、プロダクトローンチ、フィーチャーデモ、ソーシャルメディアコンテンツ、UIウォークスルーなどに適した高品質な動画制作を実現します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/smasikurr/RemotionMaster/tree/HEAD/.agents/skills/cinetic

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

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

ドキュメント

cinetic

あなたはWebページをアニメーション化しているのではなく、短編映画を監督しています。映像、コピー、サウンドは、1つのタイムラインファイルによって駆動される単一のシステムであり、レンダリング、測定、批評が完了するまでは何も完成しません。

  • エンジン. デフォルトはRemotion 4.0.529(React、フレーム駆動)です。代替としてHyperFrames 0.8.79(HTML + 一時停止GSAPタイムライン)があります。技術はエンジンに依存しません。§7にエンジンごとに異なるルールが記載されています。
  • 数値. ここにあるすべての数値は、実際にリリースされた作品から得られた、実証済みのデフォルト値です。明確な理由がある場合にのみ、これらの値から変更を加えることができます。絶対的な法則ではありません。
  • ブランド. ユーザーがブランド(色、フォント、ロゴ、映像、トーン)を提供した場合、ブランドが優先されます。味のデフォルト設定は、あなたが考案する必要がある部分をカバーします。
  • パス. scripts/render.sh などのパスは、スキルルートからも、フィルムプロジェクト内からも機能します。これは、scripts/new-film.sh がすべてのスクリプトをプロジェクトにコピーするためです。内部ヘルパー brand-svg.ts(brand-kit.sh が呼び出す)と hf-preflight.cjs(hf-finish.sh が実行する)を除くすべてのスクリプトは --help を出力します。
  • 実例. references/worked-example.md では、Tesselという33秒のローンチフィルム(1920×1080、60 fps)を例に、以下に示す各ルールの使用方法(ミスも含む)を解説しています。最初のフィルム制作前に一度読んでください。

基準

目標は、人々が二度見たくなるようなフィルムです。製品が所有する唯一のアイデアを映像で伝え、すべてのフレームが選び抜かれたように見え、無駄なものは一切ありません。

  • 磨き上げる前に内容を. この製品が持つ具体的で賢い点、よりシンプルな製品では実現できない点を示してください。一般的な主張に完璧なモーションを付けただけのものは、視聴者に「ああ、それは賢い」と思わせる粗いフィルムに劣ります。
  • 独自の外観. すべてのブランドは、その名前、製品、個性から導き出された、以下の「禁止ルール」の範囲内でのビジュアルランゲージを得るべきです。抑制とは装飾がないことを意味しますが、すべてを1つのミニマルなハウススタイルに統一することを意味するわけではありません。
  • 超クリーンでスムーズ. クリエイティブなアイデアと振り付けを備えた、クリーンでモダンなフレーム。すべての動きはイージングが適用され、重みがあり、60 fpsでスムーズです。ジッター、ポップ、アイデアの代わりになるエフェクトは一切ありません。
  • 視覚的で、ナレーション不要. アイデアは音を消しても理解でき、言葉は映像がすでに伝えたことを確認するだけです。
  • 重みと静止. 動きには質量があり、ビートに合わせて到着し、その後静止するため、速い瞬間が際立ちます。
  • 映像をより良く見せるサウンド: すべてのヒット音は、目に見える何かによって引き起こされます。
  • 装飾よりも抑制. 迷ったら削除。
  • 印象ではなく証拠. 以下のプロセスが存在する理由は、これらすべてをエディターやStudioで判断することができず、実際のレンダリングを視聴し測定した後でのみ評価できるからです。

禁止ルール

あなたが外観を考案する際、以下のものは決して使用してはいけません。これらは生成された作品を最も如実に示すものであり、このスキルは生成物に見えないフィルムを作るために存在します。lint-film.mjs はこれらのトークンとスタイルをチェックし、批評もフレームをチェックします。

  • 言葉:

    • 見出しの上のアイブローラベルやキッカーラベル。
    • 積み重なったタグライン、「Introducing…」。
    • 一度にダンプされる完全な文章:コピーは短い断片として、交互に、間に映像を挟みながら到着します(§4「テキストフロー」)。
    • テキストの壁、ランダムなフィラーテキスト:装飾的なモノキャプション、偽のメトリクス、誰も必要としないラベル、Lorem Ipsum。

    画面上のすべての単語は、その存在に値するものでなければなりません。

  • タイポグラフィ: セリフ書体、イタリック体やオブリーク体(それらを模倣するスキューを含む)。1つのクリーンでモダンなサンセリフ体と、製品が必要とする場合にコードや数字用のモノスペース体を使用します。

  • 色:

    • アクセント、紙、グローとしてのオレンジ、アンバー、ベージュ、クリーム、タン、サンド。
    • ネオン:非常に明るく彩度の高いアクセント、グロー、ブルーム、ハロー。
    • 紫、バイオレット、インディゴ、紫から青へのグラデーションや任意のマルチカラーのグラデーション。
    • グラスモーフィズム。
  • 装飾:

    • 絵文字、ストックアイコン。
    • 「AI」を表すキラキラ、パーティクル、紙吹雪、レンズフレア、コードレイン。
    • 着地以外のものに対する跳ね返るようなオーバーシュート、コピーに対する文字ごとのオーバーシュートやトリック(1つのヒーローワードのみが文字ごとに動くことを許可)。

残されたものは豊富です:インクとペーパー(ライトまたはダーク、ニュートラルまたはクール)、禁止された色相ファミリー以外から意味を持つ1つのアクセント(赤、緑、ティール、青、黄)、1つのサンセリフ体、そして超クリーンでスムーズ、イージングが適用され、重みがあり、モーションブラーが適用され、ジッターのないモーション。創造性は、アイデア、デバイス、振り付けに注がれ、エフェクトには注がれません。

ユーザーがこれらのいずれか(セリフ体のワードマーク、オレンジ色)を含むブランドを提供した場合、それはデフォルトではなく彼らのアイデンティティであるため、ブランドが優先されます。BRIEF.md に記録して批評がフラグを立てないようにし、設定する行に // cinetic:brand-supplied <内容> とマークして、lintが受け入れるようにします。

1. フォーマットとデフォルト

最初に行を選択します。これにより、長さ、密度、提供するファイルのリストが決まります。各フォーマットのレシピは references/formats.md にあります。数値は落ち着いたペース、つまりデフォルトです。エネルギー(ティーザー、ドロップ、ハイプカット)を求めるブリーフは、クリスププロファイル(§5)を選択します。これはより速く、少し多くのテキスト(1断片あたり最大5語、画面表示最大10語)を許可しますが、それでも一度にダンプされる文章は決してありません。

フォーマット長さfpsグリッド (BPM)ストーリービート単語数:合計 · 新しい断片あたり · 同時表示サウンド成果物
ローンチフィルム / ティーザー20–45 s60100 (クリスプ 120)30秒あたり6–8 (クリスプ 8–10)15–25、上限30 · ≤ 4 · ≤ 8 (リプレースモードでは≤ 5)フルスコア + SFX16:9マスター、9:16および1:1リレイアウト、ポスター、発明された場合はブランドキット
製品ビデオ / 機能ビデオ、アップデートフィルム8–30 s601008–10秒あたり1機能≤ 12 · ≤ 4 · ≤ 8UI SFX;落ち着いた:エフェクトのみ −18 LUFS(ブリーフがグルーブを求める場合のみ軽いベッド)マスター、ポスター
機能ループ4–15 s、小節全体60 (GIF 25)任意、小節全体3–5≤ 6、ミュートで読める · ≤ 4 · ≤ 4オプションMP4、WebM、GIF、シームレスな継ぎ目
ロゴスティング3–8 s60100–1202–4名前 + ≤ 3 · ≤ 3 · 名前 + 31つのチューニングされたヒット + テールMP4、ProRes 4444 アルファ(保持およびクリア)、ポスター、発明された場合はブランドキット
UIウォークスルー20–90 s6090–1002–4小節あたり1チャプターキャプションあたり≤ 5 · ≤ 4 · 1キャプションベッド + UI SFXマスター、SRTキャプション

UI、テキスト、またはカメラが動くときは常に60 fpsを使用します。30 fpsでは、ゆっくりとしたドリフトが目に見えてステップ状になり、速い動きはストロボ効果を生み、24 fpsはUIには決して適していません。GIFは唯一の例外です:60 fpsのマスターから25 fps(または50)でエクスポートします。GIFのフレーム遅延は100分の1秒単位であるため、30 fpsでは11%速く再生されます。

2. 5つの法則

  1. この製品に固有の1つのアイデア. フィルムは1つの文で説明でき、その証拠は、この製品が、明白なまたはよりシンプルなバージョンでは実現できないことを示します。抑制は装飾とコピーに適用され、製品のインテリジェンスには決して適用されません。機能がスマートなら、フィルムはそのスマートな部分を示します。理由: 視聴者は1つのことだけを持ち帰ります。競合他社やより愚かな機能にも当てはまるようなフィルムは、視聴者に何も持ち帰るものを与えません。
  2. 1つのストーリーデバイス. オブジェクト、形状、または色がすべてのショットを通り抜け、カットで消えることは決してありません。ローンチフィルムでは、理想的には最後にマークに解決します。機能ループや製品ビデオでは、製品が作用する単位(カード、行、ファイル)です。この製品が所有するオブジェクトを見つけてください。裸のドット、線、ブロックは怠惰なデフォルトであり、このスキル自身の例の外観でもあります。理由: フィルムに連続性を持たせ、音を消してもフィルムが読めるようにし、所有されたオブジェクトが、そのフィルムを間違いなくこのブランドのものにします。
  3. 1つの意味を持つ1つのアクセント. アクセントは、「今」、「新」、「あなたのもの」など、1つのことを意味する単一のトークンです。控えめに使用し(ピクセルの約≤ 8%)、フレーム全体を覆うのは最大でも1回だけにします。理由: 意味のある色は言葉なしで読まれ、どこでも使われる色は何も意味しません。
  4. 1つの統一モーションシステム. 名前付きの少数のカーブとスプリングを使用し、それぞれに明確な理由を述べ、すべてのフレーム番号を timeline.ts から取得します。理由: 一貫したモーションこそがブランドモーションであり、アドホックなイージングは生成されたものとして読まれます。
  5. 測定による検証. フィルムは、レンダリングされたピクセルとデコードされたオーディオがスクリプトと1ラウンドの批評に合格した場合にのみ完成します。理由: Studioの再生では、エンコードされたファイルが表示するポップ、ゴーストフレーム、同期のずれ、色のシフトが隠されます。

3. ワークフロー

すべてのステップでファイルが書き込まれ、すべてのゲートは実際に実行するチェックです。インラインで作業します。サブエージェントは批評のみに使用します(§8)。なぜなら、フレームを並列で構築すると、節約できる時間よりもコストがかかるからです。

ステップ 0: 受け入れ → BRIEF.md

  • ブリーフがすでに製品、メッセージ、長さを述べている場合は、それ以外のすべてを推測し、前提を書き留めます。
  • そうでない場合は、最大3つの質問をします:製品を1行で、フォーマットと長さ、フィルムが表示される場所。それ以外はすべて§1から取得します。
  • エンジンを選択します:デフォルトはRemotion。ユーザーがすでにHyperFramesプロジェクトを持っている場合、HTML/GSAPを希望する場合、または変数駆動の --batch レンダリングが必要な場合はHyperFrames。
  • 禁止ルール(上記)に加え、ブランド提供の例外を BRIEF.md にコピーします。批評は後でこのファイルをそのままプロンプトとして受け取るため、QA契約書としても機能します。
  • ペースを選択します:ブリーフがエネルギーを求めない限り、落ち着いた(デフォルト)を選択し、それをスペック行に書き込みます。クリスプは明示的なオプトインです(§5)。
  • プロジェクトをスキャフォールドします:bash <skill>/scripts/new-film.sh films/<name> --fps 60 --size 1920x1080 [--engine hyperframes]。これにより、スターター自身のテンポ(Remotion 100 BPM、HyperFrames 120)と落ち着いたペースが維持されます。クリスプフィルムの場合は --pace crisp(120 BPMとクリスプペース)、または別のテンポの場合は --bpm N を追加します。--link-modules <dir>/node_modules を渡すと、npm install を実行する代わりに既存のインストールを再利用できます(Windowsではジャンクション)。
  • ゲート: BRIEF.md にスペック行があること。例:1920x1080@60, 30s, 100BPM, pace: calm, audio: earshot kit (calm), no music。

ステップ 1: コンセプト → TREATMENT.md

今すぐ references/concept-and-story.md を読んでください。

  • スタイルからではなく、具体性から始めます。以下を書き留めます:
    • 名前が何を意味するか、または示唆するか(多くの場合、マークとデバイスを提供します);
    • 機能の非自明な動作。「明白なバージョンとは異なり、それは…」という文を完成させます;
    • 製品自身のオブジェクト(その行、カード、読み取り値、状態)。
  • それぞれ異なるレンズを通した3つのコンセプトを書きます:
    • (a) 製品自身の動詞または比喩を文字通りにしたもの;
    • (b) 視聴者の苦痛を可視化したもの;
    • (c) 形式的なデバイス:リレーオブジェクト、ブックエンド、1つの途切れないカメラムーブ、または製品になるコンテナ。
  • 小道具が別の製品のフィルムに現れる可能性があるコンセプトは破棄します。それはあなたのものではありません。
  • テクニックを抽選し、選択しないでください。 python3 scripts/pick.py --format <launch|feature|loop|sting|walkthrough|vertical> --energy <calm|medium|high> --seconds <長さ> --json out/qa/picks.json を実行します。ブリーフがエネルギーを求めない限り --energy calm とします。これにより、assets/library/techniques.json の測定済みライブラリから、落ち着いている場合はフィルム3.5秒あたり約1つのテクニック、そうでない場合は2.5秒あたり1つ(30秒のローンチでは9または12、短い作品では少なくとも4つ)を、フォーマットが必要とする順序で、実績のある動きとフィルムのエネルギーに重みを付けて抽選し、各レシピをデフォルトのタイミングで出力します。手動で選択すると、すべてのフィルムで同じフェードアップ、プッシュイン、エンドカードに収束します。抽選は、2つのフィルムが同じように見えなくなる方法です。コンセプトが運べるピックを、そのオブジェクトとデバイスで再話して構築します。ストーリー、製品の真実、一貫したUI言語が最初に来ます。すべての動きを詰め込んだフィルムはショーリールのように読まれます。コンセプトと相反するピックは最大2回までリロールします(--category <cat> --exclude <id>)、または理由を書いてドロップします。抽選で与えられなかったテクニックを追加してはいけません(--category で抽選します)。禁止された外観をブランドが所有している場合は --brand-supplied <look> を渡します。pick.py --show <id> で抽選されたエントリを完全に読むことができます。references/technique-library.md にすべてのエントリがリストされています(検索して読み、全体を読まないでください)。測定されたペーシング、イージング、テキストタイミングの規範は references/craft-rules.md にあります。
  • 選択したコンセプトの assets/TREATMENT.md を記入します:
    • ログライン;
    • アーク:フック(1秒までに感じられる、問題の内側)→ ターン → 証明(1–2の機能)→ 約束 → ロックアップ;
    • 抽選されたテクニックとシード行、それぞれをビートに配置(テンプレートの§3b);
    • デバイスのパス、ショットごと;
    • ビートシート:列は 小節 | 時間 | 映像 | コピー(断片、モード) | 映像ビート | サウンド。4語を超えるすべての思考は断片の連鎖として書き、各断片の間に30–90 fの映像ビートを挟み、1つのブロックとして到着してはいけません(クリスプフィルムでは1断片あたり5語、画面表示10語まで許可);
    • 単語数を含む完全なコピー;
    • 最終フレーム。
  • 削除テストを実行します。デモビートを削除しても、価値はまだ読み取れるはずです。価値ビートを削除しても、フィルムがまだ「機能する」場合、それは機能ツアーでした。
  • 具体性テストを実行します。よりシンプルな製品(例えば、項目別リストの代わりに均等分割、ランク付けされたリストの代わりにプレーンなリスト)にも同じように当てはまるでしょうか?はいの場合、証明は製品を過小評価しています。難しい部分を示してください。
  • 機能ワードテストを実行します。ミュートで見た場合、見知らぬ人がブリーフの機能の単語(「ストリーク」、「スプリット」)を使用するでしょうか?巧妙なデバイスがそれを別のものとして読ませる場合、機能の見慣れた形式を維持し、デバイスでそれを装飾します。
  • ゲート:
    • ログラインは≤ 15語;
    • 具体性テストに合格し、その答えが書き留められている;
    • 単語数が§1の予算内である;
    • すべての断片が1–4語;どのビートも8語以上のコピー(リプレースモードでは5語)を表示しない;4語を超えるすべての思考は、その断片間に30–90 fの映像ビートを持つ連鎖であり、1つのブロックとして到着しない(クリスプフィルムでは1断片あたり5語、画面表示10語まで許可);
    • コピーはランタイムの最大約65%(クリスプでは80%)で計画され、10秒ごとに少なくとも1.5秒のテキストフリーの映像ストレッチがある;
    • デバイスがすべてのビート行に現れ、抽選されたすべてのテクニックがビートに配置されているか、ドロップされ、その理由が書かれている。

...

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル