extreme-motion-design

モーションデザイン

コードでモーションデザイン動画を作成し、音声と検証も行います。エージェントはコードを書いている間、動画を見ることができません。そのため、アニメーションを作る前に方向性を明示し（direction.json）、レンダリング前に計測し（lint.py）、フレーム内のテキストを計測し（layout.py）、作品に独自の方向性があるか、モデルの既定の構図に陥っていないかを計測し（design.py）、コードを書いていないレビュアーによる確認を経て、数値ゲートを通過してから納品します（qa.py）。ユーザーの参照動画がある場合は、その構成を指標として新しい作品の忠実度を評価します（reference.py）。

パスはこのスキルのフォルダー（<skill>）を基準とします。依存関係のあるスクリプトは必要なものをすべてインラインで宣言しています（PEP 723）。uv run <skill>/scripts/x.py で実行してください。voice.py、lint.py、gl.py は標準ライブラリのみを使用し、python3 で実行できます。stills.cjs と render.cjs は、プロジェクトフォルダー内で node を使って実行します。

必須のワークフロー

1. 5行のブリーフ：目的、対象者、形式（16:9、9:16、1:1）、長さ、トーン、ブランドを記載します。形式または長さが不足している場合は、16:9、30 fps、15〜30秒を仮定し、何を仮定したかを伝えます。
2. ブランド：サイト、リポジトリ、製品のスクリーンショットがある場合は、uv run <skill>/scripts/brand.pyを実行し、出力されたbrand.json（色、フォント、ロゴ、および各値の出典を含む）を使用します。以前の動画のbrand/フォルダーがすでにある場合は、再利用します。情報源がない場合は、色とフォントをユーザーに尋ねます。ブランドを推測してはいけません。詳細はreferences/brand.mdを参照してください。
3. 音声について質問（必須）：python3 <skill>/scripts/voice.pyを実行し、表示された質問を3つの選択肢（音声なし、ElevenLabsの音声、ローカル音声）とともにユーザーに尋ねます。エージェントの質問ツールがある場合はそれを使い、回答を待ちます。ユーザーに代わって選んではいけません。依頼文で明確に回答済みの場合に限り、省略できます。詳細はreferences/narration.mdを参照してください。
4. プロジェクト：<skill>/assets/template/を動画フォルダーにコピーし、gitignoreを.gitignoreに名前変更して、brand.jsonをpublic/にコピーし、npm installを実行します。マップはreferences/template.mdを参照してください。
5. 演出（シーン作成前に実施）：references/design.md、references/direction.md、references/doctrine.mdを読みます。ユーザーから参考動画が提供された場合は、最初にreference.py analyzeを実行し、references/reference.mdに従います。異なる演出案を2〜3個作成します（design.md末尾のシートを使うか、題材から案を作成します。巨大なコンデンス体、ほぼ黒の背景にアクセント1色、隅にモノスペース体という標準の組み合わせは使いません）。各案のスタイルフレームを作成し、contact_sheet.py --imagesでまとめてユーザーに見せ、選んでもらいます。選択内容をdirection.jsonに記録します（コンセプト、ビジュアル上のルール、理由、および各シーンのレイアウト、登場、主役）。依頼文で選択を明確に委任された場合は、自分で選び、"approved_by": "agent"を記録し、納品時にその旨を伝えます。
6. 台本とスコア：roteiro.json（シーン、台詞、名前付きマーカー、SFX）を作成します。uv run <skill>/scripts/score.py --dryで有料文字数を確認し、その数を伝えてから--yesを実行する許可を待ちます。スクリプトはフレーズごとに音声を生成し、スコア（public/timeline.json）とマーカー（public/cues.json）を作成します。映像は音声に合わせます。シーンに手書きのフレーム番号を記録してはいけません。形式はreferences/score.mdを参照してください。
7. 音楽とSFX：music.py（Incompetech、次にOpenverse、最後にローカル生成）、カットをビートに合わせる場合はbeats.pyを使います。ダウンロードしたファイルはすべてcredits.jsonに記載します。詳細はreferences/audio.mdを参照してください。 音声の承認（音声ありの場合）：mix.pyを実行し、アニメーション作成前にユーザーが確認できるようpublic/audio/mix.wavを渡します。音声のみを変更する依頼では、score.pyとmix.pyを再実行してユーザーに再確認してもらいます。レンダリングとコンタクトシート作成は行いません。
8. シーン：<Scene id>とuseScene(id).at('marca')で時間を指定します。theme.tsで色とフォントを指定し、useFormat()でスケールとセーフエリアを取得します。まずreferences/blocks.mdで使えるブロックを探し、その後でプリミティブを組み合わせます。使用する手法のリファレンスだけを読みます（以下のルーターを参照）。
9. Lint（レンダリング前に毎回実施）：プロジェクトフォルダーでpython3 <skill>/scripts/lint.pyを実行します。FAILはすべて修正し、WARNはそれぞれ評価します。
10. デイリー：node <skill>/scripts/stills.cjs <Composição>を実行すると、1つのプロセスで各シーンの冒頭、中間、末尾をレンダリングし、各フレームのテキストを測定します。uv run <skill>/scripts/layout.py out/stills --timeline public/timeline.jsonは、テキストの切れ、重なり、小さすぎ、コントラスト不足、セーフエリア外を検出し、同じ構図のシーンがある場合に警告します。uv run <skill>/scripts/design.py out/stills --timeline public/timeline.jsonは、モデルの標準的な画面の特徴を数えます。判定が「モデルの標準」の場合は、仕上げに進まず演出に戻ります。contact_sheet.py --stills out/stillsでシートを作成します。画像を確認し、references/qa.mdのチェックリストに照らして修正し、FIXがなくなるまで繰り返します。ループ内でremotion stillを呼び出してはいけません。
11. 独立レビュー：コンタクトシートとブリーフを、クリーンなコンテキストのサブエージェントに渡し、references/critic.mdのテキストを添えます。シーンを書いた本人がそのシーンを承認してはいけません。サブエージェントを利用できない場合は、独立レビューを実施していないことを納品時に伝えます。
12. ミキシング、レンダリング、納品、ゲート：

    uv run <skill>/scripts/mix.py public/timeline.json
    python3 <skill>/scripts/gl.py Showcase                      # プロジェクトごとに1回：グラフィックスバックエンドを計測
    node <skill>/scripts/render.cjs Showcase                    # または --formats reels,square,youtube
    uv run <skill>/scripts/deliver.py out/render.mp4 -o out/final.mp4
    uv run <skill>/scripts/qa.py out/final.mp4 --profile youtube --timeline public/timeline.json --stills out/stills
    uv run <skill>/scripts/contact_sheet.py out/final.mp4 --timeline public/timeline.json -o out/sheet.png
    

    参考動画がある場合は、reference.py compare reference/reference.json out/final.mp4 --timeline public/timeline.jsonで締めくくり、評価を伝えます。 レンダリング後の修正：render.cjs Showcase --scene <id>で該当シーンだけを作り直し、マスターを再構成します。全体レンダリングには上限（budget.full_renders、既定値は4）があり、上限を超えるとスクリプトが拒否します。qa.pyでFAILがない場合に限り納品します。
