Remotion: יצירת וידאו עם קוד React, המדריך המלא בעברית (2026)

Remotion הוא פריימוורק קוד פתוח ליצירת וידאו עם קוד React, במקום לגרור קליפים בטיימליין, מתכנתים את הסרטון ומרנדרים אותו ל-MP4. הוא הפריימוורק שמאחורי Spotify Wrapped, ומ-2026 גם Claude Code יודע לכתוב בו וידאו עבורכם. במדריך: מה זה, איך זה עובד, התקנה, רינדור, תמחור והשוואה ל-HyperFrames.

בקצרה (TL;DR)

• מה זה: פריימוורק שבו מגדירים סרטון כרכיבי React, מקדימים תצוגה ב-Remotion Studio, ומרנדרים לקובץ MP4.
• למי זה מיועד: מפתחי React, צוותי מוצר ושיווק טכני, וזרימות עבודה עם סוכני AI (Claude Code, Cursor).
• כמה זה עולה: חינם ליחידים ולחברות עד 3 עובדים. חברות עם 4+ עובדים צריכות רישיון חברה (כ-25 דולר לחודש למושב).
• איך מתחילים: npx create-video@latest, פותחים את ה-Studio בדפדפן, ומרנדרים עם npx remotion render.

מה זה Remotion?

Remotion הוא פריימוורק קוד פתוח שמאפשר ליצור וידאו וגרפיקה מונפשת באמצעות React. נכון ל-2026 הוא בגרסה 4 וצבר מעל 51,000 כוכבים בגיטהאב (GitHub). הוא נוצר על ידי Jonny Burger מציריך, שווייץ.

הרעיון נקרא "וידאו כקוד" (Video as Code): כל פריים בסרטון הוא תצוגה (render) של רכיב React בנקודת זמן מסוימת. אתם שולטים בכל פיקסל עם אותם כלים שבהם בונים אתר, JSX, CSS, נתונים ו-API.

למה React לווידאו? כי הוא מאפשר וידאו מבוסס-נתונים: אותו "תבנית" רכיב יכולה לייצר אלפי סרטונים מותאמים אישית, כל אחד עם שם, מספרים או שפה אחרים. בדיוק כך נבנים Spotify Wrapped ו-GitHub Unwrapped.

איך Remotion עובד?

Remotion מנגן את רכיב ה-React שלכם על ציר זמן של פריימים, ומצלם כל פריים בנפרד. שלושה מושגי ליבה מניעים את כל המערכת:

1. Composition: ההגדרה של הסרטון: איזה רכיב, כמה פריימים, באיזה fps ובאיזו רזולוציה.
2. useCurrentFrame(): hook שמחזיר את מספר הפריים הנוכחי. כל האנימציה נגזרת ממנו.
3. interpolate() ו-spring(): פונקציות שממירות את מספר הפריים לערך אנימציה (שקיפות, מיקום, גודל).

איך מגדירים סרטון (Composition)?

מגדירים את הסרטון פעם אחת ב-Root, כולל משך, קצב פריימים ומידות:

// Root.tsx
import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (
  <Composition
    id="MyVideo"
    component={MyVideo}
    durationInFrames={150}  // 5 שניות ב-30fps
    fps={30}
    width={1920}
    height={1080}
  />
);

איך יוצרים אנימציה לפי פריים?

האנימציה היא פונקציה טהורה של הפריים הנוכחי, ולכן הרינדור דטרמיניסטי: אותו פריים תמיד נראה אותו דבר. הנה כותרת שמופיעה בהדרגה (fade-in) ב-30 הפריימים הראשונים:

import { useCurrentFrame, interpolate, AbsoluteFill } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0b0d12", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ opacity, color: "white", fontSize: 90 }}>שלום מ-Remotion</h1>
    </AbsoluteFill>
  );
};

רינדור דטרמיניסטי: מכיוון שכל פריים מחושב ממספר הפריים בלבד (ולא מ"שעון אמת"), אין פספוסי פריימים, והרינדור מתאים לאינטגרציה רציפה (CI) ולווידאו מבוסס-נתונים בקנה מידה.

איך מתקינים ומתחילים?

דרישות מקדימות: Node.js מותקן (ו-FFmpeg מגיע מובנה עם Remotion). שלוש פקודות מספיקות מאפס ועד MP4:

npx create-video@latest      # יוצר פרויקט Remotion חדש מתבנית
npm run dev                  # פותח את Remotion Studio — תצוגה מקדימה חיה בדפדפן
npx remotion render MyVideo out.mp4   # מרנדר את הקומפוזיציה לקובץ MP4

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

מהם מושגי הליבה החשובים?

טבלה מהירה של ה-API שתפגשו הכי הרבה:

מושג	מה הוא עושה
<Composition>	מגדיר סרטון: רכיב, משך, fps ומידות
useCurrentFrame()	מחזיר את מספר הפריים הנוכחי, בסיס כל אנימציה
interpolate()	ממיר טווח פריימים לטווח ערכים (לינארי)
spring()	אנימציית קפיץ טבעית מבוססת פיזיקה
<Sequence>	מתזמן רכיב שיופיע מפריים מסוים ולמשך מסוים
<AbsoluteFill>	שכבה במסך מלא, לבנייה בשכבות (layers)
<Audio> / <Video> / <Img>	הטמעת מדיה מסונכרנת לציר הזמן
staticFile()	טוען נכס מתיקיית public בצורה בטוחה לרינדור

