HyperFrames - HTML ile video oluşturan, yapay zeka ajanlarına özel açık kaynak çerçeve

• Remotion’a benzer şekilde yalnızca HTML + CSS + GSAP ile video üretip MP4 olarak render eder
• React veya kendine özgü bir DSL olmadan, saf HTML dosyası doğrudan video kompozisyonudur; build aşaması olmadan index.html olduğu gibi oynatılır
• Claude Code, Codex gibi yapay zeka kodlama ajanlarının HTML’i doğrudan yazdığı iş akışları için optimize edilmiştir
  • npx skills add heygen-com/hyperframes ile ajana framework kalıpları öğretilebilir
  • Claude Code’da /hyperframes, /hyperframes-cli, /gsap slash komutlarıyla doğrudan çağrılabilir
  • OpenAI Codex eklentisi ve Cursor eklentisi de ayrıca sunuluyor
• Kullanım şekli
  • İstediğinizi açıklayın: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Mevcut içeriği videoya dönüştürün:
    • "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."
  • Belirli bir format: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Yinelemeli kullanım — ajanı bir video editörü gibi kullanın:
    • "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."
• Elle başlatma yöntemi

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

  • hyperframes init bu beceriyi otomatik olarak kurar; sonrasında istediğiniz zaman kullanılabilir
• Frame Adapter deseni ile GSAP, Lottie, CSS, Three.js gibi istediğiniz animasyon çalışma zamanını esnek biçimde bağlayabilirsiniz
• Aynı girdi = aynı çıktıyı garanti eden deterministik render alma sayesinde otomasyon pipeline’ları için uygundur
• 50’den fazla hazır blok ve bileşen kataloğu sunar (shader transition, sosyal overlay, veri grafikleri vb.); npx hyperframes add <blok-adı> ile kurulabilir

  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> komutuyla web sitelerini yakalayıp videoya dönüştüren uçtan uca bir pipeline sunar
• Remotion ile karşılaştırıldığında temel farklar çıktı yapısı (HTML vs React) ve lisans
  • HyperFrames: Apache 2.0 (OSI onaylı) — ticari kullanım tamamen serbesttir; render başına ücret, koltuk sınırı veya şirket büyüklüğü kısıtı yoktur
  • Remotion: kaynak açık (source-available) özel lisans — 3 kişiden büyük şirketlerde ücretli kurumsal lisans gerekir
  • HyperFrames, build aşaması olmadan index.html dosyasını doğrudan oynatır; Remotion ise bir bundler gerektirir
  • GSAP, Anime.js, Motion One gibi kütüphanelerin saat tabanlı animasyonları HyperFrames’te seekable ve kare doğruluğunu koruyacak şekilde çalışırken, Remotion’da render sırasında wall-clock’a göre oynatılır
  • Remotion’da Lambda ile dağıtık render üretim kullanımı için hazırken, HyperFrames şu anda yalnızca tek makinede render desteği sunar
• Paket yapısı: CLI, core (tipler·parser·linter), engine (Puppeteer + FFmpeg capture), producer (tam render), studio (tarayıcı editörü), player (web component), shader-transitions
• Apache 2.0 lisansı, TypeScript tabanlı

[xguru]

Remotion'dan ilham almış, neredeyse çok benzer ama React'i çıkarıp tamamen HTML ile oluşturan bir araç.
Şimdilik biz küçük ölçekli bir şirket olduğumuz için doğrudan Remotion kullanıyoruz.
Remotion yalnızca 3 kişiye kadar ücretsiz olduğundan, biraz daha büyük ölçekteyseniz bu HyperFrames'i kullanmanız mantıklı görünüyor.