זה התהליך שמאחורי הסרטונים שאתם רואים אצלי: הגרפיקה נכתבת כקוד, נוחתת על המילה המדויקת, ונראית אותו דבר בכל סרטון. אני אומר מראש: זו הרכבה של כמה כלים, לא כפתור אחד. מי שמחפש לחיצה אחת ימצא את זה מייגע, ומי שרוצה סדרה שנראית אותו דבר ימצא כאן בדיוק למה.
אין מה להתקין מראש. הפקודה למטה מורידה את הגרסה הנעולה בפעם הראשונה ומריצה אותה.
כל מערכת
Terminal
npx --yes hyperframes@0.8.63 --help
ב-macOS הפקודות למעלה מניחות ש-Homebrew מותקן. בווינדוס winget מגיע עם המערכת בגרסאות עדכניות. אם פקודה לא מוכרת, אפשר להדביק את ההודעה שקיבלתם לקלוד ולבקש ממנו לפתור, וזה בדרך כלל עובד.
התהליך
ששת השלבים
כל שלב פותר בעיה אחת שבלעדיה הסרטון לא נראה מקצועי. הסדר חשוב.
1
מנוע שהופך קוד לווידאו
HyperFrames הוא כלי חינמי בקוד פתוח שלוקח עמוד HTML עם אנימציה, מצלם אותו פריים אחרי פריים ומרכיב ממנו MP4. זה אומר שהגרפיקה שלכם היא טקסט: אפשר לשנות בה שורה, להריץ מחדש, ולקבל בדיוק אותו דבר.
למה זה משנה: בעורך רגיל, שינוי בסגנון פירושו לפתוח כל סרטון ולתקן ביד. כשזה קוד, משנים חוק אחד ומריצים הכל מחדש.
הפקודות. הגרסה נעולה בכוונה, ושני משתני הסביבה מכבים דיווח שימוש:
אל תריצוhyperframes init, skills, add, catalog, ואל תשתמשו ב-@latest. כל אחד מאלה מוריד תוכן נוסף מהרשת בזמן ההתקנה, ואת מה שיורד אף אחד לא בדק בשבילכם. הפקודה הנעולה למעלה מספיקה לכל מה שכתוב בעמוד הזה.
המלכודת של העברית: לעולם לא לשים dir="rtl" על תגית <html>. זה נראה מושלם בדפדפן, ומייצר וידאו שחור לגמרי, בלי שום הודעת שגיאה. שמים dir="rtl" רק על המכלים שמכילים עברית, ועל ה-html רק lang="he". הפקודה check תופסת את זה, ולכן מריצים אותה לפני כל רינדור.
רוצים רק לטעום את השלב הזה בלי כל השאר? הפרומפט החינמי לאנימציות עושה בדיוק אותו דבר על סצנה אחת, וזו הדרך המהירה ביותר לנסות היום.
2
קובץ אחד שמחזיק את הסגנון
לוקחים שניים או שלושה סרטונים שכבר יצאו טוב, ומבקשים מקלוד לכתוב מהם את החוקים: אילו צבעים, איזה גופן, כמה מהר דברים נכנסים, ומה אף פעם לא עושים. התוצאה היא קובץ קצר שקלוד קורא לפני כל אנימציה.
למה זה משנה: בלי הקובץ הזה כל סרטון הוא פרשנות חדשה של מה שביקשתם, והסדרה נראית כמו שישה אנשים שונים. עם הקובץ, ההחלטות נלקחות פעם אחת.
זו תבנית כללית להתחיל ממנה. היא לא הקובץ שלי, וזה בכוונה: החוקים צריכים לצאת מהסרטונים שלכם, לא משלי.
MOTION.md
# MOTION.md
הקובץ הזה הוא חוקי המותג לווידאו. קלוד קורא אותו לפני שהוא כותב אנימציה,
ולכן כל מה שכתוב כאן חוזר על עצמו בכל סרטון בלי שאסביר אותו שוב.
## צבעים
רקע: #0B0E14
טקסט ראשי: #FFFFFF
טקסט משני: rgba(255,255,255,.76)
אקסנט: #0A6ED1
אקסנט אחד בלבד. אין צבע שני.
## טיפוגרפיה
כותרות: Heebo 800, ריווח אותיות -0.03em, גובה שורה 1.02
גוף: Heebo 400, גובה שורה 1.35
כותרת לא יורדת מתחת ל-60px. גוף לא יורד מתחת ל-24px.
בעברית: dir="rtl" על המכל, ואף פעם לא על תגית html.
## תנועה
עקומה ראשית: power3.out. לכניסות גדולות: expo.out.
כניסה: 0.55 עד 0.75 שניות. שינוי מצב: 0.4. מעבר סצנה: 0.6.
כל כניסה מתחילה אחרי 0.15 שניות לפחות, אף פעם לא ב-0.
מדרגה בין אלמנטים באותה קבוצה: 120 מילישניות.
בעברית נכנסים מימין: x חיובי.
## מה אף פעם לא
בלי זום איטי אינסופי על טקסט סטטי.
בלי יותר משתי עקומות שונות באותה סצנה.
בלי אנימציה על width, height, top או left. רק transform ו-opacity.
בלי טקסט שנכנס ויוצא באותה שנייה. אם אין זמן לקרוא, הוא לא נכנס.
בלי אמוג'י בגרפיקה.
## אזור בטוח
שוליים של 8 אחוז מכל צד.
בפורמט אנכי: שום טקסט ב-14 האחוזים העליונים ובתחתונים, שם הממשק מכסה.
תמלול רגיל נותן משפטים. כאן צריך זמן לכל מילה בנפרד, כדי שהגרפיקה תעלה בדיוק כשאמרתם את המילה ולא שנייה אחריה. Whisper יודע לעשות את זה, והוא רץ מקומית אצלכם במחשב.
למה זה משנה: ההבדל בין גרפיקה שנוחתת על המילה לבין כזו שמאחרת בחצי שנייה הוא ההבדל שהצופה מרגיש ולא יודע לנסח. זה השלב שהכי משפר את התוצאה ביחס למאמץ.
קודם מחלצים אודיו מהווידאו, ואז מתמללים:
Terminal
# 1. אודיו מתוך הווידאו
ffmpeg -i video.mp4 -vn -ac 1 -ar 16000 audio.wav
# 2. תמלול עם זמן לכל מילה
whisper audio.wav --language Hebrew --model medium \\
--word_timestamps True --output_format json
--word_timestamps True הוא הדגל שנותן זמן לכל מילה, ו---output_format json מחזיר קובץ שאפשר לקרוא בקוד. חשוב: --model medium ולא מודל שנגמר ב-.en, כי המודלים האנגליים מתרגמים עברית לאנגלית במקום לתמלל אותה.
4
סוכן לכל מקטע, במקביל
סרטון של דקה מתחלק לכמה מקטעי גרפיקה. במקום לבנות אותם אחד אחרי השני באותה שיחה, כל מקטע עובר לסוכן משנה נפרד עם בריף משלו. הם עובדים במקביל, וכל אחד מחזיר קובץ אחד.
למה זה משנה: שיחה אחת שבונה שבעה מקטעים מתמלאת, ואיכות התשובות יורדת בלי הודעה. שבע שיחות קצרות נשארות חדות, וכל אחת רואה רק את מה שנוגע לה.
בריף לדוגמה, כללי. המספרים והמילים כאן מומצאים כדי להראות את המבנה:
בריף לסגמנט
# בריף לסגמנט גרפיקה
## הסגמנט
מספר: 3 מתוך 7
זמן: מ-00:12.40 עד 00:18.90
## העוגן בטקסט
המילה הראשונה: "בלילה" ב-00:12.40
המילה האחרונה: "לבד" ב-00:18.90
הגרפיקה עולה על המילה הראשונה ויורדת אחרי האחרונה. לא לפני, לא אחרי.
## מה מופיע
כותרת אחת: "3 סוכנים רצו במקביל"
מתחתיה שלוש שורות שנכנסות אחת אחרי השנייה, אחת לכל סוכן.
הכותרת נשארת על המסך עד סוף הסגמנט.
## חוקים
לקרוא את MOTION.md ולציית לו. אין צבע, גופן או עקומה שלא כתובים שם.
אין המצאות: כל מספר ושם שמופיעים על המסך חייבים להיות בתמליל.
אם חסר לך מידע, לעצור ולשאול. לא לנחש.
## התוצר
קובץ אחד: segments/seg-03.html
בסוף, לדווח: מה נכנס, באיזו שנייה, ומה לא הצלחת לעשות.
סוכן שמסיים אומר שהמשימה הושלמה. זה אומר שהקוד רץ, לא שזה נראה טוב. מחלצים תמונות מהרינדור בזמנים שבהם משהו קורה, ומסתכלים עליהן אחת אחת.
למה זה משנה: כל הפערים שראיתי בין סרטון בינוני לסרטון טוב התגלו בעין, אף אחד מהם לא נתפס על ידי בדיקה אוטומטית.
Terminal
# תמונה בשנייה 4.2 מתוך הרינדור
ffmpeg -ss 4.2 -i renders/video.mp4 -frames:v 1 check-04.png
וטריק ששינה לי את סדר העבודה: לבקש מקלוד לדרג את המקטעים לפי מה שנראה הכי זול, מהגרוע לטוב, ולתקן בסדר הזה. הוא מפתיע בדיוק שלו, וזה חוסך את הוויכוח עם עצמכם על מה לתקן קודם.
6
להתאים את זה לפיד
שלושה דברים שמפרידים בין סרטון שנראה טוב במחשב לבין סרטון שנראה טוב באינסטגרם:
כתוביות מעל הכל. אם גרפיקה מכסה מילה בכתובית, הצופה מפסיד את המשפט. הכתוביות תמיד בשכבה העליונה.
אזור בטוח. בפורמט אנכי, הממשק של אינסטגרם מכסה רצועה למעלה ורצועה למטה. שום טקסט שחייבים לקרוא לא יושב שם.
עוצמה אחידה. צופה שמעביר בין הסרטונים שלכם לא אמור להתאים את הווליום. מכוונים את כולם לאותו יעד:
המספר -14 הוא יעד עבודה מקובל לרשתות, לא מפרט רשמי שאינסטגרם פרסמה. מה שבאמת חשוב הוא שכל הסרטונים שלכם יישמעו באותה עוצמה, וכל יעד עקבי עדיף על אף יעד.
אמיל קובלסקי, מעצב שעובד על תנועה בממשקים, פרסם אוסף סקילים חינמיים ברישיון MIT (המאגר שלו ב-GitHub), ובהם חוקי תנועה בסגנון אפל ומבקר שעובר על אנימציות ואומר מה לא בסדר בהן. זה עוזר בעיקר לתחושת האיכות של התנועה עצמה.
גילוי נאות: זה פרויקט של צד שלישי, לא שלי, ולא בדקתי את הקוד שבתוכו. ההתקנה מריצה כלי שמוריד קבצים מ-GitHub למחשב שלכם, אז שווה להסתכל מה ירד לפני שסומכים עליו. פקודת ההתקנה שמופיעה בעמוד הפרויקט שלו:
Terminal
npx skills@latest add emilkowalski/skills
ויש גם 21st.dev, ספריית רכיבים ואנימציות. שימושית בעיקר לאתרים, פחות לסרטונים.
שאלות
שאלות שחוזרות על עצמן
צריך לדעת לתכנת בשביל זה?+
לא, אבל צריך להיות מוכנים לפתוח טרמינל ולהדביק בו פקודות. את הקוד קלוד כותב, ואתם מסתכלים על התוצאה ואומרים מה לשנות. מי שנרתע מהמילה טרמינל ימצא את השלב הראשון לא נעים, ואחריו זה נהיה שיחה רגילה.
כמה זה עולה?+
כל הכלים בעמוד הזה חינמיים וקוד פתוח: HyperFrames, ffmpeg, Whisper ו-Node.js. מה שעולה כסף הוא מנוי Claude בתשלום, שנרכש ישירות מ-Anthropic ולא דרכי, ובלעדיו אין Claude Code. אין כאן שום כלי בתשלום נוסף.
זה עובד בעברית?+
כן, וזה מה שהכי שבור בברירת המחדל. צריך גופן עברי מקומי בפרויקט, מכלים עם dir=rtl, כניסות שנכנסות מימין במקום משמאל, ותמלול עם המודל הרב לשוני ולא עם מודל אנגלי. כל אלה כתובים בעמוד הזה, וכל אחד מהם הוא משהו ששבר לי סרטון פעם אחת.
כמה זמן לוקח לעשות את הסרטון הראשון?+
תלוי, ואין לי מספר כן לתת. ההתקנה היא עניין של פעם אחת, והסרטון הראשון ייקח יותר זמן מאשר לערוך אותו ידנית, כי בונים תוך כדי גם את קובץ המותג ואת הדרך. החיסכון מתחיל בסרטון השלישי או הרביעי, כשהחוקים כבר כתובים.
למה לא פשוט Canva או CapCut?+
כי הם מצוינים לסרטון אחד וגרועים לסדרה. כשהגרפיקה היא קוד, אפשר לשנות חוק אחד ולהריץ מחדש את כל הסרטונים, להעביר את אותו סגנון לסרטון הבא בלי לזכור מה עשיתם, ולהריץ כמה מקטעים במקביל. אם אתם עושים סרטון בחודש, תישארו ב-CapCut.
לא הסתרתי כלום בעמוד הזה, וזה גם לא העניין. כל שלב כאן עובד לבד, והקושי הוא בתפר. איזה חוק נכנס לקובץ המותג ואיזה לא, איך מנסחים בריף שסוכן לא סוטה ממנו, ומה עושים כשמקטע אחד יוצא יפה וחמישה יוצאים בינוניים.
את הדברים האלה לומדים מהר יותר כשמישהו עובר איתכם על הסרטון הראשון שלכם, ובונה איתכם את קובץ החוקים מהחומר שלכם ולא מתבנית, כי שם נמצא כל ההבדל בין סדרה שנראית אותו דבר לבין שישה נסיונות.
וזה גם לא נגמר בווידאו: אותו אופן עבודה, קובץ חוקים וסוכנים שמקבלים משימה מוגדרת, הוא מה שמריץ אצלי גם את הלקוחות, ההצעות והתוכן. לא לומדים לבנות סקיל, אלא לחיות עם כלי שמריץ את העבודה.