セットアップ: ローンチビデオのリメイク比較

私に尋ねてください: 製品名、ロゴ (または簡単なマークを描いてください)、ブランドカラー (またはロゴから抽出してください)、ユーザーがプロンプトボックスに入力する 1 行のテキスト、それに答えるページ (タイトル + 1 つのキーフレーズを含む 2 ～ 3 文)、積み重ねられたカードの 2 つの機能名、および音楽トラック。私が省略した場合は、デフォルトを使用します: Whop ハブ内に配置された製品「Frame by Frame」、ビューファインダー マーク (太字の「FF」を囲む 4 つの角括弧)、プロンプト「アプリの起動ビデオを作成する」、タイトルが「2.1 リファレンスを選択する」のレッスン ページ、「起動」と「サウンド」のカード、および Mixkit の無料ハウス トラック「Rising Forest」を 124 BPMにスローダウンしたもの。

12秒間の正方形の製品紹介映像、1080x1080、フレームレートは29.97fps（f0～f359）、マスターレンダリングは59.94fps。Appleの基調講演のような雰囲気：柔らかく、白く、明るい青、ガラスのような質感。カメラは静止画でカットされることはなく、すべてのショットは既に動き出した状態で始まり（指数関数的なイーズアウト、フレームごとに残りの距離の12～19%）、加速する動きまたはぼかしのランプで終わる。ぼかしは、すべての動きの速度と方向に追従する。
パレット: 私のブランドカラーをこれらの役割にマッピングします。指定がない場合は、ページ #FDFDFB、ヘイズ #B7CFEB、アイス #E6F0FA、ディープブルー #294376 → #769CC2 スカイグラデーション、ネイビー #1E2F52、アクセントブルー #2F6BFF / #3CC8F0 / ミント #4ED6A0、ホワイトを使用します。タイプ: Inter (400/500/600/700)。紫、すみれ色、マゼンタ、オレンジはどこにも使用しません。
ストーリー: ライトアプリウィンドウ内の青い霞の中から製品ヘッダーが浮かび上がります → カーソルが滑り込み、移動先を向き、ホバー時に大きくなり、ロゴをクリックします → 音楽がドロップすると同時に、十字形に回転する 4 つの四角形があるアプリのアイコンにハードカットします → アイコンが Mac のメニューバーに折りたたまれます → カーソルがメニューバーのアイコンをクリックすると、曇りガラスのプロンプトボックスが飛び出し、プロンプトが入力されます → 水色の閃光を通して上に急旋回し、回答ページが所定の位置にスクロールします → カードがその上に浮かび上がります → 巨大な曇りガラスのタイトルが付いた 2 枚のカードが重ねられた状態にぼかしディゾルブします → 単独のロゴディスクにぼかしディゾルブします → 光るワードマークが付いた黒いエンドカードにハードカットします。
禁止事項: クロスフェード、フリーズフレーム (S7 の 1 つのホールドを除く)、標準の UI キット、UI テキストの光彩、Math.random、テンプレートのように見えるものすべて。

