HyperFrames: המדריך המלא ל"וידאו כקוד", כותבים HTML, מקבלים MP4

HyperFrames הוא מנוע קוד פתוח של HeyGen שהופך HTML לסרטון MP4, במקום לגרור קליפים בטיימליין, כותבים את הסרטון כקוד. הוא נבנה במיוחד כדי שסוכני AI כמו Claude Code יוכלו להפיק וידאו בעצמם. במדריך: מה זה, איך זה עובד, התקנה, פקודות CLI והשוואה ל-Remotion.

בקצרה (TL;DR)

• מה זה: מנוע רינדור וידאו בקוד פתוח שבו מגדירים סרטון כקובץ HTML ומקבלים בפלט קובץ MP4 דטרמיניסטי.
• למי זה מיועד: מפתחים, משווקים טכניים, ובעיקר זרימות עבודה עם סוכני AI (Claude Code, Cursor, Gemini CLI, Codex).
• כמה זה עולה: חינם. רישיון Apache 2.0, ללא עמלת רינדור וללא סף שימוש מסחרי.
• איך מתחילים: מתקינים את ה-skills של HyperFrames, מתארים את הווידאו בשפה חופשית, והסוכן כותב, מקדים תצוגה ומרנדר.

מה זה HyperFrames?

HyperFrames הוא מסגרת (framework) קוד פתוח של HeyGen שהופכת HTML, CSS, מדיה ואנימציות ניתנות-לדילוג לסרטוני MP4 דטרמיניסטיים. הרעיון נקרא "וידאו כקוד" (Video as Code): כל אלמנט ב-HTML הופך ל"קליפ" בסרטון, והתזמון מוגדר ישירות ב-markup באמצעות תכונות data-.

לפי המאגר הרשמי בגיטהאב, אפשר להריץ אותו מקומית דרך ה-CLI, מתוך סוכני AI באמצעות skills, או כליבת הרינדור מאחורי שירותי יצירת וידאו מתארחים. HyperFrames בשימוש בייצור ב-HeyGen עצמה, עם דוגמאות קהילתיות מצוותים כמו tldraw ו-TanStack.

רינדור דטרמיניסטי: אותו קלט מייצר תמיד בדיוק את אותו פלט, אותם פריימים, אותו וידאו. זה מה שמאפשר בדיקות רגרסיה אוטומטיות, אינטגרציה רציפה (CI) ורינדור מתוזמן ללא הפתעות.

איך HyperFrames עובד?

מגדירים סרטון כקובץ HTML עם תכונות data- לתזמון, מחברים אנימציה (למשל GSAP), מקדימים תצוגה בדפדפן, ולבסוף מרנדרים ל-MP4 בעזרת Chrome ללא ממשק (headless) ו-FFmpeg. הנה קומפוזיציה בסיסית, וידאו ברקע, לוגו שמופיע אחרי 2 שניות, ומוזיקת רקע:

<!-- index.html -->
<div id="stage" data-composition-id="my-video"
     data-start="0" data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5"
         data-track-index="0" src="intro.mp4" muted playsinline></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3"
       data-track-index="1" src="logo.png" />
  <audio id="bg-music" data-start="0" data-duration="9"
         data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

מתחת למכסה המנוע, ה-engine משתמש ב-Puppeteer (Chrome ללא ממשק) כדי "לצלם" את העמוד פריים אחר פריים דרך ה-API של beginFrame, ו-FFmpeg מקודד את הפריימים לקובץ וידאו. כך הרינדור אינו תלוי ב"שעון אמת" ולא נוצרים פספוסי פריימים.

מהו "כלל השלושה" (Rule of Three)?

שלושה כללים שחייבים להתקיים כדי שהקוד ירונדר נכון לווידאו:

1. אלמנט שורש (Root): חייב לכלול data-composition-id, data-width ו-data-height.
2. אלמנטים מתוזמנים (Timed): חייבים לכלול class="clip" וגם data-start, data-duration ו-data-track-index.
3. אנימציות (Animations): טיימליין של GSAP נוצר עם { paused: true } ונרשם על window.__timelines.

