paper-collage-film は何をしますか？

コラージュフィルム = ちぎり紙の中を絶え間なく進むストップモーションカメラの旅。音楽にカットされ、タイトル、ロゴへのページティア、そしてコールトゥアクションで終わります。写真の切り抜き以外はすべてコードで処理されます。assets/template/ には、そのままレンダリング可能な完全な10秒フィルム（kaye.creatives YouTubeローンチ）が含まれています。ゼロから始めるのではなく、これを適応させてください。

このスキルのユーザーが期待すること（詳細は references/lessons.md）

最初にリファレンスを見ること。 送られてきたリンクはすべて開き、フレームを12fpsで抽出し、シートを読むこと。複数のリファレンスがある場合 → 最も気に入ったものを見つける。
リファレンスから技法を、ブランドからストーリーを。 動きの文法はコピーしても、プロットはコピーしない（ミーアキャットをミーアキャットにマッピングしない）。
コードが先、写真の切り抜きのみ生成。 生成された背景、人物、AIキャラクター（依頼がない限り）、動画生成は行わない。
選択肢は推測ではなくレンダリングされたシートで提示： タイトルフォント → tools/font_sheet.sh、色 → tools/palette_sheet.sh；ユーザーは番号で回答する。
迅速かつ可視化： ビートテーブル、切り抜きシート、ドラフトを早期に送り、現地時間でのETAを提示し、並行エージェントを使用する（references/agent_workflow.md）。
ユーザーの言語で話すこと。画面上のコピーは、依頼がない限り英語。全フレームフラッシュ（光過敏性）は禁止。

0 · インテーク（1回のメッセージで、推測できないことのみ一度だけ質問）

ブランド/ハンドルの正確な綴りと画面上のすべての単語 · 尺 · フォーマット（下記参照） · コピーの言語（キリル文字はフォントを変更） · CTA（購読/フォロー/訪問） · ロゴファイルまたはテキストロゴ · 音楽：合成または手持ちのトラック · 切り抜きに使用して良いクレジットの上限（約 N×2 クレジット）

フォーマット。 コラージュのレイアウトは 1920×1080のみ を対象に描かれています（collage.jsとscenes.jsは絶対座標を使用）。レイアウトを変更せずに9：16のリールにする場合：16：9のフィルムをレンダリングし、それを1080×1920のページに全幅（1080×608）で配置し、上下のちぎり紙の帯にタイトル、ハンドル、CTAを配置します。本当の縦型フィルムにするにはすべての座標を再配置する必要があります — その場合は追加時間を見積もってください。

1 · プロジェクト（1分）

<skill>/scripts/new_project.sh <output_root> <slug>             # 新規ブランド：パレットオフ（オリジナルの紙の色）
<skill>/scripts/new_project.sh <output_root> <slug> --example   # 出荷されたkaye.creativesフィルムを再現（夜のパレット）
cd <project>                                                    # 以下のコマンドはすべてプロジェクトディレクトリから実行（エージェント：各呼び出しの前に `cd <project> &&` を付ける）