座標は1080ステージ上のピクセル単位です。音楽の拍子k = 0.048 + 0.4838·ks (124 BPM、1拍 = 14.5フレーム)。3つのハードカットf72、f101、f159は、拍子の2フレーム前に発生します。これらのフレームを正確に保持してください。
S1 f0–71、ヘッダー + ウィンドウ + クリック: 霞 #B7CFEB が f28 までに #FDFDFB にフェードアウトし、下部に青い床の光 #DBEEFD が残る。 ヘッダーは 1 行: ロゴ ディスク ⌀132 (#FBFCFE、1px の縁 #E8E8EA、暗いマーク)、製品名 (Inter 500)、暗いカプセル型の錠剤「on Whop」(#2F2E2F、白いテキスト)。 全体のロックアップは x474–1063 に及び、中央の線は y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37) と上昇し、その後 1 px/フレームずつ移動する。 名前は f2 でぼやけて表示され、錠剤は f4–5 で大きくぼやけて、シャープになるにつれて 15 px 左にスライドする。ライトハブウィンドウ（半径93、塗りつぶし#FCFDFF、上部バンド#F1F6FF、内側の床面グローは青色）が周囲にフェードインします。不透明度はf14まで0、f15で0.53、f19で0.7、f24で1.0です。左上隅（408,405）から始まり、右と下にはみ出します。内部には、上部バンドに検索ピル、左側にアイコン列（コースアイコンは（537,739）、フェードアウトしたチャットアイコンは（537,900））、そして（764,700）からフレーム外にコースカードがあり、表紙画像、タイトル、「コース・8レッスン」と表示されています。 Cursor （黒いmacOS矢印、白い輪郭、32x39）がf27で(891,393)に現れ、左に滑走して減速し、f44で(770,383)に到達します。f47〜51で左下を指すように回転しながら急降下し、f56→(587,546)f59→(555,531)f71でディスクの右下(629,564)に着地します。f56からホバリングすると1.55倍に拡大します。f53からディスクの周りにソフトアイスリング（#D5F3FF→#F7FEFF、外側⌀174）が点灯します。カメラは（540,540）付近でズームします：1.0 f46 → 1.2 f60 でイーズインアウトし、f61 で保持し、カーソルが押されている間、f71 で 1.04 まで加速しながらイーズアウトします（f69–71 で 15% 縮小）。
S2 f72–100、アイコン + 軌道: 紺色のスクワークル アプリ アイコン (#294376 → #1E2F52、白いマーク)、f72 で 276 px、f86 で 178 px に縮小、半径は幅の 28%、灰色のハロー ディスク #E9E9E7 上にあり、⌀240 (f75) → 326 (f86) に拡大。4 つの 92 px の正方形 (半径 26) が反時計回りに回転し、減速し、f86 で軌道半径 ≈216 で十字形に固定されます: 左は白 (1px #E3E8EF の端 + かすかな影)、上は #2F6BFF、右は #3CC8F0、下は #4ED6A0。 f88–100: アイコンが約40ピクセルまで加速して縮小し、正方形が右側の列にスライドします（白い部分がアイコンの後ろに滑り込みます）、ぼかしが0.3から6ピクセルまで変化します。
S3 f101–158、メニューバー + プロンプト: 黒いラップトップベゼルバンドの上に白いページ (y425–475、上部のハイライト #686866)、濃い紺色のメニューバー (y477–538)、下の壁紙 = 細い白い線画のある青い空のグラデーション (大きな円 1 つ、水平線 2 本、垂直線 1 本、交差する 4 点のきらめき、右上の柔らかなティール色の光)。メニューバーの右側の白いクラスター: Wi-Fi、バッテリー、トグル、x531–584 の製品マーク、x612、661、709 の 3 つの ⌀36 ドット #2F6BFF / #3CC8F0 / #4ED6A0、「Mon Jun 22 9:41 AM」34 px。3 px でぼやけて入り、f110 で落ち着きます。 Cursor下から上昇し (f102)、マークに留まり、f113–117 を押します。カメラはコンテンツを右に +125 px パンします (f115–130、最速は f118–120)。曇りガラスの箱 (空の上の白と青のガラス、明るい上部の縁、半径 60) がマークの下から飛び出します (f116)。幅は f126 で 744 に達し、f138 までに x196–922、y568–797 付近で 726x228 に落ち着きます。プロンプトは f121 (最初に読み取れる「Make」) から f150 (完了) まで、約 1 文字/フレームの速度で入力され、2–3 文字ごとに 1 フレームのホールドがあります。キャレットは常にオンです。下部に 3 つの白いアウトライン アイコンがあります。送信ボタン #2F6BFF ⌀51 には白い上向き矢印が付いています。 f136からシーン全体が上方に漂い、鞭のように傾く動きに加速し（f158では約25ピクセル/フレーム移動、垂直方向のぼかしは約6～8ピクセル）、f154～158ではページが#E6F4FEで着色されます。
S4 f159–186、回答ページ：軽いコースレッスンページ（パンくずリスト、タイトル、本文）：テキスト列 x120、本文 47 px Inter 400 グレー #BCBCBA、行ピッチ 58、1 つのキーフレーズ（「フレームごとに」）を黒 600 で表示。ぼやけて 420 px 低い位置から表示され、オフセット 420、315、210、170、140、116、96、81 (f166) … 14 (f175) … 0 (f180) でスクロールアップし、f186 までに -6 px ずつ移動します。ぼかし 24 px (f159) → 1.5 (f165) → 0。フラッシュ #E2F4FE が f165 までに #FDFDFB にフェードアウトします。真上を指すカーソルがスクロール上を移動し、キーフレーズ (≈(450,591) f180) の下で停止し、右に移動します。
S5 f187–214、カード：白いカード（x203–878、下からはみ出す）がページ上に現れる：カバー画像 627x536、24 px のインセット、半径 64、上部中央にライトグラバーバー、キャプションセミボールド 38 px 黒、サブキャプショングレー 23 px。カバー上部 y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205)、その後、約 4 px/フレームずつ上に移動し続ける。カードのぼかしは f189 で 3.8 px のピークに達し、f201 でシャープになる。背後のページはぼかされて 約 2.5 px になる。終了 f207–214：カードは約 5% 縮小し、上昇する。その間、フレーム全体が 1 → 7 px ぼかされる。ぼかしのピークでカットされる。
S6 f215–244、カード2枚：白紙、538x348（半径57、間隔36）のカード2枚をx540の中央に配置し、上のカードはf230でy168に、下のカードはy552に配置される。各カード：表紙アート（テキストは焼き付けなし）、左上にフロスト加工のピル（「Module 3」/「Module 5」）、右上にフロスト加工の丸い「•••」、下端にフロストガラスでできた巨大な太字のタイトル（文字に合わせて切り取られた画像のぼやけた明るいコピーで、カードの下端で切り取られている）：「Launch」と「Sound」。両方とも12ピクセルぼやけ、f224で鮮明に挿入される。上のカードは8%大きく挿入され、y264から上昇する。下のカードはy927から上昇し、その後ろにずらして配置される。それらは3ピクセル/フレームでf230～238まで上昇し、その後加速してカットの中にぼやけて消えていく。
S7 f245–300、ロゴディスク：ページ#FDFDFB、ディスク⌀168 #F6F6F6、暗いマーク付き、中央に向かって上昇（上部y569 f245 → 491 f250 → 468 f255 → 456 f269）し、カットフレーム上に垂直のスミアがあり、f269–287で静止（唯一のフリーズしたストレッチ）し、その後、f300で⌀123まで加速して縮小します。
S8 f301–359、エンドカード：黒の放射状背景（角は#020204、単語の周囲は≈#272729）、 Inter 600のワードマーク、白#F3F3F5、タイトなグローと幅広のソフトなハロー、中央（540,540）。単語の幅：約1650 px f301（水平方向にぼやけ、ズームストリーク）→ 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342（約1 px/フレーム縮小）→ 492 f350、その後イーズインで縮小：450 f355 → 267 f359、ぼかしは3.5 pxまで上昇。フィルムは縮小の途中で終了。

1. フレーム番号の純粋な関数としてseek(t)によって描画される、1080x1080のHTMLページ1枚。CSS CSS、タイマー、Math.randomは使用せず（シード付きハッシュのみ）。ショットは{f0, f1, render(localFrame)}として記録されます。
2. すべての値はフレーム番号内で連続しています（59.94 マスターはハーフフレームをレンダリングします）。キーフレームテーブル kf(frame, [[f, value],...], ease) と線形補間を使用したフレームごとのルックアップテーブルを使用してアニメーションを作成します。モーションには Math.floor は使用しません。
3. ぼかし: 円形のぼかしにはCSSフィルター blur、方向性のあるぼかしには個別の x/y stdDeviation を使用したSVG feGaussianBlur。エンドカードのズームぼかし = 20～30 個の縮小され、薄く表示された単語のコピー。曇りガラス = 背景のぼかしと明るさを調整したコピーを形状に合わせて切り取ったもの。
4. Cursor: 回転と拡大縮小が可能な macOS 用SVG矢印 (黒塗り、白アウトライン、ソフトシャドウ) 1 つ。S1、S3、S4 で再利用。
5. サウンド（音声なし）、正確に12.075秒：124 BPMの音楽、ソフトなイントロ、2.47秒でドロップ（5拍目、f72カットが2フレーム先行）。シンセサイザーSFX：0.10秒のソフトな衝撃音。2.402秒、3.370秒、5.305秒、10.043秒のカットでピークを迎えるシューッという音。6.240秒と8.175秒で正確にトランジションがヒット。2.33秒と3.83秒でクリック音。4.04秒から5.00秒にかけて約32ミリ秒ごとに非常に静かなキーティック音。10.05秒でソフトなきらめき。マスターは-14 LUFS、トゥルーピークは-1 dBTP、最後の60ミリ秒を除いてフェードなし。
6. Playwrightでレンダリングし（フレームごとに1つのスクリーンショット、最初にフォントをロード）、H.264 yuv420pで60000/1001でエンコードし、オーディオを多重化します。

フォントが読み込まれた後にのみテキストを測定します。長い製品名は、5 文字の名前が収まった場所には収まりません。ロックアップ全体 (ディスク ギャップ、名前、ピル) を x474–1063 の範囲に収まるように拡大縮小し、ピルがフレームからはみ出さないようにしてください。白いオービット スクエアは、1 ピクセルのエッジと薄い影がないと、白いページ上で消えてしまいます。S6 カード内に独自のテキストを含む画像を配置しないでください。そうしないと、ガラスのタイトルが二重になってしまいます。カットされたフレームは、ビートに重なっていない場合でも正確に保ちます。S7 f269–287 以外では何もフリーズしません。強いぼかしテーブルは、シェイプを完全に消去してしまう可能性があります。フレームが空に見える場合は、シェイプがまだ読めるまでぼかしを下げてください。

入力内容を尋ねてください。その後、フルムービーをレンダリングする前に、4つの静止画（ウィンドウ内のf40ヘッダー、f86アイコンの十字、f150完了プロンプト、f2302枚のカード）を見せてください。

Ask me for: my product name, a logo (or let you draw a simple mark), my brand colours (or pull them from my logo), the one-line thing a user types into the prompt box, the page that answers it (title + 2–3 sentences with one key phrase), two feature names for the stacked cards, and a music track. If I skip any, use the defaults: product "Frame by Frame" living inside its Whop hub, a viewfinder mark (four corner brackets around a bold "FF"), prompt "Make a launch video for my app", a lesson page titled "2.1 Choose a reference", cards "Launch" and "Sound", and Mixkit's free house track "Rising Forest" slowed to 124 BPM.

A 12 second square product sting, 1080x1080, frame numbers at 29.97 fps (f0–f359), master rendered at 59.94 fps. Apple-keynote feel: soft, white, bright blue, glassy. The camera never cuts on a still frame: every shot enters already moving (exponential ease-out, 12–19% of the remaining distance per frame) and leaves on an accelerating move or a blur ramp. Blur follows speed and direction on every move.
Palette: my brand colours mapped onto these roles; if I give none, use page #FDFDFB, haze #B7CFEB, ice #E6F0FA, deep blue #294376 → #769CC2 sky gradient, navy #1E2F52, accent blues #2F6BFF / #3CC8F0 / mint #4ED6A0, white. Type: Inter (400/500/600/700). No purple, violet, magenta or orange anywhere.
Story: the product header rises out of a blue haze inside a light app window → a cursor glides in, turns to face where it's going, grows on hover and clicks the logo → hard cut on the music drop to the app icon with four squares orbiting into a cross → the icon collapses into a Mac menu bar → the cursor clicks the menu-bar icon, a frosted glass prompt box springs out and the prompt types → whip-tilt up through a light-blue flash into the answer page scrolling into place → a card rises over it → blur-dissolve to two stacked cards with giant frosted-glass titles → blur-dissolve to the lone logo disc → hard cut to a black end card with a glowing wordmark.
Banned: crossfades, frozen frames (except one hold in S7), stock UI kits, glows on UI text, Math.random, anything that looks like a template.

Coordinates are px on the 1080 stage. Music beat k = 0.048 + 0.4838·k s (124 BPM, one beat = 14.5 frames). The three hard cuts f72, f101, f159 land 2 frames before a beat: keep these exact frames.
S1 f0–71, header + window + click: haze #B7CFEB fading to #FDFDFB by f28, keep a blue floor glow #DBEEFD at the bottom. Header on one line: logo disc ⌀132 (#FBFCFE, 1px rim #E8E8EA, dark mark), the product name (Inter 500), a dark capsule pill "on Whop" (#2F2E2F, white text); the whole lockup spans x474–1063, centre line rises y932 (f0) → 776 (f2) → 683 (f5) → 608 (f10) → 546 (f24) → 536 (f37), drifting 1 px/frame after. Name appears f2 blurred, pill f4–5 heavily blurred and sliding 15 px left as it sharpens. A light hub window (radius 93, fill #FCFDFF, top band #F1F6FF, blue inner floor glow) fades in around it: opacity 0 to f14, 0.53 f15, 0.7 f19, 1.0 f24; top-left corner (408,405), runs off the right and bottom. Inside: a search pill in the top band, a left icon column (Courses icon at (537,739), faded Chat icon at (537,900)), and a course card from (764,700) off-frame with its cover image, title and "Course · 8 lessons". Cursor (black macOS arrow, white outline, 32x39) appears f27 at (891,393), glides left decelerating to (770,383) f44, rotates to point down-left f47–51 as it dives, lands on the disc's lower right (629,564) f56 → (587,546) f59 → (555,531) f71; grows ×1.55 on hover from f56; a soft ice ring (#D5F3FF → #F7FEFF, outer ⌀174) lights around the disc from f53. Camera zooms about (540,540): 1.0 f46 → 1.2 f60 ease-in-out, holds f61, then eases out accelerating to 1.04 at f71 while the cursor presses (shrinks 15% f69–71).
S2 f72–100, icon + orbit: navy squircle app icon (#294376 → #1E2F52, white mark), 276 px at f72 shrinking ease-out to 178 px by f86, radius 28% of width, on a grey halo disc #E9E9E7 growing ⌀240 (f75) → 326 (f86). Four 92 px squares (radius 26) spin in counter-clockwise, decelerating, and lock into a cross at orbit radius ≈216 by f86: white (1px #E3E8EF edge + faint shadow) left, #2F6BFF top, #3CC8F0 right, #4ED6A0 bottom. f88–100: the icon shrinks accelerating to ≈40 px, the squares slide into a row on its right (white slips behind the icon), blur ramps 0.3 → 6 px.
S3 f101–158, menu bar + prompt: white page above a black laptop bezel band (y425–475, top highlight #686866), a dark navy menu bar (y477–538), wallpaper below = the blue sky gradient with thin white line art (one big circle, two horizontal lines, one vertical, a four-point sparkle at a crossing, soft teal glow top-right). Menu bar right cluster in white: Wi-Fi, battery, toggles, the product mark at x531–584, three ⌀36 dots #2F6BFF / #3CC8F0 / #4ED6A0 at x612, 661, 709, "Mon Jun 22  9:41 AM" 34 px. Enters blurred 3 px and settling by f110. Cursor rises from below (f102), sits on the mark, presses f113–117. Camera pans content right +125 px f115–130 (fastest f118–120). A frosted glass box (white-blue glass over the sky, bright top rim, radius 60) springs out from under the mark f116: width peaks 744 at f126 and settles 726x228 by f138 around x196–922, y568–797. The prompt types from f121 (first legible "Make ") to f150 (complete) at about 1 char/frame with a 1-frame hold every 2–3 chars; caret always on; three white outline icons along the bottom; send button #2F6BFF ⌀51 with a white up arrow. From f136 the whole scene drifts up, accelerating into a whip-tilt (f158 moving ≈25 px/frame, vertical blur ≈6–8 px) while the page tints #E6F4FE over f154–158.
S4 f159–186, answer page: a light course lesson page (breadcrumb, title, body): text column x120, body 47 px Inter 400 grey #BCBCBA, line pitch 58, one key phrase ("frame for frame") in black 600. It arrives smeared and 420 px low, scrolls up with offsets 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180), then creeps −6 px by f186. Blur 24 px (f159) → 1.5 (f165) → 0. Flash #E2F4FE fading to #FDFDFB by f165. A cursor pointing straight up rides the scroll and stops under the key phrase (≈(450,591) f180), then drifts right.
S5 f187–214, card: a white card (x203–878, runs off the bottom) rises over the page: cover image 627x536 inset 24 px, radius 64, a light grabber bar at its top centre, caption semibold 38 px black, sub-caption grey 23 px. Cover top y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205), then keeps drifting up ~4 px/frame. Card blur peaks 3.8 px at f189, sharp by f201; the page behind blurs to ≈2.5 px. Exit f207–214: card shrinks ~5% and rises while the whole frame blurs 1 → 7 px; cut at the blur peak.
S6 f215–244, two cards: white page, two stacked cards 538x348 (radius 57, gap 36) centred on x540, top card settling at y168 by f230, bottom at y552. Each: cover art (no text baked into it), a frosted pill top-left ("Module 3" / "Module 5"), a frosted round "•••" top-right, and a huge bold title along the bottom edge made of frosted glass (a blurred, lightened copy of the image clipped to the letters, cut off by the card's bottom edge): "Launch" and "Sound". Both enter blurred 12 px and sharp by f224; the top card enters 8% large and rises from y264; the bottom card rises from y927, staggered behind it. They drift up 3 px/frame f230–238, then accelerate up and blur out into the cut.
S7 f245–300, logo disc: page #FDFDFB, disc ⌀168 #F6F6F6 with the dark mark, rises into the centre (top y569 f245 → 491 f250 → 468 f255 → 456 f269) with a vertical smear on the cut frame, holds still f269–287 (the only frozen stretch), then shrinks accelerating to ⌀123 at f300.
S8 f301–359, end card: black radial background (#020204 corners, ≈#272729 around the word), the wordmark in Inter 600, white #F3F3F5 with a tight glow plus a wide soft halo, centred (540,540). Word width: ≈1650 px f301 (horizontally smeared, zoom streaks) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (≈1 px/frame shrink) → 492 f350, then collapses ease-in: 450 f355 → 267 f359 with blur rising to 3.5 px. The film ends mid-collapse.

1. One HTML page, 1080x1080, drawn by seek(t) as a pure function of the frame number. No CSS transitions, no timers, no Math.random (seeded hashes only). Shots register as {f0, f1, render(localFrame)}.
2. Every value is continuous in the frame number (the 59.94 master renders half frames): animate with keyframe tables kf(frame, [[f, value], ...], ease) and per-frame lookup tables with linear interpolation. No Math.floor on motion.
3. Blur: CSS filter blur for round blur, SVG feGaussianBlur with separate x/y stdDeviation for directional smears. Zoom smear on the end card = 20–30 scaled, faded copies of the word. Frosted glass = a blurred, lightened copy of what's behind, clipped to the shape.
4. Cursor: one SVG macOS arrow (black fill, white outline, soft shadow) with rotation and scale, reused in S1, S3, S4.
5. Sound (no voice), exactly 12.075 s: music at 124 BPM, soft intro, the drop at 2.47 s (beat 5, the f72 cut leads it by 2 frames). Synthesized SFX: soft impact 0.10 s; whooshes peaking at the cuts 2.402, 3.370, 5.305, 10.043 s; transition hits exactly on 6.240 s and 8.175 s; clicks at 2.33 and 3.83 s; very quiet key ticks every ~32 ms over 4.04–5.00 s; a soft shimmer at 10.05 s. Master to −14 LUFS, true peak −1 dBTP, no fade except the last 60 ms.
6. Render with Playwright (one screenshot per frame, fonts loaded first), encode H.264 yuv420p at 60000/1001, mux the audio.

Measure text only after the fonts load. A long product name won't fit where a 5-letter name did: scale the whole lockup (disc gap, name, pill) to fit the span x474–1063, don't let the pill fall off-frame. A white orbit square vanishes on the white page without a 1px edge and a faint shadow. Don't put images with their own text inside the S6 cards, or the glass title doubles up. Keep the cut frames exact even where they don't sit on a beat. Nothing freezes except S7 f269–287. Heavy blur tables can wipe a shape out completely: if a frame looks empty, lower the blur until the shape still reads.

Ask me for the inputs. Then show me 4 stills (f40 header in the window, f86 icon cross, f150 finished prompt, f230 the two cards) before you render the full film.

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