JS Motion Guide
บทที่ 1 / 8
✂️ Paper Cut Motion · คู่มือฉบับเข้าใจง่าย

สร้างวิดีโอ Animation
ด้วย JavaScript

เข้าใจหลักการทำงานเบื้องหลัง และวิธีสั่ง AI ให้สร้างวิดีโอแนว Motion Design ที่ Preview สวย และ Export ออกมาตรงกับที่เห็นจริง

CanvasTimelineWeb AudioExport MP4Prompt Framework
</>
1

ภาพรวม: เหมือนทำ "สมุดภาพพลิก" ด้วยโค้ด

เข้าใจแก่นของระบบใน 3 นาที

📖 แนวคิดหลัก

นึกถึงสมุดที่วาดรูปไว้ทุกหน้า แล้วพลิกเร็ว ๆ จนภาพดูเหมือนขยับได้ วิดีโอด้วย JavaScript ทำงานแบบเดียวกัน ต่างกันแค่ โค้ดวาดแต่ละหน้าให้อัตโนมัติ ประมาณ 30 หน้าต่อวินาที

เราจึงไม่ได้ "ตัดต่อวิดีโอ" แต่กำลัง เขียนคำสั่งบอกว่าแต่ละวินาทีมีอะไรอยู่ตรงไหนบนจอ ให้เบราว์เซอร์วาดตาม แล้วค่อยอัดออกมาเป็นไฟล์วิดีโอ

t = 0.0 วิ t = 0.5 วิ t = 1.0 วิ

🧱 โครงสร้าง 5 ชั้นของระบบ

1
DATA — ข้อมูลซีน
ข้อความ สี เวลา องค์ประกอบของทุกฉาก
ส่วนที่แก้บ่อย
2
TIMELINE — นาฬิกากลาง
นับเวลาตัวเดียว ส่งค่า t (วินาที) ให้ทุกส่วน
หัวใจของระบบ
3
RENDERER — ตัววาดภาพ
render(t) วาดทุกอย่างลง Canvas ตามเวลา
ภาพ
4
AUDIO — ระบบเสียง
Web Audio นัดเสียงตามเวลาเดียวกัน
เสียง
5
EXPORT — ตัวบันทึก
Canvas + Audio → Recorder → MP4
ไฟล์วิดีโอ

🎮 ลองเล่นดู: render(t) ทำงานอย่างไร

ลากแถบเวลาเพื่อดูว่า "ภาพ ณ วินาทีนั้น" หน้าตาเป็นอย่างไร ลากกลับไปกี่ครั้งก็ได้ภาพเดิม นี่คือหลักการที่ทำให้ Export ตรงกับ Preview

t = 0.00 s

สิ่งที่เกิดขึ้นในเดโมนี้

  • 0.2–0.9 วิ กระดาษเขียวเลื่อนเข้าจากซ้าย (Slide-in + Overshoot)
  • 0.6–1.3 วิ กระดาษขาวเลื่อนเข้าจากขวา เป็นอีกเลเยอร์
  • 1.4–1.9 วิ วงกลมถูก "แปะ" ลงมา เงาหดลงเหมือนวางลงบนฉาก
  • 2.0 วิ~ ตัวอักษรตกลงมาทีละตัว (Stagger)
  • 3.2 วิ~ ข้อความรองเลื่อนขึ้น
  • ขอบกระดาษขรุขระสร้างด้วย seeded random จึงไม่เปลี่ยนรูปทุกเฟรม
2

ระบบทำงานเหมือน "กองถ่ายละคร" 5 ฝ่าย

คลิกการ์ดเพื่อข้ามไปอ่านแต่ละฝ่าย

📜 บทละครScene Data
🎬 ผู้กำกับถือนาฬิกาTimeline
🎨 ช่างวาดฉากRenderer
🔊 ทีมเสียงAudio
🎥 ตากล้องExport
📜

ฝ่ายที่ 1: บทละคร (ข้อมูลซีน)

Scene Data

