איך יוצרים וידאו בקוד עם Remotion

מה זה Remotion

נתחיל מהסוף ובמילים פשוטות, Remotion זה כלי שמאפר ליצור וידאו באמצעות הנחיות טקסט או הנחיות קוליות. עם Remotion אפשר ליצור סרטוני פרומושן, לערוך Reels, להוסיף כתוביות ואפילו להוסיף סאונד אפקטס וקריינות (בחיבור ל-Eleven Labs למשל). הנה דוגמה 👇

עכשיו ננסה להסביר קצת יותר בפירוט.

Remotion זה מחולל וידאו מבוסס React שהופך קוד לסרטוני וידאו. אל תעברו הלאה בגלל המילה קוד! תחשבו רגע, אם אפשר ליצור קוד מפרומפט ו-Remotion יוצר וידאו מקוד, זה אומר שאפשר ליצור וידאו מפרומפט.

תחשבו שאתם עובדים קלוד-קוד ומפתחים אפליקציה ב׳וייב-קודינג׳. סיימתם לפתח את האפליקציה ואתם רוצים לפרסם אותה, כדי שאנשים יוכלו להירשם ולהתחיל להתנסות בה, אתם רוצים ליצור Feature Video כדי לשווק את האפליקציה והיכולות שלה.

כאן בדיוק Remotion נכנס לתמונה. אתם פשוט מתקינים סיפרייה בתיקיית הפרויקט שלכם בקלוד-קוד, כותבים פרומפט ו-Remotion כבר יוצר לכם את הסרטון. למה זה כל כך חזק? בגלל שגם האפליקציה שפיתחתם מבוססת React, עכשיו אפשר לקחת את הקומפוננטות (רכיבים) שפיתחתם ולשלב אותם בוידאו כולל הנפשות מעברים כתוביות וסאונד.

אבל זה יותר מגניב, כי אפשר להשתמש ב-Remotion כדי ליצור מיקרו אנימציות עברו אינטראקציות (Micro Interactions) באפליקציה, למשל Loader מגניב, או הנפשות של כפתורים בממשק.

רגע של גיקים: מה זה בכלל React? 🤓

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

במקום לכתוב קוד לדף אינטרנט ארוך ומסורבל, עם React אנחנו בונים קומפוננטות (Components) חלקים קטנים, כמו קומפוננטה לכתפור, לתפריט, לכרטיס מוצר או כל רכיב אחר שאתם צריכים באפליקציה.

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

איך זה מתחבר לוידאו? ב-Remotion, אנחנו לוקחים את אותן קומפוננטות ופשוט “מלבישים” אותן על ציר זמן. במקום שהכפתור ישנה צבע כי מישהו הקליק עליו, הוא משנה צבע כי עברו 2 שניות מתחילת הסרטון. זה הופך את הוידאו לישות חיה ודינמית שאפשר לתכנת, לשנות ולייצר בכמויות בלחיצת כפתור.

איך מתקינים את Remotion?

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

כדי להתקין את הסיפריות שמפעילות את Remotion, פשוט מעתיקים את הפקודה הזו לטרמינל בתיקיית הפרויקט:

$ npx create-video@latest

או שפשוט תבקשו מקלוד קוד לקרוא את הדוקומנטציה באתר ולהתקין את הסיפרייה כדי ליצור וידאו. אתם אפילו יכולים למצוא ׳סקילים׳ ש-Remotion יצרו עבור קלוד-קוד.

npx skills add remotion-dev/skills

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

אז איך מתחילים ליצור סרטון עם Remotion?

אחרי שהתקנתם את הסיפריות הרלוונטיות ואת ה-Skill אתם פשוט יכולים ״להגיד״ לקלוד מה אתם רוצים ליצור. התוצאה תהיה טובה כל שהפרומפט שלכם יהיה טוב.

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

אחרי שכתבתם איזה סרטון אתם רוצים ליצור, למשל:

אני רוצה ליצור וידאו קצר בפורמט אנכי (9:16, ‏1080×1920, ‏30fps) באמצעות Remotion.

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

הווידאו ישלב צילום talking-head, מוזיקת רקע, כתוביות בעברית (RTL), ולעיתים גם שכבות גרפיות או פופאפים שמופיעים ברגעים מסוימים. הכתוביות צריכות להיות קריאות מאוד, ממוקמות נכון, ולהרגיש חלק מהעיצוב הכללי ולא תוספת חיצונית.

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

חשוב לי:

• לעבוד לפי best practices של Remotion
• תזמונים מסודרים על ציר הזמן
• שילוב אפקטים ומעברים בין סצנות
• ולתמוך באופן מלא ב-RTL לטקסט בעברית.

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

עכשיו Remotion משתמש בסקילים שלו כדי להיות עורך הוידאו הכי טוב שגייסתם וברגע ש-Remotion מסיים ליצור את הוידאו לפי ההנחיות שלכם, הוא יוצר Editor ב-localhost שמאפשר לכם לראות את התוצאה בתוך עורך וידאו עם כל האובייקטים מתוזמנים על ציר הזמן, כמו שאתם רואים כאן 👇

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

טיפ זהב 🏅תבקשו ליצור קובץ CLAUDE.md עם הפרטים הטכניים כמו יחס רוחב גובה (Aspect Ratio או a:r), פירוק של הוידאו לסצנות כולל תזמונים, טקסטים, צבעים, סגנון וחיבורים לשירותים חיצוניים כמו ElevenLas לדוגמא בשביל הקריינות. הקובץ הזה הוא ה״קונטקסט״ של הפרויקט והוא מאפשר לקלוד קוד לדעת את כל מה שהוא צריך על הסרטון כשאתם חוזרים ועורכים אותו, וזה נראה בערך ככה 👇

עכשיו, אחרי שסיימתם לערוך את הוידאו אתם יכולים ׳לרנדר׳ אותו, Remotion מייצא את הסרטון בקבוץ MP4 לתיקייה שנקראת Out בתוך הפרויקט. אתם יכולים לקחת את הקובץ ולפרסם אותו ברשתות החברתיות או בכל מקום אחר.

בשורה התחתונה

הייחוד של Remotion הוא לא רק בזה שהוא יוצר וידאו, אלא בזה שהוא הופך את הוידאו לחלק מה-Workflow שלכם כמפתחים. במקום לעבור בין תוכנות עריכה מסורבלות, אתם נשארים בתוך ה-IDE, משתמשים באותן קומפוננטות React שכתבתם לאתר שלכם (או יותר נכון שקלוד-קוד כתב), ונותנים ל-AI לעשות את העבודה השחורה של התזמונים והרינדור.

זה בדיוק ה”Mindset” שאני מדבר עליו, לא צריך צוות הפקה כדי להוציא סרטון פרומו איכותי או Micro-interaction מגניב לאפליקציה. צריך רק פרומפט מדויק.

מה עכשיו?

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

ותראו איך תוכן וקוד מתמזגים עם Remotion. לכו לבנות משהו מעניין!