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 מומלצים