คือส่วนที่เขียนเก็บไว้ว่าวิดีโอมีกี่ฉาก แต่ละฉากเริ่มเมื่อไร มีข้อความอะไร ใช้ภาพอะไร เสียงอะไร

ทำไมต้องแยกออกมา: ถ้าบทปนอยู่กับโค้ดวาดภาพ เวลาจะเปลี่ยนแค่คำเดียวต้องไปค้นในโค้ดหลายร้อยบรรทัด แต่ถ้าแยกไว้ด้านบนสุด ก็แก้ได้เหมือนแก้ข้อความในตาราง

⚠️

ถ้าไม่สั่ง: AI มักเขียนข้อความและตัวเลขเวลากระจายอยู่ทั่วโค้ด แก้ทีหนึ่งพังทีหนึ่ง

🎬

ฝ่ายที่ 2: ผู้กำกับถือนาฬิกา (Timeline)

Master Clock

เป็นนาฬิกากลางเพียงเรือนเดียว ทุกฝ่ายถามเวลาจากที่นี่ที่เดียว

ทำไมสำคัญ: ลองนึกว่านักดนตรีในวงแต่ละคนนับจังหวะเอง เพลงจะเพี้ยนทันที เช่นเดียวกัน ถ้าภาพนับเวลาแบบหนึ่ง เสียงนับอีกแบบ เล่นไปสักพักเสียง "ปุ๊บ" จะดังก่อนหรือหลังข้อความโผล่

หลักสำคัญ: ใช้ "เวลา" ไม่ใช่ "จำนวนเฟรม"

❌ แบบผิด"ทุกเฟรมให้กระดาษเลื่อนไป 5 พิกเซล" → เครื่องช้า เฟรมน้อย กระดาษก็เลื่อนช้าตาม
✅ แบบถูก"วินาทีที่ 2.0 อยู่ขอบซ้าย วินาทีที่ 2.6 อยู่กลางจอ" → เครื่องเร็วหรือช้า ก็ถึงกลางจอตอน 2.6 วินาทีเสมอ
ตัวอย่างโค้ด // progress = 0 ตอนเริ่ม, 1 ตอนจบ const p = progress(t, 2.0, 2.6); const x = lerp(-300, 540, easeOutBack(p));
🎨

ฝ่ายที่ 3: ช่างวาดฉาก (Renderer)

render(t) → Canvas

คือฟังก์ชันที่รับเวลามา แล้ววาดภาพ ณ เวลานั้นออกมาทั้งจอ มีกติกา 3 ข้อ

กติกาข้อ 1: วาดบน Canvas

Canvas คือ "กระดาษวาดรูป" ในหน้าเว็บ ส่วนการใช้ HTML/CSS ทั่วไปเหมือน "ติดสติกเกอร์บนหน้าเว็บ" ตอน Preview ดูเหมือนกัน แต่ ตากล้องถ่ายได้แค่ Canvas

🎥

ถ้าใช้ CSS ทำ Animation พอกด Export จะได้จอดำหรือข้อความหาย

กติกาข้อ 2: วาดกี่ครั้งต้องได้ภาพเดิม

งานกระดาษต้องมีความ "ไม่เป๊ะ" เช่น ขอบขรุขระ ชิ้นกระดาษเอียงนิด ๆ ถ้าใช้การสุ่มธรรมดา ทุกครั้งที่วาดขอบกระดาษจะเปลี่ยนรูปไปเรื่อย ๆ ภาพจะสั่นแบบน่ารำคาญ และภาพตอน Export จะไม่ตรงกับตอน Preview

วิธีแก้คือ สุ่มแบบมีเลขตั้งต้น (Seed) เหมือนสับไพ่ด้วยวิธีเดิมทุกครั้ง ได้ผลที่ดู "สุ่ม" แต่ซ้ำเดิมได้

กติกาข้อ 3: สร้างความรู้สึก Stop Motion