13. 誠実な納品：MP4、コンタクトシート、クレジットのテキスト、およびWARNになった項目、演出を承認した人、代替手段に切り替えたリソース（音声、音楽、形式、簡略化したシーン）の一覧と、未検証の項目を提出します。

絶対に守るルール

• すべての視覚的な状態は useCurrentFrame() から導きます。禁止事項：CSS のトランジションやアニメーション、animate-* クラス、setTimeout、Date.now()、Math.random()（random(seed) を使用）、React Three Fiber の useFrame()。守らないと、レンダリングがちらついたり、プレビューと異なる結果になったりします。lint.py で不合格になります。
• カーブとスプリングは src/lib/motion.ts のトークンのみを使用します。入場には enter または sharp、退場には exit、位置や形状の変化には move、ズームアウトとリビールには settle、シーンのヒーローには easeX.emphasized、連続回転とループに限り linear を使用します。bounce や elastic は決して使用しません。オーバーシュートは 1 つだけ（easeX.overshoot または springs.snappy）とし、フォーカス中の要素に限って使用します。easing を指定しない interpolate() は線形です。tween() または keys() を使用してください。
• タイミングは楽譜から、色はテーマから取得します。シーンにフレーム番号や単独の HEX 値を書かないでください。useScene(id).at('marca') と C.* を使用します。
• 各シーンには、それぞれ固有のレイアウト、入場、ヒーローを用意し、direction.json で宣言します。隣接するシーンでレイアウトと入場の組み合わせを繰り返してはいけません。ビジュアルモチーフは作品全体を通して使います。同じカードをすべてのシーンに使い回してはいけません。
• 実画像は、ライセンスを確認した素材（stock.py）またはユーザー提供のものに限ります。商用作品では、第三者の認識可能な顔、ブランド、最近の作品を使用しないでください。
• 参考作品から再現するのは、構成、リズム、技法です。フレーム、アセット、ロゴ、テキスト、音楽、音声は決して流用しないでください。
• 一度に動かすプライマリアクションは 1 つだけにします。セカンダリアクションは振幅の 30% 以下、環境要素は 5% 以下にします。スタガー全体は 500 ms 以下にします。退場の長さは入場の約 75% にします。最初のアニメーションはカットから 0.1～0.3 秒後に開始します。到着のたびに 0.4～0.8 秒ホールドし、クライマックスの前には 0.3～0.75 秒間を空けます。
• テキストは最低でも 1.5 秒 + 1 語あたり 0.3 秒、pt-BR では 1 秒あたり最大 17 文字まで表示します。最大 2 行、1 行あたり 32～42 文字にします。
• セーフエリア：アクションは画面の 90% 以内、テキストは 80% 以内に収めます。9:16（1080x1920）では、テキストを y 360～1420 の範囲に配置します。短辺が 1080 の場合、文字サイズは 28 px 以上にします。意図的に画面からはみ出す装飾テキストには data-decor を付けます。
• モーションブラーは動画内の素早い動き 1～3 回に限って使用し、読み取る必要のあるテキストには決して使用しません。
• AI 生成らしい見た目は避けます。全画面の紫色のグラデーション、すべてをフェードインさせる演出、ありきたりなグロー、絵文字、すべてを中央に配置することは禁止です。アクセントカラーは 1 色にし、コントラストは WCAG AA に準拠させます。
• 画面上に、作り物の数字、ロゴ、事実を表示しないでください。ユーザー提供のデータか、出典のある情報を使います。
• 音楽は cc0、pdm、by（または生成したもの）のライセンスに限ります。nd、sa、nc、sampling+、ライセンス不明のものは決して使わないでください。
• API キーをチャット、コマンド、ログ、バージョン管理対象のファイルに記載しないでください。ユーザー自身がプロジェクトの .env に保存します。

