איך יוצרים רילס Motion Graphics בעברית עם Claude ו־HyperFrames

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

שלושת המסכים של התרגיל

הכרטיס הראשון מנגן המחשה קצרה של סדר המסכים והתזמון. ההמחשה הורכבה מקומית. הפרויקט שניתן לעריכה נמצא בערכת התרגול ואפשר לרנדר אותו בנפרד ב־HyperFrames.

1שלב 1: מבינים מה עושה כל כלי

Motion Graphics הוא עיצוב בתנועה. במקום לתאר סצנה שהמודל יוצר כתמונות וידאו, כאן מגדירים אלמנטים כמו כותרת, פס או אייקון ואת השנייה שבה כל אחד נכנס. אתם רואים את אותם אלמנטים בתצוגה, ויכולים לתקן רכיב ספציפי.

בתוך הפרויקט, HTML מגדיר מה מופיע, CSS מגדיר את המראה, ו־GSAP קובע את התנועה והעיתוי. Claude Code יכול לבנות את הקבצים לפי בריף. ערכת התרגול מאפשרת לראות איך נראה פרויקט כזה לפני שמבקשים גרסה משלכם.

2שלב 2: מתקינים ובודקים שהמחשב מוכן

הפקודות במדריך מוצגות ל־Mac ול־Windows. ב־Mac פתחו Terminal מתוך Spotlight. ב־Windows פתחו PowerShell מתוך תפריט התחל. הדביקו שורה אחת בכל פעם וחכו לסיומה.

1. התקינו Node.js בגרסת LTS, מסדרה 22 ומעלה מתוך אתר Node.js . אחרי ההתקנה סגרו את הטרמינל ופתחו מחדש.
2. התקינו FFmpeg . ב־Mac עם Homebrew קיים, הריצו brew install ffmpeg . ב־Windows עם WinGet זמין, הריצו winget install -e --id Gyan.FFmpeg . אם מנהל החבילות אינו זמין, השתמשו בקישורי ההפצה של FFmpeg לפי מערכת ההפעלה. אחרי ההתקנה פתחו חלון טרמינל חדש.
3. התקינו את Claude Code לפי הוראות Anthropic ל־Mac ול־Windows . ב־Windows אפשר לעבוד מתוך PowerShell מקומי. לפי התיעוד של Anthropic, Git for Windows הוא רכיב אופציונלי למסלול Windows המקומי. אם Homebrew או WinGet כבר מותקנים אצלכם, אפשר להשתמש בפקודה המתאימה שמופיעה בהמשך. הריצו claude והתחברו לחשבון. אם קלוד כבר פתוח, אפשר לצאת באמצעות /exit כדי לחזור לטרמינל.
4. הריצו את בדיקות הגרסה. ב־node המספר צריך להתחיל ב־v22 או בסדרה חדשה יותר. בשאר השורות צריך להופיע מספר גרסה, וב־FFmpeg גם פירוט build.

brew install ffmpeg
brew install --cask claude-code

winget install -e --id Gyan.FFmpeg
winget install Anthropic.ClaudeCode

node --version
npx --version
ffmpeg -version
claude --version

מחברים את יכולות HyperFrames ל־Claude Code

הריצו את הפקודות הבאות בטרמינל. הפקודה הראשונה מוסיפה את מאגר התוסף של HyperFrames. השנייה מתקינה את התוסף ל־Claude Code. פתחו מחדש את Claude Code והקלידו /hyperframes כדי לראות את השלמת הפקודה. בהתקנת התוסף הפקודה יכולה להופיע כ־/hyperframes:hyperframes. אם בחרתם במקום זאת להתקין את הסקילים הרשמיים בלבד באמצעות npx skills add heygen-com/hyperframes, בחרו ב־Claude Code בזמן ההתקנה ופתחו את הסשן מחדש. במסלול הזה חפשו /hyperframes.

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

מכינים את מנוע התצוגה והרינדור