งาน Stop Motion จริงถ่ายประมาณ 12 ภาพต่อวินาที เลยดูกระตุกนิด ๆ อย่างมีเสน่ห์ เคล็ดลับคือผสม 2 จังหวะ

🏃 การเคลื่อนที่หลักเช่น กระดาษเลื่อนเข้า → ลื่นที่ 30 fps ให้ดูเป็นมืออาชีพ
✋ การสั่นเล็ก ๆเช่น กระดาษขยับเหมือนมีคนจับ → เปลี่ยน 12 ครั้งต่อวินาที ให้ดูทำมือ
🔊

ฝ่ายที่ 4: ทีมเสียง (Audio)

Web Audio API

ใช้ Web Audio API ซึ่งเป็นเครื่องมือเสียงในเบราว์เซอร์ ทำได้ 2 แบบ

🎛️ สังเคราะห์เสียงด้วยโค้ด

เช่น เสียงกระดาษ สร้างจากเสียงซ่า (noise) แล้วกรองให้เหมือนกระดาษถู ข้อดีคือไม่ต้องหาไฟล์เสียง

🎵 ใช้ไฟล์เสียง

เหมาะกับเพลงประกอบ (BGM) เพราะเพลงที่สังเคราะห์ด้วยโค้ดมักฟังดูเรียบ ๆ

การผูกเสียงกับภาพ

เขียนในบทว่า "วินาทีที่ 1.8 → เสียง Pop" คู่กับ "วินาทีที่ 1.8 → ข้อความโผล่" ทั้งสองอ่านเวลาจากนาฬิกาเดียวกัน จึงตรงกันเสมอ

การตรงจังหวะเพลง (BPM)

ถ้าเพลงมีจังหวะ 120 BPM (120 บีทต่อนาที) แปลว่า 1 บีท = 0.5 วินาที ให้กระดาษแปะลงที่ 0.5, 1.0, 1.5 วินาที ภาพจะ "เต้นไปกับเพลง" ทันที

00.51.01.52.02.5 วิ แปะ!แปะ!Pop!Whoosh
💡

ข้อควรรู้: เบราว์เซอร์ไม่ยอมให้เว็บเปิดเสียงเองอัตโนมัติ ผู้ใช้ต้องกดปุ่มก่อน ปุ่ม Play จึงทำหน้าที่ "เปิดระบบเสียง" ไปด้วย

🎥

ฝ่ายที่ 5: ตากล้อง (Export)

Recorder → MP4

มี 3 วิธี เรียงจากง่ายไปยาก

A · แนะนำเริ่มต้น

อัดแบบเรียลไทม์

  • เบราว์เซอร์ "ถ่าย" Canvas และเสียงพร้อมกันขณะเล่น
  • วิดีโอ 40 วิ ต้องรอ 40 วิ
  • ห้ามสลับแท็บระหว่างอัด
  • Chrome/Edge รุ่นใหม่และ Safari มักได้ MP4 เลย บางเครื่องได้ WebM
B · ทางสำรอง

แปลงในเบราว์เซอร์

  • อัด WebM แล้วแปลงเป็น MP4 ด้วย ffmpeg.wasm
  • ไม่ต้องติดตั้งอะไร
  • ต้องโหลดไฟล์ประมาณ 30 MB และช้าบนเครื่องสเปกต่ำ
C · คุณภาพสูงสุด

เรนเดอร์ทีละเฟรม

  • ให้โปรแกรมสั่งวาดทีละเฟรม ถ่ายเก็บ แล้วรวมเป็นวิดีโอ
  • ไม่มีเฟรมตกเลย
  • ต้องติดตั้ง Node.js และ ffmpeg
✅

สิ่งที่ควรสั่ง: "ลองวิธี A แบบ MP4 ก่อน ถ้าเบราว์เซอร์ไม่รองรับ ให้อัดเป็น WebM แล้วแปลงเป็น MP4 อัตโนมัติ"

3

ศัพท์ที่ควรรู้ (อธิบายแบบบ้าน ๆ)

พิมพ์ค้นหาคำที่สงสัยได้เลย

