セットアップ: UGC広告ジェネレータープロモーション

私に求めるもの：製品名と簡潔な約束、3～5つのUI要素のデモ、アクセントカラー1色、私が所有する10～20本の実際の縦型動画クリップ、そして明確なドロップ部分を含むロイヤリティフリーの楽曲（例：商用利用可能なMixkit）。

ハイエンドなミニマルスタイル。1ショットにつき1つのアイデア、十分な余白、1色のアクセントカラー、タイトなトラッキングを備えたクリーンなサンセリフ体（ GeistまたはInter ）。マスクされた文字表示、マッチカット、滑らかなカメラワーク。実際の映像のみを使用し、プレースホルダーカードは使用しない。画面上のテキストに句点は使用しない。
禁止事項：衝撃波リング、パーティクルバースト、RGBスプリット、カメラの揺れ、レンズフレア、ネオンの光、グリッドフロア、点滅する背景、弾むようなイージング。

10小節、テンポBPM、各小節2秒。
1小節目：フックは一語ずつビートに合わせて演奏される。
バー2：1つのキャッチフレーズが製品のUIに変化する。カーソルが文字を入力し、クリックする。
落下：ボタンから円形の開口部が開き、暗いシーンへと続く。
そして、1つのバーにつき1つの動き：スキャンラインと3人の勝者を含む実際のクリップの壁、大きな文字でのキー出力、床の反射とモーションブラーのかかった鞭が1つのヒーロークリップに当たる実際のビデオの3Dカルーセル、結果に切り替わるパネルの横にある電話の中のヒーロー、プッシュカットでの大きな統計、3つの単語のティッカー、ロゴの表示、フェードアウトして黒になります。

1. 1920x1080のHTMLファイルが1つ。すべてのスタイルは時間に基づいて計算されます。
http://
window.seek(t): CSSアニメーションなし、タイマーなし、フレーム間の状態なし。
2. 実際のビデオ: ffmpegを使用してクリップを 30fps の JPEG シーケンスに抽出し、フレームごとに画像ソースを切り替えます。シークは画像のデコードが完了するまで待機します。
3. numpy を使用して曲を分析します: テンポ、ビートグリッド、小節あたりのエネルギー、ドロップ。グリッドを実際のキックヒットに合わせて調整します。すべてのカットはダウンビートに、すべての UI ヒットはビートに配置されます。
4. Playwrightでレンダリング：1フレームあたり3つのサブフレームをtマイナス、t、プラス1/240秒で作成し、 ffmpeg tmixでブレンドして60fpsでリアルなモーションブラーを実現します。
5. 各効果音は、ファイルの開始位置ではなく、測定されたピークがイベントに重なるように配置してください。効果音は音楽の下では静かにしてください。ラウドノームは-14 LUFSに設定してください。
6. フルレンダリングの前に20フレーム以上をプローブします。ごちゃごちゃしている部分、重なっている部分、読みにくい部分を修正します。

preserve-3d要素に不透明度やフィルターを設定しないでください。設定すると要素が平坦化され、両面が表示されてしまいます。代わりにラッパーをフェードさせてください。マッチカットを行う際は、実行時に要素の位置を測定してください。商用利用が許可されているライセンスの音楽や効果音のみを使用してください。

コードを書く前に、まず入力内容を尋ねてください。それから、ビートグリッド上のすべてのタイミングを示したストーリーボードを見せてください。

Ask me for: the product name and a one-line promise, 3 to 5 UI moments to show, one accent color, 10 to 20 real vertical clips I own, and a royalty-free song with a clear drop (e.g. Mixkit, free for commercial use).

High-end minimal. One idea per shot, lots of empty space, one accent color, one clean sans (Geist or Inter) with tight tracking. Masked type reveals, match cuts, one smooth camera language. Real footage only, never placeholder cards. No full stops in on-screen text.
Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing.

10 bars at 120 BPM, 2 seconds each.
Bar 1: the hook lands word by word on the beats.
Bar 2: one hook word morphs into the product UI. A cursor types and clicks.
The drop: a circle opens out of the button into a dark scene.
Then one move per bar: a wall of real clips with a scan line and 3 winners, the key output as big type, a 3D carousel of real videos with floor reflections and a motion-blurred whip onto one hero clip, the hero in a phone next to a panel that flips into results, big stats on push cuts, a 3-word ticker, a logo reveal, a fade to black.

1. One HTML file at 1920x1080. Every style is computed from time inside
http://
window.seek(t): no CSS animations, no timers, no state between frames.
2. Real video: extract clips to 30fps JPEG sequences with ffmpeg and swap img sources per frame. seek awaits the image decodes.
3. Analyze the song with numpy: tempo, beat grid, energy per bar, the drop. Calibrate the grid to the real kick hits. Every cut sits on a downbeat, every UI hit on a beat.
4. Render with Playwright: 3 subframes per frame at t minus, at, and plus 1/240s, then blend with ffmpeg tmix for real motion blur at 60fps.
5. Place each sound effect so its measured peak, not its file start, lands on the event. Keep the effects quiet under the music. Loudnorm to -14 LUFS.
6. Probe 20 or more frames before the full render. Fix anything cluttered, overlapping or hard to read.

Never set opacity or filter on a preserve-3d element, because it flattens and both faces show. Fade its wrapper instead. Measure element positions at runtime for match cuts. Only use music and sound effects whose license allows commercial use.

Ask me for the inputs, then show me a storyboard with every timing on the beat grid before you write any code.

プロンプトは以下から取得 役職 @twoclipping.