codeswithroh/motion-lab

Motion Lab

ディレクテッド・モーション作品。すべての形容詞は数値に、すべてのフォローアップは測定値になり、フィルムは実際の仕組みが動いているところを見せます。参考ビルド: このスキルの examples/cofoundr/ (SPEC.md、compositions/、REVIEW.md、preview.mp4)。セッションで最初のビルドを行う前に必ず読んでください。

レンダリング契約のために hyperframes を読み込み、以下の手順に従ってください。hyperframes のルールがフォーマットにおいて優先され、このスキルはストーリー、ルック、プロセスにおいて優先されます。

1. ソースを読む

何かを書く前に、主題そのもの (リポジトリ、README、メインのルートまたはパイプラインファイル、価格、ライブサイト) を読んでください。以下を抜き出します:

• メカニズム: 実際の手順を順番に (関数名、API 呼び出し、ステージ)。
• 実際の数値: データセットサイズ、カウント、重み、タイミング、制限。決して架空の数値を作らないこと。ソースが提供しない値は、削除するか、REVIEW.md で「例示」とマークします。
• ブランド: アクセントカラー (HEX)、セカンドカラー、ロゴ SVG、フォント、スタイルロックファイル。
• 開発者が引用したくなるような驚きの詳細 (クランプ、フォールバックチェーン、出荷されたバグ)。

もし相手がソースで使われていないテクノロジー (スポンサー、ツイートのツール) を挙げた場合、それを描かないでください。その旨を伝え、それが何をするものか尋ねてください。

2. SPEC.md を書く (ディレクテッドプロンプト)

曖昧なプロンプト (「クール、プレミアム、モダン」) には、ダークネイビー、グローリング、パーティクル、でっち上げのタグラインが付きます。ディレクテッドプロンプトにはフィルムが付きます。references/spec-template.md からプロジェクトルートに SPEC.md を書いてください。各行は数値です:

• GOAL, OUTPUT (デフォルトは 1080x1080、60 fps、X 向け), TIME (秒 × 60 = フレーム数)。
• LOOK: グラウンド、インク、ミュート、ルールカラー、アクセントとその意味、ディスプレイとボディのフォント (px サイズとトラッキング)、カードの半径とシャドウ。
• OBJECTS: 視聴者が認識しなければならないすべてのもの。製品の実際の UI から描画。
• MOTION: ロールごとのイージング、フレーム単位の duration と stagger (references/numbers.md)。
• SHOTS: フレーム範囲、それぞれのヒーロームーブ、視聴者が読むもの、次のショットへのハンドオフ。
• BANNED と QA (チェックすべきフレームと、それぞれが示すべき内容)。

3. ストーリー構成 (cofoundr フィルムを成功させた要素)

1. フレーム 0 でフックする。 最初のフレームがサムネイルです。フックラインはすでにそこに置かれ、ディスプレイセリフ、左寄せ、アクセントカラーの単語が 1 つ。大きなブランドシェイプがその横にあります。例: 「i couldn't find a cofounder.」と青い円。
2. 1 つの実例がメカニズム全体をたどる。 実際の入力 (ユーザーの LinkedIn URL、実際のクエリ) がプロダクトカードに入り、すべてのステージを通過します。フックのシェイプはカードの中へ運ばれ (アバターになります)、視聴者は決して流れを見失いません。
3. ステージレール が上部にあり、実際のステージ名 (「あなたをエンリッチ、7 億人を検索、30 人をスコアリング、イントロを自動作成」) を表示し、映像がそのステージに達するたびに各ノードを光らせます。これがフィルムに組み込まれたアーキテクチャ図です。
4. 各ステージは独自のピクチャーシェイプを持つ: 入力フィールド、7 億から 30 に絞り込まれるドットのフィールド、スコア順に並べられ上位 10 がアクセントカラーで保持されるバー、出力をタイプする結果カード。似たようなラインが同じピクチャーになることはありません。
5. ペイオフ = ロゴに意味が宿る瞬間。 2 つのシェイプ (あなたとマッチ) がスライドしてロゴになり、ワードマークがぼやけて現れ、主要な数値が 1 行で表示されます。2 秒以上、完全に静止。

長さは 15～17 秒。ループを希望する場合は 15 秒未満。

