คลิปโปรโมท
แบบโมชั่นกราฟิก

ผมจะทำคลิปโปรโมท [ชื่อแอปหรือร้าน] แบบโมชั่นกราฟิก ขั้นแรกช่วยเตรียมหน้าจอจริงให้หน่อย

1. โค้ดแอปอยู่ที่ [โฟลเดอร์โค้ด] (ถ้าไม่มีโค้ด ใช้หน้าเว็บ [ลิงก์] แทน) อ่านอย่างเดียว ห้ามแก้ซอร์สของแอป
2. รันแอปในเครื่องด้วยโหมดทดสอบหรือข้อมูลตัวอย่าง [เช่น ฐานข้อมูลจำลอง หรือบัญชีทดสอบ] ห้ามแตะระบบจริงและฐานข้อมูลจริงเด็ดขาด
3. เขียนสคริปต์ Puppeteer เปิด Chrome แล้วกดตามฉากเหล่านี้ อัดเป็นคลิปสั้นแยกไฟล์ละฉาก
   - [ฉาก 1 เช่น เปิดหน้าขาย แตะเมนู เลือกตัวเลือก ใส่ตะกร้า]
   - [ฉาก 2]
   - [ฉาก 3]
   ใส่วงกลมตรงจุดที่แตะให้คนดูเห็น ใช้ขนาดจอแท็บเล็ต 1600x1000 และมือถือ 390x844
4. ก่อนหน้าโหลด ให้ฉีดสคริปต์ที่เบลอตัวเลขเงินทุกตัว (ยอดขาย กำไร รายจ่าย) และข้อมูลส่วนบุคคลทุกอย่าง (ชื่อ เบอร์โทร ที่อยู่) ด้วย CSS blur ตั้งแต่เฟรมแรก และคอยเบลอของที่โผล่มาใหม่ระหว่างอัดด้วย ราคาเมนูไม่ต้องเบลอ
5. ถ่ายภาพนิ่งเพิ่มหน้าละ 1 ภาพ ถ้าแอปมีโหมดมืดให้ถ่ายทั้งโหมดสว่างและโหมดมืด
6. เสร็จแล้วทำ contact sheet ของทุกคลิป เปิดดูเองว่าไม่มีตัวเลขเงิน ชื่อ หรือเบอร์โทรหลุดแม้แต่เฟรมเดียว ก่อนบอกผมว่าเสร็จ

ช่วยคิดไอเดียภาพสำหรับคลิปโปรโมท [ชื่อแอปหรือร้าน] ยาวประมาณ [60-70] วินาที
คนดูคือ [ใครจะดู เช่น เจ้าของร้านเล็ก]
จุดขายที่อยากโชว์: [ข้อ 1] · [ข้อ 2] · [ข้อ 3] · [ข้อ 4]
หน้าจอจริงที่มีอยู่: คลิปอัดจอและภาพนิ่งจากขั้นก่อน

ก่อนเขียนบท ขอสิ่งเหล่านี้
1. hero object 1 ชิ้นที่เดินเรื่องตลอดคลิป แล้วแปลงร่างไปตามแต่ละช่วง (ตัวอย่าง ใบจดออเดอร์กระดาษ กลายเป็นการ์ดออเดอร์ดิจิทัล บินเข้าจอครัว แล้วยุบเป็นแท่งกราฟ)
2. 3 โลกของภาพ คือ โลกปัญหา · โลกเปิดตัว (เวทีเรียบ สีแบรนด์) · โลกหน้าจอจริง
3. setup กับ payoff ให้ช็อตเปิดกับช็อตปิดเป็นฉากเดียวกัน แต่ผลลัพธ์ตรงข้ามกัน
4. โครง 4 องก์ คือ ปัญหา · เปิดตัว · ฟีเจอร์ทีละข้อ · ปิดและชวนติดต่อ

เสนอมา 2-3 แนวให้ผมเลือก บอกด้วยว่าแต่ละแนวเหมาะกับอะไร ห้ามเขียนโค้ดจนกว่าผมจะเลือก

