HeyGen HyperFrames: איך דף HTML הופך לסרטון — והכלי בנוי לסוכני AI

החבר'ה ב-HeyGen שחררו כלי בשם HyperFrames שאומר משהו כמעט מתגרה: אם אנחנו יודעים לכתוב דף אינטרנט, אנחנו כבר יודעים לביים סרטון. HyperFrames הוא מנוע קוד-פתוח שמקבל דף HTML רגיל והופך אותו לקובץ וידאו MP4 מדויק, פריים אחרי פריים — עבור מי שרוצה שהמכונה, או סוכן AI, תייצר את הווידאו בעצמה.

בואו נפרק את זה לאט, כי מאחורי הרעיון הפשוט הזה מסתתרת בעיה שכולנו מכירים. נתחיל מהבסיס, כי אסור לי להניח כלום: HTML היא השפה שבה בנוי כל אתר שאנחנו פותחים — היא אומרת לדפדפן "פה כותרת, פה תמונה, פה כפתור". תחשבו עליה כמו על שרטוט של חדר: לא הריהוט עצמו, אלא ההוראות איפה כל דבר יושב. לצידה יש את CSS, שכבת העיצוב (צבעים, גדלים, תנועה), ואת JavaScript, הקוד שמזיז דברים. את שלישיית הכלים הזאת כמעט כל מפתח בעולם מכיר, וזה בדיוק העניין.

המצב: אנחנו רוצים שהמכונה תפיק וידאו — והכלים בנויים לאצבעות

מסתבר שכשאנחנו מבקשים היום מסוכן AI להכין לנו סרטון — טיזר למוצר, קליפ לרשת, הסבר מונפש — אנחנו נתקעים. עורכי הווידאו הרגילים, כמו Premiere או CapCut, בנויים לאצבעות אנושיות שגוררות קליפים על ציר זמן; אין בהם "טקסט שאפשר לתת למודל לכתוב". ומהצד השני, המסגרות שכן מייצרות וידאו מתוך קוד דורשות ידע שהמודל לא באמת שולט בו.

כאן נכנס ההימור של HyperFrames. הקטע המדליק הוא שסוכן שיודע לכתוב HTML הופך, כמעט בחינם, לעורך וידאו מוכשר — כי הפורמט של הסרטון עצמו הוא בדיוק השפה שהוא כבר דובר שוטף. לא צריך ללמד אותו כלי חדש; צריך רק לתת לו לכתוב את מה שהוא ממילא הכי טוב בו.

המכשול: להוציא וידאו מדפדפן זה קשה בטירוף

כאן צריך לעצור ולהיות הוגנים, כי הבעיה אמיתית וקשה. דפדפן פשוט לא נבנה כדי לייצר וידאו. הוא רץ "בזמן אמת" — אם המחשב עמוס לרגע, פריים אחד ייקח קצת יותר, ושתי מכונות שונות יוציאו תוצאה שונה. בשביל וידאו אנחנו חייבים דבר שנקרא דטרמיניזם: אותו קלט חייב לתת בדיוק אותו MP4, בכל פעם, על כל מכונה (זה מה ש"דטרמיניסטי" אומר — חד-משמעי, בלי הפתעות ובלי מקריות).

הכלי שפתר את זה ראשון נקרא Remotion, וחשוב לתת לו קרדיט. Remotion היא מסגרת שבה בונים וידאו בעזרת React — ספריית קוד פופולרית לבניית ממשקים — ואלפי חברות מייצרות בה וידאו בפרודקשן כבר שנים. זו גישה אחרת ומצוינת. אבל צוות HeyGen גילה משהו מעניין כשהם ניסו להריץ עליה סוכני AI: "ככל שהוספנו יותר מעקות בטיחות, הפלט נעשה בטוח יותר וחזרתי יותר. כשחזרנו ל-HTML פשוט, היצירתיות חזרה". הסיבה נעוצה בדאטה: React הוא נתח קטן ממה שמודלים אומנו עליו, בעוד HTML נמצא בכל פינה של האינטרנט — אז המודל פשוט חופשי יותר כשהוא כותב HTML.

המענה: "seek, לא play" — ואיך זה עובד באמת

אז איך מוציאים וידאו יציב מתוך דפדפן פראי? הטריק הכי חשוב נקרא "seek, don't play" — ובעברית: לחפש, לא לנגן. במקום לתת לסרטון "לרוץ", המנוע מזיז את הזמן ביד: קפוץ לרגע 0, צלם צילום מסך, קפוץ לפריים הבא, צלם שוב — וכך הלאה עד הסוף. כל פריים נלכד בנפרד ובשליטה מלאה, ואז כלי בשם FFmpeg (הסכין השוויצרי של עיבוד וידאו) מדביק את כל התמונות לקובץ אחד חלק.

