frame-smith

frame-smith — モーションを緻密に設計 · エフェクトエンジン駆動 · 安っぽさゼロ

frame-smith はレンダラーではなく、ディレクターです。 動画の内容を決めます。つまり、レジスター、エフェクトエンジン、ビートのタイムライン、モーションの設計を決定し、動画ランタイムでレンダリングする Remotion コンポジション（.tsx）を作成します。ランタイム自体は所有しません。ランタイムは hyperframe スキル（エフェクトテンプレートライブラリで、Remotion も内包）または remotion スキル（ランタイム本体とスキャフォールディングのみ）です。frame-smith はどちらか一方が必ず必要で、最初に確認します（§0）。

frame-smith は2つのレジスターを構築し、それに応じて振り分けます（§0.A）。

• cinematic — 横長の HyperFrame クリップ、1920×1080 · 30fps · 12–24s、映像のみ、ナレーションなし。最適化の対象は、圧巻のエフェクトエンジン1つ + 緻密なビートの展開 + ワードマークによる締めです。4つのエンジンのアーキタイプ（ポスターキューブのタンブル、カプセルのテーマ切り替え、アーキテクチャのデータパルス、粒子バーストのアルバム）がこのレジスターに該当します。
• short — 抖音／小红书／视频号向けの縦型ショート動画、1080×1920。字幕／ナレーションを含めることができます。最適化の対象は、最初の1.5秒で惹きつけること + セーフゾーン内で読みやすいこと + ナレーションに合わせたリズムのよいカットです。S = width/720 のスケールシステムと、抖音のセーフゾーンに従います。

共通する理念は同じです。緻密なモーション設計、モーションの雑さはゼロ。 両方に適用されるのは、モーション設計の最低基準（references/motion-floor.md — 30fps、秒からフレームへの変換ヘルパー f(sec)、clampOpts、書き出し三点セット、linear よりイージングを使うこと、最終フレームの厳密な扱い）と、安っぽいモーションの禁止リスト（§6）です。分岐するのは、向き、セーフゾーンの計算、画面上にテキストを表示するかどうかです。

以下のルールはすべて状況に応じて適用します。自動的に適用されるものはありません。ブリーフを読み、レジスターを決めてから、適合するエンジンだけを選んでください。どんなブリーフにも同じフェードアップとスライドインのクリップを出すスキルは失敗です。それこそがモーションの雑さです。

---

このスキルの使い方

0. まず環境を確認してください。これは必須条件であり、推奨事項ではありません。 ほかのことを始める前に、動画ランタイムが利用可能であることを確認します。frame-smith はコンポジションを作成しますが、単独ではレンダリングできません。references/environment.md を読み込み、記載されている確認を実行します。hyperframe スキルまたは remotion スキルの少なくとも一方が利用可能でなければなりません。

• どちらもない場合 → 停止します。.tsx は作成しないでください。2つのインストール方法を提示して待ちます（エフェクトテンプレートを利用できるため、hyperframe を推奨します。remotion はランタイムだけを使う軽量な方法です）。environment.md に正確な検出手順とインストール／ブートストラップの手順が記載されています。
• どちらか一方がある場合 → 利用可能なスキルを記録します（コンポジションファイルの配置場所と、登録およびプレビューの方法が決まります）。その後、次に進みます。

