リールモーショングラフィックス

リールモーショングラフィックス は何をしますか？

このスキルは、「Upcycling in 30 Seconds」で最初に構築されたハウススタイルでリールを作成します。template/ は、そのリールを動作するHyperFramesプロジェクトとして保持しているため、何も変更しなくても新しいコピーが正しくレンダリングされます。あなたの仕事は、以下のすべてのルールを守りながら、そのコンテンツを新しいスクリプトのものに置き換えることです。

コンポジションHTMLを作成する前に、コンポジションコントラクトのために /hyperframes-core をロードしてください。references/primitives.md にないモーションパターンが必要な場合にのみ /hyperframes-animation をロードしてください。

1. スクリプトを読み、ビートを計画する

以下を収集または推測し、フィルムを変更するものについてのみ質問してください。

• スクリプトまたはコンセプト。 必須です。
• プレゼンターフッテージ（MP4）または静止画。ない場合は、テンプレートのプレースホルダー静止画を維持します。
• タイトルのアイブロウ用のソースクレジット（例：ICLR 2023 · Author et al.）。
• ターゲットの長さ。 デフォルトは30秒。20～60秒で動作します。

スクリプトを次のように分割します：タイトルカード（約4秒）、2～5のステップ（各4.5～6秒）、オプションの結果/クローザー（約5.5秒）。各ステップについて以下を記述します。

• 見出し: プレーンな単語と1～2語のイタリック体のアクセント（「MLPを 8回 コピー」）、656px、60pxに収まるよう最大約22文字。
• キャプション: 1行目は最大約34文字の1文（Bodoniイタリック40px）、2行目は最大約40文字の補足文。
• 図解の動き: プリミティブの語彙（references/primitives.md → 「Writing a new diagram」）から。

キャプションがナレーションを反映する場合、1秒あたり約2.5語のペースで。計画をプロジェクト内の STORYBOARD.md（ビート、時間範囲、見出し、キャプション、視覚的動き）に書き、ユーザーに表示し、承認を得てから構築します。ユーザーがすでに承認した短いスクリプトは、直接構築に進むことができます。

2. スキャフォールド

このスキルはReel Creatorプロジェクト（.claude/skills/reel-motion-graphics/）内にあります。プロジェクトルートからコマンドを実行し、すべての新しいリールを reels/<slug>/ に配置します。以下のようなスクリプトパス（scripts/solve-fold.py など）は、このスキルのフォルダからの相対パスです。

.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]

プレゼンタービデオの場合は、index.html 内の <img id="presenter"> を以下に置き換えます。 <video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video> #presenter CSS（cover、20%アンカー、--fold の下）は変更せずに適用されます。

3. 構築：最初にデータを編集し、次に図を書く

ファイル	変更する内容
index.html	ルートおよびホストの data-start/data-duration を計画に合わせます。ホスト：bg（全体）、title（0～4）、headings および diagram（4～終了）、result（そのウィンドウ）、captions（全体）、presenter（全体）。
compositions/title.html	アイブロウクレジット、2行の表示行、2行のテーゼ行、およびアイデアが「1 → many」でない場合のミニ図。
compositions/headings.html	STEPS 配列のみ（ホストローカル秒）。バーと「Step n of N」はそこから派生します。
compositions/captions.html	CAPS 配列のみ（グローバル秒）。各ステップの開始から約0.35秒後に入力し、ステップの終了時に残します。
compositions/diagram.html	新しい主題のためにワールドを書き換え、プリミティブを使用します。レンズ/ワールド/ドリフト構造、トークンクロックパターン、背景の後退を維持します。
compositions/result.html	統計ラベル、値、カウンター、メタ行。スクリプトに数字がない場合はホストを削除します。
compositions/bg.html	通常は変更しません。そのヨーヨーの繰り返しをスケーリングして、ルートの継続時間で終了するようにします。

ライブラリに適切なグラフィックがない場合：HyperFramesリンクをリクエストする

ライブラリは references/primitives.md です。ビートに、どのプリミティブもカバーしていないビジュアル（チャートタイプ、マップ、タイムライン、比較、その他リストにないもの）が必要な場合、ゼロから即興で作成しないでください。一時停止して、ユーザーにリンクをリクエストしてください。

「ビート3（「2021年以降、収益が3倍になった」）には成長チャートが必要ですが、ライブラリにはありません。お好みのグラフィックのHyperFramesカタログリンクを送っていただけますか？ブランドに合わせてスタイルを変更します。」

ユーザーが選択しやすいように、npx --yes [email protected] catalog "<keyword>" から2～4つの候補をリストしてもかまいませんが、ユーザーに選んでもらってください。待っている間、他のビートの構築を続け、ギャップにラベル付きのプレースホルダーを残してください。

リンクが届いたら：

1. インストールします。 レジストリアイテム名は、カタログリンクの最後のパスセグメントです。プロジェクトから npx --yes [email protected] add <name> --no-clipboard --json を実行します。レジストリからのリンクでない場合は、ページまたはソースを読んで再構築します。
2. ハウスルールに合わせてスタイルを変更します。
   • 色をブランドトークンに、パネルを .glass に交換します。
   • opsz-18ファイルと共にBodoniおよびInstrument Sansを使用します。
   • すべての間隔値を4pxグリッドに配置します。
   • コンテンツ列とゾーンに合わせます。
   • 光沢、グロス、ドリフトのアクセントを追加します。
   • フラットで明るい塗りつぶし、他のフォント、ドロップシャドウスタイルなど、ブランドから外れたものを削除します。
