וידאו כקוד: תבנית ב-Remotion שנבנית מחדש מנתונים

התבנית: שלוש סצנות וקובץ נתונים

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

video-template/
├── src/
│   ├── index.ts          # entry point
│   ├── Root.tsx          # registers "Report" + the data schema
│   ├── Video.tsx         # plays the 3 scenes in a <Series>
│   ├── limits.ts         # all the rules in one place
│   └── scenes/
│       ├── TitleScene.tsx
│       ├── ChartScene.tsx
│       └── EndScene.tsx
├── data/
│   ├── example.json      # default props
│   ├── stress.json       # the worst case
│   └── week-42.json      # a new version = a new file
└── public/
    └── music.mp3

{
  "title": "Online store: week 42",
  "subtitle": "Sales, Oct 13-19",
  "chart": [
    { "label": "Mon", "value": 120 },
    { "label": "Tue", "value": 95 },
    { "label": "Wed", "value": 140 },
    { "label": "Thu", "value": 160 }
  ],
  "highlight": "+18% vs last week",
  "cta": "Full report in the channel"
}

export const LIMITS = {
  titleMaxChars: 48,
  titleMaxLines: 2,
  titleFontMax: 120,   // px
  titleFontMin: 64,    // px, never smaller
  chartMaxBars: 7,
  scenes: { title: 3, chart: 5, end: 3 }, // seconds
  musicVolume: 0.35,
};

פרומפטים ל-Claude Code

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

npx skills add remotion-dev/skills

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

כווננו את התבנית, אחרת הכותרת תגלוש מהמסך

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

גרסה חדשה מנתונים חדשים

כשהתבנית מכווננת, סרטון חדש הוא קובץ נתונים חדש ופקודה אחת.

1. 01

   העתיקו את קובץ הנתונים

   שכפלו את data/example.json, תנו לו שם חדש (למשל week-42.json) ושנו את הערכים.

2. 02

   בדקו בתצוגה המקדימה

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

   terminal

   npx remotion studio

3. 03

   רנדרו

   העבירו את קובץ הנתונים לפקודת הרינדור. ב-Windows השתמשו בקובץ ולא ב-JSON בתוך הפקודה: המעטפת מוחקת את המירכאות.

   terminal

   npx remotion render src/index.ts Report out/week-42.mp4 --props=data/week-42.json

4. 04

   הרבה בבת אחת

   תיקייה של קובצי נתונים הופכת לתיקייה של סרטונים בלולאה קצרה. או בקשו מ-Claude Code: "הוסף סקריפט npm שמרנדר כל קובץ מ-data/ ל-out/".

   bash

   for f in data/*.json; do
     npx remotion render src/index.ts Report "out/$(basename "$f" .json).mp4" --props="$f"
   done

מתי תבנית וידאו שווה את המאמץ

לבנות ולכוונן את התבנית לוקח ערב. היא משתלמת איפה שהפורמט חוזר ורק התוכן משתנה.