วิดีโอเปิดตัว Frame by Frame

ขอข้อมูลต่อไปนี้จากฉัน: ชื่อผลิตภัณฑ์ โลโก้ (หรือให้คุณวาดสัญลักษณ์ง่ายๆ ก็ได้) ข้อความสั้นๆ ที่ผู้ใช้พิมพ์ลงในช่องข้อความแจ้งเตือน หน้าเว็บที่ตอบคำถามนั้น (ชื่อเรื่อง + 2-3 ประโยคที่มีวลีสำคัญหนึ่งวลี) ชื่อฟีเจอร์สองชื่อสำหรับบัตรที่เรียงซ้อนกัน และแทร็กเพลง หากฉันข้ามส่วนใดส่วนหนึ่งไป ให้ใช้ค่าเริ่มต้น: ผลิตภัณฑ์ "Frame by Frame" ที่อยู่ใน Whop hub สัญลักษณ์ช่องมองภาพ (วงเล็บเหลี่ยมสี่มุมล้อมรอบ "FF" ตัวหนา) ข้อความแจ้งเตือน "สร้างวิดีโอเปิดตัวสำหรับแอปของฉัน" หน้าบทเรียนชื่อ "2.1 เลือกแหล่งอ้างอิง" บัตร "เปิดตัว" และ "เสียง" และแทร็กเพลงเฮาส์ฟรีของ Mixkit ชื่อ "Rising Forest" ที่ลดความเร็วลงเหลือ 124 BPM

วิดีโอโปรโมชั่นสินค้าความยาว 12 วินาที ความละเอียด 1080x1080 พิกเซล อัตราเฟรม 29.97 fps (f0–f359) เรนเดอร์หลักที่ 59.94 fps ให้ความรู้สึกเหมือนการนำเสนอสินค้าของ Apple: นุ่มนวล สีขาว สีฟ้าสดใส และดูโปร่งใส กล้องไม่เคยตัดภาพจากเฟรมหยุดนิ่ง: ทุกช็อตเริ่มต้นด้วยภาพเคลื่อนไหว (การค่อยๆ ลดความเร็วลงทีละ 12–19% ของระยะทางที่เหลือต่อเฟรม) และจบลงด้วยการเคลื่อนไหวที่เร่งความเร็วหรือการเบลอแบบค่อยเป็นค่อยไป การเบลอจะตามความเร็วและทิศทางของการเคลื่อนไหวทุกครั้ง
โทนสี: หน้า #FDFDFB, หมอก #B7CFEB, น้ำแข็ง #E6F0FA, สีน้ำเงินเข้ม #294376 → #769CC2 ไล่ระดับสีฟ้า, สีน้ำเงินกรมท่า #1E2F52, สีน้ำเงินเน้น #2F6BFF / #3CC8F0 / สีมิ้นต์ #4ED6A0, สีขาว ประเภท: Inter (400/500/600/700) ไม่มีสีม่วง, สีม่วงอ่อน, สีม่วงแดง หรือสีส้มเลย
เรื่องราว: ส่วนหัวของผลิตภัณฑ์ปรากฏขึ้นจากหมอกสีฟ้าภายในหน้าต่างแอปที่สว่าง → เคอร์เซอร์เลื่อนเข้ามา หันหน้าไปยังตำแหน่งที่จะไป ขยายใหญ่ขึ้นเมื่อวางเมาส์เหนือ และคลิกที่โลโก้ → ตัดฉากอย่างฉับพลันพร้อมกับเสียงเพลงประกอบไปยังไอคอนแอปที่มีสี่เหลี่ยมสี่อันหมุนวนเป็นรูปกากบาท → ไอคอนยุบตัวลงในแถบเมนูของ Mac → เคอร์เซอร์คลิกที่ไอคอนในแถบเมนู กล่องข้อความแบบกระจกฝ้าปรากฏขึ้น และข้อความนั้นถูกพิมพ์ → เอียงขึ้นอย่างรวดเร็วผ่านแสงวาบสีฟ้าอ่อนไปยังหน้าคำตอบที่เลื่อนเข้ามา → การ์ดปรากฏขึ้นเหนือข้อความนั้น → เบลอและค่อยๆ เปลี่ยนไปเป็นการ์ดสองใบซ้อนกันที่มีชื่อเรื่องขนาดใหญ่แบบกระจกฝ้า → เบลอและค่อยๆ เปลี่ยนไปเป็นแผ่นโลโก้เดี่ยว → ตัดฉากอย่างฉับพลันไปยังการ์ดปิดท้ายสีดำที่มีชื่อแบรนด์เรืองแสง
สิ่งที่ห้ามใช้: การเปลี่ยนภาพแบบค่อยๆ จางหาย, เฟรมภาพหยุดนิ่ง (ยกเว้นเฟรมภาพค้างใน S7), ชุด UI มาตรฐาน, แสงเรืองบนข้อความ UI, Math.random, และสิ่งใดก็ตามที่ดูเหมือนเทมเพลต

