HyperFrames - HTML ile video üreten, 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’yi doğrudan yazdığı iş akışları için optimize edilmiştir
  • npx skills add heygen-com/hyperframes ile ajana çerçeve desenleri öğ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 sunulur
• 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 çalışma - 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      # browser’da önizleme (live reload)  
  npx hyperframes render       # MP4 olarak render et  
  

  • hyperframes init bu skill’i otomatik olarak kurar; sonrasında istediğiniz zaman kullanılabilir
• Frame Adapter deseni ile GSAP, Lottie, CSS, Three.js gibi istediğiniz animasyon runtime’ını esnek biçimde bağlayabilirsiniz
• Aynı girdi = aynı çıktı garantisi veren deterministik render sayesinde otomasyon pipeline’ları için uygundur
• 50’den fazla hazır blok ve bileşen kataloğu sunar (shader geçişleri, sosyal medya overlay’leri, 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 sitesini yakalayıp videoya dönüştüren uçtan uca bir pipeline sunar
• Remotion ile karşılaştırıldığında temel farklar çıktı türü (HTML vs React) ve lisans
  • HyperFrames: Apache 2.0 (OSI onaylı) — tamamen ticari kullanıma uygundur; render başına ücret, koltuk sınırı veya şirket ölçeği kısıtlaması yoktur
  • Remotion: 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 clock tabanlı animasyonları HyperFrames’te seekable’dır ve frame doğruluğunu korur; Remotion’da ise render sırasında wall-clock ile oynatılır
  • Remotion’da Lambda ile dağıtık render production-ready durumdayken, HyperFrames şu anda yalnızca tek makinede render destekler
• Paket yapısı: CLI, core (tipler·parser·linter), engine (Puppeteer + FFmpeg capture), producer (tam render), studio (browser 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.