ai21.net
言語

Apple 基調講演スタイルのプロダクト動画

Apple 基調講演スタイルのプロダクト動画 — 1Apple 基調講演スタイルのプロダクト動画 — 2

プロンプト

<inputs>
Ask me for: a one-word brand name for the wordmark (a verb works best), 9 to 12 high-res photos, a royalty-free song around 120 BPM with a drop and a quiet breakdown (Mixkit, free for commercial use), and a free stock clip of a plain wall with moving plant shadows (Pexels).
</inputs>

<direction>
An Apple-keynote launch film, 2D only, one continuous take. Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, pages push, and a black shape floods the whole frame and contracts into the next scene. Warm off-white canvas, black UI, iOS 26 liquid glass over the photos. Archivo (wdth 125, weight 800) for the wordmark, Geist for UI. A cursor drives every change with real clicks, drags and long-presses. The camera zooms screen-studio style so each moment fills the square, and the cursor scales with it.
Banned: crossfades, blur-ins, brightness "developing", 3D flips, particles, glows, holds longer than 1s, anything that looks like a template.
</direction>

<structure>
120 BPM, 54 beats, something happens on every beat.
Open: the wordmark squeezes into its own period like an accordion, the dot grows into a black pill, a label rises inside it. Click: six iris blades close over the label and snap open onto a photo. The circle becomes a square, shrinks, the grid unfolds from behind it like a paper map (center, plus, corners), reflows into a bento, and a click zooms into one tile, landing exactly on the drop.
Glass: a glass word pops in letter by letter, melts into a droplet that stretches into a glass toolbar. The adjust icon turns it into a slider. Dragging relights the photo from day to golden hour (two aligned shots), and the knob turns into a glass lens while held. It lifts into a glass orb, the next photo opens inside it as a circle, and the orb expands into a lock screen: glass clock digits, date, and a home bar that stretches into a glass music player.
Stage: the lock screen pulls back into a phone (the bezel grows out of the screen edge). The Dynamic Island stretches like liquid, pinches off, flies over and grows into a Mac window that rolls up like a blind. Long-press the wallpaper, drag it onto a Safari tab, the page pushes in, drop it and it becomes the hero of a landing page. Scroll: the hero morphs into a framed print on a product card, with the mat and molding growing out of the photo's edge. Pick a frame color (it paints across) and a size, then the nav button flies down into "Order print".
Order: one black shape keeps morphing: Ordered ✓ → Printing % → On its way (a van on a route) → Delivered ✓.
Wall: the delivered circle floods the frame edge to edge, holds black for a beat, and contracts into the framed print hanging on the real wall footage. The same iris opens onto the print, closes again, the frame floods the screen and contracts into the pill → the dot → the letters spring back out, landing on the beat return. Last frame = first frame.
</structure>

<build>
1. One HTML file, square 1440x1440. Every style is computed from time inside an async seek(t): no CSS transitions, no timers, no state between frames.
2. Springs are closed-form step responses. A value with many targets is the sum of one spring per change, so it stays a pure function of time.
3. Liquid glass: each glass element holds its own clone of the scene behind it, filtered with an SVG feImage displacement map (a rounded-rect distance field) through three feDisplacementMaps at slightly different scales for chromatic edges, plus a rim light. Glass letters: a canvas distance field per glyph gives the map, mask and highlights.
4. Goo: blur + alpha threshold, then composite the source atop it so the glass stays sharp inside.
5. Iris: 6 blades around a hexagonal aperture. Each blade is its two vertices, both edge extensions and the SHORT arc between them.
6. Wordmark squeeze: every letter moves toward the dot by the same factor and its drawn width follows (narrow the wdth axis, scale the rest), so the letters stay touching.
7. Footage: re-encode all-intra (ffmpeg -g 1), load it as a blob URL, await 'seeked' before drawing each frame.
8. Sound: a downloaded SFX for every event (Mixkit), never synthesized, each placed by its measured peak. The song starts on a downbeat: the zoom lands on the drop, the wall sits in the breakdown, the wordmark returns with the beat. Loudnorm to -14 LUFS.
9. Render with Playwright: 4 subframes per frame blended with ffmpeg tmix, 60fps. Check one frame per beat, then scan for single-frame pops (frame-difference spikes 3x their neighbours).
</build>

