20-second beat-synced fashion montage with image morphs and motion graphics

Prompt

The author shared the full prompt.

<inputs>
まず私に聞いて：作品のテーマを一言、画面に出す英単語（フック4語・対になる大きな2語・ティッカー3語・ロゴ1語）、アクセントカラー1色、画像の方向性（実写／イラスト／両方）、使う曲（ドロップがはっきりした商用利用OKの曲。指定がなければ Mixkit などフリー音源から候補を集めて解析で選ぶ）。
</inputs>

<assets>
画像は gpt-image-2 で作る（手持ちの画像でも可）。
1. 縦2:3（1024x1536）の実写ポートレートを8枚。ハイエンドなファッション誌風、成人女性、服を着た非性的な構図、背景はニュートラル。アクセントカラーの小物を各画像に1つだけ入れる。
2. 8枚それぞれを参照画像にして、同じ構図・同じポーズ・同じ背景色のままイラスト版を作る。マッチカットに使うので構図は絶対に変えない。
3. 各画像について、アクセントカラーの位置（重心）、左右の縁の色、実写とイラストのずれを数値で測ってJSONに保存する。
</assets>

<direction>
ハイエンドミニマル。1ショットに1アイデア、余白たっぷり、アクセントカラー1色、字間を詰めたサンセリフ（Geist か Inter）。マスクで文字が現れる演出、マッチカット、カメラの動きは「ゆっくり寄る」の1種類だけ。縦の画像は16:9の中央に置き、左右は画像の縁の色に溶かす。画面の文字に句点は付けない。
禁止：衝撃波リング、パーティクル、RGBずらし、手ブレ、レンズフレア、ネオン、グリッドの床、点滅する背景、バウンドするイージング。
</direction>

<structure>
曲のBPMで10小節。ドロップを3小節目の1拍目に置く。
1小節目：フックの4語が1拍に1語ずつ着地。
2小節目：フックの1語が画像に変わる（文字の一番太い画に吸い込まれて写真が全面に出る）。カーソルが線をドラッグして左半分をイラスト版に変え、アクセントの小物をクリック。
ドロップ：クリックした点から円が開いて暗いシーンへ。
そこから1小節に1つの動き：16枚の壁にスキャンラインが走って勝者3枚を選ぶ → 勝者を壁の位置からマッチカットして大きな文字（実写側の語）→ 床反射とモーションブラー付きの3Dカルーセルがウィップして1枚が正面へ → その1枚を左に、右の縦フレームのパネルが1拍ずつイラスト版に反転 → プッシュカットで大きな文字（イラスト側の語）→ 3語のティッカー → ロゴ → 黒へフェード。
</structure>

<build>
1. 1920x1080の1つのHTMLファイル。全スタイルは https://t.co/Dp87FqCCXX(t) の中で時刻から計算する。CSSアニメなし、タイマーなし、フレーム間の状態なし。
2. 曲を numpy で解析：テンポ、ビートグリッド、小節ごとのエネルギー、ドロップ。グリッドは使う区間の実際のキックに最小二乗で合わせる。カットは全部ダウンビート、UIの動きは全部ビートに合わせる。
3. 小節・拍の時刻と効果音のキューは1つのタイムラインファイルにまとめ、映像と音の両方がそこを読む。
4. Playwright でレンダー：1フレームを t−1/240 〜 t+1/240 のサブフレームで撮って平均し、60fpsの本物のモーションブラーにする。既定は7枚、ウィップ・ズーム・スライドなど速い区間は11〜25枚。
5. 効果音はコードで合成し、測定したピークがイベントの瞬間に来るように置く。音楽の下で静かに。loudnorm で -14 LUFS。
6. 本番の前に20フレーム以上を試し撮りして一覧で確認し、散らかり・重なり・読みにくさを直してからフルレンダーする。
</build>

<gotchas>
preserve-3d の要素に opacity や filter を付けない（平らになって裏面が見える）。フェードは外側のラッパーで行う。
マッチカットの位置は実行時に測る。
サブフレームが3枚だと、細い線や速い動きが二重に見える。
アクセントの点をアクセント色の物の上に置くと見えない。白地に色の芯を入れたボタンにする。
ドロップ検出は、曲頭の無音からの立ち上がりを誤検出しやすい。4つ打ちでない曲はキックに合わせられないので避ける。
音楽と効果音は、商用利用を許可するライセンスのものだけを使う。
</gotchas>

<start>
まずインプットを聞き、コードを書く前に、ビートグリッドに全タイミングを載せたストーリーボードを見せて。
</start>

曲：Mixkit「Dub Techno Groove」（Mixkit Stock Music Free License）

Category

Motion graphics

Stack

Web Audio, AI image

Made with

Claude Code, GPT Image 2, Playwright, Mixkit, numpy

From the author

about 22 minutes; 60fps; 20-second video

On X

29 likes · 5.1K views · 1 saves