comp/、audio/score.html、tools/（コンパイル済みの extract/encode/mux/greenkey）、cutouts/、refs/、review/ を作成します。macOS（Swift、AVFoundation、afconvert）、Chrome/Brave、Node ≥ 22（NODE_BIN=/path/to/node で強制指定可能。フォールバックがリンクされている場合は、export PATH="<project>/tools/bin:$PATH" で直接 node を呼び出せます — tools/*.sh は自動的にこれを行います）、Google Fonts用のインターネット接続が必要です。 切り抜きがない場合はラベル付きのグレーカードとしてレンダリングされる ため、生成前でもドラフトとして機能します。サンプルでは、cam_side、cam_front、car、helmet、phone、plane_front、plane_side、clap、reel、laptop、headphones、midi、phone_gimbal、cassette、cloud_1..4、rocks_a/b/c、tree_a/b、grass_strip が読み込まれます。

2 · リファレンス（10～15分）

リファレンスをダウンロードします（Pinterest：pin.it のリンクを解決 → pin ページ → v1.pinimg.com/videos/…/720w.mp4 または /mc/720p/ H.264 URL；GIF：ImageIO/Swift でフレーム分割 — ffmpeg は使用しない）。tools/extract ref.mp4 refs/f 12 960 0.85 を実行し、次に tools/sheet.mjs でコンタクトシートを作成します（キャプション = フレーム/12秒；tools/strip.sh は24fpsを前提としているため、12fpsフレームではラベルが実際の時間の半分になります）。内容をよく確認してください。refs/analysis.md に、references/reference_san_diego.md の見出しに従って、カット時間、動きの曲線、パレットの16進数カラー、類似フォント、必須コピーリスト — そしてリファレンス内のすべてのデバイスを CL/CLX デバイスにマッピングするか、「新しいデバイス」とマークし、サンディエゴから削除するデバイスをリストアップします。ユーザーのリファレンスが以下のサンディエゴの数値より優先されます。

動きの文法（サンディエゴの計測値 — references/reference_san_diego.md）

すべて on twos（12 フレーム/秒）：モーションタイム q(t) = floor(t*12)/12、1～2ピクセルのレイヤーの揺らぎ（boil）を各フレームに適用。
ロゴまでハードカットなし：ズームスルー、ページリップ、破れたワイプ、万華鏡の中の六角形の穴、ストリップロケットの背後からのティルトアップ。
ドロップイン：3 フレーム（エッジが入る → 空中で −8° → 着地） + 1 フレームの落ち着き（1.03→1）；ポップアップ：1～2 フレーム。
ディテールへのプッシュイン：約1秒で指数関数的ズーム ~1→6倍、ズーム中心はディテールに向かって線形補間。
万華鏡：ミラーリングされたリング、回転なし、スケールは約0.35～0.38秒ごとに倍増；ステッカーの繰り返しは1つのリングとしてのみ。
タイトルは上から着地、9フレームかけてイーズアウト、オーバーシュートなし、白い紙の輪郭＋遠近法による押し出し。
ページティア：約0.42秒、暗く丸まる裏面 → ワードマークが入った破れた帯；オルタナティブスタイルのフリッカーは2-1-2-3-2-2フレーム保持、帯の中で。

3 · ストーリー＋ビートテーブル（約15分以内に送信）

script.md を作成：time | music | what we see | on-screen text (verbatim)、120 BPM グリッド（ビート 0.5 秒、24 fps）。長さを選択：

10秒（出荷サンプル）

t	beat
0–1.0	コラージュページ；▶ ドロップ（0.5 着地）；チャンネルタグ；カーソルが ▶ を押す（0.875）
1.0	ページが中央から破ける → ワールド1（F1カーが斜めの帯を通る、中央 1.75；ヘルメットが 2.0 にスラップ；タグ）
2.5	破れたワイプ → フィルムカメラ、レンズへの加速プッシュ、ペーパーアイリス 2.9–3.4（タグ）
3.5–4.5	万華鏡リング、フライヤー 4.2/4.3/4.4、六角形の穴 → 机
4.5–5.5	机：ラップトップ 4.5、ギア 4.75/5.0/5.25、プロンプトがタイプされる、「generate ✦」5.15 → 結果
5.5–5.95	ティルトアップ、ストリップロケットが ▶ を運び去る
6.0	タイトル「KAYE / CREATIVES」（Fraunces Black Italic）、ラジアルバースト、複葉機が横切る
7.5–7.92	ページティア → ロゴ帯
8.0–8.5	ロゴフリッカー（帯の中）
8.5–10	SUBSCRIBE スラップ、クリック 9.0 → SUBSCRIBED ✓、ベル 9.15、スロープッシュ

6秒イントロ（すべての動画の前に再生：リップなし、机なし、CTAなし）：0–0.5 ヒーロードロップ · 0.75–1.5 ディテールへのプッシュ、アイリス 1.0–1.42 · 1.5–2.5 万華鏡、フライヤー 2.17/2.33、穴 2.33–2.5 · 2.5–2.96 ロケットティルトアップ · 3.0 タイトル（3.75 着地）+ バースト · 4.5–4.92 ティア · 5.0–5.5 帯フリッカー · 5.5–6 最終ヒット＋ホールド。スコア：dur 6、drop 0.5、mid 1.5、build 2.5、vac 2.95、lift 3.0、end 5.5。ロゴは画面上に 1.0 秒以上表示。

15秒プロモ（15秒のリファレンスを反映）：0–0.5 ヒーロードロップ · 0.5–2.5 ポップアップ · 2.5–3.5 プッシュ＋アイリス · 3.5–5.5 万華鏡、穴 5.33 · 5.5–7.5 ワールド2、フライヤーが導くバースト · 7.5–9.5 ワールド3 / プロダクトモーメント · 9.5–10.5 ロケット · 10.5 タイトル（11.25 着地） · 12.5–12.92 ティア · 13.0–13.5 フリッカー · 13.5–15 CTA。

30秒：assets/examples/kaye_30s_scenes.js + kaye_30s_score.html（電話広告、身代金文字、サムネイルウォール）。

別のブランドへの再スキニング

デバイス	kaye（YouTube）	例：コーヒーショップ
ヒーロードロップ	▶ 再生ボタン	カップ / 豆の袋（`CL.sprite` + `CL.drop`）
ポップアップ	カメラ小道具	クロワッサン、豆
リップ → ワールド1	帯を通るF1カー	ロースタードラム、農園
プッシュ＋アイリス	カメラレンズ（cam_front）	カップの中のクレマ（スプライトピクセルで中心と半径を測定；アイリス公式は api.md）
万華鏡リング	車、リール	豆、カップ（ステッカー1つにつき1リング）
机＋画面	プロンプトUI	カウンター＋注文チケット（`CLX.tag` / `CLX.ransom）— または削除
ロケット	ストリップ上の ▶	ストリップのプルーム上のカップ
タイトル / 帯	チャンネル名 / `kaye.creatives`	ショップ名 / ロゴまたは@ハンドル
CTA	SUBSCRIBE + ベル + カーソル	ハンドル＋住所チップ（`CLX.tag`）、営業時間スター（`CLX.star`）
`CLX.play`、`subscribe`、`thumb`、`screen`、`cursor` はYouTubeデバイスです。collage.js の背景は固定の切り抜き名を使用します（`CL.page`：grass_strip + rocks_；`CL.diag`：rocks_ + cassette；`CL.cloudsky`：cloud_1..4）：コード変更なしの再スキンは、同じ名前で代用画像を生成することです（grass_strip = コーヒー豆の破れた帯、rocks_* = 白黒ハーフトーンの袋）。そうでなければ、`pageLayers` を scenes.js にコピーします。新しい名前のために `warm()` の `cuts:` リストを更新します。

4 · 切り抜き（5分、それぞれ約2クレジット）

コードで描画できないもののみ。プロンプトテンプレート、サンプルセット、キーイングの詳細は references/cutouts.md を参照。tools/greenkey keyframes/raw/x.png cutouts/x → アルファチャンネル付きPNG、複数オブジェクトのシートは自動分割。色付き背景でチェックシートをレンダリングし、送信します。実際の ロゴファイル → cutouts/logo.png。CL.sprite でティアの drawUnder 内に描画します。フリッカーの見た目は logoBand スタイルの背景＋そのスプライト。テキストロゴの場合、サイズは min(190, 0.78·W / measured width)。

5 · コードでの編集

comp/scenes.js がフィルム本体です：COPY（画面上の単語）、シーン関数（pageScene、f1Scene、camScene、kalDraw、deskScene、titleBg、titleScene、endScene）、トランジション（wipe、ripDraw、tearDone）、K.setup({bars}) パンチズーム。COPY 以外の単語：プロンプトUIの「PROMPT」/タイトル（CLX.screen o.title）、「ポスター」フリッカールックのポスターグリフ（collage_fx.js） — これらを確認してください。API：references/api.md；サンプルの実装タイミングと注意点：references/edit_notes_10s.md。 タイミングの変更はリテラルを編集するのではなく、時間を再マッピングして行う：Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a)))。オフセットは 1/12秒の倍数に保つこと。隣接するシーンを描画するシーンは1つのブロックとして移動します（kalDraw→deskScene は drawNext 経由、titleBg→deskScene は 71/12 の前、endScene→titleScene/titleBg）。次に K.setup({bars})、スコアのキュー、スチル時間を更新します。尺を超える時間は最後のフレームにクランプされます。 タイトルフォントは4か所に存在します：comp/index.html の <link>（ファミリーの1つのウェイトをロード）、comp/film.js の fonts() リスト（そうしないとスプライトがフォールバックフォントでベイクされる）、COPY.titleFont、そして候補フォント用の comp/font_sheet.html の <link>。キリル文字コピー：Ultra、Fraunces、Cinzel、Bevan、Abril Fatface、Shrikhand、Chango、Rye、Lilita One、Bungee、Chewy、Gluten にはキリル文字がありません — タイトルと logoBand o.font には Rubik / Rubik Spray Paint、Unbounded、Yeseva One、Lobster、Playfair Display、Russo One を使用し、身代金チップも確認してください。スチル：node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,…。

6 · 音楽

audio/score.html はブラウザでスコアを合成します（サンプルなし）：ファンクグルーヴ＋紙のフォーリー（スラップ、リップ、ウィッシュ、ポップ、タイピング、クリック、ベル）、リミッター。ビートテーブルから最初の <script> 内で window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end} を設定し、window.SCORE_CUES = {…} でキューを移動します。フィルムにないイベントの paper() 内の行は削除します（CUE.car、CUE.plane、CUE.type、CUE.gen、CUE.subClick、CUE.ding を検索）— キューを null にするとエラーが発生します。?lv_<name>=0 でレイヤーをミュートします。

node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0   # 各ビッグヒットはそのウィンドウ内で最大音量
python3 tools/music_window.py audio/score.wav --timeline 0.25

代わりに手持ちのトラックを使用する場合：python3 tools/music_window.py track.mp3 --len <dur> → ウィンドウを選択 → python3 tools/cut_audio.py track.mp3 <start> <dur> audio/score.m4a → そのドロップに合わせて映像のタイミングを再調整（グリッド = トラックのBPM）。音声は聞こえません — 数値で確認し（references/music_notes_10s.md）、その旨を伝えます。

7 · ドラフト → 選択 → 最終版

tools/render_film.sh draft                       # 10秒で約30秒 → <slug>_draft.mp4（+.frames_draft）
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LINE1|LINE2"                # 実際の処理とフィルムのパレットで番号付きタイトルフォント
tools/palette_sheet.sh 0.75 3.75 6.9 8.75        # comp/grade.js の各パレットをキーフレームで（0 = オリジナル）
tools/render_film.sh final audio/score.m4a <slug>_final.mp4   # PNGフレーム、30 Mbps

comp/index.html の window.PALETTE = '<name>' で選択されたパレットをベイクします（null = オリジナルの色）。grade.js は写真とロゴを含むすべてのピクセルを再色付けします：ブランドカラー用に PALS エントリをブランドの16進数で役割（赤 → プライマリ）を指定して追加し、プロダクト写真とロゴが正しく見えることを確認します — または null を設定し、CL.C / CLX.PAL を直接編集します。

送信前のQA（自分でフレームを確認）

同期：映像イベントと --hits / --timeline のピークが1フレーム以内であること。
On twos：フレームペアのハッシュは、意図的な1フレームイベントでのみ異なること。
結合：空のフレームや跳ねるフレームがないこと。タイトル/ロゴのホールドを除き、約1秒以上静止したフレームがないこと。
ヒーローオブジェクト、タイトル、ボタンラベル、URLを覆うものがないこと（カーソルパスに注意）。
紙のチップ上のタグは36ピクセル以上、各0.8秒以上。タイトルは1.5秒以上、ロゴは1.5秒以上（8秒以下のフィルムでは1.0秒以上）。
全フレームフリッカーなし。帯フリッカーの明るさステップは一方向。グレーの「切り抜きなし」カードが残っていないこと。
尺が正確であること（afinfo）、オーディオが存在すること、ピークが −1dBFS 以下であること。
プロジェクトごとに同時に1つのレンダリングのみ（render_film.sh はフレームフォルダを上書きします）。

ファイル

必要	場所
測定されたサンディエゴの文法、ショット、パレット、フォント	references/reference_san_diego.md
CL / CLX API	references/api.md（+ collage.js / collage_fx.js のヘッダーコメント）
切り抜きプロンプト、サンプルセット、キーイング	references/cutouts.md
スコアキューマップ＋測定値	references/music_notes_10s.md
サンディエゴのリファレンス分析	references/reference_san_diego.md
トリックと落とし穴	references/edit_notes_10s.md
エージェントワークフロー	references/agent_workflow.md
レッスン（ユーザー期待のストーリー）	references/lessons.md

paper-collage-film