<gotchas>
backdrop-filter: url() misreads displacement maps in Chromium, so clone the scene instead. A flood must overscale past the corners and take about 0.3s, or half the screen changes in one frame. A child with visibility: visible shows through a hidden parent, so use inherit. Text that swaps inside a morphing shape needs its own mask. python http.server can't range-seek video, so use the blob URL.
</gotchas>

<start>
Ask me for the inputs, then show me the beat map and 4 stills (open, glass, stage, wall) before you write the full film.
</start>

日本語訳

<inputs>
私に以下を尋ねてください:ワードマーク用の 1 語のブランド名(動詞が最適)、9〜12 枚の高解像度写真、ドロップと静かなブレイクダウンを備えた約 120 BPM のロイヤリティフリー楽曲(Mixkit、商用利用無料)、および植物の影が動く無地の壁の無料ストッククリップ(Pexels)。
</inputs>

<direction>
Apple 基調講演のローンチフィルム。2D のみ、ワンカットの連続した撮影。すべてのシーンは前のシーンから作られます。フェード、ブラー、カットはありません。代わりにオブジェクトが形を変えます:テキストはマスクの線から立ち上がり、アイコンはスプリングでゼロからポップし、バーは横に描かれ、ページは押し出され、黒い図形がフレーム全体にあふれて次のシーンへ収縮します。温かみのあるオフホワイトのキャンバス、黒い UI、写真の上には iOS 26 のリキッドグラス。ワードマークには Archivo(wdth 125、weight 800)、UI には Geist。カーソルが実際のクリック、ドラッグ、長押しですべての変化を駆動します。カメラはスクリーンスタジオ風にズームし、各瞬間が正方形を満たすようにし、カーソルもそれに合わせて拡大縮小します。
禁止:クロスフェード、ブラーイン、明るさによる「現像」、3D フリップ、パーティクル、グロー、1 秒を超える静止、テンプレートのように見えるものすべて。
</direction>

<structure>
120 BPM、54 ビート、毎ビートで何かが起こります。
オープニング:ワードマークがアコーディオンのように自身のピリオドの中へ圧縮され、点が黒いピルに成長し、その中からラベルが立ち上がります。クリック:6 枚のアイリスブレードがラベルの上で閉じ、写真の上でパッと開きます。円が正方形になり、縮小し、グリッドが紙の地図のようにその背後から展開し(中央、プラス、角)、ベントーにリフローし、クリックで 1 つのタイルへズームし、ドロップの瞬間に正確に着地します。
グラス:ガラスの単語が 1 文字ずつポップし、液滴へ溶けて、ガラスのツールバーへ伸びます。調整アイコンがそれをスライダーに変えます。ドラッグすると写真が昼からゴールデンアワーへと再照明され(2 枚の位置合わせされたショット)、保持している間はノブがガラスのレンズに変わります。それがガラスの球へ浮かび上がり、次の写真がその中に円として開き、球がロック画面へと拡張します:ガラスの時計の数字、日付、そしてガラスのミュージックプレーヤーへ伸びるホームバー。
ステージ:ロック画面が引き戻されてスマートフォンになります(ベゼルが画面の端から成長します)。Dynamic Island が液体のように伸び、ちぎれて、飛んでいき、ブラインドのように巻き上がる Mac ウィンドウへと成長します。壁紙を長押しし、Safari のタブへドラッグすると、ページが押し出され、ドロップするとそのランディングページのヒーローになります。スクロール:ヒーローがプロダクトカード上の額装プリントへモーフし、マットと額縁が写真の端から成長します。フレームの色(塗り広がります)とサイズを選ぶと、ナビボタンが「Order print」へ飛び降ります。
注文:1 つの黒い図形がモーフし続けます:Ordered ✓ → Printing % → On its way(ルート上のバン)→ Delivered ✓。
壁:配達された円がフレームを端から端まであふれ、1 ビート黒を保持し、実際の壁の映像に掛かった額装プリントへ収縮します。同じアイリスがプリントの上で開き、再び閉じ、フレームが画面にあふれてピル → 点 → 文字へと収縮し、ビートの戻りに着地します。最後のフレーム = 最初のフレーム。
</structure>