4

หลักการสั่งงาน 10 ข้อ

แต่ละข้อตอบ 3 คำถาม: คืออะไร → ทำไมต้องบอก → สั่งอย่างไร

🔗

เคล็ดลับ: ข้อ 5 (ท่าเคลื่อนไหว) กับข้อ 7 (เสียง) ควรเขียนเป็น "คู่" กัน เช่น กระดาษแปะลงฉาก → เสียงแปะ AI จะผูกเสียงกับภาพได้แม่นขึ้นมาก

5

ขั้นตอนทำงานจริง 5 ขั้น

แบ่งสั่งเป็นรอบ คุมผลลัพธ์ได้ดีกว่าสั่งทีเดียวจบ

1

เตรียมเนื้อหา

  • เขียนสิ่งที่อยากสื่อสั้น ๆ เป็นข้อ ๆ
  • วิดีโอ 30–45 วินาที ควรมีประมาณ 4–7 ฉาก ฉากละ 5–8 วินาที
  • แต่ละฉากควรมี 1 ใจความเดียว
2

ขอ Storyboard ก่อน (ยังไม่เขียนโค้ด)

PROMPT รอบที่ 1 จากเนื้อหาด้านล่าง ช่วยแบ่งเป็นฉาก แล้วทำตาราง: เวลาเริ่ม–จบ / ข้อความบนจอ / ภาพเปรียบเทียบ / องค์ประกอบภาพ / ท่าเคลื่อนไหว / เสียงประกอบ / วิธีเปลี่ยนไปฉากถัดไป — ยังไม่ต้องเขียนโค้ด """ [วางเนื้อเรื่องที่นี่] """

ทำไมต้องทำขั้นนี้: แก้ตารางใช้เวลา 1 นาที แต่แก้โค้ดที่สร้างผิดทั้งเรื่องใช้เวลาเป็นชั่วโมง

ตรวจ Storyboard ด้วยคำถาม

แต่ละฉากสื่อ 1 เรื่องชัดไหมข้อความบนจอสั้นพอไหมภาพเปรียบเทียบเข้าใจทันทีไหมท่าเคลื่อนไหวซ้ำเกินไปไหม
3

สั่งสร้างไฟล์

PROMPT รอบที่ 2 ใช้ Storyboard ที่ตกลงกันแล้วนี้ สร้างไฟล์ HTML ตาม Master Prompt ด้านล่าง [วาง Master Prompt จากบทที่ 7]

ดู Master Prompt ฉบับเต็มได้ที่แท็บ "7 Master Prompt"

4

ตรวจงาน

เปิดไฟล์ในเบราว์เซอร์ แล้วเช็กทีละข้อ

5

สั่งแก้ทีละจุด

ระบุ ฉากไหน + อะไร + เปลี่ยนเป็นอะไร + ห้ามแตะส่วนไหน

PROMPT รอบที่ 3 ฉากที่ 3 ข้อความโผล่เร็วไป ให้ใช้เวลา 1.2 วินาที และตัวอักษรตกลงมาทีละตัวห่างกัน 0.06 วินาที แก้เฉพาะข้อมูลฉาก ไม่ต้องแก้ส่วนอื่น
6

ปัญหาที่เจอบ่อย และประโยคสั่งแก้

เจออาการไหน คัดลอกประโยคไปสั่งได้ทันที

➕ สิ่งที่ควรเพิ่มใน Prompt ตั้งแต่แรก

1. "วาดทุกอย่างลง Canvas"

ถ้าไม่สั่ง AI มักทำด้วย DOM + CSS ซึ่ง Preview สวย แต่ Export ได้จอดำ

2. "รอ Font Kanit โหลดเสร็จก่อนวาด"

ใช้ document.fonts.load() ไม่อย่างนั้นเฟรมแรก ๆ จะเป็นฟอนต์ระบบ

3. "สร้าง SFX ด้วย Web Audio"

ไม่ต้องหาไฟล์เสียงเพิ่ม และเตรียมช่องใส่ไฟล์ BGM ของตัวเองได้