איך Remotion ו-Claude Code עובדים יחד?

מינואר 2026 אפשר לתת לסוכן AI לכתוב את הסרטון עבורכם. Remotion השיקה Agent Skills רשמיות ל-Claude Code (GitHub), כך שאפשר לתאר וידאו בשפה טבעית, והסוכן כותב את רכיבי ה-React, מחבר את האנימציות, ומריץ את הרינדור.

דוגמת prompt: "באמצעות הסקיל של Remotion, צור אינטרו מוצר באורך 6 שניות: רקע כהה, הלוגו נכנס בקפיץ (spring), והכותרת מופיעה בהדרגה אחרי שנייה."

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

האם Remotion חינמי? כמה זה עולה?

Remotion חינם ליחידים, לחברות עם עד 3 עובדים, ולארגונים ללא מטרות רווח. חברות עם 4 עובדים ומעלה חייבות רישיון חברה בתשלום. כך לפי תנאי הרישיון הרשמיים.

נכון ל-2026, התמחור לחברות הוא כ-25 דולר לחודש למושב (seat), ללא מינימום, מודל שהמייסד Jonny Burger הציג כדי לפתוח את Remotion לכל מי שרוצה (Remotion Pro).

• חינם: יחיד, חברה עד 3 אנשים, מלכ"ר, או הערכה לפני שימוש מסחרי.
• רישיון חברה נדרש: חברה למטרות רווח עם 4+ אנשים (כולל פרילנסרים וקבלני משנה בחישוב).
• מותר: ליצור סרטונים ותמונות (גם מסחרית) ולשנות את הקוד לצרכים שלכם.
• אסור: למכור, להשכיר או להפיץ גרסה נגזרת משלכם של Remotion.

Remotion מול HyperFrames מול עורך וידאו רגיל

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

היבט	Remotion	HyperFrames	עורך וידאו (Premiere/CapCut)
מודל יצירה	רכיבי React	HTML עם תכונות data	גרירת קליפים בטיימליין
שלב build	נדרש	אין	-
התאמה לסוכני AI	גבוהה (דרך Agent Skills)	גבוהה מאוד (LLM "מדבר" HTML)	נמוכה
וידאו מבוסס-נתונים	מצוין (props ב-React)	טוב	ידני בלבד
מנוע רינדור	Chrome ללא ממשק + FFmpeg	Chrome ללא ממשק + FFmpeg	מקומי / GPU
בשלות ואקוסיסטם	בוגר (51K+ כוכבים, Lambda, Player)	חדש ופשוט	בוגר מאוד

למי שכבר עובד ב-React ורוצה שליטה מלאה ואקוסיסטם עשיר, Remotion. למי שרוצה את הדרך הפשוטה ביותר לסוכן AI, HyperFrames. למי שמעדיף ממשק ויזואלי, עורך קלאסי.

למי Remotion מתאים, ולאילו שימושים?

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

• וידאו מבוסס-נתונים בקנה מידה: סיכומים שנתיים מותאמים אישית (כמו Spotify Wrapped), כרטיסי הישגים, דוחות מונפשים. רוצים לבנות כזה? יש לנו מדריך נפרד: איך לבנות Spotify Wrapped משלכם עם Remotion.
• אוטומציה שיווקית: ייצור מאות גרסאות של אותו סרטון, שפות, מוצרים או קהלים שונים, מאותה תבנית.
• הטמעה דינמית באתר: נגן Remotion חי בצד הלקוח דרך @remotion/player, שמשתנה לפי קלט המשתמש.
• פחות מתאים ל: עריכה ויזואלית חד-פעמית, או למי שלא נוח לו עם React ו-shורת פקודה (ואז עדיף לתת ל-AI לכתוב, או לבחור עורך רגיל).

איך מרנדרים בקנה מידה ומטמיעים באתר?

לשני צרכים מתקדמים יש שתי חבילות ייעודיות:

• Remotion Lambda: רינדור מבוזר ומקבילי על AWS Lambda. במקום לרנדר סרטון ארוך על מחשב אחד, הוא מתפצל לפונקציות רבות שרצות במקביל, מהיר וזול לקנה מידה.
• @remotion/player: רכיב <Player> שמנגן את הקומפוזיציה בתוך אפליקציית React אצל המשתמש, אינטראקטיבית ובזמן אמת, בלי רינדור מראש ל-MP4. הרחבנו על זה במדריך נפרד: Remotion Player, וידאו אינטראקטיבי באתר React.

שורה תחתונה

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

רוצים ללמוד לרתום את הכלים האלה לעסק שלכם? זה בדיוק מה שאנחנו מלמדים.

להמשך: מה זה Claude Code · קורס Claude Code בחינם · HyperFrames, וידאו כקוד · כלי AI ליצירת וידאו · אוטומציות AI לעסקים · כלי AI מומלצים