HyperFrames - HTML से वीडियो बनाने के लिए AI एजेंट-उन्मुख ओपन सोर्स फ्रेमवर्क

• Remotion की तरह सिर्फ HTML + CSS + GSAP से वीडियो बनाकर उसे MP4 में render किया जा सकता है
• React या किसी स्वामित्व वाले DSL के बिना, शुद्ध HTML फ़ाइल ही वीडियो composition होती है, और build चरण के बिना index.html को सीधे चलाया जाता है
• Claude Code, Codex जैसे AI coding agents द्वारा सीधे HTML लिखने वाले workflow के लिए अनुकूलित
  • npx skills add heygen-com/hyperframes से एजेंट को framework pattern सिखाना संभव
  • Claude Code में /hyperframes, /hyperframes-cli, /gsap slash commands से सीधे कॉल किया जा सकता है
  • OpenAI Codex plugin, Cursor plugin भी अलग से उपलब्ध हैं
• उपयोग का तरीका
  • जो चाहिए उसे समझाएँ: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • मौजूदा content को वीडियो में बदलें:
    • "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: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • दोहराव — एजेंट को वीडियो editor की तरह:
    • "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."
• मैन्युअल शुरुआत का तरीका

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

  • hyperframes init skill को अपने-आप install कर देता है, इसलिए उसके बाद इसे कभी भी इस्तेमाल किया जा सकता है
• Frame Adapter pattern के जरिए GSAP, Lottie, CSS, Three.js जैसे मनचाहे animation runtime को स्वतंत्र रूप से जोड़ा जा सकता है
• समान input = समान output सुनिश्चित करने वाला deterministic rendering automation pipeline के लिए उपयुक्त है
• 50 से अधिक prebuilt blocks·components का catalog उपलब्ध है (shader transitions, social overlays, data charts आदि), और npx hyperframes add <블록명> से install किया जा सकता है

  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> कमांड से वेबसाइट को capture करके वीडियो में बदलने वाली पूरी pipeline समर्थित है
• Remotion की तुलना में मुख्य अंतर artifacts (HTML vs React) और license हैं
  • HyperFrames: Apache 2.0 (OSI प्रमाणित) — पूरी तरह commercial use के लिए उपलब्ध, और प्रति render कोई शुल्क, seat limit, या company size restriction नहीं
  • Remotion: source-available custom license - 3 से अधिक लोगों वाली कंपनियों के लिए सशुल्क company license आवश्यक
  • HyperFrames build चरण के बिना index.html को सीधे चलाता है, जबकि Remotion को bundler चाहिए
  • GSAP·Anime.js·Motion One जैसी library clock animations HyperFrames में seekable रहती हैं और frame accuracy बनाए रखती हैं, जबकि Remotion में rendering के समय वे wall-clock पर चलती हैं
  • Remotion में Lambda distributed rendering production-ready है, जबकि HyperFrames अभी केवल single-machine rendering को support करता है
• package संरचना: CLI, core (types·parser·linter), engine (Puppeteer + FFmpeg capture), producer (पूर्ण rendering), studio (browser editor), player (web component), shader-transitions
• Apache 2.0 license, TypeScript आधारित

[xguru]

यह Remotion से प्रेरित है और लगभग काफ़ी मिलता-जुलता है, लेकिन इसमें React को हटा दिया गया है और यह पूरी तरह HTML से बनाने वाला टूल है.
फ़िलहाल हम एक छोटी कंपनी हैं, इसलिए हम Remotion ही इस्तेमाल करते हैं.
Remotion सिर्फ़ 3 लोगों तक मुफ़्त है, इसलिए थोड़ा बड़े स्केल पर शायद आप यह HyperFrames इस्तेमाल कर सकते हैं.