מדריך HyperFrames עם Codex / Claude Code: איך יוצרים סרטוני AI מקוד
מדריך HyperFrames עם Codex / Claude Code: איך יוצרים סרטוני AI מקוד
מאת רועי טל | 30 באפריל 2026 | עודכן ב-3 במאי 2026 | 36 דקות קריאה
סרטון תמצית: איך עובדים עם HyperFrames, מה הסקיל עושה ומה אפשר לייצר ממנו.
יש עולם שלם בין "תן לי סרטון יפה" לבין סרטון עסקי שאפשר לתקן, לשכפל, למדוד ולייצר ממנו גרסאות. HyperFrames יושב בדיוק שם: הוא מאפשר להפוך דף HTML, עיצוב CSS, קצת JavaScript, אנימציות GSAP ונכסי מדיה לסרטון שאפשר לראות בדפדפן ולייצא לקובץ MP4.
במדריך הזה אני מראה איך לעבוד עם HyperFrames דרך Codex או Claude Code גם אם אתם לא מפתחים. אתם נותנים בריף, הסוכן מציע טיימליין, בונה קבצים, פותחים Preview, מתקנים נקודה אחת בכל פעם, ורק בסוף מרנדרים קובץ וידאו.
זה לא מחליף את Sora, Veo או Runway. אלו כלים מעולים ליצירת שוטים ויזואליים חדשים. HyperFrames הוא כלי אחר: פחות קסם, יותר שליטה. הוא מתאים במיוחד ליוצרי תוכן, בעלי עסקים, אנשי שיווק, מרצים, יועצים, מנהלי מוצר וכל מי שרוצה שסוכן קוד יעזור לו לבנות סרטון מדויק.
1
בוחרים תבנית
מתחילים מסגנון מוכן כמו swiss-grid, play-mode או blank.
2
מתכננים טיימליין ופותחים Preview
נותנים בריף, מאשרים סצנות, ורואים את הסרטון בדפדפן לפני יצוא.
3
מתקנים ומרנדרים MP4
מתקנים נקודה אחת בכל פעם, ואז מייצאים קובץ סופי לפרסום.
מה תדעו לעשות בסוף המדריך
- ✓להבין מה HyperFrames עושה, ומה הוא לא מנסה לעשות.
- ✓לדעת מה לבקש מ-Codex או Claude Code בלי לנהל את הקוד לבד.
- ✓להבין מונחים כמו Preview, Render, Timeline, Assets, RTL ו-Safe Area.
- ✓לבחור תבנית התחלה מתאימה לסרטון עסקי, סרטון דאטה, רילס או סרטון מוצר.
- ✓להריץ בדיקות בסיסיות לפני יצוא MP4 סופי.
מה זה HyperFrames בפועל
HyperFrames הוא פריימוורק פתוח ליצירת וידאו מתוך HTML. במילים פשוטות: במקום לערוך רק בתוך ממשק וידאו סגור, בונים סרטון מקבצים שסוכן קוד יודע לקרוא, לערוך ולבדוק.
הסרטון מוגדר כמו דף קטן: מה מופיע על המסך, איך זה נראה, מתי זה נכנס, כמה זמן זה נשאר, ואיך זה יוצא. אחרי שמרוצים מהתצוגה המקדימה, HyperFrames מרנדר את זה לקובץ MP4 שאפשר לפרסם.
הזרימה המעשית: בריף, סוכן קוד, פרויקט HyperFrames, Preview, תיקון ורינדור.
מתי להשתמש ומתי לא:
מתאים במיוחד ל-HyperFrames
✓- סרטוני מוצר עם טקסט, UI, לוגו וקריאה לפעולה.
- רילס וסטוריז עם כתוביות, קצב וגרסאות חוזרות.
- דוחות, גרפים, מספרים ותוכן דאטה שצריך דיוק.
- הפיכת אתר, מסמך, PDF או CSV לסרטון הסבר.
פחות מתאים ל-HyperFrames
✗- יצירת שוטים קולנועיים פוטוריאליסטיים מטקסט בלבד.
- עריכה ידנית מלאה של צילום, סאונד וחיתוכים מורכבים.
- תוצאה קסומה בלחיצה אחת בלי בדיקה ובלי Preview.
- סרטונים שבהם אין צורך בשליטה בטקסט, זמן או גרסאות.
לפני שמתחילים: התקנות חובה ב-5 דקות
זה החלק שלא מדלגים עליו: HyperFrames דורש Node.js 22 ומעלה, סקיל לסוכן הקוד, ו-FFmpeg כדי להפוך את הרינדור הסופי לקובץ MP4.
1. בודקים Node.js 22+
node --versionאם אין Node.js, או שמופיעה גרסה נמוכה מ-22, מתקינים או מעדכנים מ-האתר הרשמי של Node.js.
2. מתקינים את סקיל HyperFrames ל-Codex / Claude Code
העתיקו לצ'אט של Codex או Claude Code:
תתקין לי את HyperFrames skill מהמקור הרשמי:
npx skills add heygen-com/hyperframesאו להריץ ישירות בטרמינל:
npx skills add heygen-com/hyperframesאם כלי הסקילים לא זמין, אפשר להוריד או לקרוא את הריפו ישירות מ-GitHub הרשמי:
git clone https://github.com/heygen-com/hyperframes.git3. מתקינים FFmpeg לרינדור MP4
winget install --id Gyan.FFmpeg -ebrew install ffmpegsudo apt update && sudo apt install -y ffmpegאחרי ההתקנה סוגרים ופותחים טרמינל חדש, ואז בודקים:
ffmpeg -version4. יוצרים פרויקט, פותחים Preview, ואז מרנדרים MP4
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output final.mp4מקור רשמי: HyperFrames Quickstart.
מילון קצר לפני שמתחילים: שלא ניבהל מהמילים
HyperFrames עובד עם מונחים מעולם הקוד והווידאו. לא חייבים להפוך למפתחים כדי להשתמש בו, אבל כן כדאי להבין מה כל דבר אומר. המילון הקצר הזה יעזור לכם לדעת מה לבקש מ-Codex או Claude Code, איך לבדוק שהתוצאה עובדת, ואיך לתת תיקונים חכמים.
פתחו את המילון המלא לפי הצורך
אין צורך לשנן הכל. פתחו את המילון כשאתם נתקלים במונח לא ברור או כשאתם רוצים לתת לסוכן תיקון מדויק יותר.
HyperFrames
מה זה: כלי שמאפשר לבנות סרטון מקבצי HTML, CSS ו-JavaScript, ואז לרנדר אותו ל-MP4.
למה זה חשוב: במקום לערוך סרטון רק בעורך וידאו, אפשר לתת לסוכן קוד לבנות ולתקן את הסרטון.
דוגמה: Codex יכול לשנות כותרת, צבעים, תזמון וכתוביות כי הכל נמצא בקבצים.
קומפוזיציה
מה זה: סצנה או סרטון שמוגדרים כקובץ HTML עם הוראות זמן, גודל ושכבות.
למה זה חשוב: זו היחידה המרכזית שממנה בנוי הסרטון ב-HyperFrames.
דוגמה: קומפוזיציה אחת יכולה להיות פתיח, סצנת גרף או סצנת CTA.
HTML
מה זה: השפה שמגדירה מה מופיע על המסך, למשל כותרת, תמונה, וידאו או כפתור.
למה זה חשוב: HyperFrames משתמש ב-HTML בתור השלד של הסרטון.
דוגמה: כותרת בסרטון יכולה להיות תגית h1 בתוך HTML.
CSS
מה זה: השפה שמגדירה איך הדברים נראים: צבע, גודל, ריווח, מיקום ופונט.
למה זה חשוב: העיצוב של הסרטון נשלט בעיקר דרך CSS.
דוגמה: אם הכותרת קטנה מדי, Codex יכול לשנות את גודל הפונט ב-CSS.
JavaScript
מה זה: שפה שמאפשרת להוסיף התנהגות ואנימציות.
למה זה חשוב: חלק מהתנועה, התזמון והאינטראקציה בסרטון יכולים להתבצע עם JavaScript.
דוגמה: אנימציה של מספרים שעולים בהדרגה יכולה להיכתב ב-JavaScript.
GSAP
מה זה: ספריית אנימציה שמאפשרת ליצור תנועות חלקות ומדויקות.
למה זה חשוב: HyperFrames משתמש הרבה ב-GSAP כדי לשלוט באנימציות בצורה שמתאימה לרינדור וידאו.
דוגמה: GSAP יכול לגרום לכותרת להיכנס לאט, להיעצר, ואז לצאת מהמסך.
Timeline
מה זה: ציר הזמן של הסרטון.
למה זה חשוב: הוא קובע מתי כל אלמנט נכנס, כמה זמן הוא נשאר ומתי הוא יוצא.
דוגמה: הכותרת מופיעה בשנייה 0, הגרף נכנס בשנייה 5 וה-CTA מופיע בשנייה 25.
Preview
מה זה: צפייה מקדימה בדפדפן לפני שמייצאים את הסרטון.
למה זה חשוב: זו הדרך לבדוק אם הטקסט, הקצב, העיצוב והאודיו באמת עובדים.
דוגמה: לפני שמרנדרים MP4, פותחים Preview ורואים שהכל יושב נכון.
Render
מה זה: יצוא הסרטון לקובץ סופי.
למה זה חשוב: זה השלב שבו HyperFrames הופך את הקומפוזיציה לקובץ MP4 שאפשר לפרסם.
דוגמה: אחרי שהכל תקין ב-Preview, מריצים Render ומקבלים קובץ final.mp4.
MP4
מה זה: פורמט וידאו נפוץ שאפשר להעלות לרשתות, לשלוח ללקוח או לשלב באתר.
למה זה חשוב: זו בדרך כלל התוצאה הסופית של העבודה.
דוגמה: הסרטון הסופי נשמר כקובץ MP4.
Node.js
מה זה: סביבת הרצה שמאפשרת להפעיל כלים מבוססי JavaScript במחשב.
למה זה חשוב: HyperFrames דורש Node.js כדי להריץ את הפקודות שלו.
דוגמה: אם Node.js לא מותקן, הפקודה npx hyperframes לא תעבוד.
FFmpeg
מה זה: כלי שמטפל בקידוד וידאו ואודיו.
למה זה חשוב: HyperFrames משתמש בו כדי לארוז את הפריימים, האנימציות והאודיו לקובץ MP4.
דוגמה: HyperFrames בונה את הסרטון, ו-FFmpeg עוזר להפוך אותו לקובץ וידאו סופי.
npx
מה זה: דרך להריץ כלי Node.js בלי להתקין אותו ידנית מראש בכל פעם.
למה זה חשוב: רוב הפקודות במדריך מתחילות ב-npx.
דוגמה: npx hyperframes preview מפעיל את התצוגה המקדימה.
Skill
מה זה: חבילת הוראות שמלמדת את סוכן הקוד איך לעבוד עם כלי מסוים.
למה זה חשוב: הסקיל של HyperFrames מלמד את Codex או Claude Code לכתוב קומפוזיציות תקינות.
דוגמה: בלי הסקיל, הסוכן עלול לכתוב HTML יפה שלא עובד טוב כווידאו.
Codex / Claude Code
מה זה: סוכני קוד שיכולים לקרוא קבצים, לערוך אותם, להריץ פקודות ולתקן שגיאות.
למה זה חשוב: HyperFrames מתאים להם כי הסרטון בנוי מקבצים שהם יודעים להבין ולשנות.
דוגמה: אפשר לבקש מ-Codex להגדיל כותרת, לקצר סצנה או לתקן RTL.
Assets
מה זה: קבצי המדיה של הסרטון.
למה זה חשוב: שם נמצאים לוגו, תמונות, וידאו, אודיו, פונטים וקבצים נוספים.
דוגמה: אם רוצים להשתמש בלוגו, שמים אותו בתיקיית assets.
compositions
מה זה: תיקייה שבה נמצאות סצנות או חלקים של הסרטון.
למה זה חשוב: בסרטון מורכב אפשר לחלק את העבודה לכמה קומפוזיציות קטנות.
דוגמה: קומפוזיציה אחת לפתיח, אחת לגרף ואחת לסיום.
index.html
מה זה: קובץ הכניסה הראשי של הסרטון.
למה זה חשוב: משם HyperFrames מתחיל לטעון את הסרטון.
דוגמה: אם משהו לא נטען, כדאי לבדוק קודם את index.html.
meta.json
מה זה: קובץ מידע על הפרויקט.
למה זה חשוב: הוא יכול להכיל פרטים כמו שם, מזהה והגדרות בסיסיות.
דוגמה: Codex יכול לבדוק שה-meta.json מתאים לפרויקט הנוכחי.
data attributes
מה זה: סימונים מיוחדים בתוך HTML שמוסיפים הוראות ל-HyperFrames.
למה זה חשוב: הם קובעים זמן, משך, גודל, שכבות והתנהגות של אלמנטים.
דוגמה: data-start קובע באיזו שנייה אלמנט מתחיל.
class="clip"
מה זה: סימון שאומר ל-HyperFrames שזה אלמנט מתוזמן בסרטון.
למה זה חשוב: בלעדיו HyperFrames עלול לא לנהל נכון את ההופעה וההיעלמות של האלמנט.
דוגמה: כותרת שמופיעה רק ל-5 שניות צריכה להיות clip.
data-start
מה זה: הזמן שבו אלמנט מתחיל להופיע.
למה זה חשוב: זה קובע את נקודת הכניסה של האלמנט בטיימליין.
דוגמה: data-start="3" אומר שהאלמנט מתחיל בשנייה 3.
data-duration
מה זה: כמה זמן האלמנט נשאר פעיל.
למה זה חשוב: זה מונע מצב שבו טקסט נעלם מוקדם מדי או נשאר יותר מדי זמן.
דוגמה: data-duration="5" אומר שהאלמנט נשאר 5 שניות.
data-track-index
מה זה: המסלול או השכבה של האלמנט.
למה זה חשוב: זה עוזר לקבוע מה נמצא מעל מה, ואילו אלמנטים לא מתנגשים באותו זמן.
דוגמה: כותרת יכולה להיות במסלול 1, ורקע וידאו במסלול 0.
data-composition-id
מה זה: השם הפנימי של הקומפוזיציה.
למה זה חשוב: HyperFrames משתמש בו כדי לזהות את הסרטון או הסצנה.
דוגמה: data-composition-id="intro" אומר שזו קומפוזיציית פתיח.
data-width
מה זה: רוחב הסרטון בפיקסלים.
למה זה חשוב: כך קובעים אם הסרטון מתאים למסך רחב, ריבועי או אנכי.
דוגמה: 1920 מתאים לרוחב של סרטון 16:9.
data-height
מה זה: גובה הסרטון בפיקסלים.
למה זה חשוב: יחד עם data-width הוא קובע את יחס המסך.
דוגמה: 1080x1920 מתאים לסרטון אנכי לרילס או סטורי.
Safe Area
מה זה: האזור הבטוח במסך שבו טקסטים לא נחתכים ולא מוסתרים על ידי ממשק של אפליקציות.
למה זה חשוב: ברילס, טיקטוק וסטוריז יש כפתורים ותיאורים שעלולים להסתיר טקסט.
דוגמה: CTA חשוב לא צריך להיות צמוד מדי לתחתית המסך.
RTL
מה זה: כיוון כתיבה מימין לשמאל.
למה זה חשוב: בעברית צריך לוודא שהטקסט מיושר נכון, שהשורות נשברות טוב ושהפיסוק לא מתבלגן.
דוגמה: בסרטון בעברית צריך להגדיר יישור לימין וכיוון RTL.
איך לבחור תבנית התחלה בלי להסתבך
HyperFrames כולל תבניות התחלה. אלו לא פקודות קסם, אלא סגנונות מוכנים שאפשר לבנות עליהם סרטון.
אל תנסו לזכור את כל השמות. תחשבו עליהם כמו תבניות עיצוב. בוחרים תבנית לפי סוג הסרטון שרוצים ליצור, ואז נותנים ל-Codex או Claude Code להתאים אותה לתוכן שלכם.
warm-grain
סגנון חם, רך ומעט קולנועי.
מתי לבחור: מותג, לייף סטייל, סיפורי לקוח ותוכן רגוע.
play-mode
סגנון קצבי, צעיר ואנרגטי.
מתי לבחור: רילס, השקת מוצר וסרטון קצר עם תנועה חזקה.
swiss-grid
סגנון נקי, מסודר ומקצועי.
מתי לבחור: הדרכות, דוחות, מצגות עסקיות ותוכן טכני מסודר.
kinetic-type
סגנון שמבוסס על טקסטים בתנועה.
מתי לבחור: פתיחים, כותרות חזקות ומסרים קצרים.
decision-tree
סגנון של תרשים זרימה.
מתי לבחור: הסברים, תהליכים, הדרכות וקבלת החלטות.
product-promo
סגנון להצגת מוצר או שירות בכמה סצנות.
מתי לבחור: פיצ'ר חדש, אפליקציה, שירות או דף נחיתה.
nyt-graph
סגנון גרפים ודאטה, נקי ועיתונאי.
מתי לבחור: דוחות, KPI, תובנות עסקיות וסרטוני דאטה.
vignelli
סגנון אנכי, טיפוגרפי, חזק וחד.
מתי לבחור: סטוריז, רילס, הכרזות ומסרים קצרים בפורמט 9:16.
blank
פרויקט ריק עם שלד בסיסי.
מתי לבחור: כשאתם רוצים שליטה מלאה או כשהסוכן בונה הכל מאפס.
אם אתם לא בטוחים במה לבחור
- סרטון עסקי נקי -
swiss-grid - סרטון סושיאל קצבי -
play-mode - סרטון דאטה -
nyt-graph - סרטון מוצר -
product-promo - סרטון אנכי קצר -
vignelli - התחלה מאפס -
blank
מה צריך לפני שמתחילים
לא חייבים להבין כל פקודה לעומק
המטרה כאן היא לא להפוך למפתחים. המטרה היא להבין מספיק כדי לדעת מה לבקש מהסוכן, איך לבדוק שהתוצאה עובדת, ואיך לזהות איפה הבעיה כשמשהו לא רץ.
פקודות ההתקנה המלאות למי שמריץ את זה מקומית
אם Codex או Claude Code עובדים בשבילכם, אפשר לבקש מהם להריץ ולבדוק את הפקודות האלה. אתם רק צריכים להבין מה כל פקודה אמורה לעשות.
בדיקת Node.js
Node.js הוא המנוע שמאפשר להריץ את HyperFrames במחשב. בלי Node.js, הפקודות של HyperFrames לא יעבדו.
node --versionזו פקודת בדיקה. היא לא מתקינה כלום. אם מופיעה גרסה 22 ומעלה, אפשר להמשיך. אם לא מופיעה גרסה, או שהגרסה נמוכה מדי, צריך להתקין או לעדכן Node.js.
בדיקת FFmpeg
HyperFrames בונה את הסרטון, ו-FFmpeg עוזר לארוז אותו לקובץ MP4 סופי.
ffmpeg -versionזו פקודת בדיקה. היא לא מתקינה כלום. אם מופיעה גרסה, אפשר להמשיך. אם לא, צריך להתקין FFmpeg.
התקנת FFmpeg
אם FFmpeg לא מותקן, מריצים את הפקודה שמתאימה למערכת ההפעלה שלכם. ב-Windows מומלץ לפתוח PowerShell חדש אחרי ההתקנה.
winget install --id Gyan.FFmpeg -ebrew install ffmpegsudo apt update && sudo apt install -y ffmpegאחרי ההתקנה מריצים שוב ffmpeg -version כדי לוודא שהכל זמין ל-HyperFrames.
התקנת הסקיל
זו הפקודה שמוסיפה לסוכן הקוד את הידע הספציפי של HyperFrames. זה כמו לתת לסוכן חוברת הוראות לפני שהוא מתחיל לעבוד.
npx skills add heygen-com/hyperframesהסקיל עוזר ל-Codex או Claude Code להבין איך לבנות קומפוזיציות וידאו תקינות, לעבוד עם GSAP, ולהשתמש נכון בפקודות של HyperFrames.
יצירת פרויקט חדש
הפקודה הבאה יוצרת תיקייה חדשה בשם my-video עם מבנה בסיסי של פרויקט HyperFrames.
npx hyperframes init my-videoאם רוצים להתחיל מתבנית קיימת, מוסיפים example. בדוגמה הזו, swiss-grid היא תבנית נקייה ומקצועית שמתאימה לסרטונים עסקיים, הדרכות ודוחות.
npx hyperframes init my-video --example swiss-gridזו עדיין אותה פעולת יצירת פרויקט, רק עם נקודת פתיחה עיצובית מוכנה במקום פרויקט ריק.
כניסה לתיקייה
הפקודה הזו מעבירה את הטרמינל לתוך תיקיית הפרויקט. בלי זה, הפקודות הבאות עלולות לרוץ במקום הלא נכון.
cd my-videoאחרי הפקודה הזו, כשמריצים Preview או Render, HyperFrames יודע לעבוד על הפרויקט הנכון.
פתיחת Preview
Preview פותח תצוגה מקדימה בדפדפן. זה השלב שבו בודקים איך הסרטון נראה לפני שמייצאים אותו.
npx hyperframes previewלא מדלגים על Preview. זה המקום שבו רואים אם הטקסטים נחתכים, אם העברית מיושרת, ואם הקצב עובד.
בדיקות לפני רינדור
בחלק מהגרסאות קיימות פקודות בדיקה נוספות. בקשו מהסוכן לבדוק את הפקודות הזמינות באמצעות help או לפי התיעוד הרשמי.
npx hyperframes --helpהפקודה הזו מציגה את הפקודות הזמינות בגרסה שמותקנת אצלכם.
npx hyperframes lintlint בודקת טעויות נפוצות בקומפוזיציה לפני רינדור.
npx hyperframes compositionscompositions מציגה אילו קומפוזיציות HyperFrames מזהה בפרויקט. זו דרך טובה לבדוק שהמבנה נטען כמו שצריך.
רינדור לקובץ MP4
Render מייצא את הסרטון לקובץ MP4. מריצים את זה רק אחרי שבדקתם את הסרטון ב-Preview.
npx hyperframes render --output final.mp4Render הוא לא שלב ניסוי ראשון. קודם רואים, מתקנים, ואז מייצאים.
פענוח קוד ראשון: מה אנחנו רואים כאן?
לא חייבים לקרוא קוד כדי להשתמש ב-HyperFrames. מספיק להבין את הרעיון: הקובץ אומר לכותרת מתי להופיע, כמה זמן להישאר, ובאיזה גודל הסרטון יוצא.
במילים פשוטות
הדוגמה אומרת: יש כותרת בשם "שלום HyperFrames". היא מתחילה בשנייה 0, נשארת 5 שניות, ומופיעה בתוך סרטון בגודל 1920x1080.
אם נרצה שהיא תתחיל בשנייה 3 ותישאר 4 שניות, נבקש מהסוכן לשנות את data-start ל-3 ואת data-duration ל-4.
דוגמת קוד למי שרוצה לראות מתחת למכסה המנוע
זה לא קוד שצריך לכתוב לבד. זו רק דרך לראות איך HyperFrames מתרגם הוראות זמן וגודל לקובץ HTML.
<div id="root" data-composition-id="my-video"
data-width="1920" data-height="1080">
<h1 class="clip"
data-start="0"
data-duration="5"
data-track-index="0">
שלום HyperFrames
</h1>
</div>divהוא הקופסה הראשית של הסרטון.data-composition-idהוא השם הפנימי של הסרטון.data-widthהוא רוחב הסרטון.data-heightהוא גובה הסרטון.h1הוא טקסט גדול, כמו כותרת.class="clip"אומר ל-HyperFrames שזה אלמנט מתוזמן.data-start="0"אומר שהכותרת מתחילה בשנייה 0.data-duration="5"אומר שהכותרת נשארת 5 שניות.data-track-index="0"קובע את השכבה או המסלול של האלמנט.
איך לעבוד עם Codex / Claude Code בלי להיות מפתחים
Codex או Claude Code הם לא עורכי וידאו רגילים. הם סוכני קוד. הם יכולים לפתוח קבצים, להבין מבנה פרויקט, לשנות HTML ו-CSS, להריץ פקודות, לקרוא שגיאות ולתקן. HyperFrames מתאים להם כי הסרטון בנוי מקבצים ולא מממשק סגור.
אתם לא צריכים לנהל את הקוד ידנית. התפקיד שלכם הוא לתת בריף ברור, לבדוק את ה-Preview, ולתת תיקונים ממוקדים.
1. נותנים בריף
נושא, קהל, אורך, פורמט, מסר מרכזי, צבעים ונכסים קיימים.
2. מבקשים טיימליין
לפני קוד, הסוכן מציע 4-6 סצנות בשפה פשוטה.
3. מאשרים בנייה
רק אחרי שהמבנה נכון, הסוכן בונה את הקבצים.
4. פותחים Preview
רואים את הסרטון בדפדפן לפני יצוא.
5. מתקנים נקודה אחת
קצב, RTL, Safe Area, צבעים או טקסט. לא הכל יחד.
6. מרנדרים בסוף
אחרי Preview תקין ובדיקות, מייצאים MP4.
הלולאה הבריאה: מתכננים, בונים, רואים, מתקנים, ורק אז מרנדרים.
פרומפטים למי שלא מגיע מעולם הקוד
פרומפט התחלה רגוע
אני לא מתכנת. תעבוד איתי לאט. לפני כל שינוי תסביר במשפט קצר מה אתה הולך לעשות. בנה סרטון HyperFrames פשוט באורך 20 שניות, ואל תרנדר לפני שפתחנו Preview ובדקנו שהכול נראה טוב.הפרומפט הזה מגדיר לסוכן קצב עבודה רגוע וברור.
פרומפט לתכנון לפני קוד
בנה לי סרטון 9:16 בעברית. לפני שאתה כותב קוד, תן לי טיימליין של 5 סצנות בשפה פשוטה: מה רואים, מה כתוב על המסך, כמה שניות כל סצנה נמשכת, ומה מטרת הסצנה.ככה אתם מאשרים את הסרט לפני שהסוכן כותב קבצים.
פרומפט לבדיקת עברית ו-RTL
פתח Preview ובדוק אם כל הטקסטים בעברית מיושרים לימין, לא נחתכים, לא צפופים מדי, ולא נשברים באמצע מילה. אם יש בעיה, תקן אותה בלי לשנות את המסר.זה מונע את הבעיה הקלאסית של טקסט עברי שנראה טוב בקוד אבל לא במסך.
פרומפט לתיקון קצב
הסרטון מרגיש איטי מדי. קצר את הסצנה השנייה, שמור על אותו מסר, ואל תשנה את צבעי המותג או את ה-CTA.התיקון ממוקד: קצב בלבד, בלי לפתוח מחדש את כל העיצוב.
פרומפט לתיקון מובייל
בדוק Safe Area למסך 9:16. ודא שכותרות, כתוביות ו-CTA לא קרובים מדי לקצוות ולא יוסתרו על ידי ממשק של רילס או סטורי.חשוב במיוחד לסרטונים אנכיים ברשתות חברתיות.
פרומפט לרינדור סופי
אחרי שה-Preview תקין, הרץ בדיקות רלוונטיות לפי התיעוד הרשמי, ואז רנדר לקובץ final.mp4. בסיום, הסבר לי מה נוצר ואיפה נמצא הקובץ.כאן הסוכן יודע שהגיע שלב יצוא, לא עוד סבב ניסויים.
מסלול טכני: ממה בנוי פרויקט HyperFrames
לא חייבים לפתוח את כל הקבצים לבד. אבל כשמבינים מה כל תיקייה עושה, קל יותר לתת לסוכן הוראות מדויקות.
index.html
קובץ הכניסה הראשי של הסרטון. כאן בדרך כלל נטענת הקומפוזיציה הראשית.
compositions/
תיקייה לסצנות משנה: פתיח, כתוביות, גרף או סיום.
assets/
תיקייה לקבצי מדיה: לוגו, תמונות, וידאו, אודיו ופונטים.
meta.json
קובץ מידע על הפרויקט. לא תמיד צריך לגעת בו, אבל כדאי שהסוכן יבדוק שהוא מתאים.
טעויות נפוצות ואיך לדבר עליהן עם הסוכן
הטקסט יפה אבל נחתך
מה רואים בפועל: כותרות או כתוביות יוצאות מהמסך.
למה זה קורה: אין מספיק Safe Area, הפונט גדול מדי, או שורות לא נשברות נכון בעברית.
מה לבקש: בדוק Safe Area, הקטן טקסטים ארוכים, ושבור שורות ידנית בלי לפגוע במסר.
הסרטון מתרנדר אבל הקצב מוזר
מה רואים בפועל: סצנה נשארת יותר מדי זמן או נעלמת מהר מדי.
למה זה קורה: הזמנים ב-data-start או data-duration לא מאוזנים.
מה לבקש: עבור על הטיימליין כולו, הצג לי טבלת זמנים קצרה, ואז תקן את משכי הסצנות.
אנימציה נראית טוב ב-Preview אבל לא ברינדור
מה רואים בפועל: תנועה לא מסונכרנת או קופצת.
למה זה קורה: אנימציה רצה לפי שעון חופשי במקום להיות נשלטת על ידי HyperFrames.
מה לבקש: ודא ש-GSAP או מנוע האנימציה עובדים בצורה paused ו-seekable לפי כללי HyperFrames.
RTL לא תקין
מה רואים בפועל: עברית מיושרת לשמאל, פיסוק קופץ, או שורות נשברות מוזר.
למה זה קורה: חסרים direction, text-align או הגדרות CSS מתאימות.
מה לבקש: תקן RTL מלא לכל הטקסטים בעברית, כולל יישור לימין, כיוון כתיבה, ושבירת שורות נעימה.
מתי לבחור HyperFrames ומתי כלי אחר
HyperFrames הוא לא מחולל וידאו קסום מטקסט. הוא כלי ליצירת וידאו שנשלט דרך קוד וסוכן קוד.
HyperFrames
בחרו בו כשצריך שליטה בטקסט, דאטה, UI, גרסאות חוזרות ודיוק.
Sora / Veo / Runway
בחרו בהם ליצירת שוטים ויזואליים חדשים מטקסט או תמונה.
CapCut / Premiere
בחרו בהם לעריכה ידנית מלאה, חיתוכים, סאונד ועבודה קריאייטיבית עמוקה.
Canva
בחרו בו לתבניות מהירות ולאנשים שרוצים לעבוד בלי קוד בכלל.
צ'קליסט לפני פרסום
- ✓צפיתי בכל הסרטון ב-Preview.
- ✓הטקסט בעברית מיושר לימין ולא נחתך.
- ✓ה-Hook ברור ב-3 השניות הראשונות.
- ✓יש CTA אחד ברור.
- ✓אין נתונים מומצאים.
- ✓כל מספר נבדק מול מקור.
- ✓הנכסים קיימים ולא כבדים מדי.
- ✓הרינדור הסתיים בלי שגיאה.
- ✓פתחתי את קובץ ה-MP4 הסופי וצפיתי בו.
- ✓בדקתי שהסרטון נראה טוב גם במובייל, אם הוא מיועד ל-9:16.
קישורים שימושיים
אתר HyperFrames הרשמי
נקודת כניסה לתיעוד, לדוגמאות ול-GitHub.
Quickstart
התקנה, יצירת פרויקט, Preview ורינדור ראשון.
Examples
רשימת תבניות התחלה כמו swiss-grid, play-mode ו-vignelli.
Prompt Guide
איך לבקש מסוכן קוד לבנות, לתקן ולשפר קומפוזיציות.
Data Attributes
הסבר רשמי על data-start, data-duration, data-track-index ועוד.
Frame Adapters
למה אנימציות צריכות להיות נשלטות לפי פריים ולא לפי שעון חופשי.
Website to Video
איך להפוך אתר קיים לסרטון בעזרת סוכן AI ו-HyperFrames.
GitHub הרשמי
הקוד הרשמי, README, רישיון Apache 2.0 והמידע העדכני על CLI וסקילים.
HyperFrames vs Remotion
השוואה רשמית שמסבירה למה HyperFrames בנוי סביב HTML, CSS, GSAP וסוכני קוד.
שאלות נפוצות
האם צריך לדעת לתכנת כדי להשתמש ב-HyperFrames?
לא חייבים להיות מפתחים. כן צריך לדעת לתת בריף ברור, לפתוח Preview, לקרוא תוצאה, ולבקש מהסוכן תיקונים ממוקדים. רוב הקוד יכול להיכתב על ידי Codex או Claude Code.
האם HyperFrames מחליף את Sora או Veo?
לא. Sora ו-Veo מתאימים יותר ליצירת שוטים ויזואליים חדשים. HyperFrames מתאים לסרטונים נשלטים עם טקסט, UI, דאטה, כתוביות, תבניות וגרסאות רבות.
האם אפשר ליצור סרטונים בעברית ו-RTL?
כן, אבל צריך להגדיר את זה במפורש: עברית RTL, יישור לימין, Safe Area, שבירת שורות נעימה ופונט שתומך בעברית. תמיד בודקים ב-Preview.
מה היתרון של עבודה עם Codex / Claude Code?
היתרון הוא שהסוכן יכול להבין את מבנה הפרויקט, לערוך כמה קבצים, להריץ פקודות, לקרוא שגיאות ולתקן. אתם מנהלים את הבריף והבדיקה, לא כל שורת קוד.
האם אפשר להפוך אתר או מסמך לסרטון?
כן. אפשר לתת URL, PDF, מסמך או CSV ולבקש מהסוכן לבנות סרטון עם נקודות מרכזיות. חשוב להגיד לו לא להמציא מידע ולשאול אם חסר הקשר.
עדכון דיוק: המדריך עודכן לפי אתר HyperFrames, התיעוד הרשמי ו-GitHub הרשמי שנבדקו ב-3 במאי 2026. הפקודות המרכזיות שאומתו הן npx skills add heygen-com/hyperframes, npx hyperframes init, npx hyperframes preview, npx hyperframes lint, npx hyperframes compositions ו-npx hyperframes render --output final.mp4.
הירשמו לעדכונים במייל
רוצים להישאר צעד אחד קדימה?
עדכונים על כלי AI, מדריכים וטיפים - ישר למייל. בלי ספאם.
