LEVEL 0 · ปูพื้นจากศูนย์
ทำไมวิดีโอถึงเป็นเว็บเพจได้ — แล้วทำไมควรเป็น
ลองนึกถึงวันที่ตัดคลิปแนะนำทีมเสร็จ export รอครึ่งชั่วโมง ส่งเข้ากลุ่มไปแล้ว เพิ่งเห็นว่าสะกดชื่อหัวหน้าทีมผิดหนึ่งตัวอักษร ในโปรแกรมตัดต่อ การแก้ตัวอักษรตัวเดียวแปลว่าเปิดโปรเจกต์ ไล่หากล่องข้อความบน timeline แก้คำ แล้ว export ใหม่ทั้งไฟล์อีกรอบ
ถ้าเป็นเอกสาร คุณแก้คำแล้วกดเซฟ จบในสิบวินาที ที่วิดีโอทำแบบนั้นไม่ได้เพราะไฟล์ .mp4 เก็บเฉพาะผลลัพธ์ปลายทาง คือพิกเซลนับล้านจุด ส่วนต้นทางที่มนุษย์แก้เป็น — ข้อความ สี ตำแหน่ง จังหวะ — ถูกขังไว้ในไฟล์โปรเจกต์ของโปรแกรมตัดต่อ ที่เปิดได้ด้วยโปรแกรมเดียวและเทียบความต่างระหว่างเวอร์ชันไม่ได้เลย
HyperFrames แก้ที่ต้นเหตุ: เก็บต้นทางเป็นเว็บเพจ ตัวหนังสือเป็น text จริงใน HTML สีและตำแหน่งเป็น CSS จังหวะเวลาเป็น attribute ชื่อ data-* แล้วให้เครื่องเรนเดอร์ผลิตไฟล์วิดีโอจากต้นทางนี้ทุกครั้งที่สั่ง การแก้ชื่อที่สะกดผิดจึงเหลือแค่แก้ text หนึ่งคำ สั่งเรนเดอร์ใหม่ จบ
เมื่อวิดีโอทั้งตัวเป็นไฟล์ text สามอย่างที่โปรแกรมตัดต่อให้ไม่ได้ก็ตามมาทันที: เก็บลง Git แล้ว diff ดูได้ว่าเวอร์ชันนี้ต่างจากเมื่อวานตรงไหน · ผลิตซ้ำเป็นระบบได้ เช่นคลิปโครงเดียวกันร้อยชื่อร้อยเวอร์ชัน (บทที่ 12) · และ AI อ่าน แก้ หรือเขียนให้ได้ทั้งตัว เพราะทุกอย่างคือโค้ดที่มันถนัดที่สุดอยู่แล้ว
1.1 สองวิธีใช้ — เขียนเอง กับ กำกับ AI
HyperFrames ถูกออกแบบมาให้ AI ทำงานด้วยตั้งแต่แรก ตัว framework แถมชุดคู่มือสำหรับ AI agent มาในตัว และในงานจริงคุณจะสั่ง AI เขียน composition บ่อยกว่าพิมพ์เองทีละบรรทัด
สองทางนี้ไม่ได้แข่งกัน คนที่กำกับ AI ได้ดีคือคนที่อ่านงานของเครื่องออก — รู้ว่ารายงานตรวจกำลังฟ้องอะไร ดูเฟรมแล้วบอกได้ว่าผิดเพราะกลไกข้อไหน เล่มนี้จึงสอนชั้นกลไก: เข้าใจแล้วจะลงมือเขียนเองก็ได้ หรือสั่งให้คนอื่นเขียนแล้วตรวจรับเป็น ก็ได้ทั้งคู่
1.2 ติดตั้งและตรวจเครื่อง
ของที่ต้องมีในเครื่องมีสองอย่าง: Node.js 22 ขึ้นไป และ FFmpeg จากนั้นตรวจความพร้อมทั้งหมดด้วยคำสั่งเดียว:
$ npx hyperframes doctorเครื่องที่ใช้เขียนเล่มนี้ตอบกลับมาว่า FFmpeg 8.0 พร้อม FFprobe พร้อม และ Chrome headless พร้อม — ตัวสุดท้ายคือเบราว์เซอร์ไร้หน้าจอที่ HyperFrames ใช้ถ่ายเฟรม ดาวน์โหลดให้อัตโนมัติในการใช้งานครั้งแรก ไม่ต้องติดตั้งเอง
1.3 เปิดโปรเจกต์แรก
$ npx hyperframes init my-first-video --example blankได้โฟลเดอร์ที่มีไฟล์สำคัญไฟล์เดียวคือ index.html ที่เหลือเป็นของประกอบ (hyperframes.json ตั้งค่าโปรเจกต์ package.json เก็บทางลัดคำสั่ง) เว็บเพจไฟล์นี้แหละคือวิดีโอทั้งตัว บทที่ 3 จะเปิดผ่าดูทีละบรรทัด
ส่วนปลายทางของเล่ม ขอสปอยล์ให้เห็นก่อน: การ์ดนัดประชุมทีมยาว 10 วินาที ที่คุณจะสร้างเองครบวงจรในบท 3–6 เครื่องที่เขียนเล่มนี้เรนเดอร์มันด้วยคำสั่งเดียว ได้ผลจริงแบบนี้:
◇ renders\handbook-lab_2026-08-22_16-48-08.mp4
326.3 KB · 10.0s video · rendered in 59.3sวิดีโอ 10 วินาที 300 เฟรม เสร็จในหนึ่งนาที และไม่ว่าจะกลับมาแก้คำผิดอีกกี่รอบ ก็จ่ายเวลาเท่านี้เสมอ