// 1. יצירת טיימליין מושהה
const tl = gsap.timeline({ paused: true });
// 2. הוספת אנימציות
tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
// 3. רישום הטיימליין כדי ש-HyperFrames יוכל לדלג עליו
window.__timelines["my-video"] = tl;

איך מתקינים ומתחילים?

דרישות מקדימות: Node.js בגרסה 22 ומעלה, ו-FFmpeg מותקן.

אפשרות 1: עם סוכן AI (מומלץ)

npx skills add heygen-com/hyperframes

הפקודה מלמדת את הסוכן (Claude Code, Cursor, Gemini CLI, Codex) איך לכתוב קומפוזיציות נכונות ואנימציות GSAP. ב-Claude Code ה-skills נרשמים כפקודות סלאש, /hyperframes לכתיבת קומפוזיציה ו-/gsap לעזרה באנימציה. אחר כך פשוט מתארים:

דוגמת prompt: "באמצעות /hyperframes, צור אינטרו מוצר באורך 10 שניות עם כותרת שמופיעה בהדרגה (fade-in), וידאו ברקע ומוזיקת רקע עדינה."

אפשרות 2: פרויקט ידני

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # תצוגה מקדימה בדפדפן עם רענון חי
npx hyperframes render    # רינדור ל-MP4

מהן הפקודות העיקריות ב-CLI?

ה-CLI לא-אינטראקטיבי בברירת מחדל, כך שהוא מתאים להפעלה ע"י סקריפטים וסוכנים:

שימו לב: גם lint וגם validate צריכים לעבור בהצלחה לפני preview או רינדור, כך מוודאים שהקומפוזיציה תקינה לפני שמשקיעים זמן בעיבוד.

מה יש בקטלוג המוכן?

HyperFrames מגיע עם יותר מ-50 בלוקים ורכיבים מוכנים: שכבות-על לרשתות חברתיות, מעברי שיידר (shader), הדמיות נתונים ואפקטים קולנועיים. מתקינים בפקודה אחת:

npx hyperframes add flash-through-white  # מעבר שיידר
npx hyperframes add instagram-follow     # שכבת-על חברתית
npx hyperframes add data-chart           # גרף מונפש

HyperFrames מול Remotion

שניהם מרנדרים וידאו עם Chrome ללא ממשק ו-FFmpeg. ההבדל המרכזי הוא מודל הכתיבה:

HyperFrames מצהיר שהוא בהשראת Remotion, ההימור של Remotion הוא רכיבי React, וההימור של HyperFrames הוא HTML פשוט. רוצים להעמיק ב-Remotion עצמו? יש לנו מדריך Remotion מלא בעברית.

למי HyperFrames מתאים (ולמי פחות)?

מתאים למי שנוח לו עם קוד או עם כלי AI לכתיבת קוד, ולמי שרוצה להפיק וידאו בצורה תכנותית ואוטומטית בקנה מידה.

• מתאים במיוחד ל: סרטוני מוצר, קליפים לרשתות, הסברונים מונפשים, הדמיות נתונים, כתוביות ושכבות-על, בייצור חוזר ואוטומטי.
• זרימת עבודה אידיאלית: סוכן AI מקבל PDF, CSV או מאמר והופך אותם לסרטון, כי הסוכן כבר יודע לכתוב HTML.
• פחות מתאים ל: מי שלא נוח לו עם שורת פקודה ומעדיף ממשק גרירה-ושחרור מלא.

שורה תחתונה

HyperFrames מעביר את הפקת הווידאו אל העולם של HTML, פורמט שגם מפתחים וגם סוכני AI שולטים בו. למי שכבר עובד עם Claude Code או כלי AI דומים, זו דרך פרקטית להפוך טקסט, נתונים או מסמך לסרטון MP4 איכותי, בלי לפתוח עורך וידאו. רוצים ללמוד לרתום כלים כאלה לעסק? זה בדיוק מה שאנחנו מלמדים.

להמשך: קורס Claude Code בחינם · מה זה Claude Code · אוטומציות AI לעסקים · כלי AI מומלצים