$ man how-to/build-remotion-video-system

Remotion הוא פריימוורק React שמרנדר וידאו פריים אחרי פריים. אתה כותב קומפוננטות JSX. Remotion מעריך כל פריים ב-FPS היעד ומקודד את התוצאה ל-MP4, WebM, או GIF. לא צריך GPU. לא צריך עורך ציר זמן. לא צריך After Effects. כל הצינור רץ ב-Node.js על לפטופ רגיל. היתרון המרכזי בהגדרת monorepo הוא שקומפוננטות הווידאו יכולות לייבא את אותם חבילות משותפות כמו האתרים שלך. Design tokens, אובייקטי נתונים, פלטות צבעים, והגדרות טיפוסים משותפים לכל ה-codebase. שנה ערך hex בחבילה המשותפת והאתרים והווידאו מתעדכנים ב-build הבא.

PATTERN

הגדר פריסטים של יחס גובה-רוחב כאובייקט קבוע: linkedin (1080x1350, 4:5), reels (1080x1920, 9:16), landscape (1920x1080, 16:9). צור hook בשם useScale() שמנרמל את כל הרינדור לרזולוציית בסיס (1080x1350) ומשנה קנה מידה באופן יחסי. כל מותג מקבל שלוש קומפוזיציות ב-Root.tsx - אחת לכל יחס גובה-רוחב - שחולקות את אותו עץ קומפוננטות. תשע קומפוזיציות מ-codebase אחד: שלושה מותגים כפול שלושה פורמטים. רישום הקומפוזיציות הוא מקור האמת היחיד למה שמרונדר. הוספת מותג חדש זה שלוש שורות ב-Root.tsx, לא בנייה מחדש של קומפוננטות.

CODE

כל וידאו הוא רצף של סצנות מחוברות באמצעות TransitionSeries מ-@remotion/transitions. כל סצנה היא קומפוננטת React עם מספר פריימים קבוע שמוגדר בקובץ תזמון מרכזי. קובץ תזמון V3 מגדיר ארבע סצנות בסך הכל 310 פריימים ב-30fps (בערך 10 שניות): Hook (36 פריימים), BootWikiBlitz (110 פריימים), Progression (100 פריימים), CtaNetwork (94 פריימים), עם חפיפה של 10 פריימים בין סצנות למעברים חלקים. קובץ התזמון הוא נקודת הבקרה היחידה לקצב הווידאו. שינוי של מספר אחד משנה את כל הקצב בלי לגעת בקוד של אף קומפוננטה.

PATTERN

Remotion דורש רינדור דטרמיניסטי. Math.random() מייצר ערכים שונים בכל פריים ושובר את הרינדור. הפתרון הוא Perlin noise מ-@remotion/noise. פונקציית noise2D מקבלת מחרוזת seed, קואורדינטות x ו-y ומחזירה מספר עשרוני דטרמיניסטי. תן seed לפי instance של קומפוננטה (אינדקס עמודה, אינדקס חלקיק) והנע אותו עם מספר הפריים. MatrixRain משתמש ב-noise לבחירת תווים, סחיפת עמודות, ושימור שקיפות. ParticleField משתמש בשני זרמי noise בלתי תלויים ל-x ו-y בתוספת שלישי לפעימה. TypewriterText משתמש במתמטיקה פשוטה של פריימים לחשיפת תווים. אותו seed, אותה תוצאה, בכל רינדור. אנימציה אורגנית שניתנת לשחזור מלא.

PATTERN

קומפוננטת SceneWrapper מחילה טיפול ויזואלי אחיד על כל סצנה: רקע קנבס כהה, וינייט רדיאלי להכהיית שוליים, שטיפת צבע דגש בשקיפות נמוכה, שדה חלקיקים אמביינט, גרגירי פילם באמצעות SVG feTurbulence, ושכבת קווי סריקה לאסתטיקת CRT. ה-wrapper מקבל prop של צבע דגש שצובע את כל הסצנה. סצנת BootWikiBlitz מחליפה בין פלטת הצבעים של המותג כשכרטיסי ויקי מתהפכים - ירוק, טיל, ענבר, סגול - נותנת לכל כרטיס תחושה ייחודית תוך שמירה על עקביות ויזואלית. Design tokens נמצאים בקובץ tokens.ts שממפה שמות מותגים לצבעים ומגדיר את מערך הגופנים המשותף.

PRO TIP

הרץ npm run render:all כדי לייצר את כל תשע הגרסאות. Remotion מרנדר כל קומפוזיציה לפריימים ואז מקודד ל-MP4. הפלט הולך ל-website/apps/video/out/ ונפרס לתיקיית public/video/ של כל אתר. אינדקס התוכן של SQLite עוקב אחרי כל קובצי הווידאו עם המותג, יחס גובה-רוחב, פורמט וסטטוס פריסה. כל הצינור רץ מקומית על MacBook. בלי render farm בענן. בלי שירות חיצוני. ה-CI של ה-monorepo יכול להפעיל רינדורים ב-push אם צריך, אבל לצורך מהירות איטרציה, רינדור מקומי ב-30fps לווידאו של 10 שניות לוקח שניות, לא דקות.