HyperFrames - Framework mã nguồn mở dành cho tác nhân AI để tạo video bằng HTML

• Tương tự Remotion, tạo video chỉ bằng HTML + CSS + GSAP và render ra MP4
• Không cần React hay DSL riêng; tệp HTML thuần chính là composition video, và index.html được phát trực tiếp mà không cần bước build
• Tối ưu cho workflow nơi các tác nhân lập trình AI như Claude Code, Codex trực tiếp viết HTML
  • Có thể dạy cho tác nhân các pattern của framework bằng npx skills add heygen-com/hyperframes
  • Trong Claude Code, có thể gọi trực tiếp bằng các lệnh slash /hyperframes, /hyperframes-cli, /gsap
  • Cũng cung cấp riêng plugin OpenAI Codex và plugin Cursor
• Cách sử dụng
  • Mô tả điều bạn muốn: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Biến nội dung có sẵn thành video:
    • "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."
  • Định dạng cụ thể: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Lặp lại - dùng tác nhân như một trình biên tập video:
    • "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."
• Cách bắt đầu thủ công

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

  • hyperframes init sẽ tự động cài skill, nên sau đó có thể dùng bất cứ lúc nào
• Với pattern Frame Adapter, có thể tự do kết nối các runtime animation mong muốn như GSAP, Lottie, CSS, Three.js
• Render mang tính quyết định (deterministic), bảo đảm cùng một đầu vào = cùng một đầu ra, phù hợp cho pipeline tự động hóa
• Cung cấp danh mục hơn 50 block·component dựng sẵn (shader transition, social overlay, biểu đồ dữ liệu, v.v.), có thể cài bằng npx hyperframes add <tên block>

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

• Hỗ trợ toàn bộ pipeline chụp website và chuyển thành video bằng lệnh hyperframes capture <url>
• So với Remotion, khác biệt cốt lõi là đầu ra công việc (HTML vs React) và giấy phép
  • HyperFrames: Apache 2.0 (được OSI chứng nhận) — hoàn toàn cho phép sử dụng thương mại, không phí theo lần render, không giới hạn số ghế hay quy mô công ty
  • Remotion: giấy phép tùy chỉnh source-available - công ty trên 3 người cần mua giấy phép doanh nghiệp trả phí
  • HyperFrames phát trực tiếp index.html không cần bước build, còn Remotion cần bundler
  • Các animation theo clock của thư viện như GSAP·Anime.js·Motion One có thể seek và giữ độ chính xác từng frame trong HyperFrames, trong khi ở Remotion chúng chạy theo wall-clock khi render
  • Remotion đã sẵn sàng production cho distributed rendering trên Lambda, còn HyperFrames hiện chỉ hỗ trợ render trên một máy đơn lẻ
• Cấu trúc package: CLI, core (type·parser·linter), engine (Puppeteer + FFmpeg capture), producer (render toàn bộ), studio (trình biên tập trên trình duyệt), player (web component), shader-transitions
• Giấy phép Apache 2.0, xây dựng trên TypeScript

[xguru]

Đây là một công cụ gần như tương tự, lấy cảm hứng từ Remotion nhưng loại bỏ React và tạo hẳn bằng HTML.
Hiện tại bên mình là công ty quy mô nhỏ nên vẫn cứ dùng Remotion.
Vì Remotion chỉ miễn phí cho tối đa 3 người, nên với quy mô lớn hơn một chút thì có lẽ bạn nên dùng HyperFrames này.