เขียนบทจากไอเดียที่ผมเลือก โหมด: [มีเสียงพากย์ / ไม่มีเสียงพูด]
เขียนเป็นตาราง: ลำดับ · บท · ภาพ · hero object ทำอะไร

ถ้าเป็นแบบมีเสียงพากย์
1. ประโยคสั้น พูดง่าย 1 บรรทัดต่อ 1 ฉาก ใส่ tag อารมณ์หน้าบรรทัด เช่น [curious] [upbeat] [confident] และเว้นจังหวะด้วย <break time="0.15s" />
2. ส่งบททั้งหมดเข้า ElevenLabs ครั้งเดียว โมเดล eleven_v3 เสียง [voice id] อ่านคีย์จากไฟล์ .env ห้ามพิมพ์คีย์ลงในโค้ด
3. เอาไฟล์เสียงกับบทเปล่า (ตัด tag และ break ออก) ส่งเข้า forced alignment ของ ElevenLabs เก็บเวลาทุกตัวอักษรเป็น align.json และเวลาทุกบรรทัดเป็น lines.json
4. ใช้ไฟล์เสียงเต็มความยาว ห้ามตัดท้าย

ถ้าเป็นแบบไม่มีเสียงพูด
1. ทุกฉากมีหัวข้อ + บรรทัดรองสั้นๆ ที่เล่าเรื่องได้เองครบ ดูแบบปิดเสียงก็เข้าใจ
2. ตัวหนังสือค้างบนจออย่างน้อย 1.8 วินาทีต่อบรรทัด
3. กำหนดเวลาแต่ละฉากเองเป็น lines.json ให้ขั้นต่อไปใช้ได้เหมือนกัน
4. ดนตรีดังขึ้นแทนเสียงพูด และทุกท่าสำคัญต้องมีเสียงเอฟเฟกต์

จากบทและเวลาในไฟล์ lines.json ทำสตอรีบอร์ดรายช็อตเป็นไฟล์ STORYBOARD.md

1. ช็อตละ 1.5-4 วินาที ตั้งชื่อ SH01, SH02, ... ยึดเวลาตามเสียง แบ่งเป็นองก์ตามโครงที่เลือกไว้
2. คอลัมน์: ช็อต · เวลา · กล้อง/ท่า · สิ่งที่เกิด · ทรานสิชันออก · เสียง
3. ผูกจังหวะกับคำด้วย @คำ เช่น @แตะรูป แปลว่าท่านี้เกิดตรงเวลาที่เสียงพูดคำนี้
4. ทรานสิชันใช้ชุดนี้เท่านั้น: CUT · WHIP · ZOOM-THRU · WIPE · MORPH · WIPE ใช้แค่ 3-4 ครั้งทั้งคลิป และห้ามใช้ท่าเดิมติดกัน
5. ระบุทุกครั้งว่า UI ไหนเป็น [rebuilt] (สร้างใหม่จากโค้ดแอป) และไหนเป็น [real] (คลิปอัดจอจริง)
6. มีของใหม่เข้าจอราว 1 วินาทีครั้ง ห้ามภาพนิ่งเกิน 1.5 วินาที
7. เขียนหัวข้อแยกว่าแนวตั้ง 9:16 จัดวางต่างจากแนวนอนยังไง

ทำเสร็จให้ผมอ่านก่อน ยังไม่ต้องเขียนโค้ด

สร้าง engine โมชั่นกราฟิกตาม STORYBOARD.md ในโฟลเดอร์ build/ เขียนเองทั้งหมด ไม่ใช้ template วิดีโอสำเร็จรูป