כל סרטון הוא בעצם קובץ index.html אחד — הם קוראים לזה "composition", כלומר הרכב — ובתוכו כל אלמנט מקבל שני מאפיינים קטנים: data-start (מתי להיכנס) ו-data-duration (כמה זמן להישאר על המסך). זהו. כותרת שנכנסת בשנייה 1 ל-4 שניות, סרטון רקע שמתחיל מאפס, פסקול — כולם יושבים על אותו ציר זמן, בשפה שכל מודל מבין. יש גם פתרון אלגנטי לבעיה מעצבנת: דפדפנים לא מפענחים וידאו באותו אופן בכל מכונה, אז HyperFrames פשוט מפרק כל סרטון-בתוך-סרטון לתמונות בעזרת FFmpeg עוד לפני הצילום, ומזריק אותן חזרה — כך שהתוצאה תמיד זהה.

והנה החלק שאני הכי אוהב: כדי להבטיח שהתצוגה המקדימה זהה לפלט הסופי, HyperFrames חותם על החבילה בטביעת אצבע דיגיטלית (SHA256), כך שמה שאנחנו רואים בתצוגה המקדימה הוא ממש הקוד שהפיק את ה-MP4, לא גרסה מקורבת שלו. האנימציות רצות דרך GSAP (ספריית האנימציה הפופולרית של האינטרנט) כברירת מחדל, והכל חינמי לגמרי תחת רישיון Apache 2.0 — רישיון קוד-פתוח מתירני, בלי תשלום פר-רינדור ובלי מגבלה על גודל הצוות.

מה זה יודע לעשות בפועל, ואיך מתחילים

אז מה אנחנו בונים עם זה? מהדברים שאני כבר משחק איתם בעצמי: טיזרים למוצר, קליפים קצרים לרשתות, הסברים מונפשים, ויזואליזציות של דאטה, וכתוביות ושכבות טקסט על גבי וידאו קיים. הזרימה עם סוכן נראית כמעט קסומה: אנחנו מבקשים מ-Claude Code "תכין לי אינטרו של עשר שניות למוצר", והוא מקים composition, מחווט את ה-tracks, כותב אנימציות GSAP, מריץ תצוגה מקדימה — ומרנדר. הכל בלי שנגע בעורך ווידאו אפילו פעם אחת.

ולהתחיל זה ממש שלוש פקודות. כל מה שצריך זה Node.js בגרסה 22 ומעלה ו-FFmpeg מותקן, ואז:

# Needs Node.js 22+ and FFmpeg installed

# 1. Scaffold a new video project
npx hyperframes init my-first-video
cd my-first-video

# A composition is just an index.html on a timeline:
#   <video data-start="0" data-duration="6" src="intro.mp4"></video>
#   <h1    data-start="1" data-duration="4">Launch day</h1>
#   <audio data-start="0" data-duration="6" src="music.wav"></audio>

# 2. Live preview in the browser
npx hyperframes preview

# 3. Render to a deterministic MP4
npx hyperframes render

וכדי להבין איפה הכלי הזה יושב מול Remotion — ומתי דווקא Remotion הבחירה הנכונה — פירקתי את שתי הגישות אחת מול השנייה, כולל המספר שהכי חשוב לנו כשמריצים אלפי רינדורים: העלות.

מסקנה: לא "טוב יותר", אלא אחר — ובנוי לעידן הסוכנים

בעיניי, וזה חשוב שנגיד את זה בפה מלא: HyperFrames הוא לא "טוב יותר מ-Remotion". הוא גישה אחרת עם הימור אחד ברור וחד — אם העתיד הוא שסוכני AI מייצרים וידאו לבד, אז הפורמט צריך להיות השפה שהם הכי שולטים בה, וזה HTML. ויש לזה מחיר, שאסור להסתיר. הרינדור על מכונה בודדת איטי: בבדיקה של סוקר עצמאי, סרטון של 30 שניות ב-1080p לקח בערך שלוש דקות מקומית, לעומת כ-25 שניות על Remotion Lambda בענן. הקסם הדטרמיניסטי המלא עובד רק על לינוקס (מק ווינדוס נופלים לשיטה מקורבת), האקוסיסטם עדיין דק לעומת עולם React הענק, והעורך הוויזואלי עוד לא בשל. מי שכבר יש לו צינור Remotion שעובד וצוות React מנוסה — אין לו שום סיבה להחליף.

אבל השאלה שאני משאיר אותנו איתה היא אחרת לגמרי: אם מחר כל סוכן יודע לכתוב HTML, ו-HTML הוא כבר וידאו — כמה זמן ייקח עד שהמילים "לערוך סרטון" יישמעו לנו מיושנות בדיוק כמו "לפתח פילם"?