HyperFrames - Framework open-source khusus agen AI untuk membuat video dengan HTML

• Membuat video dan merendernya ke MP4 hanya dengan HTML + CSS + GSAP, mirip seperti Remotion
• Tanpa React atau DSL proprietari, file HTML murni itu sendiri adalah komposisi video, dan index.html dapat langsung diputar apa adanya tanpa tahap build
• Dioptimalkan untuk workflow di mana agen coding AI seperti Claude Code dan Codex menulis HTML secara langsung
  • Dengan npx skills add heygen-com/hyperframes, agen dapat mempelajari pola framework
  • Di Claude Code, bisa dipanggil langsung dengan perintah slash /hyperframes, /hyperframes-cli, /gsap
  • Plugin OpenAI Codex dan plugin Cursor juga tersedia secara terpisah
• Cara penggunaan
  • Jelaskan apa yang diinginkan: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Mengubah konten yang ada menjadi 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."
  • Format tertentu: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Iterasi - gunakan agen seperti editor 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."
• Cara memulai secara manual

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

  • hyperframes init akan menginstal skill ini secara otomatis, jadi setelah itu bisa digunakan kapan saja
• Dengan pola Frame Adapter, runtime animasi seperti GSAP, Lottie, CSS, Three.js, dan lainnya bisa dihubungkan dengan bebas
• Rendering deterministik (Deterministic) yang menjamin input yang sama = output yang sama, sehingga cocok untuk pipeline otomasi
• Menyediakan katalog berisi lebih dari 50 blok dan komponen siap pakai (transisi shader, overlay sosial, chart data, dll.), dan bisa diinstal dengan npx hyperframes add <nama-blok>

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

• Mendukung pipeline penuh untuk menangkap website lalu mengubahnya menjadi video melalui perintah hyperframes capture <url>
• Dibandingkan dengan Remotion, perbedaan utamanya adalah artefak kerja (HTML vs React) dan lisensi
  • HyperFrames: Apache 2.0 (bersertifikasi OSI) — sepenuhnya boleh untuk penggunaan komersial, tanpa biaya per render, batas jumlah seat, atau pembatasan ukuran perusahaan
  • Remotion: lisensi kustom source-available - perusahaan dengan lebih dari 3 orang memerlukan lisensi perusahaan berbayar
  • HyperFrames memutar index.html secara langsung tanpa tahap build, sedangkan Remotion memerlukan bundler
  • Animasi berbasis clock library seperti GSAP, Anime.js, dan Motion One dapat di-seek dan tetap akurat per frame di HyperFrames, sedangkan di Remotion diputar berdasarkan wall-clock saat rendering
  • Remotion sudah production-ready untuk rendering terdistribusi via Lambda, sedangkan HyperFrames saat ini hanya mendukung rendering di satu mesin
• Susunan paket: CLI, core (type, parser, linter), engine (Puppeteer + FFmpeg capture), producer (full rendering), studio (browser editor), player (web component), shader-transitions
• Berbasis TypeScript dengan lisensi Apache 2.0