4. ルック

デフォルトは製品のライトアプリシェル。暗い虚空ではありません: グラウンド #f0f2f8、白いカード radius 28、0 18px 40px rgba(15,23,42,.08)、インク #0f172a、ミュート #64748b。 ディスプレイ: ブランドのセリフ (assets/fonts/ にダウンロード、使用するすべてのシーンで @font-face を記述)。ボディ: Inter 500/700。テキストは最低 28 px で読めること。アクセントはフレームごとに 1 つのフォーカスをマークします。

禁止: ダークネイビーの虚空、グロー、ブルーム、ネオン、パーティクル、紫/青のグラデーション、ガラスカード、モノスペース大文字ラベル、ピル型チップ、すべて中央揃え、すべての要素がフェードアップ、着地後に漂うタイトル、隅にドッキングされたロゴ、3 枚並びのカード、KPI グリッド、実在の人物の顔や名前を偽の候補として使用すること。

5. ビルド

• <slug>-video/ 内で npx hyperframes init <dir> を実行。ルート index.html は 3 つのシーンをマウント: hook、メカニズムシーン (UI が動作している間の 1 つの連続フレーミング)、payoff。
• すべての乱数はシード指定 (mulberry32)。生成されたドットとバーは、時間指定されたシーンの子要素とします。
• すべてのトゥイーンに fromTo を使用。同じターゲットに対する 2 回目以降の fromTo では、immediateRender: false を設定。
• メカニズムシーンにはタイムシフトヘルパー (const at = (t) => t + …) を保持し、リタイムが 1 行で済むようにします (20 行にならないように)。
• 変更される可能性のあるコピー (URL、見出し) はコンポジション変数に格納します。

6. ラボループ (証拠付きフォローアップ)

最初のビルドを決して信頼しないでください。各パスの後:

1. npx hyperframes check --json を実行し、すべてのエラーを修正。line_unread はラインを長く保持するか (0.5 秒 + 単語あたり 0.3 秒)、単語を削減することを意味します。タイプサイズは決して縮小しないでください。
2. npx hyperframes snapshot --at <各ショットの中間と終了> を実行し、コンタクトシートを読む。
3. 各問題を、リファレンスと同じように数値を含む番号付きフォローアップとして記述: 「need タグが画面に 0.56 秒表示、下限 1.27 秒: 0.9 秒で着地させ、それ以降のすべてを 1.6 秒から +0.6 秒シフト」。REVIEW.md に記録。
4. レンダリング後、MP4 自体からシームフレームを抽出し (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1")、確認します。

7. 音楽

ユーザーが指定したトラックを使用します (assets/audio/ にコピー)。ない場合は、トラックを依頼するか、フレーム番号からコードで合成したスコアを提供します (references/sound.md)。

1. python3 scripts/find_drop.py <track> でラウドネスマップと、正確な onset とその周辺のビートを持つ最大のドロップを出力。
2. フィルムのヒーローモーメント (ロゴシェイプが触れる瞬間、結果が着地する瞬間) を選択。それが実際に発生するフレームを計算 (back.out(1.4) ではシェイプがトゥイーンの約 23% で接触)。
3. data-media-start = ドロップ onset − ヒーロー時間。最も近いビートにスナップして、フィルムがビートで開始するようにします。サウンドは画像の 後 0～1 フレームで着地し、決して先にはなりません。
4. <audio id="music" class="clip" data-start="0" data-duration="<film>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">。
5. レンダリング後、測定: npx hyperframes audio <mp4> --json で、ヒーローフレームの 1 フレーム以内に onset があり、ラウドネスが -16 ～ -14 LUFS、トゥルーピーク ≤ -1 dBTP であることを確認。「聞いて判断した」ではなく「測定した」と報告します。

8. 納品

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4 を実行。その後 ffprobe でサイズ、fps、フレーム数を確認。
• MP4 をユーザーに送信。
• REVIEW.md: 創造的な判断、測定した内容、最も弱いビート、意図的に残した警告。
• 投稿ドラフトをユーザーの声で作成 (デフォルト: 小文字、フックが最初、短い行、メカニズムを > ステップとして、コードからの実際の詳細 1 つ、誇大広告なし)。決して投稿しないでください。