HyperFrames - เฟรมเวิร์กโอเพนซอร์สสำหรับเอเจนต์ AI ที่สร้างวิดีโอด้วย HTML

• สร้างวิดีโอและเรนเดอร์เป็น MP4 ได้ด้วย HTML + CSS + GSAP เท่านั้น คล้ายกับ Remotion
• โดยไม่ต้องใช้ React หรือ DSL เฉพาะทาง ไฟล์ HTML ล้วน จะเป็นวิดีโอคอมโพสิชันโดยตรง และ index.html เล่นได้ทันทีโดยไม่มีขั้นตอน build
• ปรับให้เหมาะกับเวิร์กโฟลว์ที่เอเจนต์เขียนโค้ด AI เช่น Claude Code, Codex เขียน HTML โดยตรง
  • สามารถ สอนแพตเทิร์นของเฟรมเวิร์กให้เอเจนต์ ได้ด้วย npx skills add heygen-com/hyperframes
  • ใน Claude Code สามารถเรียกใช้ได้โดยตรงผ่านคำสั่ง slash /hyperframes, /hyperframes-cli, /gsap
  • มี ปลั๊กอิน OpenAI Codex และ ปลั๊กอิน Cursor แยกให้ด้วย
• วิธีใช้งาน
  • อธิบายสิ่งที่ต้องการ: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • แปลงคอนเทนต์เดิมเป็นวิดีโอ:
    • "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
    • "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
    • "Turn this CSV into an animated bar chart race using /hyperframes."
  • ฟอร์แมตเฉพาะ: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • ทำซ้ำแบบใช้เอเจนต์เหมือนเป็นโปรแกรมตัดต่อวิดีโอ:
    • "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
    • "Add a lower third at 0:03 with my name and title."
• วิธีเริ่มต้นแบบแมนนวล

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

  • hyperframes init จะติดตั้ง skill ให้อัตโนมัติ ดังนั้นหลังจากนั้นก็ใช้งานได้ทุกเมื่อ
• ด้วยแพตเทิร์น Frame Adapter จึงเชื่อมต่อรันไทม์แอนิเมชันที่ต้องการได้อย่างอิสระ เช่น GSAP, Lottie, CSS, Three.js
• การเรนเดอร์แบบ deterministic ที่รับประกันว่าอินพุตเดียวกัน = เอาต์พุตเดียวกัน จึงเหมาะกับไปป์ไลน์อัตโนมัติ
• มีแค็ตตาล็อก บล็อกและคอมโพเนนต์สำเร็จรูปกว่า 50 รายการ ให้ใช้ได้ทันที เช่น shader transition, social overlay, data chart และติดตั้งได้ด้วย npx hyperframes add <ชื่อบล็อก>

  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  

• รองรับไปป์ไลน์เต็มรูปแบบสำหรับ จับภาพเว็บไซต์และแปลงเป็นวิดีโอ ด้วยคำสั่ง hyperframes capture <url>
• เมื่อนำไปเทียบกับ Remotion ความต่างหลักคือ ชิ้นงานที่ใช้ทำงาน (HTML vs React) และ ไลเซนส์
  • HyperFrames: Apache 2.0 (ได้รับการรับรองจาก OSI) — ใช้งานเชิงพาณิชย์ได้เต็มรูปแบบ ไม่มีค่าใช้จ่ายต่อการเรนเดอร์ ไม่มีเพดานจำนวนที่นั่ง หรือข้อจำกัดตามขนาดบริษัท
  • Remotion: ไลเซนส์แบบซอร์สเปิดเผย (source-available) ที่กำหนดเอง - บริษัทที่มีพนักงานเกิน 3 คนต้องซื้อไลเซนส์บริษัทแบบเสียเงิน
  • HyperFrames เล่น index.html ได้โดยตรงโดยไม่มีขั้นตอน build ขณะที่ Remotion ต้องใช้ bundler
  • แอนิเมชันที่อิง clock ของไลบรารีอย่าง GSAP, Anime.js, Motion One สามารถ seek ได้และรักษาความแม่นยำระดับเฟรมใน HyperFrames แต่ใน Remotion จะเล่นตาม wall-clock ระหว่างการเรนเดอร์
  • Remotion มีการเรนเดอร์แบบกระจายบน Lambda ที่พร้อมใช้ในโปรดักชัน ส่วน HyperFrames ตอนนี้รองรับเฉพาะการเรนเดอร์บนเครื่องเดียว
• โครงสร้างแพ็กเกจประกอบด้วย CLI, core (type·parser·linter), engine (Puppeteer + FFmpeg capture), producer (การเรนเดอร์ครบวงจร), studio (ตัวแก้ไขบนเบราว์เซอร์), player (web component), shader-transitions
• ใช้ไลเซนส์ Apache 2.0 และพัฒนาด้วย TypeScript

[xguru]

เครื่องมือนี้ได้รับแรงบันดาลใจจาก Remotion และแทบจะคล้ายกันมาก แต่ตัด React ออกแล้วทำเป็น HTML ไปเลย
ตอนนี้ฝั่งเราเป็นบริษัทขนาดเล็ก ก็เลยใช้ Remotion ตรง ๆ อยู่ครับ
Remotion ใช้งานฟรีได้ถึง 3 คนเท่านั้น ดังนั้นถ้าทีมใหญ่กว่านี้ก็น่าจะใช้ HyperFrames กันได้ครับ