デモから販促リールへ：コードで作るビート同期の縦型リール

Kinetix: コードからリールを作成

Kinetix はリポジトリ内にあります（探し方は、PATH 上の kinetix、$KINETIX_HOME、または runtime/kinetix.js がある kinetix/ チェックアウト）。 以下のコマンドはすべて kinetix <cmd> で実行します。最初に kinetix doctor を実行し、不足している部分があれば ./setup.sh を実行してください。

モデル: すべてのフレームは時間の純粋関数です。 リールは、タイムライン上にシーンがある index.html です。 サウンドトラックは、同じビートグリッド上で music.py によって構築されるため、カット、シェイク、ドロップが一緒に着地します。

1. まず実際の素材を集める

• ストーリーはプロダクト自身の言葉から来ます。 README、サイトのコピー、アプリの文字列を読み、それらを引用してください。統計、ユーザー数、受賞歴、速度を決して捏造しないでください。
• 実際のものを表示します。 アプリのスクリーンショット、画面録画、または Playwright で 2× DPI でキャプチャしたライブ Web ページを使用してください。キャプチャがライブバックエンドにヒットする場合は、実際のレコードを作成するのではなく、ブラウザで API をモック（page.route）してください。シミュレーションまたはデモの映像には、その旨を明記してください。
• 数値は一度決定したら統一します。 ソース間で矛盾がある場合（1.2 秒 vs 1.5 秒）、一貫して一方の値を使用し、引き継ぎ時にどちらを使用したかを明記してください。
• ボイスはオプションです。 ボイスラインには、ユーザーがキーを持っている TTS API（インド言語用は tools/tts_sarvam.py）を使用し、その後 kinetix captions を実行します。

2. グリッド上で計画する

150 BPM では、1 拍は 0.4 秒、1 小節は 1.6 秒です。すべてのセクション境界とすべての大きなヒットは拍の上に置きます。実績のある 50～60 秒の形状:

セクション	小節数	役割
コールドオープン	3	2 秒で共感を呼ぶフック: POV + 課題
ビルド	6–7	小節カットでエスカレートし、その後ライザー
ギャップ	¼	0.4 秒のほぼ無音（「これまでは…」）
ドロップ 1	8	ロゴスラム、その後プロダクトフロー、アクションごとに 1 拍
ハーフタイム	4–5	ひねりまたは深み、フィルターがかかり静かに
ドロップ 2	8–10	高速フレックス: 映像、実際の統計、証拠
アウトロ	3	ロゴ、タグライン、URL、フェード

テキストは読みやすくなければなりません。 素早くイン、その後ホールド: ラベルは約 0.8 秒、文は 1 単語あたり 0.3 秒。連続テキストは 1 拍おきに配置します。テキスト以外のアクセントのみが毎拍ヒットしても構いません。

3. リールを構築する

kinetix new my-reel            # 縦型; 1920x1080 の場合は --landscape を追加

my-reel/index.html はランタイム（references/runtime.md）を使用します:

const K = Kinetix.init({ width: 1080, height: 1920, bpm: 150, build: [[3.2, 9.2]], drops: [[9.6, 16]], glitches: [9.6], fonts: [...] });
K.scene(9.6, 12.8, `<div class="c big t" style="left:540px;top:800px;font-size:230px">BRAND</div>`,
  (lt, q) => K.slam(q(".t"), lt, 0, { from: 3 }));
K.start({ dur: 19.2 }).then(({ timeline }) => { window.__timelines["main"] = timeline; });  // このリテラルはそのまま

シーンパターン（電話フレーム、ホログラム映像パネル、統計スラム、チャットバブル、カウンター、タイピング）は references/recipes.md にあります。 ブランドを維持する: 色、フォント、ロゴをプロダクトから取得し、kinetix.css の :root 変数を通してテーマ化します。

4. サウンドトラックを構築する（references/music.md）

• ベッド: kinetix music gen "<ジャンル, 楽器, ムード>" --bpm 150 --seconds 60 -o my-reel/assets/bed.wav。MusicGen はプロンプトの BPM に従い、ツールは正確なグリッドにタイムストレッチし、bed.json を書き込みます。GPU や MusicGen がない場合、Mix(bpm=150, seconds=DUR) で純粋なシンセミックスを構築します。
• music.py: m = Mix("assets/bed.wav", seconds=DUR)、その後:
  • シーンと同じ時間にヒットを配置: m.add(t, h.impact()), m.drums(...), m.sfx("impact/...")
  • アレンジメントを整形: m.lowpass([(t, hz), ...]), m.bed_level(...), m.gap(14.0, 14.4)
  • その後 kinetix mix my-reel を実行。
• ダイナミクスを確認する（聞くことはできないので、測定します）。セクションごとの RMS は、ビルドからドロップにかけて上昇し、ハーフタイムで低下し、ドロップでピークになる必要があります。ビルドがドロップよりも大きい場合は、ビルドのシンセレイヤーを下げてください。また、スペクトログラム（ffmpeg ... showspectrumpic）をレンダリングして確認します。
• ボイス: ミキシング後、ミックスされたセグメントで Whisper を使用して、それらが聞こえることを確認します。