4. "เริ่มเสียงหลังผู้ใช้กดปุ่ม"

เบราว์เซอร์บล็อกเสียงที่เล่นเองอัตโนมัติ

5. "ใช้ seeded random"

เพื่อให้ Preview กับ Export ตรงกัน

6. "แสดง progress ระหว่าง Export"

และเตือนห้ามสลับแท็บ เพราะการอัดเรียลไทม์จะหยุดเมื่อแท็บไม่แสดงผล

7. "มีแถบ Timeline ลากดูได้"

เลื่อนไปดูฉากใดก็ได้ตอนตรวจงาน ประหยัดเวลาแก้ไขมาก

7

Master Prompt Template

คัดลอกไปใช้ได้ทันที แก้เฉพาะค่าใน [ ]

MASTER PROMPT # บทบาท คุณคือ Creative Technologist ที่เชี่ยวชาญ Motion Design ด้วย JavaScript # 1. FORMAT - อัตราส่วน [9:16] ขนาด [1080×1920] ที่ [30] fps ความยาวประมาณ [40] วินาที - ส่งมอบเป็นไฟล์ HTML เดียว เปิดใน Browser ได้ทันที # 2. ENGINE - วาดทุกองค์ประกอบลง <canvas> ด้วย JavaScript (อนุญาต SVG path แปลงเป็น Path2D) - ห้ามใช้วิดีโอหรือภาพสำเร็จรูปเป็นพื้นหลัง ห้ามใช้ CSS Animation - ทุกอย่างคำนวณจากเวลา t ผ่านฟังก์ชัน render(t) ที่ให้ผลเหมือนเดิมทุกครั้ง - ใช้ seeded random สำหรับความไม่สม่ำเสมอแบบงานทำมือ # 3. ART DIRECTION - สไตล์: [Paper Cut / กระดาษตัดแปะ] - ขอบกระดาษขรุขระเล็กน้อย, มี texture กระดาษ, เงาบางระหว่างเลเยอร์, ซ้อนหลายชั้นให้เห็นความลึก - พาเลตสี: [#F4E9D8, #E8574A, #2D5D7B, #F2B33D, #1F1F1F] - อารมณ์: [Creative Technology ทันสมัย สนุก มีความเป็นงานทำมือ] # 4. SCENE SYSTEM - แบ่งเป็นหลาย Scene ที่เปลี่ยนเลย์เอาต์และองค์ประกอบจริง ไม่ใช่ภาพเดียวขยับไปมา - แต่ละ Scene มี Visual Metaphor ที่สื่อความหมายของเนื้อหา # 5. MOTION LANGUAGE (Stop Motion + Motion Graphic) - Motion หลักลื่นที่ 30fps / การสั่นเล็ก ๆ ปัดเป็น 12fps แบบ stop motion - ท่าที่ใช้ได้: slide-in จากข้าง, แปะลงทีละชิ้นพร้อม overshoot, ตัวอักษรตกลงมาวาง, ไอคอนประกอบจากชิ้นกระดาษ, พับ/เปิด/พลิก, ฉีกกระดาษเป็น transition - ห้ามใช้แค่ fade in/out # 6. TYPOGRAPHY - Font: [Kanit] (โหลดด้วย document.fonts.load ก่อนเริ่มวาด) - Kinetic typography สำหรับข้อความสำคัญ: ขยาย / เลื่อน / หมุน / เด้ง / ประกอบทีละตัว - ตัวอักษรต้องดูเหมือนตัดจากกระดาษ (มีขอบหรือเงา) - บนจอไม่เกิน [2] บรรทัดต่อช่วงเวลา หัวข้อหลักใหญ่และเด่นที่สุด # 7. AUDIO & SYNC - สร้างเสียงด้วย Web Audio API และผูกกับท่า animation: กระดาษเลื่อน → เสียงกระดาษขยับ | แปะลงฉาก → เสียงแปะ | พลิก → เสียงพลิก | ข้อความโผล่ → Pop เบา ๆ | เปลี่ยนซีน → Whoosh - BGM จังหวะ [100] BPM จัดจังหวะ animation หลักให้ตรงบีท - เตรียมช่องให้ใส่ไฟล์ BGM ของตัวเองแทนได้ - ใช้ AudioContext.currentTime เป็นนาฬิกาหลักของทั้งระบบ - เริ่มระบบเสียงเมื่อผู้ใช้กด Play ครั้งแรก # 8. CONTROLS & EXPORT - ปุ่ม: Play, Pause, Restart, เปิด/ปิดเสียง, Export Video + แถบ Timeline ลากดูได้ - Export: อัด canvas + audio ด้วย MediaRecorder → ถ้า Browser รองรับ video/mp4 ให้บันทึกเป็น MP4 ทันที → ถ้าไม่รองรับ ให้แปลง WebM เป็น MP4 อัตโนมัติ (ffmpeg.wasm หรือ WebCodecs) - แสดง progress ระหว่าง Export และเตือนไม่ให้สลับแท็บ - ผลลัพธ์ที่ Export ต้องตรงกับที่เห็นตอน Preview # 9. CODE STRUCTURE - วาง CONFIG (สี, ฟอนต์, fps, BPM) และ SCENES (ข้อมูลแต่ละฉาก) ไว้บนสุดของ <script> - แต่ละ Scene กำหนด: start, duration, elements[], textCues[], sfxCues[], transition - Logic หลัก (timeline, renderer, audio, exporter) แยกเป็นส่วน ๆ ไม่ปนกับข้อมูล - คอมเมนต์ภาษาไทยบอกจุดที่แก้ได้ # 10. CONTENT ช่วยแบ่งเนื้อหาด้านล่างเป็น Scene อัตโนมัติ เลือก Visual Metaphor ออกแบบองค์ประกอบและ Animation ให้สอดคล้องกับสิ่งที่เล่า: """ [วางเนื้อเรื่องที่นี่] """

