- Seperti Remotion, dapat membuat video hanya dengan HTML + CSS + GSAP lalu merendernya ke MP4
- Tanpa React atau DSL proprietari, file HTML murni itu sendiri adalah komposisi video, dan
index.html dapat langsung diputar tanpa tahap build
- Dioptimalkan untuk alur kerja 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, dapat dipanggil langsung lewat perintah slash
/hyperframes, /hyperframes-cli, /gsap
- Plugin OpenAI Codex dan plugin Cursor juga disediakan 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"
- Ubah 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
- Karena
hyperframes init menginstal skill secara otomatis, setelah itu bisa digunakan kapan saja
- Dengan pola Frame Adapter, bebas menghubungkan runtime animasi yang diinginkan seperti GSAP, Lottie, CSS, Three.js, dan lainnya
- Rendering deterministik yang menjamin input yang sama = output yang sama, sehingga cocok untuk pipeline otomatisasi
- Menyediakan katalog lebih dari 50 blok·komponen siap pakai (shader transition, social overlay, data chart, dll.), dan dapat 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 dengan perintah
hyperframes capture <url>
- Perbedaan inti dibanding Remotion adalah hasil kerja (HTML vs React) dan lisensi
- HyperFrames: Apache 2.0 (bersertifikasi OSI) — sepenuhnya dapat digunakan secara komersial tanpa biaya per render, batas kursi, 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 dari library seperti GSAP, Anime.js, 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 Lambda, sementara HyperFrames saat ini hanya mendukung rendering pada satu mesin
- Susunan paket: CLI, core (type·parser·linter), engine (capture Puppeteer + FFmpeg), producer (rendering penuh), studio (editor browser), player (web component), shader-transitions
- Berbasis TypeScript, dengan lisensi Apache 2.0
1 komentar
Terinspirasi dari Remotion dan hampir mirip, tetapi ini adalah alat yang menghapus React dan membuatnya langsung dengan HTML.
Untuk saat ini, kami adalah perusahaan kecil jadi kami memakai Remotion begitu saja.
Karena Remotion gratis hanya sampai 3 orang, untuk skala yang sedikit lebih besar sepertinya Anda bisa memakai HyperFrames ini.