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

• สร้างวิดีโอและเรนเดอร์เป็น MP4 ได้ด้วย HTML + CSS + GSAP เพียงอย่างเดียว คล้ายกับ Remotion
• โดยไม่ต้องใช้ React หรือ DSL เฉพาะทางใด ๆ ไฟล์ HTML ล้วน ก็คือตัว video composition และ 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 จะติดตั้งสกิลให้อัตโนมัติ ดังนั้นหลังจากนั้นก็ใช้งานได้ทุกเมื่อ
• ใช้แพตเทิร์น Frame Adapter เพื่อเชื่อมต่อรันไทม์แอนิเมชันที่ต้องการได้อย่างอิสระ เช่น GSAP, Lottie, CSS, Three.js
• รองรับ deterministic rendering ที่รับประกันว่าอินพุตเดียวกันจะได้เอาต์พุตเดียวกัน จึงเหมาะกับ automated pipeline
• มีแคตตาล็อก บล็อกและคอมโพเนนต์สำเร็จรูปมากกว่า 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
  • แอนิเมชันแบบ library clock จากไลบรารีอย่าง GSAP·Anime.js·Motion One สามารถ seek ได้และคงความแม่นยำระดับเฟรมใน HyperFrames แต่ใน Remotion จะเล่นตาม wall-clock ตอนเรนเดอร์
  • Remotion มี Lambda distributed rendering ที่พร้อมใช้ในโปรดักชัน ส่วน HyperFrames ปัจจุบันรองรับเฉพาะการเรนเดอร์บนเครื่องเดียว
• โครงสร้างแพ็กเกจประกอบด้วย: CLI, core (type·parser·linter), engine (Puppeteer + FFmpeg capture), producer (full rendering), studio (browser editor), player (web component), shader-transitions
• ใช้ไลเซนส์ Apache 2.0 และพัฒนาด้วย TypeScript

[xguru]

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