איך נבנה הסרטון מהריל: אנימציית מילים בקוד עם Claude Code

1.מה נבנה בקוד, ומה לא

הסרטון מרונדר מעמוד HTML אחד. כל כרטיס, כל מילה, כל צבע וכל תנועה של המצלמה כתובים בו לפי הזמן, למשל באיזו שנייה מילה נכנסת ומתי הרקע מתחלף. דפדפן מצלם את העמוד שוב ושוב, והצילומים הופכים ל-60 פריימים לכל שנייה של סרטון.

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

כמה רכיבים לא נכתבו בקוד, ונכנסו כקבצים מוכנים: הקול, שהוא שיבוט של הקול שלי ב-ElevenLabs; המוזיקה, רצועה מ-Mixkit ברישיון שמתיר שימוש מסחרי; הלוגו של eDigi; והפונטים, Heebo ו-Rubik. מה שנכתב בקוד הוא ההפקה והאנימציה.

2.הכלים, ומה עולה כסף

לא צריך לדעת לתכנת. צריך מחשב (לא טלפון), ושיהיה לכם נוח לבקש תיקונים ולבדוק תצוגה מקדימה כמה פעמים. Claude Code יציע להתקין כלים שחסרים, למשל Playwright, הספרייה שמפעילה את Chrome. אשרו רק התקנות שאתם מבינים.

1. Claude Code: הסוכן שכותב את הקוד. עובד עם מנוי בתשלום של Claude או בתשלום לפי שימוש. זה הכלי היחיד ברשימה שחייבים לשלם עליו.
2. Chrome: מצלם את העמוד פריים אחרי פריים. בריל זה היה Chromium, הגרסה בקוד פתוח של Chrome שמגיעה עם Playwright. חינמי.
3. ffmpeg: מחבר את הפריימים לקובץ וידאו ומוסיף את הסאונד. חינמי, בקוד פתוח.
4. Whisper: מתמלל את הקול עם זמן לכל מילה. קוד פתוח, ואפשר להריץ אותו במחשב. אני הרצתי אותו דרך שירות ענן.
5. פונט Heebo: הפונט של המילים הגדולות. חינמי, ב-Google Fonts. התווית הקטנה בריל כתובה ב-Rubik, גם הוא חינמי.
6. קול: אפשר להקליט את עצמכם בטלפון, בחינם. אני השתמשתי בשיבוט של הקול שלי ב-ElevenLabs, שירות בתשלום שאפשר לוותר עליו.
7. מוזיקה, אופציונלית: רק רצועה שיש לכם רישיון להשתמש בה.

3.הפרומפט לפתיחה

פתחו תיקייה חדשה, שימו בה את קובץ הקול ואת הטקסט שלו, הפעילו בה Claude Code והדביקו את הבקשה. היא נותנת לסוכן את השיטה ואת הכללים. החליפו את שמות הקבצים בשמות שלכם.

4.חמשת השלבים

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

1. כותבים תסריט. משפטים קצרים, שכל אחד מהם מובן גם בלי המסך. בריל יש עשר שורות, כ-28 שניות.
2. מקליטים או מייצרים קול. אפשר להקליט את עצמכם. בריל זה שיבוט של הקול שלי. לפני ההקלטה המלאה בדקו איך נשמעות המילים הקשות, כמו שמות של מותגים ומילים באנגלית.
3. מוציאים זמן לכל מילה. מתמללים את הקול עם Whisper ומקבלים זמן לכל מילה. בדקו את הזמנים מול הקול, ותקנו אם צריך. הקובץ הזה מנהל את כל הסרטון: כשהקול משתנה, מעדכנים את הזמנים ומרנדרים מחדש.
4. נותנים ל-AI לבנות כרטיס לכל מילה מרכזית לפי הזמנים. מבקשים קודם תמונה של כל כרטיס ותצוגה מקדימה קטנה, ומתקנים לפני הרינדור המלא.
5. מרנדרים ובודקים. אפשר להתחיל ב-30 פריימים בשנייה. בריל הגרסה הסופית יצאה ב-60, וכל פריים צולם ארבע פעמים כדי ליצור טשטוש תנועה. אחרי הרינדור בודקים שהקול והתמונה מסונכרנים לאורך כל הסרטון, לא רק בהתחלה.

5.חמשת הכללים שמחזיקים את העין

את הכללים האלה כתבתי בפרומפט, ובדקתי אותם על כל כרטיס בריל.

1. כרטיס חדש בערך כל שנייה. המסך אף פעם לא עומד, והעין לא מספיקה להשתעמם.
2. מילה ענקית אחת בכל כרטיס. היא תופסת את רוב רוחב המסך, וכל השאר קטן ממנה בהרבה.
3. המילה נוחתת רגע לפני שהיא נאמרת. בריל כל מילה מרכזית נכנסת עד 0.12 שנייה לפני הקול. מילה שמגיעה אחרי הקול מרגישה מאחרת.
4. צבע אחד להפתעה. בריל זה אדום. הזהב שמור ל-eDigi ולמילת המפתח. שאר הרקעים בשחור ובלבן, חוץ מכרטיס אחד ברקע אפור-סגול.
5. מילה שעושה את מה שהיא אומרת. ״עריכה״ נמחקת באיקס אדום, על ״המצלמה״ כל המסך מסתובב ורועד, ומתחת ל״נבנה״ נערמות לבני בנייה.

6.מה לא קל

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

עברית מימין לשמאל דורשת בדיקה בעין. כשעברית נמצאת באותה שורה עם אנגלית, מקף או סימן שאלה, הסדר על המסך יכול להתהפך, למשל ב״מ-AI״ או ב״נבנה?״. בדקו כל שורה כזאת בתמונה, לא בקוד.

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

הרינדור כבד. במחשב עם מעט זיכרון פנוי הוא עלול לקרוס באמצע, או לאבד פריימים בלי שום הודעה. אצלי הרינדור המלא הראשון יצא קצר ב-23 פריימים, והקול והתמונה יצאו מסנכרון מהשנייה ה-14 בערך. מאז אני מרנדר בחלקים וסופר את הפריימים בכל חלק.

7.באותה שיטה: בוטים ואתרים לעסקים

באותה שיטה eDigi בונה לעסקים בוטים לוואטסאפ ואתרים: מתארים מה צריך, ה-AI כותב את הקוד, ואני בודק כל שלב לפני שהוא עולה. רוצים בוט או אתר לעסק שלכם? התחילו בשאלון האפיון.

• שאלון האפיון של eDigi (נפתח בחלון חדש)

שאלות נפוצות