1. HTML/CSS/JS + GSAP · timeline หลักตัวเดียวแบบ paused คุมด้วย seek(t) เท่านั้น ห้าม autoplay
2. ช็อตละไฟล์ shots/SH01.js, shots/SH02.js, ... แก้ช็อตเดียวต้องไม่กระทบช็อตอื่น
3. window.__setT(t) = seek ไปเวลา t แล้วรอภาพทุกรูปในเฟรม decode เสร็จก่อนค่อยคืนค่า · ข้อความที่พิมพ์ทีละตัวหรือตัวเลขที่วิ่ง ต้องคำนวณจากเวลา t ทุกเฟรม ไม่ใช้ตัวจับเวลาแยก
4. ตอนเปิดหน้า รอฟอนต์ [ชื่อฟอนต์] ทุกน้ำหนักที่ใช้โหลดครบ (document.fonts.load ด้วยตัวอักษรไทย แล้ว document.fonts.ready) และภาพ decode ครบ ค่อยตั้ง window.__ready = true
5. ธง URL: ?mode=vo|novo  ?layout=h|v (16:9 = 1920x1080 · 9:16 = 1080x1920)  ?render=1 ซ่อนแผงควบคุม
6. หาเวลาของคำจาก align.json ด้วยการค้นข้อความ ห้ามพิมพ์ตัวเลขเวลาเอง
7. player.html มีปุ่มเล่น/หยุด แถบเลื่อน เวลาและชื่อช็อตปัจจุบัน รายการช็อตกดกระโดดได้ · เปิด player.html#SH12 แล้วไปช็อตนั้นเลย · คีย์ลัด Space เล่น/หยุด · ลูกศรซ้ายขวาทีละเฟรม · [ ] ช็อตก่อน/ถัดไป · ตอนพรีวิวเล่นเสียงพากย์ ดนตรี และเอฟเฟกต์ตรงเวลา
8. สีหลัก [รหัสสีแบรนด์] · ฟอนต์ [ชื่อฟอนต์] · ห้าม emoji บนจอ

เริ่มจากทำ SH01 ถึง SH03 ให้ผมดูใน player ก่อน แล้วค่อยทำช็อตที่เหลือ

ช็อตที่เป็น [rebuilt] ให้สร้าง UI ใหม่ด้วย HTML/CSS จากโค้ดจริงของแอปใน [โฟลเดอร์โค้ด] (อ่านอย่างเดียว ห้ามแก้)

1. ดึงสี ฟอนต์ ขอบมน เงา จากไฟล์ธีมหรือ CSS ของแอป ทั้งโหมดสว่างและโหมดมืด แล้วจัดโครงการ์ด ปุ่ม ตะกร้า ให้เหมือนหน้าจอจริง
2. ชื่อสินค้า ราคา และรูป ใช้ของจริงจาก [ไฟล์เมนูหรือข้อมูลสินค้า]
3. ข้อมูลคนใช้ตัวอย่าง เช่น "ลูกค้า A" และ "08x-xxx-xxxx" · กราฟไม่ใส่ตัวเลข
4. ห้ามสร้างหน้าจอหรือปุ่มที่แอปไม่มีจริง
5. ช็อตที่เป็น [real] ให้แปลงคลิปอัดจอเป็นภาพ JPG ทีละเฟรม 30fps ย่อให้พอดีกรอบ แล้วเปลี่ยนภาพตามเวลา t ในกรอบ iPad หรือมือถือที่วาดด้วย CSS หรือเป็นกรอบเล็กมุมจอติดป้าย "หน้าจอจริง"
6. เสร็จแล้วซูม 1.6 เท่าในช็อตที่ใกล้ที่สุด เปิดดูเองว่ายังคมและตัวหนังสือไทยไม่แตก