5. キャプション（オプション、ボイスが必要）

captions-lines.json は [{"clip": "assets/line1.wav", "at": 1.62, "text": "exact script", "y": 600}] を保持します。その後 kinetix captions my-reel を実行します。Whisper はスクリプトをプロンプトとして英語モードで実行されるため、ヒンディー語と英語の混在（Hinglish）やその他のローマ字表記の行はスペルが保持されます。ページは行ごとに構築されます。

6. 検証: 見て、それからゲート

1. kinetix snap my-reel 1.5,4,9,...、シーンごとに 1 回。コンタクトシートを開いて実際に見てください。空白のフレームは、JS エラーまたは未登録のタイムラインを意味します。
2. kinetix check my-reel は 0.5 秒ごとにサンプリングし、0 エラー で終了する必要があります。
   • 実際の問題を修正: テキストがボックスからはみ出ている、重なっている、隠れているテキスト、コントラスト。
   • 意図的な レイヤリングのみをマークし、実際の問題は決してマークしないでください: ドキュメントの上にスタンプがある場合は data-layout-allow-overlap、スプライトの上に意図的に配置されたテキストの場合は data-layout-allow-occlusion、フレーム内で切り取られたスクリーンショットの場合は data-layout-allow-overflow、装飾的な背景や巨大なフェード絵文字の場合は data-layout-ignore。
   • 「修正」が表示可能だったと主張する前に、修正前と修正後のフレームを比較してください。いくつかの発見はチェッカーの誤検知です。

7. エフェクトとレンダリング

kinetix fx leak --hue 200 -o overlays/leak-cyan.mov        # 色相: 0 琥珀色, 70 ピンク, 200 シアン, 290 ライム
kinetix fx stinger --colors "#c8ff3d,#5a45c9" -o overlays/stinger.mov
kinetix render my-reel -o out.mp4 --overlay overlays/[email protected]:0.8 --overlay overlays/[email protected] --poster 18.3

• リーク: leak-* ファイルは光として スクリーン で重ねられるため、テキストは読みやすいままです。ドロップの約 0.4 秒前にリークを開始してドロップでピークになるようにし、ロゴスラムでピークにならないようにします。
• スティンガー: カットの約 0.3 秒前に開始して、パネルがカットをカバーするようにします。
• ポスター: --poster は最も落ち着いたフレームをフレーム 0 として焼き付けます。これは X、YouTube、Slack、Discord のサムネイルになります。ロゴカードまたは決定的なショットを選択し、アニメーション中やフラッシュのフレームは絶対に選択しないでください。
• 最終確認: 最終的な mp4 からフレーム（フレーム 0、各オーバーレイのピーク、各映像シーン）を抽出して確認します。

よくある落とし穴（すべて実際に発生しました）

• ブリッジは { timeline } を返します。タイムライン自体ではありません。 GSAP タイムラインは thenable であるため、非同期関数からそのまま返すと永久にハングし、すべてのフレームが空白でレンダリングされます。
• ディスプレイフォントのハイライトボックスには line-height: 1.12 が必要です（kinetix.css に既にあります）。そうしないと、グリフがはみ出して check が text_box_overflow をフラグします。
• 映像は、タイミングのないラッパー内の <video muted data-start data-duration [data-media-start]> である必要があり、JPG シーケンスであってはなりません。ラッパーをアニメーション化し、ビデオ自体はアニメーション化しないでください。
• 画像の入れ替え（画面 A → B）には KinetixBridge.stackSet(img, src) を使用します。これによりバリアントが事前デコードされます。レンダリング時に src を設定すると、デコードされていないフレームがキャプチャされます。
• 名前付きフォントごとに @font-face が必要です。 システム絵文字フォントの場合は、src: local("Noto Color Emoji") を宣言します。
• MusicGen ベッド: librosa の beat_track は phonk やクラブのテンポを誤認識します（150 BPM を "121" や "199" と呼びました）。そのため、hypebeat はオンセット自己相関を使用し、ストレッチを ±12% に制限します。musicgen-medium はロードに約 8 GB の空き RAM が必要です。小さい方がデフォルトです。
• キャプション: すべてのラインを 1 つの createTikTokStyleCaptions 呼び出しにプールすると、あるラインの最後の単語が次のラインにマージされるため、ラインごとにページを作成します（ランタイムが行います）。
• Remotion: --gl=swangle（ソフトウェア GL はどこでも動作します）と ProRes 4444（アルファ付き）でレンダリングします。ffmpeg の VP9 デコーダーはアルファをドロップします。
• ライセンス:
  • MusicGen の出力は CC-BY-NC であり、デモや個人用チャンネルには適していますが、有料の仕事には適していません。
  • Remotion は個人および 3 人までの企業は無料です。
  • バンドルされている SFX は CC0 です。

引き継ぎ

ユーザーに以下を伝えてください:

• mp4 の場所
• その内容（拍ごとの短いリスト）
• 何をどのように検証したか（コンタクトシート、チェック結果、ラウドネス）
• あなたが行った数値または主張の選択
• 検証できなかったこと（聞くことができないため、聞いてもらうよう依頼）

投稿を申し出てください。ただし、承諾なしに投稿しないでください。