הגרסה בדוגמאות מוצמדת כדי שהפקודות יתאימו לפרויקט התרגול. בהרצה ראשונה npx עשוי לבקש אישור להוריד את חבילת hyperframes@0.9.16. אחרי ההורדה, הפקודה browser ensure דואגת לדפדפן התואם שהמנוע צריך. ב־doctor בדקו ש־Node, FFmpeg ו־Chrome מזוהים. לתרגיל השקט הזה רכיבים אופציונליים לתמלול, קריינות או Docker אינם נחוצים.

npx hyperframes@0.9.16 --version
npx hyperframes@0.9.16 browser ensure
npx hyperframes@0.9.16 doctor

3שלב 3: פותחים פרויקט ומחליטים מה יופיע בכל שנייה

לדרך הקצרה, חלצו את ערכת התרגול. בתוך הקבצים שחולצו תמצאו את motion-first. פתחו בתוכה את הטרמינל. ב־Mac אפשר להקליד cd ורווח, לגרור את התיקייה אל החלון וללחוץ Enter. ב־Windows אפשר לפתוח את התיקייה בסייר, להקליד powershell בשורת הכתובת וללחוץ Enter. ודאו ש־index.html ו־DESIGN.md נמצאים בתיקייה.

אם אתם מתחילים מאפס, פתחו טרמינל בתיקיית האב שבה תרצו לשמור את הפרויקט. הריצו init לפני שאתם נכנסים לתיקייה החדשה. הדגל --resolution portrait יוצר קנבס אנכי. הדגל --skip-skills מתאים כשכבר התקנתם את התוסף או הסקילים בשלב הקודם. תנו שם אחר אם כבר קיימת אצלכם תיקייה בשם motion-first.

npx hyperframes@0.9.16 init motion-first --example blank --resolution portrait --non-interactive --skip-skills
cd motion-first
claude

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

עבדו ב־1080×1920, ביחס 9:16. שמרו מרווחים בצדדים ובתחתית, והעדיפו משפט אחד גדול בכל מסך. בדוגמה השתמשתי ברקע לילך, סגול כהה והדגשה זהובה. אפשר להחליף את הצבעים לערכי המותג שלכם ועדיין לשמור על אותם זמנים.

4שלב 4: נותנים ל־Claude בריף שאפשר לבדוק

פתחו Claude Code בתוך תיקיית הפרויקט. הפעילו את הפקודה שהופיעה בהשלמה האוטומטית. אם הממשק דורש טקסט מיד אחרי הפקודה, הדביקו את הבריף באותה הודעה אחרי שם הפקודה. אם ערכת התרגול כבר פתוחה, אפשר להתחיל דווקא בפרומפט התיקון בסעיף 6.

השתמש ב־HyperFrames כדי ליצור בתיקייה הנוכחית רילס Motion Graphics בעברית, 1080×1920, באורך 10 שניות. קרא את DESIGN.md אם הוא קיים. אם הוא חסר, צור אותו לפי ההנחיות כאן.

העיצוב הוא כרזה נקייה בסגנון שולחן עריכה. רקע לילך #F5F0FA, טקסט שזיף #211633, פאנל #DCCCF5 והדגשת זהב #F4CC75. השתמש בגופן מקומי שתומך בעברית, כגון Heebo ברישיון מתאים. כותרת בולטת, טקסט תומך קצר ויישור לימין. השאר מרווחים לממשק של רילס ובדוק שאין טקסט שיוצא מהקנבס.

שניות 0 עד 3. הכותרת המדויקת היא ״הרילס מתחיל במשפט אחד.״ מתחתיה ״כתבו בשורה אחת מה הצופים צריכים להבין.״ הצג מסילת עריכה גרפית עם פתיח מודגש. תן לסמן לנוע פעם אחת בעדינות.
שניות 3 עד 7. הכותרת המדויקת היא ״מסר אחד. המחשה אחת.״ מתחתיה ״בחרו גרפיקה שמסבירה את הרעיון ברגע.״ הצג שני כרטיסים, ״משפט״ ו״גרפיקה״, בכיוון קריאה מימין לשמאל.
שניות 7 עד 10. הכותרת המדויקת היא ״שמרו לרילס הבא שלכם.״ בכרטיס הסיום כתוב ״בדקו את הפתיח״. השאר את הכותרת והפעולה מספיק זמן לקריאה.