1. §0 Brief Readを実行し、コードに触れる前に文体（シネマティックかショートか）と一行の意図を推測します。安易なデフォルトを明示し、それを退けます。短いFrame Readを出力してから、確認を待ちます。
2. §1 Three Dials（ENERGY · SPECTACLE · DENSITY）を設定します。ショートの文体では読みやすさを重視してDENSITYを調整し、シネマティックではSPECTACLEを高く設定します。
3. モーション制作の基礎を整えます（references/motion-floor.md）。両方の文体で共通です。30fps、const f = (s) => Math.round(s*FPS)、clampOpts、イージングライブラリ、エクスポートの三点セット（Component / ComponentCover / COMPONENT_FRAMES）。続いて画面向きの基盤を分岐させます。シネマティックなら1920×1080、セーフゾーンによる制約なし、ワードマークの文法。ショートなら1080×1920、すべてのピクセルに適用するS = width/720のスケール、Douyinのセーフゾーン、字幕のリズムです。
4. references/effect-catalog.mdからエフェクトエンジンを1つだけ選びます。エンジンは動画の魂です。1つを選んで100％仕上げ、3つを40％ずつ仕上げるのではありません。カタログは4種類のエンジンのアーキタイプと、再利用可能なサブエフェクト（3D CSSソリッド、スタジアム／ピル型マスクのテーマ切り替え、台形データエンベロープ＋カウンター、SVGのストローク描画＋パーティクルバースト＋3Dリング）で構成されています。意図に合ったエンジンを選び、毎回同じものに頼らないでください。
5. ビートのタイムラインを組み立てます（references/beat-structure.md）。動画はページではなく、ビートで構成されます。H0…Hnの境界を秒単位で決め、各ビートに役割を1つずつ与え、最後のビートをしっかり着地させます（ワードマーク、ロゴ、CTA）。文体に合った物語の骨組みを選びます。
6. リビールを振り付けます（references/reveals.md）。テキストや要素の出入りは、クリップ全体の読みやすさを左右します。ベクトルを変え、同じ親要素を持つ要素の出現をずらし、エッジをマスクし、ヒーロー要素には専用の動きを付けます。最もありがちな手抜きは、すべてを同時にフェードアップさせることです。
7. サウンドデザインで演出します（references/sound-design.md）。サウンドは制作の半分を占め、シネマティックでも省略できません（ナレーションなし≠サウンドなし）。ENERGYとジャンルに合うBGMを選び、冒頭と末尾にフェードを付けます。重要なビートを際立たせるSFXを3～6個配置し、映像と音の同期を徹底します。すべてのSFXとBGMのドロップを、映像と同じビートのフレームに合わせます。これは、このスキルで「プロらしく感じさせる」効果が最も高い方法です。
8. コンポジションを記述してから登録します（references/registration.md）。エクスポートの三点セット、Root内の<Composition>と<Composition ...Cover>のペア、正しいdurationInFrames / fps / width / heightを確認します。未登録のコンポジションはStudioに表示されず、レンダリングもできません。
9. 完了を宣言する前に、安っぽいモーションのブラックリスト（references/anti-cheap-motion.md）とプリフライト（references/preflight.md）を実行します。低モーション設定／最終フレームの確認、リビールとサウンドのチェック、そして動きを証明するためのStudioプレビューまたは静止画レンダリングを行います。その後、優れた動画の評価基準（references/showcraft.md）に照らして確認します。4つの層（エンジン・リズム・リビール・サウンド）と同期を評価し、強みをさらに盛り込むのではなく、最もスコアの低い層を改善します。