<build>
1. HTML ファイル 1 つ、正方形 1440x1440。すべてのスタイルは async の seek(t) 内で時間から計算されます:CSS トランジションなし、タイマーなし、フレーム間の状態なし。
2. スプリングは閉形式のステップ応答です。多数のターゲットを持つ値は、変更ごとに 1 つのスプリングの合計となるため、時間の純粋な関数のままです。
3. リキッドグラス:各ガラス要素は背後のシーンの独自のクローンを保持し、SVG の feImage 変位マップ(角丸矩形の距離場)を、わずかに異なるスケールの 3 つの feDisplacementMap に通して色収差のエッジを作り、さらにリムライトを加えてフィルタリングします。ガラスの文字:グリフごとの canvas 距離場がマップ、マスク、ハイライトを与えます。
4. Goo:ブラー + アルファしきい値、その後ソースをその上に合成して、内部のガラスがシャープなままになるようにします。
5. アイリス:六角形の開口部の周りの 6 枚のブレード。各ブレードは 2 つの頂点、両方のエッジ延長線、およびそれらの間の短い弧です。
6. ワードマークの圧縮:すべての文字が同じ係数で点に向かって移動し、描画幅もそれに従います(wdth 軸を狭め、残りをスケールする)ので、文字は接したままです。
7. 映像:オールイントラで再エンコードし(ffmpeg -g 1)、blob URL として読み込み、各フレームを描画する前に 'seeked' を待ちます。
8. サウンド:イベントごとにダウンロードした SFX(Mixkit)、合成は一切なし、それぞれ測定されたピークに配置します。曲はダウンビートで始まります:ズームはドロップに着地し、壁はブレイクダウンに収まり、ワードマークはビートとともに戻ります。Loudnorm で -14 LUFS に。
9. Playwright でレンダリング:フレームごとに 4 つのサブフレームを ffmpeg の tmix でブレンドし、60fps。ビートごとに 1 フレームを確認し、その後 1 フレームだけのポップ(隣接フレームの 3 倍のフレーム差分スパイク)をスキャンします。
</build>

<gotchas>
backdrop-filter: url() は Chromium で変位マップを誤読するため、代わりにシーンをクローンしてください。フラッドは角を越えてオーバースケールし、約 0.3 秒かかる必要があります。そうでないと画面の半分が 1 フレームで変わってしまいます。visibility: visible の子要素は非表示の親を通して表示されるため、inherit を使用してください。モーフする図形の中で入れ替わるテキストには、独自のマスクが必要です。python http.server は動画のレンジシークができないため、blob URL を使用してください。
</gotchas>

<start>
入力を私に尋ね、その後、完全なフィルムを書く前にビートマップと 4 枚のスチル(オープン、グラス、ステージ、壁)を見せてください。
</start>

出典

原作者
twoclipping
公開日
2026-09-26(由推文 ID 反解)
原典
元の投稿を見る ↗
収録元
yihui-dev/awesome-opus5-5-videos · twoclipping-496100 · MIT
zhuyansen/awesome-opus-5.5-video · 2103835273813496100 · ライセンス未表明
この項目は 2 件の出典を統合・重複排除して作られました