השתמש ב־HTML עם lang="he" ו־dir="rtl". את האנימציה חבר לציר זמן GSAP מושהה ורשום ב־window.__timelines, עם משך קומפוזיציה מפורש של 10 שניות. תכנן תחילה את הפריים שבו כל כרטיס קריא ואז הוסף כניסות ומעברים קצרים. אין צורך בצילום, סאונד, קריינות או מדיה מרחוק.

שמור על הטקסטים בדיוק. לפני עריכה של פרויקט קיים, בדוק את מבנה התיקייה והימנע מדריסת נכסים אחרים. הרץ lint, validate ו־inspect. אם בדיקה נכשלת, דווח על השגיאה ותקן לפני ייצוא. בסוף החזר את נתיב הפרויקט, פקודת ה־preview ותוצאות הבדיקות. בקש רשות לפני התקנת תלות נוספת.

פרומפט לתכנון רילס בנושא שלכם

מדביקים בצ׳אט של Claude או ChatGPT. את טבלת הסצנות שמתקבלת מדביקים במקום שלוש הסצנות בבריף הראשי.

אני רוצה להכין רילס Motion Graphics אנכי באורך 10 עד 12 שניות.
העסק: [שם ותחום]
הצופה: [למי זה מיועד]
מה חשוב שיבינו: [רעיון אחד]
מה נרצה שיעשו בסוף: [פעולה אחת]
עובדות מאושרות: [מספרים, שמות, הצעה]

תכננו שלושה מסכים. לכל מסך תנו זמן התחלה וסיום, כותרת קצרה בעברית, שורת הסבר אופציונלית, המחשה ויזואלית אחת ותנועה אחת שמשרתת את המסר. בקשו המחשה שאפשר לבנות מ־CSS, SVG או אייקון מקומי. השאירו לפחות שתי שניות לקריאה אחרי הכניסה ברגעים החשובים. אל תמציאו נתונים או הבטחות. בדקו שהמסר מובן גם בלי שמע.

5שלב 5: פותחים את Studio, בודקים ומייצאים

1. חזרו לטרמינל בתיקייה שבה נמצא index.html. הריצו את בדיקות הפרויקט. lint בודק את המבנה, validate בודק שהקומפוזיציה נפתחת וניתנת לבדיקה, ו־inspect מחפש בעיות פריסה לאורך הסרטון. קראו גם אזהרות. אם יש שגיאה, התחילו מהראשונה.
2. הריצו preview. חלון Studio עשוי להיפתח אוטומטית. אם לא, העתיקו מהטרמינל את הכתובת המקומית שהפקודה הדפיסה. השאירו את התהליך פעיל בזמן הצפייה. ב־Studio בחרו את הפרויקט ונגנו מהתחלה. אפשר לעצור ולגרור את סמן הזמן.
3. עצרו סביב 1.8, 4.8 ו־8.8 שניות ובדקו את הפריימים היציבים. לאחר מכן צפו במעברים סביב שניות 3 ו־7. קראו את הטקסט, בדקו שההמחשות מובנות, ושימו לב אם כותרת נחתכת בזמן כניסה.
4. עצרו את השרת בטרמינל עם Ctrl+C או השאירו אותו פתוח והשתמשו בטרמינל שני באותה תיקייה. רנדרו את הסרטון, פתחו את reel-he-v1.mp4 בנגן רגיל והעבירו לטלפון לבדיקה בתצוגת רילס.

npx hyperframes@0.9.16 lint
npx hyperframes@0.9.16 validate
npx hyperframes@0.9.16 inspect
npx hyperframes@0.9.16 preview