3. 配線します。 グラフィックトラックのサブコンポジションホストとして、または継続的なワールドを共有する必要がある場合はそのモーションを diagram.html に組み込みます。その後、通常どおりチェック、スナップショット、修正を行います。
4. ライブラリに追加します。 references/primitives.md の「Restyled from HyperFrames」の下にエントリを追加します。名前、ソースリンク、表示内容、主要パラメータ。スタイル変更したファイルを template/compositions/library/ にコピーして、次回のリールで再度リクエストしなくても再利用できるようにします。

4. ハウスルール（すべてのリール、例外なし）

1. フォールドは等距離。 フォールドは、最も低いアニメーションコンテンツ（キャプション下部、約y 900）とプレゼンターの頭の上部の中間に位置します。scripts/solve-fold.py <presenter still or a frame> 900 で解決し、brand.css に --fold を設定します（4の倍数）。scripts/measure-fold.py <snapshot> <fold> で確認します。ビデオの場合は、頭が最も高いフレームを確認します。
2. 4pxグリッド。 すべてのパディング、ギャップ、オフセット、サイズ、行の高さは4の倍数です。コンテナは均等にパディングされ、コンテンツにサイズが合います。カードに固定の高さを決して与えないでください。scripts/audit-grid.sh <project> を実行します。許可される唯一の残りは、ヘアラインボーダー、グロー半径、トゥイーンモーションオフセットです。
3. 頑丈なセリフ。 fonts/ 内の *-opsz18.woff2 Bodoniファイルのみを使用します。可変フォントの自動光学サイズは、H.264および電話のダウンスケーリング後に消えるヘアラインディスプレイカットを選択します。可変ファイルまたはGoogleの6..96範囲に戻さないでください。
4. ゾーン。 アプリバー 0–175（クリアに保つ）、アニメーション 192–780、キャプションバンド 812–904、プレゼンターは --fold の下、コンテンツ列 x 172–828（右レールからクリア）。キャプションは1つのトラックのみに配置します。
5. 1つの連続した図解ワールド。 ステップ間で持続する要素は diagram.html に存在し、移動します。新しいシーンファイルで再入力されることはありません。
6. 決定論。 window.__timelines["<id>"] に登録された一時停止GSAPタイムラインのみを使用します。Math.random の代わりにシードされた rng() または hh() を使用し、requestAnimationFrame、クロック、ネットワークは使用しません。アニメーションカウンターとパーティクルは、プロキシトゥイーンの値の純粋関数です。
7. リントセーフな作成。
   • サブコンポジション自身のルートをターゲットにするには、document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])') を使用し、決して #root を使用しないでください（組み立て後、複数のルートがそのidを共有します）。
   • 要素idにコンポジションのプレフィックスを付けます（dg-、hd-、rs-、ti-）。
   • 要素とプロパティのペアごとに1つの fromTo を使用し、次に to を使用します。
   • letterSpacing、width、height、top、left をトゥイーンしないでください。代わりに変換と不透明度を使用します。
   • 単一のラベルを、静止時に重ならないようにずらします。
8. 外観。 ほぼ黒で暖かみのある背景に、漂う光とグレイン。すべてのパネルに .glass。アクセントにゴールドの光沢。すべてのホールドに小さなカメラドリフト。各完了状態を少なくとも1秒間保持します。

5. 確認してから納品する

プロジェクトディレクトリから以下を実行します。

npx --yes [email protected] check
npx --yes [email protected] snapshot --at <各ビートの中間点>

• check はエラー0でパスする必要があります。警告を確認します。
• コンタクトシートを確認します。密集したフレームを拡大してクロップします。重なり、クリップされたテキスト、ターゲットから外れたトークン、不均一なパディングに注意します。
• measure-fold.py と audit-grid.sh を実行し、フラグが立てられたものを修正します。
• npx --yes [email protected] render でレンダリングします。結果は renders/ に出力されます。電話表示用に30MB未満の共有コピーを作成します。 ffmpeg -i renders/<file>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4
• ライブプレイヤー: プロジェクトルートから node viewer/build.mjs を実行します。すべてのリールのライブプレイヤー（reel/ および各 reels/<slug>/）を再構築し、カルーセル viewer/index.html を書き出します。各リールのコピーが viewer/reels/ に作成されます。viewer/index.html をリールライブラリのアーティファクト https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR に公開し、files ですべての viewer/reels/*.html を渡します。ユーザーは埋め込みビデオよりもライブHTMLプレイヤーを好みます。単一のリール単独の場合は、そのフォルダで node build-preview.mjs を実行すると dist/preview.html が書き出されます。
• 実行時間、確認内容（フレーム、フォールドギャップ、監査）、およびまだ確認されていないものを報告します。

リファレンス

• references/primitives.md: すべての視覚的構成要素と、それを実装するファイル。
• template/: 完全なUpcyclingリール。品質基準です。新しい作品はこれと比較してください。