技法ルーター

技法	参照先	プリミティブまたはスクリプト
グラフ、カウンター、デバイスフレーム、キャプション、コードウィンドウ、カーソル、ローワーサード、ロゴスティング	references/blocks.md	src/blocks/*
キーフレーム、スムーズなモーション、イージング、スプリング	references/techniques-motion.md	keys(), tween(), pop(), springs
ズームイン、ズームアウト、プッシュイン、パン、ウィップパン、パララックス、手持ちカメラ	references/techniques-motion.md	<Camera>, <Layer depth>, wiggle()
モーショングラフィックス（図形、線、データ、ロゴ）	references/techniques-motion.md	shapes.ts, strokeDashoffset, @remotion/shapes
キネティックタイポグラフィ	references/techniques-motion.md	<KineticWords words={WORDS}>
モーフィング	references/techniques-motion.md	morphPath() (flubber)
シームレスループ	references/techniques-motion.md	loopPhase(), loopNoise(), qa.py --loop
UX/UI モーションとマイクロインタラクション	references/techniques-motion.md	springs.snappy、弧を描くカーソル、リップル
アンティシペーション、オーバーシュート、フォロースルー、スクワッシュとストレッチ、スミア	references/techniques-advanced.md	anticipate(), easeX, lag(), squash(), smear()
カスケード、スピードランプ、タイムリマップ、速度カーブ	references/techniques-advanced.md	cascade(), timeRemap(), velocity()
マッチカット、モーフカット、見えないカット、JカットとLカット、アイリス、シェイプトランジション、リキッドトランジション	references/techniques-advanced.md	<IrisReveal>, <GooeyFilter>, @remotion/transitions
マット、トリムパス、リピーター、ベースラインリビール、カウンター、エコー、シャイン、レンズ効果	references/techniques-advanced.md	<MaskReveal>, ticker(), <Echo>, <Shine>, <Grain>
フレームバイフレーム、セルアニメーション、ストップモーション	references/techniques-character.md	stepped(), <BoilFilter>, jitter()
リギング、IK、リップシンク	references/techniques-character.md	twoBoneIK(), fabrik(), forwardKinematics(), visemeFor()
3D モーション	references/techniques-3d-compositing.md	@remotion/three + <ThreeCanvas>
コンポジット、レイヤーとしての実写映像	references/techniques-3d-compositing.md	ブレンドモード、マスク、<Grain>、クロマキー
無料で使用できる実写写真と動画、ケン・バーンズ効果、写真の2.5Dパララックス、デュオトーン、文字の中の動画	references/stock.md と references/design.md（セクション6）	scripts/stock.py
参照動画の構成を再現する	references/reference.md	scripts/reference.py
モーショントラッキング、顔や手に固定されたグラフィック	references/techniques-3d-compositing.md	scripts/track.py (--point, --face, --hand) + <Tracked>
マッチムーブ	references/techniques-3d-compositing.md	track.py --quad + <CornerPin>、scripts/matchmove.py
ロトスコープ	references/techniques-3d-compositing.md	scripts/roto.py（アルファ付き PNG または SVG パス）

フレームのデザインと6つのアートディレクション（references/design.md）、ディレクションと契約（references/direction.md）、参照モード（references/reference.md）、無料アセット（references/stock.md）、脚本とスコア（references/score.md）、ブランド（references/brand.md）、ブロック（references/blocks.md）、ナレーション（references/narration.md）、オーディオ（references/audio.md）、QA、予算、納品（references/qa.md）、レビュアー（references/critic.md）、モーションの原則（references/doctrine.md）、テンプレートの構成（references/template.md）。

音声とオーディオのコマンド

python3 <skill>/scripts/voice.py                                   # mede o hardware e monta a pergunta de voz
python3 <skill>/scripts/voice.py --check-key                       # valida a chave da ElevenLabs sem gastar
python3 <skill>/scripts/voice.py --audition "Primeira frase." -o out/vozes   # mesma frase em cada voz local
uv run <skill>/scripts/score.py --dry                               # custo e o que seria gerado, sem gastar
uv run <skill>/scripts/score.py --yes                               # voz frase a frase + partitura + marcas
uv run <skill>/scripts/align.py public/audio/narration.wav roteiro.txt    # tempos por palavra para qualquer WAV
uv run <skill>/scripts/align.py filmagem.mp4 --transcribe -o public/audio/fala   # fala de uma filmagem, sem roteiro
uv run <skill>/scripts/tts.py --normalize-only "Plano de R$ 49,90 às 14h30 com IA"                  # confira a pronúncia
uv run <skill>/scripts/music.py incompetech --feel calm --bpm 70-110 --min-sec 60 -o public/audio/music.mp3
uv run <skill>/scripts/music.py generate --sec 30 --bpm 84 --mood calm -o public/audio/music.wav    # offline
uv run <skill>/scripts/beats.py public/audio/music.mp3 --fps 30                                   # cortes na batida
uv run <skill>/scripts/sfx.py --all public/audio/sfx                                              # whoosh, pop, click...

停止して質問するタイミング

• ステップ3の音声に関する質問と、ステップ5のディレクションの選択。
• ユーザーから提供されていないロゴ、ブランド、数値、または証言。
• 有料 API（音声、音楽）に費用をかける前：score.py --dry の数値を伝え、承認を待ちます。
• ライセンスが cc0、pdm、by と異なる楽曲。
• フルレンダーの予算を超過した場合：確認が必要な項目と、スチルだけでは不十分な理由を伝えます。
• Remotion を使用するユーザーの会社で、利用者が3人を超える場合：Company License について注意を促します。