npx hyperframes@0.9.16 render --output reel-he-v1.mp4 --fps 30 --quality standard

6שלב 6: מתקנים מסך אחד ובודקים את כל הסרטון

תארו לקלוד מה ראיתם, באיזו שנייה ומה צריך להישמר. ציינו אם השינוי הוא בטקסט, בפריסה או בתנועה. למשל, ״בשנייה 4.8 הכותרת טובה, אבל הגרפיקה עולה קרוב מדי לשורת ההסבר״. זו הנחיה שאפשר לבדוק מול פריים מסוים.

בתיקיית הפרויקט הפתוחה, תקן רק את הכותרת במסך השני. החלף אותה ל־״רעיון אחד. דוגמה אחת.״ שמור את פריסת הכרטיסים, צבעי המותג, סדר המסכים והזמנים. אל תדרוס את reel-he-v1.mp4.
בדוק את המסך סביב 4.8 שניות ואת המעברים ב־3 וב־7 שניות. ודא שהעברית והפיסוק מופיעים נכון, שאין חפיפה, וששאר הטקסט נשמר. הרץ lint ו־inspect, ואז ייצא reel-he-v2.mp4 ודווח מה שינית ובאיזה קובץ.

כשמשלבים עברית, אנגלית ומספרים

שמרו את הטקסט העברי בסדר כתיבה רגיל. את החלק הלועזי אפשר לבודד ב־bdi dir="ltr". לדוגמה, במשפט ״ייצאו MP4 ב־30 FPS״ אפשר להפריד ל־bdi את MP4 ואת 30 FPS. בקשו מקלוד לבדוק את המיקום של המקף והנקודה בפריים המיוצא. אם הגופן תומך רק בעברית, הגדירו גופן מקומי או גופן מערכת מתאים לחלק הלועזי.

7שלב 7: פותרים תקלות לפי הסימן שרואים

8שלב 8: בונוסים לרילס הבא

משלבים גרפיקה שתומכת במסר

בתחילת הדרך, מסילה, חץ וכרטיס טקסט מספיקים. אם מוסיפים איור, שמרו אותו כנכס מקומי בתיקיית assets. אפשר ליצור איור בלי אותיות ולהרכיב את העברית ב־HTML, כך שגם אחרי תיקון הכותרת העיצוב נשאר בשליטה.

Create a transparent-background editorial illustration for a Hebrew motion-graphics reel about simple video editing. Show a compact horizontal editing timeline with three clean blocks and one gold playhead, viewed straight on. Deep plum #211633, pale lilac #DCCCF5 and warm gold #F4CC75. Thick readable shapes, quiet details and no gradient across the entire frame. Keep the illustration centered with breathing room. No letters, no numerals, no logos, no captions and no app screenshots.

אם המחולל אינו מספק שקיפות אמיתית, ייצאו PNG שקוף מעורך תמונות או בקשו מקלוד לבנות את האיור כ־SVG מקומי. ב־Studio בדקו שהאיור מופיע בשנייה הרצויה ומשאיר מקום לכותרת.

שומרים מבנה קבוע לסדרת רילסים

שכפלו את הפרויקט לפני התאמה לעסק אחר. החליפו את הכותרות והאיורים, שמרו את החלטות העיצוב ב־DESIGN.md, ובקשו מקלוד להשאיר את יחס המסך ואת משך הקריאה. אם ההמחשה הבאה מורכבת יותר, האריכו את המסך שבו היא מופיעה ובדקו מחדש את משך הסרטון.

מוסיפים קריינות אחרי אישור הגרפיקה

אפשר להוסיף לפרויקט קובץ שמע מקומי ומאושר. הקשיבו לקריינות, סמנו את הזמנים של הרעיונות המרכזיים ורק אז יישרו את כניסת הכותרות. בדקו שהמסך האחרון נשאר מספיק זמן גם אחרי שהקריינות נגמרת. התחילו מהגרסה השקטה של המדריך כדי לבודד תקלות תזמון.