references/*.mdファイルには詳細な情報があります。現在のフェーズで必要なファイルを読み込み、すべてをインラインに記述しないでください。

参照	読み込むタイミング
environment.md	§0、ほかの作業を始める前 — 必須の確認事項です。 hyperframe または remotion スキルが利用可能かどうかの確認方法、それぞれが提供する機能、各環境でコンポジションファイルが保存される場所、プレビュー／レンダリングの方法、どちらも利用できない場合のインストール／ブートストラップ手順について説明します。また、ディスク上にすでにある Remotion プロジェクトへのフォールバック方法も説明します
motion-floor.md	あらゆる制作、どちらのレジスターでも必須 — 制作の普遍的な最低基準です。30fps、f(sec) ヘルパー、clampOpts、S = width/720 スケールシステム（縦型）＋抖音セーフゾーン、イージングライブラリ（Easing.out(cubic/exp/back)、spring）、trapezoid／エンベロープヘルパー、エクスポート三点セットの命名規則、最終フレームの規律（クリップはきれいな最終フレームと静止画の …Cover を保持する必要があります）
effect-catalog.md	ステップ 4 — エンジンの選択。 公開済みの 4 つの HyperFrames から抽出したエフェクトエンジンの用語集です。それぞれの特徴的な技法、用途、再利用可能なサブエフェクトについて説明します。CSS-3D ソリッド（キューブ／リング／カードスタック）、スタジアム／ピル型のマスクによるテーマ切り替え、ドリフトを含む区分的ポーズのタイムライン、台形データエンベロープ＋大きな数値カウンター＋ネットワーク線＋ギャラリーのワイプ、SVG ストローク描画＋パーティクルバースト＋スプリングオーバーシュートのマトリクスに加え、エディトリアルオーバーレイキット（ルーラーグリッド、コーナーラベル、十字線、アクセントラインのアウトロ）を収録しています
effects-menu.md	ユーザー向けの「à la carte」メニュー（動画動效清单）です。 スキルで使えるすべてのエフェクトを、技術用語を使わずに閲覧できるリストです。エンジン・リビール・トランジション・オーバーレイ・3D・サウンドそれぞれについて、「見た目」と「頼み方」を中国語で記載しています。ユーザーに選択肢を提示する場合（Frame Read 中、または「有哪些效果／どんなことができますか」と尋ねられたとき）、あるいは具体的なエフェクトを名指ししたユーザーの依頼を解釈する場合に読み込みます。以下の詳細ファイルへ案内します
beat-structure.md	ステップ 5 — タイムライン。 セクションではなくビートで考える方法、秒単位で H0…Hn を固定する方法、各ビートに役割を 1 つ割り当てる方法、「最初の 1.5 秒でフックを見せる」ルール（短尺）とワードマークで締めくくるルール（シネマティック）、レジスターごとのナラティブの骨格、最後のビートをただ止めるのではなく印象的に着地させる方法について説明します
reveals.md	ステップ 6 — テキストや要素の登場／退場の振り付け。 ポジティブな表現のカタログです。マスク付きの行上昇、文字／単語／行単位のリビール（粒度はテキストの長さに合わせる必要があります）、clip-path ワイプ、ぼかし／フォーカスプル、スケールポップのオーバーシュート、SVG ストローク描画を収録しています。また、スタッガーの規律、ヒーロー要素に固有の動き、退場の振り付け（enter × (1−exit)）についても説明します。テキストまたは複数の要素が画面に現れる場合は、必ず読み込んでください
sound-design.md	ステップ 7 — BGM、トランジション SFX、ミックス、同期。 Remotion の <Audio>／<Sequence> の仕組み、ENERGY＋ジャンルに合わせた BGM と冒頭／末尾のフェード、SFX→ビートの対応（whoosh／impact／click／riser）、ナレーション中のダッキング、そして音声と映像の同期の規律（すべての SFX と BGM のドロップをビート定数に合わせる）について説明します。サウンドを含むすべてのクリップで読み込んでください。つまり、すべてのクリップが対象です
registration.md	ステップ 8 — 実際に形にする。 エクスポート三点セットの要件、<Composition> と …Cover のペア、durationInFrames = COMPONENT_FRAMES、Folder の選択、カバー静止画の規則（縦長のポスター用クロップでは高さ 1440）、Studio でのプレビュー／フレームのレンダリング方法について説明します
anti-cheap-motion.md	納品前に必ず確認 — 動きの安っぽさを防ぐためのブラックリストです。すべての要素が同時にフェードアップする、linear イージング、均一な 0.5 秒の長さ、オーバーシュート／予備動作がない、動きがカクつく／途中で切れるエンジン、間延びしたビート、見せ場のないままフリーズする最終フレーム、transform/opacity ではなく top/left/width/height をアニメーションさせる、といった項目に加え、音声の安っぽさ（ストック音源、ジャンルの不一致、SFX の多用、同期ずれ）も含みます
showcraft.md	**品質評価基準 —「壊れていない」だけでなく、「良い」とされる条件です。 高品質なクリップに必要な 4 つのレイヤー（エンジン・リズム・リビール・サウンド）と、それらをつなぐ同期、10 点満点のスコア、そして 1 行のテスト（「ミュートしても内容が伝わるか？ 目を閉じてもこの動画らしい音がするか？ 同じフレームで両者がかみ合っているか？」）を説明します。クリップが「しっくりこない」のに事前チェックを通過するとき、audit の実行時、またはどのレイヤーを改善するか判断するときに読んでください
assets.md	ブリーフで実際の画像、フォント、音声が必要な場合に参照します。staticFile() と絶対 URL のアセットの違い、フォント読み込みの方法、各ランタイムでアセットを置く場所、objectFit の規律、生成・ソース素材・プレースホルダーの選択と承認手順について説明します
preflight.md	「完了」の前に行う最終チェックリスト — 制作の最低基準チェック、安っぽさのスキャン、リビールとサウンドのチェック、セーフゾーンのチェック（短尺）、登録チェック、動きを減らす設定時の最終状態、そして「動くことを証明する」手順をまとめています。必須ルールに 1 つでも違反していれば、納品物は壊れています

---

コマンド

frame-smith はデフォルトで全工程のビルドを実行しますが、既存のコンポジションを対象に反復作業を行うための動詞コマンドにも対応しています。これにより、変更が 1 つだけの場合に Brief Read 全体を再実行する必要はありません。各コマンドはリファレンスを 1 つ読み込み、1 つの作業を行います。

コマンド	カテゴリ	内容	リファレンス
craft [brief]	ビルド	全工程：環境ゲート → Frame Read → ダイヤル → フロア → エンジン → ビート → レジスター（デフォルト）	すべて
env	セットアップ	§0 の環境ゲートのみを実行します。利用可能なランタイムを報告するか、どちらも存在しない場合はインストール手順を示します	environment.md
engine [target]	調整	このクリップのエフェクトエンジンが合わない場合に差し替えます。カタログから選び直し、ビートは維持します	effect-catalog.md
beats [target]	調整	タイムラインを再構成します。エンジンには触れずに、Hn の境界を移動し、ビートを追加・削除・並べ替え、無音区間を修正します	beat-structure.md
reveals [target]	調整	テキストや要素の登場・退場の演出を振り付け直します。登場の画一性をなくし、タイミングをずらし、主役に独自の動きを与え、退場を追加します	reveals.md
sound [target]	調整	オーディオを再構成します。BGM を差し替え・調整し、ビートに合わせて SFX を再配置し、ダッキングや音声と映像の同期を修正します	sound-design.md
restage [target]	反復	既存のコンポジションをアップグレードします。まず監査を行い、問題が 1 つだけの場合は全体を再構築しません	anti-cheap-motion.md + preflight.md
slower [target]	調整	タイムラインを延ばし、イージングを柔らかくし、ENERGY を下げて、せわしないクリップを落ち着かせます	motion-floor.md
faster [target]	調整	タイムラインを圧縮し、ホールドを短くし、ENERGY を上げて、動きの鈍いクリップに活気を与えます	motion-floor.md
register [target]	反復	横向き↔縦向きに向きを変更します。セーフゾーンと基盤を配置し直し、新しいアスペクト比に合わせてエンジンを調整します	motion-floor.md
audit [target]	評価	読み取り専用の診断です。安っぽさを排除するブラックリスト、プリフライト、「動きを証明する」チェックを実行し、検出結果を出力します。変更は一切行いません。	anti-cheap-motion.md + preflight.md

ルーティングルール

1. 最初の単語がコマンドに一致する → そのコマンドのリファレンスを読み込み、それに従います。それ以降はすべて対象です。書き込みまたはレンダリングを行うコマンド（craft、engine、beats、reveals、sound、restage、slower、faster、register）では、§0 の環境ゲートが先に実行されます。存在しないランタイムに対して、コンポジションを編集することはできません。env と audit は環境ゲートなしで実行できます。
2. 最初の単語は一致しないものの、意図が明確に対応する（「慌ただしい／多すぎる」→ slower、「平坦すぎる／退屈／躍動感がない」→ faster、「エフェクトが違う／雰囲気が合わない」→ engine、「タイミングがずれている／中盤でもたつく」→ beats、「テキストが全部同じように表示される／登場の仕方が単調」→ reveals、「音楽が違う／换配乐／音效不对／音画不同步」→ sound、「縦型にして／竖屏／for 抖音」→ register、「このクリップを改善して／修正して」→ restage、「これは良い？／レビューして」→ audit）→ 該当するコマンドに振り分けます。2つ以上が当てはまる場合は、1度だけ質問します。
3. 引数がまったくない（単独の /frame-smith）→ ユーザーは「ここで何をすればよいですか？」と尋ねています。手間のかからないシグナルを確認し、価値の高い候補を上位2～3個、それぞれ1行の理由を添えて提示します。シグナル → 候補：
   • ランタイムが検出されない → env を先に案内します（ランタイムが存在するまで、ほかの操作はできません）。
   • ランタイムはあるが、何も作成されていない → craft を案内します（デフォルトで使用するレジスターを明記します）。
   • 作業ツリーに既存のコンポジションがある → 対象のファイル名を明記し、audit または restage の範囲をそのコンポジションに限定します。 要点を絞った候補を2～3個にします。表は予備の案内として使い、最初に提示するものではありません。
4. 対象はあるがコマンドがなく、新規作成する場合 → craft の全フロー（§0 の環境ゲート → §8）を実行します。「プロモーション動画を作って／HyperFrame のクリップを作って」に対するデフォルトです。
5. env と audit は読み取り専用です。 env はランタイムの状態を報告し、書き込みは行いません。audit は検出結果を報告し、編集は行いません。それ以外のコマンドはすべて、対象を変更する可能性があります。

自動起動の仕組みは変わりません。frame-smith は引き続き description に基づいて自然言語から起動します。コマンドは、置き換えではなく、精度を高めるために追加された入口です。

---

0. 環境ゲート（何よりも先に）· 必須要件

frame-smith 単独では動画を完成できません。 Remotion のコンポジションを書き出すには、ホストとレンダリングを行う何かが必要です。それを担うスキルは2つあります。

ランタイムスキル	提供内容	frame-smith の書き込み先
hyperframe	エフェクトテンプレートライブラリ（同梱の HyperFrames）に加えて、独自の Remotion プロジェクトも提供します。より高機能な方法で、effect-catalog.md のソースフレームから直接パターンを取り入れられます。	その src/compositions/HyperFrames/（または公開されているフォルダー）
remotion	テンプレートライブラリを含まない、基本的なランタイムです。スキャフォールディング、remotion studio、remotion render、<Composition> レジストリを提供します。より軽量な方法です。	その src/compositions/

確認手順（全手順は references/environment.md に記載）：

1. 利用可能なスキルの一覧とディスク上（プロジェクトの .claude/skills/、~/.claude/skills/、インストール済みプラグイン）から、2つのスキルを探します。少なくとも1つは存在している必要があります。
2. どちらも存在しない → 停止します。何も書き込みません。 そのことを明確に伝え、インストール方法を案内します。エフェクトが含まれる hyperframe を先に推奨し、ランタイムのみの代替として remotion を案内します。ユーザーが Remotion プロジェクトをディスク上にすでに持っているものの、スキルがない場合は、environment.md に frame-smith を直接そのプロジェクトに向ける代替方法が記載されています。パスを尋ね、決して推測しないでください。
3. どちらか一方が存在する → 対象ディレクトリ、登録ファイル、プレビュー／レンダリングコマンドが決まるため、どちらがあるか記録します。その後、§0.A に進みます。

このゲートを緩めてはいけません。Remotion がインストールされていないプロジェクトに美しいコンポジションを書き込んでも、ユーザーが実行できないファイルができるだけです。それは停止して確認するより悪い結果です。

0.A レジスターを決める（画面の向き、安全領域、コピーの分岐点）

• cinematic — 横向きの HyperFrame クリップ：1920×1080 · 30fps、約12～24秒、映像のみ、ナレーションなしで、最後はワードマーク／ロゴを印象的に見せて締めます。依頼に「宣传片 / opener / 片头 / showcase / HyperFrame / 电影感」とある場合、または4つの参考フレームのいずれかが指定されている場合のデフォルトです。ルート：強力なエフェクトエンジン（§4）、セーフゾーンによる制約なし。
• short — 縦向きのショート動画：1080×1920、抖音／小红书／视频号向けで、字幕＋ナレーションを入れる場合があり、冒頭約1.5秒でフックを決める必要があります。依頼に「竖屏 / 抖音 / 小红书 / 短视频 / 口播 / 带字幕」とある場合のレジスターです。ルート：すべてのピクセルに S = width/720 のスケールを適用し、抖音のセーフゾーンと字幕のリズムに従います（motion-floor.md）。

依頼で指定されていない場合は、質問を1つだけしてください — 画面の向きによって後続の数値がすべて変わるため、誤った推測は大きなコストになります。 「この動画は横屏电影感片头（无旁白）ですか、それとも竖屏短视频（可能带字幕/口播）ですか？」 と尋ね、回答を待ちます。

0.B 生成前に「フレームの読み」を出す — 確認を求めず、方針を示す

却下するデフォルトを先に挙げ、その後に方針を示します。3行です。

Lazy default (rejected): {the obvious motion cliché for this brief}
Frame Read: {subject} · {mood in 2–3 words} · register={cinematic|short} ·
            engine={the one effect engine} · duration={n}s · ENERGY={n} SPECTACLE={n} DENSITY={n}
Beats: {H0 hook} → {H1 …} → {Hn payoff}   (one line, seconds marked)

例：

Lazy default (rejected): logo fades in, three feature cards slide up one after another, soft synth.
Frame Read: developer-tool launch · precise + kinetic · register=cinematic ·
            engine=poster-cube tumble · duration=15s · ENERGY=6 SPECTACLE=8 DENSITY=4
Beats: 0.0 ruler+labels in → 2.9 cube enters → 3.7 tumble → 10.0 drift+wordmark → 12.6 accent flash outro

フレームの読みを示したら、そこで停止してください。まだコードを生成してはいけません。 確認または方向転換の指示を待ちます。方針を示し、却下する余地を伝えます（「キューブを採用する予定ですが、データパルスの印象を強めたい場合はお知らせください」など）。形容詞の候補を並べてユーザーに選ばせてはいけません。動きは言葉から選べるものではありません。依頼に本当に分岐がある場合（ハードでキネティックなキューブにも、温かみのあるパーティクルアルバムにもできるローンチなど）は、2つの案を説明して、どちらかを選んでもらいます。

0.C デフォルトを避ける

この依頼でありがちなモーションの陳腐な表現を特定し、それを超える案を出します。「製品ローンチ → デフォルトは ロゴのフェード＋カード3枚が順番に上へスライド＋穏やかなライザー。これではなく、{ビートの流れがある本格的なエフェクトエンジン}を採用します。」最もよく見られるモーションの手抜きは、すべてが同じ動き方で現れること（フェード＋translateY、linear または単一の穏やかなイージング、すべて同時に表示）です。references/anti-cheap-motion.md を参照してください。

0.D クイックスタート用ダイヤルの設定

依頼の手がかり	ENERGY	SPECTACLE	DENSITY
「电影感 / cinematic / 高级」	5	8	3
「科技 / 数据 / dashboard 视频」	6	7	7
「温暖 / 回忆 / 相册 / 情感」	4	7	4
「活力 / 潮 / 撞色 / 年轻」	8	6	5
「简约 / 克制 / 品牌片头」	3	5	2
「抖音 / 短视频 / 口播带字幕」	6	4	5
「产品发布 / launch / opener」	6	8	4

依頼にさらに明確な手がかりがあれば、すぐに設定を上書きします。

---

1. 3つのダイヤル

フレームの読みから、これらを明示的に設定します。テンポ、エンジンの野心度、画面に表示する情報量を決定します。

ダイヤル	1～3	4～6	7～10
ENERGY — モーションのテンポと勢い	ゆっくり、浮遊感、長めに止める、穏やかなイージング	適度なテンポ、明確なビート	素早いカット、オーバーシュート、切れのある back／exp イージング、短い停止
SPECTACLE — エフェクトエンジンの技術的な野心度（frame-smithならではのダイヤル）	CSSトランスフォーム＋フェード	順序をずらした表示、3Dの見せ場を1つ、Canvasのアクセント	CSS-3Dの立体、パーティクルシステム、マスクによるテーマ切り替え、カメラの揺れ、モーションブラー
DENSITY — 1ビートあたりの画面上の情報量	1ビートにつきアイデア1つ、ゆとりのある画面	バランス重視	データ量が多く、複数パネル、エディトリアルなオーバーレイ

1.A 「主張したスペクタクルを、実際に見せる」（必須）

SPECTACLE ≥ 7 の場合、クリップには実際に動作するエンジン（本物のCSS-3D立体、パーティクルのバースト、マスクによるテーマ切り替え、カウンター／ネットワークの構築など）がビートの間じゅう動きを保ち、最後はきれいな静止フレームに着地する形で必ず含まれていなければなりません。脈動するグラデーションでは不十分です。SPECTACLE 8を掲げながらクロスフェードだけを使うクリップは、破綻しています。スコープ内で動作するスペクタクルを実現できない場合は、ダイヤルを4～5に下げて、タイミングを完璧に整えたシンプルなクリップを仕上げてください。カクついたり、動きの途中で途切れたりする中途半端なエンジンは、絶対に作らないでください — 途中で止まる3Dタンブルは、3Dがない場合より安っぽく見えます。

2. エフェクトエンジンを1つ選ぶ（動画の魂）· references/effect-catalog.md

動画の個性を決めるのは、最後まで使い切る1つのエンジンです。カタログは、出荷済みの4つのリファレンスフレームを軸に構成されています。丸ごとコピーするメニューではなく、検証済みの組み合わせとして扱ってください。

エンジン	使用する場面	シグネチャーテクニック
ポスターキューブ・タンブル	小さなビジュアルが多数ある場合（ポスター、ショット、サムネイル）、エディトリアル／デザイン系のブランド、「ポートフォリオ／スタジオ／ギャラリー」	CSS 3D キューブ（perspective + preserve-3d + 面ごとのトランスフォーム）、区分的なポーズのタイムライン、ドリフトフェーズ、ルーラーグリッド＋ワードマークのオーバーレイ
カプセル・テーマフリップ	明るいテーマから暗いテーマへの展開、「ビフォー／アフター」、遊び心のあるキャンディーブランド、変化するヒーロー	spring の登場、仕様テーブルのトランジション、中央から広がり、フレーム全体を覆って明るいテーマから暗いテーマへ切り替えるスタジアム／ピル型マスク
アーキテクチャ・データパルス	データ／メトリクスのストーリー、実写写真、「重要な数字」、B2B／インフラ	7ビート構成、台形のイン／アウトのエンベロープ、データパネル＋ネットワーク線＋大きな数値カウンター＋ギャラリーワイプのトランジション
パーティクルバースト・アルバム	写真、思い出、感情的／温かな雰囲気、「私たちの1年／私たちの物語」、パーソナルな内容	SVG のストローク描画によるタイトル＋パーティクルバースト、被写界深度＋カメラの揺れを伴う3D リングカルーセル、モーションブラーを伴うカードスタックの吸い込み、spring のオーバーシュートによる爆発

規律（必須）：

• クリップごとにエンジンは1つ。 キューブ と リング と データパルスを重ねないでください。再利用可能なサブエフェクト（カウンター、ワイプ、オーバーレイグリッド）は彩りに使えますが、動きの中心となるエンジンは1つだけです。
• 読みやすさを段階的に高める。 エンジンをどのフレームで止めても、そのフレームの内容が伝わるようにしてください。エンジンが担うのは動きであり、最終手段として意味を伝えることではありません。
• 60fps、または簡素化。 アニメーションは transform／opacity のみを使い、top/left/width/height は決して使わないでください。滑らかさを下回る場合は、パーティクル数／面数／解像度を減らしてください。カクつくものは出荷しないでください。
• 最終フレームは意図して設計するもので、偶然の産物ではありません。 エンジンは、…Cover のエクスポートで静止画として保存できるよう、構成された静止画に収束します（motion-floor.md と registration.md を参照）。

---

3. モーション品質の最低基準（高級感を生む理由）· references/motion-floor.md

安っぽいクリップと高級感のあるクリップの違いは、主にタイミングを一貫して徹底することです。譲れない要件（詳しいレシピはリファレンスを参照）：

• 30fpsで、時間は秒単位で指定します。 const FPS = 30; const f = (s) => Math.round(s*FPS); — すべてのビート境界と遅延には f(seconds) を使い、手作業で推測したフレーム数は決して使いません。
• interpolate は必ずクランプします。 時間範囲をマッピングするすべての interpolate に const clampOpts = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }; を指定してください。クランプしないランプはビートを過ぎても動き続け、ドリフトの最大の原因になります。
• linear ではなくイージングを使います。 登場には Easing.out(cubic/exp)、オーバーシュートには Easing.out(back(…)) または spring を使い、ホールドは区分的な interpolate の平坦な区間として実際に保持します。目に見える動きに linear を使うと不自然さが露呈します。
• 縦型動画はスケールシステムに従います。 const S = width/720; を定義し、すべての絶対ピクセル値（fontSize、top、padding、borderRadius）に × S を適用します。1920固定の横型では不要ですが、値の比率は保ってください。
• 縦型動画は抖音のセーフゾーンに従います — 上 ≥ 160px、下 ≥ 220px、左 ≥ 44px、右 ≥ 120px（1080p）。範囲外のコンテンツはプラットフォームのUIに覆われます。（横型にはセーフゾーンによる制約はありません。）
• エクスポートの三点セット — すべてのコンポジションで、Component、ComponentCover（通常は縦長にクロップした静止画）、および COMPONENT_FRAMES（再生時間の定数）をエクスポートします。これが registration.md で使われる契約です。

ページで色を決めるように、モーションを設計してください。イージング／テンポの語彙を一度選んで固定し、単一の要素でさえ linear＋均一な0.5秒の動きに流れ込ませないでください。それは、モデルが最も多く見てきたパターンです。

4. ビートのタイムライン — 動画はページではなく、ビートで構成されます · references/beat-structure.md

レンダーコードを書く前に、秒単位でビートを決めます。各ビートの役割は1つだけで、境界は名前付き定数にします。

const H0 = f(0);      // hook / cold open
const H1 = f(2.0);    // establish
const H2 = f(5.0);    // develop (the engine's main move)
const H3 = f(9.0);    // peak
const H4 = f(12.0);   // resolve
const HEND = f(15.0); // payoff (wordmark / logo / CTA)
export const X_FRAMES = HEND;

どのレジスターにも共通するルール：

• 最初のビートで、次の1秒を見る価値を示します。 シネマティックの場合、エンジンまたはその可能性をすぐに画面に表示します。何もない3秒間の助走では、視聴者を引き留められません。ショートの場合、約1.5秒までにフックを届けます。そうでなければ、視聴者はスワイプしてしまいます。
• 1ビートにつき役割は1つです。 製品を紹介し、テーマを切り替え、カウンターを動かすビートは、3つのビートを1つに押し込んだものです。視聴者は内容を把握できません。
• 最後のビートで締めくくります。 最後のエンジンフレームでただクリップが止まると、未完成に感じられます。ワードマークが定位置に収まる、ロゴが完成する、アクセントラインが光る、マトリックスがタイトルに収束するなど、意図してデザインした見せ場で終えます。このフレームは…Coverの静止画にもなります。
• 間延びさせません。 すべてのビートは、動いているか、意図を持って静止しているかのどちらかです。何も変化せず、意図的に止めているわけでもない時間は、視聴者に見せるべきではありません。

各レジスターの物語の骨組みはリファレンスにあります（シネマティック：コールドオープン → エンジンの構築 → ピーク → ワードマーク、ショート：フック → 要点 → 実証 → 見せ場。ナレーションに合わせてカットします）。動きはすべて目的に基づかせます。動きの一つひとつに、理由を一文で説明できるようにします。

---

5. 作成と登録 · references/registration.md

.tsxを書いても終わりではありません。登録されていないコンポジションはStudioに存在せず、レンダーできません。

• 3点セットをエクスポートします： export const X_FRAMES = HEND;、export const X: React.FC = () => {…}、export const XCover: React.FC = () => <Scene frame={f(peakSecond)} />;。カバーには、最も構図が整ったフレームを固定します。
• 実行環境のRootにペアを登録します： <Composition id="X" … durationInFrames={X_FRAMES} fps={30} width={…} height={…} />と<Composition id="XCover" … durationInFrames={1} … height={taller-crop} />を、適切な<Folder>内に配置します。
• プレビューまたはレンダーで動作を確認します。 remotion studioで開くか、静止画または短い範囲をレンダーします。一度もプレビューしていないコンポジションは、完成していません（§8）。

---

6. 安っぽい動きの禁止リスト · references/anti-cheap-motion.md

完成を宣言する前に、リファレンスに照らして確認します。特に注意すべき問題点は次のとおりです。

• すべてが同じ方法で登場する — すべての要素に一斉にフェードとtranslateYを適用すること。動きが安っぽく見える最大の原因です。時間差をつけ、ベクトルを変え、主役には専用の動きを与えます。
• 画面上の動きにlinearイージングを使う、またはすべてを一律0.5sの長さにすること — 力学を感じられない動きは、スライドショーのように見えます。
• オーバーシュートも予備動作もない — springで行き過ぎてから落ち着く動きがなく、すべてが滑らかに動いて急停止します。単調です。
• 動作中にエンジンがカクついたり、途中で途切れたりする — ぎこちない3D回転、突然消えるパーティクルの爆発、破綻するマスクのワイプなど。試さないよりも悪い結果になります。
• 間延びしたビートや、見せ場もなく単にフリーズする最後のフレーム。
• transform/opacityではなくtop/left/width/heightをアニメーションさせること — カクつきの原因です。
• ショートで字幕やCTAをTikTokのセーフゾーンの外に配置すること — プラットフォームのUIに隠れて切れてしまいます。
• ストックの動きを使い回すこと — テンプレートギャラリーで見かけるScrollReveal風のフェードアップとスタガーをそのまま使うことです。動きを使うなら、その価値を示します。

---

7. パフォーマンスと正確性のガードレール

• transform／opacity のみをアニメーションさせます。top/left/width/height は使用しないでください。
• 時間範囲にわたるすべての interpolate に クランプ（clampOpts）を適用します。区分的なポーズチャンネルは、入力配列内で単調でなければなりません。
• durationInFrames はエクスポートされた X_FRAMES と一致させます。一致しない場合、クリップが途中で切れるか、不要な末尾が残ります。
• アセットには staticFile() または安定した絶対 URL（assets.md）を使用します。レンダリング時に壊れる裸の相対パスは使用しないでください。
• **モーション低減／最終フレーム：**クリップは、…Cover で静止させられる、構成の整った最終フレーム（見せ場）に到達する必要があります。静止画ビューアーには、遷移途中のにじみではなく、完成したポスターを表示してください。
• 縦型：すべてのピクセルを S 倍に拡大縮小し、コンテンツをセーフゾーン内に収めます。字幕は句読点で分割し、ナレーションのビートに合わせて切り替えます（motion-floor.md）。

---

8. 納品前チェック · references/preflight.md

「完了」と伝える前に、チェックリストをすべて実行します。クラフト最低基準のチェック、粗悪さのスキャン、セーフゾーンのチェック（簡易版）、登録状態のチェック、モーション低減／最終フレームの状態確認、および 動作を実証する 手順（Studio プレビューまたは静止画のレンダリング）が含まれています。重大なルールに違反している場合、それは壊れた状態での納品です。納品前に修正してください。

---

8.A 納品後の反復ガイド

フィードバックに応じて、対象を絞って修正します。1つの指摘に対して、最初から作り直してはいけません。

ユーザーの発言	コマンド	対応
「せわしなすぎる／盛り込みすぎ」	slower	タイムラインを延ばし、イージングを弱め、ENERGY を下げます
「平坦すぎる／退屈／動きがない」	faster	ホールドを短縮し、オーバーシュートを加え、ENERGY を上げます
「エフェクトが違う／雰囲気が合わない」	engine	effect-catalog.md から選び直し、ビートは維持します
「タイミングがずれている／途中が間延びする」	beats	Hn の境界を再編集し、間延びしたビートをなくします
「縦型にして／竖屏／抖音」	register	スケールとセーフゾーンを再設定し、エンジンに合わせて調整します
「エンディングが弱い」	beats	見せ場のビートを再設計し、最終フレームをしっかり決めます
「カクつく／コマ落ちする」	restage	transform/opacity に切り替え、パーティクルや顔の数を減らし、60fps を再確認します
「これは良いのか／レビューして」	audit	読み取り専用：ブラックリスト＋納品前チェック＋動作の実証

---

9. 対象外

frame-smith は Remotion コンポジション向けのモーションディレクター です。実写映像の編集（コードなし）、音声のみの作業、静止画／ポスター（モーションではなくデザインスキルの仕事）、または frame-smith の §0 ゲートが見つけられず、ユーザーもインストールしない動画ランタイムが必要な作業は、適切な担当者に引き継いでください。ランタイム自体は管理しません。hyperframe／remotion スキルも Remotion プロジェクトもディスク上にない場合、frame-smith の役割はその旨を伝えてインストールを案内することであり、レンダリングしたふりをすることではありません。