🗂️ ตัวอย่างข้อมูลซีนที่ควรได้

เมื่อโค้ดออกมาถูกหลัก ส่วนที่ต้องแก้จะมีหน้าตาประมาณนี้ และไม่ต้องแตะ Logic ส่วนอื่นเลย

SCENES DATA const SCENES = [ { id: 'intro', start: 0, duration: 5, bg: '#F4E9D8', elements: [ { type: 'paperSheet', color: '#E8574A', enter: 'slideLeft', at: 0.2 }, { type: 'icon', name: 'lightbulb', enter: 'assemble', at: 1.0 } ], text: [ { content: 'AI ทำงานแทนได้จริงไหม?', style: 'headline', enter: 'dropLetters', at: 1.8 } ], sfx: [ { at: 0.2, sound: 'paperSlide' }, { at: 1.8, sound: 'pop' } ], transition: 'tear' }, // ...ซีนถัดไป ];
🎓

เวลาสอนหรือส่งให้ลูกค้า การชี้ให้เห็นว่า "แก้แค่ตรงนี้ วิดีโอเปลี่ยนทั้งเรื่อง" เป็นจุดที่คนเข้าใจคุณค่าของวิธีนี้ได้เร็วที่สุด

8

Checklist ก่อนกดส่ง Prompt

ติ๊กให้ครบ 10 ข้อ ผลลัพธ์จะออกมาตรงใจมากขึ้น

ความพร้อมของ Prompt0 / 10

สรุปใน 1 ประโยค

วิดีโอด้วย JavaScript คือการเขียน "บท" ที่บอกว่าแต่ละวินาทีมีอะไรบนจอ แล้วให้นาฬิกาเรือนเดียวคุมทั้งภาพและเสียง — การสั่งงานที่ดีคือบอกครบทั้ง 5 ฝ่ายของกองถ่าย โดยเฉพาะ "วาดลง Canvas" และ "ใช้นาฬิกาเดียว"

← Skill360