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

• Tạo video và render ra MP4 chỉ với HTML + CSS + GSAP, tương tự Remotion
• 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 quy trình làm việc nơi các AI coding agent như Claude Code, Codex trực tiếp viết HTML
  • Có thể dạy agent 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 sẵn có 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 agent 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      # xem trước trong trình duyệt (live reload)  
  npx hyperframes render       # render ra 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 runtime animation mong muốn như GSAP, Lottie, CSS, Three.js
• Render mang tính quyết định (deterministic), đảm bảo cùng đầu vào = cùng đầu ra, nên phù hợp cho pipeline tự động hóa
• Cung cấp catalog hơn 50 block và component dựng sẵn (shader transition, social overlay, data chart, 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>
• Khi 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 có thể dùng thương mại, không tính phí theo mỗi lần render, không giới hạn số seat hay quy mô công ty
  • Remotion: giấy phép tùy chỉnh source-available — công ty có hơ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 mà 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 được và giữ độ chính xác theo từng frame trong HyperFrames, nhưng trong Remotion chúng chạy theo wall-clock khi render
  • Remotion đã sẵn sàng cho production với render phân tán trên Lambda, còn HyperFrames hiện chỉ hỗ trợ render trên một máy duy nhất
• Thành phần package: CLI, core (kiểu dữ liệu, 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