สร้างเสียงเอฟเฟกต์ด้วยโค้ด Python (numpy) ตั้ง seed ตายตัวให้รันกี่ครั้งก็ได้เสียงเดิม เก็บไว้ที่ audio/sfx/*.wav

1. whoosh = noise ผ่าน band-pass ที่กวาดความถี่ · pop = sine ที่เสียงตกลง · impact = เสียงเบสต่ำ + noise สั้นๆ · click · tick · ding · sparkle · riser · เสียงกระดาษ [เพิ่มเสียงที่คลิปคุณต้องใช้]
2. ใน engine ทุกท่าที่ควรมีเสียง ให้เรียก sfx(ชื่อ, เวลา) จาก timeline เดียวกับภาพ แล้วส่งออกเป็น cues.json ห้ามพิมพ์เวลาเสียงซ้ำอีกที่
3. มิกซ์ด้วย ffmpeg: เสียงพากย์ 0 dB · ดนตรี [ไฟล์เพลง] ประมาณ -17 dB และลดลงอีกเล็กน้อยตอนมีเสียงพูด · เอฟเฟกต์ประมาณ 0.35 · amix normalize=0 แล้วตามด้วย alimiter กันเสียงแตก
4. โหมดไม่มีเสียงพูด: ดนตรีประมาณ -12 dB ไม่ต้องลดตอนพูด และเอฟเฟกต์หนาขึ้น ทุกท่าสำคัญมีเสียง
5. ใช้เสียงพากย์เต็มความยาว ห้ามตัดท้ายไฟล์

เขียน build/render.mjs สำหรับออกไฟล์วิดีโอ

1. เปิดเว็บเซิร์ฟเวอร์ในเครื่อง แล้วใช้ Puppeteer + Chrome เปิด player.html?render=1&mode=[vo|novo]&layout=[h|v] รอ window.__ready
2. แบ่งงานเป็นหลาย worker โดย 1 worker = 1 browser แยกกัน ห้ามเปิดหลายแท็บใน browser เดียว (แท็บที่อยู่ข้างหลังจะไม่วาดภาพ) · ตั้งจำนวนได้ด้วย --workers
3. ทีละเฟรม 30fps: await __setT(เฟรม/30) แล้ว screenshot เป็น JPEG เก็บในโฟลเดอร์เฟรม
4. render เฉพาะช่วงได้ด้วย --from SH20 --to SH23 โดยทับเฉพาะเฟรมช่วงนั้น
5. เฟรมครบแล้ว มิกซ์เสียง แล้วใช้ ffmpeg รวมเป็น mp4 H.264 crf 18 yuv420p เสียง AAC 192k และ +faststart
6. แนวตั้ง layout=v ใช้ engine เดียวกัน จัดวางใหม่: ตัวหนังสือบน อุปกรณ์กลาง กรอบหน้าจอจริงล่าง เว้นขอบบน 120px และล่าง 260px ไม่ให้ปุ่มของแอปโซเชียลบัง
7. ตั้งชื่อไฟล์ [ชื่องาน]_[16x9|9x16]_[vo|novo]_[วันที่].mp4

ตรวจคลิปที่ render แล้วทุกเวอร์ชัน

1. ทำ contact sheet ภาพละ 1 วินาที มีเวลาและเลขเฟรมบนภาพ แบ่งเป็นหลายแผ่นให้อ่านออก แล้วเปิดดูเองทุกแผ่น
2. ช่วง WHIP และ ZOOM-THRU ทำ contact sheet ละเอียด 10 ภาพต่อวินาที หาเฟรมว่างหรือเฟรมกระตุก
3. เช็คทีละข้อ: ตัวหนังสือไทยไม่แตกและไม่ล้นกรอบ · ไม่มีของทับข้อความ · ไม่มีฉากว่าง · ไม่มีตัวเลขเงิน ชื่อ หรือเบอร์โทรหลุด · คลิปในจอขยับจริง (เทียบเฟรมติดกัน) · ภาพตรงกับคำที่พูด · ระดับเสียงด้วย ffmpeg ebur128
4. รายงานเป็นเลขช็อต เช่น "SH14 ข้อความทับมือถือ" แก้ทีละช็อต แล้ว render เฉพาะช่วงนั้นด้วย --from --to
ห้ามบอกว่าเสร็จจนกว่าจะเปิดดูผลเองแล้ว