איך לבנות Spotify Wrapped משלך עם Remotion, וידאו מבוסס-נתונים (2026)

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

בקצרה (TL;DR)

• הרעיון: מפרידים בין העיצוב (תבנית קבועה) לבין הנתונים (משתנים), אותו רכיב מייצר אינסוף גרסאות.
• איך מזינים נתונים: דרך props של רכיב React, defaultProps לתצוגה, inputProps אמיתיים ברינדור.
• איך מרנדרים בכמות: ה-API renderMedia בלולאה, או Remotion Lambda לרינדור מקבילי בקנה מידה.
• קיצור דרך: Claude Code יכול לכתוב את התבנית ואת סקריפט הרינדור עבורכם.

מה זה וידאו מבוסס-נתונים?

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

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

Spotify Wrapped ו-GitHub Unwrapped הם וידאו מבוסס-נתונים בקנה מידה ענק, עשרות מיליוני סרטונים ייחודיים בשנה, כל אחד מתבנית אחת. שניהם נבנו עם Remotion.

איך מעבירים נתונים לסרטון? (props)

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

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

export const RemotionRoot = () => (
  <Composition
    id="Wrapped"
    component={Wrapped}
    durationInFrames={300}
    fps={30}
    width={1080}
    height={1920}   // פורמט סטורי אנכי
    defaultProps={{
      name: "דנה",
      topArtist: "עומר אדם",
      minutesListened: 42130,
    }}
  />
);

הרכיב עצמו פשוט קורא את ה-props ומצייר את הסרטון לפיהם:

// Wrapped.tsx
import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";

export const Wrapped = ({ name, topArtist, minutesListened }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <AbsoluteFill style={{ background: "#1db954", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ transform: `scale(${scale})`, color: "#fff", fontSize: 80 }}>
        {name}, האזנת {minutesListened.toLocaleString("he-IL")} דקות
      </h1>
      <h2 style={{ color: "#fff" }}>האמן שלך: {topArtist}</h2>
    </AbsoluteFill>
  );
};

איך מאמתים את הנתונים? (סכמת Zod)

כדי שכל סרטון יקבל בדיוק את השדות הנכונים, Remotion תומך בהגדרת סכמת Zod ל-props. הסכמה מאמתת את הנתונים, ונותנת גם עורך props ויזואלי בתוך Remotion Studio:

import { z } from "zod";

export const wrappedSchema = z.object({
  name: z.string(),
  topArtist: z.string(),
  minutesListened: z.number().int().positive(),
});

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

איך מרנדרים מאות סרטונים אוטומטית?

מרנדרים בכמות דרך ה-API של Remotion ב-Node, לולאה על רשימת הנתונים, וסרטון אחד לכל פריט. הנה השלד:

// render-all.ts
import { renderMedia, selectComposition } from "@remotion/renderer";
import { bundle } from "@remotion/bundler";

const users = [
  { name: "דנה", topArtist: "עומר אדם", minutesListened: 42130 },
  { name: "יוסי", topArtist: "Static & Ben El", minutesListened: 38910 },
  // …עוד אלפי משתמשים מתוך CSV או מסד נתונים
];

const serveUrl = await bundle({ entryPoint: "./src/index.ts" });

for (const user of users) {
  const composition = await selectComposition({ serveUrl, id: "Wrapped", inputProps: user });
  await renderMedia({
    composition,
    serveUrl,
    codec: "h264",
    outputLocation: `out/${user.name}.mp4`,
    inputProps: user,
  });
}

מ-CLI אפשר לרנדר סרטון בודד עם נתונים מותאמים כך:

npx remotion render Wrapped out/dana.mp4 --props='{"name":"דנה","topArtist":"עומר אדם","minutesListened":42130}'

איך עושים את זה בקנה מידה? (Remotion Lambda)

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

• רינדור מקבילי: כל סרטון (ואפילו כל קטע בתוך סרטון) רץ כפונקציית Lambda נפרדת.
• ללא שרת קבוע: משלמים רק על זמן הרינדור בפועל, מתאים לגל עומס עונתי כמו "Wrapped" שנתי.
• API זהה: קוראים ל-renderMediaOnLambda במקום ל-renderMedia, עם אותם props.

איך Claude Code מקצר את כל זה?

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

דוגמת prompt: "באמצעות הסקיל של Remotion, בנה תבנית 'שנה בסיכום' אנכית: שם המשתמש בקפיץ, מספר הדקות, והאמן המוביל. הוסף סכמת Zod, וכתוב סקריפט שמרנדר סרטון לכל שורה ב-users.csv."

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

לאילו שימושים זה מתאים בעסק?

וידאו מבוסס-נתונים אינו רק "Wrapped", הוא מנוע להפקת וידאו מותאם בקנה מידה:

• סיכומים אישיים ללקוחות: "השנה שלך איתנו", לכל לקוח גרסה עם הנתונים שלו.
• וידאו מכירות מותאם: הצעה מונפשת עם שם הלקוח, המחיר והחבילה, אלפי גרסאות מתבנית אחת.
• תעודות והישגים: סרטון סיום קורס עם שם הבוגר והציון.
• לוקליזציה: אותו סרטון ב-10 שפות, רק מחליפים את ה-props של הטקסט.

שורה תחתונה

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

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

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