รีวิว HyperFrames — เขียน HTML แล้ว render เป็นวิดีโอ MP4 ออกแบบมาให้ AI agent ใช้

คืออะไร

HyperFrames เป็น open-source framework จากทีม HeyGen ที่แปลง HTML, CSS, media และ seekable animation ให้กลายเป็นวิดีโอ MP4 แบบ deterministic (input เดิม ได้ทุกเฟรมเหมือนเดิม) README ระบุว่าใช้ได้ 3 แบบ:

• ใช้ผ่าน CLI บนเครื่องตัวเอง
• ใช้ผ่าน AI coding agent ด้วย skills
• ใช้เป็น rendering core เบื้องหลัง hosted authoring workflow

สโลแกนของโปรเจกต์คือ “Write HTML. Render video. Built for agents.” แนวคิดคือ agent เขียน HTML เป็นอยู่แล้ว ก็ให้เขียนวิดีโอเป็น HTML ไปเลย

จุดเด่น

• HTML-native — composition เป็นไฟล์ HTML ที่ใส่ data attribute กำหนดเวลาและ track ไม่ต้องใช้ React และไม่มี timeline format เฉพาะ
• ไม่มี build step — index.html เล่นได้ทันทีและ preview ในเบราว์เซอร์ได้ตรง ๆ
• Deterministic — เหมาะกับ CI, regression test และการ render อัตโนมัติ
• เลือก animation engine ได้ — GSAP, CSS animation, Lottie, Three.js, Anime.js, WAAPI หรือเขียน frame adapter เอง
• มี 21 skills ให้ agent โหลดตามงาน — เริ่มจาก router /hyperframes ที่จับว่าเป็นงานแบบไหนแล้วส่งต่อไป workflow เช่น /product-launch-video, /faceless-explainer, /pr-to-video (เปลี่ยน PR บน GitHub เป็นวิดีโออธิบาย), /embedded-captions, /motion-graphics, /music-to-video, /slideshow
• รองรับหลาย agent — Claude Code, Codex, Cursor, Gemini CLI, IBM Bob และ agent อื่นที่รองรับ skills
• render บน AWS Lambda ได้ — นอกจาก render ในเครื่องแล้ว ยังมีเส้นทาง render แบบกระจายบน AWS Lambda

เหมาะกับใคร

• สายทำคอนเทนต์ที่อยากให้ AI agent ช่วยผลิตวิดีโอสั้น เช่น product intro, explainer, คลิปโซเชียลที่มี kinetic caption
• dev ที่อยากสร้างวิดีโอแบบอัตโนมัติใน pipeline หรือ CI
• คนที่เคยใช้ Remotion แล้วอยากลองแนวทางที่เป็น HTML ล้วน (มี skill /remotion-to-hyperframes สำหรับพอร์ต composition เดิม ซึ่ง README ระบุว่าเป็นการย้ายทางเดียว)

เริ่มต้นใช้งาน

ถ้าใช้กับ Claude Code ให้ติดตั้ง plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

แล้วเรียกใช้ด้วย /hyperframes:hyperframes ถ้าเป็น agent อื่น (รวม OpenCode) ใช้ standalone skills:

npx skills add heygen-com/hyperframes

ลอง prompt ตัวอย่างจาก README:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

หรือใช้ CLI ตรง ๆ โดยไม่ผ่าน agent:

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

ต้องมี Node.js 22 ขึ้นไป และ FFmpeg

ข้อควรรู้

• License: Apache 2.0 — README ระบุว่าไม่มีค่า render ต่อครั้ง และไม่มีเกณฑ์จำกัดการใช้เชิงพาณิชย์
• ความสดใหม่: push ล่าสุด 5 ต.ค. 2026 โปรเจกต์สร้างเมื่อ 10 มี.ค. 2026 (อายุราว 7 เดือน) มี open issue 158 รายการ
• ตัวติดตั้ง skills: npx skills add ดึงจาก registry ของ skills.sh ซึ่ง README บอกว่าอาจช้ากว่า main หลายชั่วโมง ถ้าอยากได้ skill เวอร์ชันล่าสุดให้ใช้ npx hyperframes skills update
• /slideshow ไม่ได้ออกเป็นวิดีโอ — ผลลัพธ์เป็น deck ที่กดเปลี่ยนสไลด์ได้

🔗 https://github.com/heygen-com/hyperframes

ข้อมูลจาก GitHub ณ 5 ต.ค. 2026: ⭐ 56,760 | ภาษา TypeScript | license Apache-2.0