พิกัดเป็นพิกเซลบนเวทีขนาด 1080 จังหวะดนตรี k = 0.048 + 0.4838·ks (124 BPM หนึ่งจังหวะ = 14.5 เฟรม) การตัดภาพอย่างรวดเร็วสามครั้ง f72, f101, f159 เกิดขึ้น 2 เฟรมก่อนจังหวะ: ให้คงเฟรมเหล่านี้ไว้
S1 f0–71, ส่วนหัว + หน้าต่าง + คลิก: หมอก #B7CFEB จางลงเป็น #FDFDFB ที่ f28 รักษาแสงเรืองสีน้ำเงินที่พื้น #DBEEFD ไว้ด้านล่าง ส่วนหัวอยู่ในบรรทัดเดียว: โลโก้วงกลม ⌀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, แสงเรืองรองสีน้ำเงินด้านใน) ค่อยๆ ปรากฏขึ้นรอบๆ: ความทึบแสง 0 ถึง f14, 0.53 f15, 0.7 f19, 1.0 f24; มุมบนซ้าย (408,405) ขยายออกไปทางขวาและล่าง ภายใน: ปุ่มค้นหาในแถบด้านบน คอลัมน์ไอคอนด้านซ้าย (ไอคอนหลักสูตรที่ (537,739), ไอคอนแชทที่จางลงที่ (537,900)) และการ์ดหลักสูตรจาก (764,700) นอกเฟรมพร้อมภาพปก ชื่อเรื่อง และ "หลักสูตร · 8 บทเรียน" Cursor (ลูกศรสีดำของ macOS, ขอบสีขาว, 32x39) ปรากฏขึ้นที่ f27 ที่ (891,393) เลื่อนไปทางซ้ายด้วยความเร็วลดลงไปยัง (770,383) f44 หมุนเพื่อชี้ลงด้านล่างซ้าย f47–51 ขณะที่มันดำดิ่งลง ลงจอดที่มุมล่างขวาของดิสก์ (629,564) f56 → (587,546) f59 → (555,531) f71; ขยายขนาด ×1.55 เมื่อวางเมาส์เหนือเคอร์เซอร์ที่ f56; วงแหวนน้ำแข็งอ่อน (#D5F3FF → #F7FEFF, ขอบนอก ⌀174) สว่างขึ้นรอบดิสก์ตั้งแต่ f53 กล้องซูมประมาณ (540,540): 1.0 f46 → 1.2 f60 แบบค่อยๆ ซูมเข้า-ซูมออก ค้างไว้ที่ f61 จากนั้นค่อยๆ ซูมออกโดยเร่งความเร็วไปที่ 1.04 ที่ f71 ขณะที่เคอร์เซอร์กด (ย่อลง 15% f69–71)
S2 f72–100, ไอคอน + วงโคจร: ไอคอนแอปทรงสี่เหลี่ยมโค้งมนสีน้ำเงินเข้ม (#294376 → #1E2F52, เครื่องหมายสีขาว), ขนาด 276 พิกเซล ที่ f72 ค่อยๆ หดลงเหลือ 178 พิกเซล ที่ f86 รัศมี 28% ของความกว้าง บนจานรัศมีสีเทา #E9E9E7 ที่ขยายใหญ่ขึ้น ⌀240 (f75) → 326 (f86) สี่เหลี่ยมจัตุรัสขนาด 92 พิกเซล (รัศมี 26) สี่อันหมุนทวนเข็มนาฬิกา ลดความเร็วลง และล็อคเข้าเป็นรูปกากบาทที่รัศมีวงโคจร ≈216 ที่ f86: สีขาว (ขอบ 1 พิกเซล #E3E8EF + เงาจางๆ) ด้านซ้าย, #2F6BFF ด้านบน, #3CC8F0 ด้านขวา, #4ED6A0 ด้านล่าง f88–100: ไอคอนจะหดตัวลงอย่างรวดเร็วจนเหลือประมาณ 40 พิกเซล สี่เหลี่ยมจะเลื่อนเข้ามาเรียงเป็นแถวทางด้านขวา (สีขาวจะเลื่อนไปอยู่ด้านหลังไอคอน) ความเบลอจะค่อยๆ เพิ่มขึ้นจาก 0.3 → 6 พิกเซล
S3 f101–158, แถบเมนู + ข้อความแจ้งเตือน: หน้าสีขาวอยู่เหนือขอบจอแล็ปท็อปสีดำ (y425–475, ไฮไลต์ด้านบน #686866), แถบเมนูสีกรมท่าเข้ม (y477–538), วอลเปเปอร์ด้านล่าง = การไล่ระดับสีฟ้าของท้องฟ้าพร้อมเส้นสีขาวบางๆ (วงกลมขนาดใหญ่หนึ่งวง, เส้นแนวนอนสองเส้น, เส้นแนวตั้งหนึ่งเส้น, ประกายสี่จุดที่จุดตัด, แสงสีฟ้าอมเขียวอ่อนๆ ที่มุมบนขวา) กลุ่มปุ่มสีขาวทางด้านขวาของแถบเมนู: Wi-Fi, แบตเตอรี่, ปุ่มสลับ, เครื่องหมายผลิตภัณฑ์ที่ x531–584, จุด ⌀36 สามจุด #2F6BFF / #3CC8F0 / #4ED6A0 ที่ x612, 661, 709, "จันทร์ 22 มิ.ย. 9:41 น." 34 พิกเซล เข้าสู่ภาพเบลอ 3 พิกเซลและค่อยๆ จางลงโดย f110 Cursor เลื่อนขึ้นจากด้านล่าง (f102), วางอยู่บนเครื่องหมาย, กด f113–117 กล้องแพนเนื้อหาไปทางขวา +125 พิกเซล f115–130 (เร็วที่สุด f118–120) กล่องกระจกฝ้า (กระจกสีขาวอมฟ้าเหนือท้องฟ้า ขอบบนสว่าง รัศมี 60) โผล่ออกมาจากใต้เครื่องหมาย f116: ความกว้างสูงสุด 744 ที่ f126 และคงที่ที่ 726x228 x f138 ประมาณ x196–922, y568–797 ข้อความแจ้งพิมพ์ตั้งแต่ f121 (คำว่า "Make" ที่อ่านได้ครั้งแรก) ถึง f150 (เสร็จสมบูรณ์) ประมาณ 1 ตัวอักษรต่อเฟรม โดยมีการหยุด 1 เฟรมทุกๆ 2–3 ตัวอักษร เคอร์เซอร์เปิดอยู่ตลอดเวลา มีไอคอนเส้นขอบสีขาวสามอันเรียงตามด้านล่าง ปุ่มส่ง #2F6BFF ⌀51 พร้อมลูกศรชี้ขึ้นสีขาว ตั้งแต่ f136 ฉากทั้งหมดจะค่อยๆ เลื่อนขึ้น พร้อมเร่งความเร็วจนเกิดการเอียงแบบกระชาก (f158 เคลื่อนที่ประมาณ 25 พิกเซลต่อเฟรม เบลอแนวตั้งประมาณ 6-8 พิกเซล) ในขณะที่หน้าเว็บเปลี่ยนสีเป็น #E6F4FE ในช่วง f154-158
S4 f159–186, หน้าคำตอบ: หน้าบทเรียนหลักสูตรเบาๆ (เส้นทางนำทาง, ชื่อเรื่อง, เนื้อหา): คอลัมน์ข้อความ x120, เนื้อหา 47 px สีเทา Inter 400 #BCBCBA, ระยะห่างระหว่างบรรทัด 58, วลีสำคัญหนึ่งวลี ("frame for frame") สีดำ 600 ปรากฏขึ้นแบบเลือนรางและต่ำ 420 px เลื่อนขึ้นพร้อมค่าชดเชย 420, 315, 210, 170, 140, 116, 96, 81 (f166) … 14 (f175) … 0 (f180) จากนั้นค่อยๆ เลื่อนลง −6 px ที่ f186 เบลอ 24 px (f159) → 1.5 (f165) → 0 กระพริบ #E2F4FE จางลงเป็น #FDFDFB ที่ f165 เคอร์เซอร์ที่ชี้ขึ้นตรงๆ จะเลื่อนไปตามแถบเลื่อนและหยุดอยู่ใต้คำสำคัญ (≈(450,591) f180) จากนั้นจะเลื่อนไปทางขวา
S5 f187–214, การ์ด: การ์ดสีขาว (x203–878, เลยขอบล่าง) เลื่อนขึ้นมาเหนือหน้ากระดาษ: ภาพปก 627x536 พิกเซล ระยะห่าง 24 พิกเซล รัศมี 64 พิกเซล มีแถบดึงแสงอยู่ตรงกลางด้านบน คำบรรยายภาพตัวหนาปานกลางสีดำขนาด 38 พิกเซล คำบรรยายย่อยสีเทาขนาด 23 พิกเซล ด้านบนของปก y642 (f187) → 456 (f191) → 395 (f196) → 369 (f200) → 348 (f205) จากนั้นก็เลื่อนขึ้นไปเรื่อยๆ ประมาณ 4 พิกเซลต่อเฟรม ความเบลอของการ์ดสูงสุด 3.8 พิกเซลที่ f189 คมชัดที่ f201 หน้ากระดาษด้านหลังเบลอประมาณ 2.5 พิกเซล ออกที่ f207–214: การ์ดหดลงประมาณ 5% แล้วเลื่อนขึ้นมาในขณะที่เฟรมทั้งหมดเบลอ 1 → 7 พิกเซล ตัดภาพที่จุดสูงสุดของความเบลอ
S6 f215–244, การ์ดสองใบ: หน้ากระดาษสีขาว, การ์ดสองใบซ้อนกัน ขนาด 538x348 พิกเซล (รัศมี 57, ช่องว่าง 36) จัดวางอยู่ตรงกลางที่ x540, การ์ดใบบนวางอยู่ที่ y168 x f230, การ์ดใบล่างอยู่ที่ 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 (การยืดที่หยุดนิ่งเพียงอย่างเดียว) จากนั้นหดตัวลงอย่างรวดเร็วไปที่ ⌀123 ที่ f300
S8 f301–359, ภาพสุดท้าย: พื้นหลังสีดำแบบรัศมี (มุม #020204, รอบคำประมาณ #272729), โลโก้ตัวอักษรเป็นสี Inter 600, สีขาว #F3F3F5 พร้อมแสงเรืองรองแคบๆ และรัศมีนุ่มๆ กว้างๆ อยู่ตรงกลาง (540,540) ความกว้างของคำ: ประมาณ 1650 พิกเซล f301 (เบลอในแนวนอน มีรอยซูม) → 1350 f302 → 1110 f303 → 1049 f304 → 734 f309 → 678 f311 → 563 f320 → 516 f342 (ย่อลงประมาณ 1 พิกเซลต่อเฟรม) → 492 f350 จากนั้นยุบตัวลงแบบ ease-in: 450 f355 → 267 f359 พร้อมเบลอเพิ่มขึ้นเป็น 3.5 พิกเซล ภาพยนตร์จบลงกลางฉากที่กำลังพังทลาย

1. หน้า HTML หนึ่งหน้า ขนาด 1080x1080 พิกเซล วาดโดย seek(t) เป็นฟังก์ชันบริสุทธิ์ของหมายเลขเฟรม ไม่มีเอฟเฟ็กต์การเปลี่ยนภาพ CSS ไม่มีตัวจับเวลา ไม่มี Math.random (ใช้เฉพาะแฮชที่กำหนดค่าเริ่มต้นเท่านั้น) ช็อตจะถูกบันทึกเป็น {f0, f1, render(localFrame)}
2. ค่าทุกค่าต่อเนื่องกันในหมายเลขเฟรม (มาสเตอร์เรนเดอร์ 59.94 แสดงผลครึ่งเฟรม): สร้างแอนิเมชันด้วยตารางคีย์เฟรม kf(frame, [[f, value],...], ease) และตารางค้นหาต่อเฟรมด้วยการประมาณค่าเชิงเส้น ไม่ใช้ Math.floor กับการเคลื่อนไหว
3. เบลอ: ใช้ฟิลเตอร์ CSS blur สำหรับการเบลอแบบกลม, SVG feGaussianBlur พร้อมค่าเบี่ยงเบนมาตรฐาน x/y แยกกันสำหรับการเบลอแบบมีทิศทาง การเบลอแบบซูมบนการ์ดท้ายสุด = สำเนาคำที่ย่อขนาดและจางลง 20-30 ชุด กระจกฝ้า = สำเนาสิ่งที่อยู่ด้านหลังที่เบลอและสว่างขึ้น โดยตัดให้พอดีกับรูปทรง
4. Cursor: ลูกศร SVG สำหรับ macOS หนึ่งอัน (สีดำด้านใน เส้นขอบสีขาว เงาอ่อน) พร้อมฟังก์ชั่นหมุนและปรับขนาด นำกลับมาใช้ใหม่ใน S1, S3, S4
5. เสียง (ไม่มีเสียงพูด) ความยาว 12.075 วินาที: ดนตรีที่ความเร็ว 124 BPM, อินโทรเบาๆ, จังหวะหนักแน่นที่ 2.47 วินาที (จังหวะที่ 5, การตัด f72 นำหน้า 2 เฟรม) เอฟเฟกต์เสียงสังเคราะห์: เสียงกระทบเบาๆ ที่ 0.10 วินาที; เสียงหวือๆ ที่จุดสูงสุดของการตัดที่ 2.402, 3.370, 5.305, 10.043 วินาที; การเปลี่ยนผ่านที่ 6.240 วินาที และ 8.175 วินาที; เสียงคลิกที่ 2.33 และ 3.83 วินาที; เสียงติ๊กของคีย์เบาๆ ทุกๆ ~32 มิลลิวินาที ในช่วงเวลา 4.04–5.00 วินาที; เสียงระยิบระยับเบาๆ ที่ 10.05 วินาที ระดับเสียงหลักอยู่ที่ −14 LUFS, ระดับเสียงสูงสุดจริงอยู่ที่ −1 dBTP, ไม่มีการเฟด ยกเว้น 60 มิลลิวินาทีสุดท้าย
6. เรนเดอร์ด้วย Playwright (หนึ่งภาพหน้าจอต่อเฟรม โดยโหลดฟอนต์ก่อน) เข้ารหัส H.264 yuv420p ที่ 60000/1001 และรวมเสียงเข้าด้วยกัน

วัดขนาดข้อความหลังจากที่โหลดฟอนต์เสร็จแล้วเท่านั้น ชื่อผลิตภัณฑ์ที่ยาวจะไม่พอดีกับตำแหน่งที่ชื่อ 5 ตัวอักษรเคยพอดี: ปรับขนาดองค์ประกอบทั้งหมด (ช่องว่างระหว่างแผ่นดิสก์ ชื่อ และเม็ดยา) ให้พอดีกับช่วง x474–1063 อย่าปล่อยให้เม็ดยาหลุดออกจากเฟรม สี่เหลี่ยมวงกลมสีขาวจะหายไปบนหน้ากระดาษสีขาวหากไม่มีขอบ 1 พิกเซลและเงาจางๆ อย่าใส่รูปภาพที่มีข้อความของตัวเองไว้ภายในการ์ด S6 มิฉะนั้นชื่อเรื่องที่เป็นกระจกจะซ้ำกัน รักษาเฟรมที่ตัดไว้ให้แม่นยำแม้ว่าจะไม่ได้อยู่บนจังหวะก็ตาม ไม่มีอะไรหยุดนิ่งยกเว้น S7 f269–287 ตารางเบลอที่หนักเกินไปอาจทำให้รูปร่างหายไปอย่างสมบูรณ์: หากเฟรมดูว่างเปล่า ให้ลดการเบลอลงจนกว่ารูปร่างจะยังคงอ่านได้

ถามข้อมูลที่ต้องการก่อน จากนั้นแสดงภาพนิ่ง 4 ภาพ (f40 ส่วนหัวของหน้าต่าง, f86 ไอคอนกากบาท, f150 ข้อความแจ้งเสร็จสิ้น, f230 การ์ดสองใบ) ก่อนที่คุณจะเรนเดอร์ภาพยนตร์ฉบับเต็ม

Ask me for: my product name, a logo (or let you draw a simple mark), 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: 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.