בונים וידאו
מהקוד.

מתקינים את Remotion

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

ליצירת פרויקט חדש, פותחים טרמינל ומריצים:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install
npm start

הפקודה npm start פותחת את ה-Remotion Studio בדפדפן (בדרך כלל בכתובת http://localhost:3000) - זה ה-IDE שבו רואים את הוידאו, מתקדמים בטיימליין ויכולים לרנדר.

מתקינים את ה-Skills

עבדנו עם שלושה skills שעוזרים ל-Claude לעבוד טוב יותר על הפרויקט:

להתקנת skill בפרויקט הנוכחי:

npx skills-il add skills-il/developer-tools@v1.6.1-remotion-best-practices \
  --skill remotion-best-practices -a claude-code

מוסיפים את מערכת העיצוב

במקום לבחור צבעים ופונטים ב-ad-hoc לכל סצנה, יוצרים קובץ theme.ts מרכזי שמרכז את כל ה-design tokens: צבעים, פונט, רזולוציה ו-FPS.

// src/theme.ts
export const theme = {
  sunshine: '#F5E642',
  coral:    '#E8473F',
  citrus:   '#F28C28',
  bloom:    '#F564A9',
  sky:      '#5B9BD5',
  lime:     '#B8E04A',
  ink:      '#111111',
  canvas:   '#F5F0EB',
  white:    '#FFFFFF',
  font:     'Rubik',
  fps:      30,
  W:        1920,
  H:        1080,
} as const;

טוענים את הפונט (Rubik) דרך @remotion/google-fonts עם תת-קבוצת hebrew:

// src/fonts.ts
import { loadFont } from "@remotion/google-fonts/Rubik";

const { waitUntilDone } = loadFont("normal", {
  weights: ["300", "400", "500", "700", "800", "900"],
  subsets: ["hebrew", "latin"],
});

export const fontHandle = waitUntilDone;

כותבים את התסריט

יוצרים קובץ videoScript.md ובו את הטקסט של הוידאו, שורה לכל סצנה. אצלנו זה היה 10 שורות לוידאו של דקה, על נושא הסרטונים בסגנון Sizzle Reel.

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

בוחרים סוג מוטיב: Kinetic Typography

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

כל סצנה היא קומפוננטה של React שמשתמשת ב:

• useCurrentFrame() - הפריים הנוכחי בסצנה
• interpolate() - מיפוי לינארי בין ערכים (אופסיטי, מיקום, גודל)
• spring() - אנימציות "קופצניות" עם פיזיקה
• @remotion/transitions - מעברים בין סצנות (flip, wipe, slide, fade)

// דוגמה לסצנה: טקסט שנכנס בקפיצה
const heroScale = spring({
  frame: Math.max(0, frame - 8),
  fps,
  from: 1.6, to: 1,
  config: { damping: 120, stiffness: 600 }
});
const heroOp = interpolate(frame, [8, 22], [0, 1], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp"
});

return (
  <div style={{
    direction: "rtl",
    fontFamily: theme.font,
    fontSize: 220,
    fontWeight: 900,
    color: theme.coral,
    transform: `scale(${heroScale})`,
    opacity: heroOp,
  }}>
    הוליווד
  </div>
);

מוסיפים קריינות עם ElevenLabs

השתמשנו ב-API של ElevenLabs כדי לייצר קריינות מהקול שלי. ה-Voice ID שלי הוא:

OvTNhLJeUQGHKGqJto3r

השתמשנו במודל החדש ביותר שלהם, eleven_v3, עם הגדרות שמדגישות דרמה ואקספרסיביות:

• stability: 0.20 - מאפשר וריאציה רגשית
• style: 0.85 - מקסימום סטייל ודרמה
• similarity_boost: 0.80 - שמירה על הקול המקורי
• use_speaker_boost: true - בוסט נוכחות

curl -X POST "https://api.elevenlabs.io/v1/text-to-speech/OvTNhLJeUQGHKGqJto3r" \
  -H "xi-api-key: $ELEVENLABS_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Accept: audio/mpeg" \
  -d '{
    "text": "בעולם שבו הקשב שלנו נודד...",
    "model_id": "eleven_v3",
    "voice_settings": {
      "stability": 0.20,
      "similarity_boost": 0.80,
      "style": 0.85,
      "use_speaker_boost": true
    }
  }' \
  -o public/sounds/vo_01.mp3

יצרנו קובץ MP3 לכל סצנה (vo_01.mp3 עד vo_10.mp3) ושמרנו ב-public/sounds/. בתוך כל קומפוננטת סצנה הוספנו:

import { Audio, staticFile } from "remotion";

<Audio src={staticFile("sounds/vo_01.mp3")} volume={0.9} />

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

מוסיפים מוזיקת רקע

הורדנו מוזיקה חינמית מ-Pixabay - הטראק "Upbeat Happy Corporate" של KornevMusic. הקישור הישיר נמצא בעמוד הטראק ב-Pixabay, ושמרנו את הקובץ ב-public/sounds/bg_music.mp3.

חיברנו את המוזיקה לקומפוזיציה הראשית בעוצמה נמוכה (0.18) כדי שלא תתחרה בקריינות:

// src/KineticTypography.tsx
import { Audio, staticFile } from "remotion";
import { TransitionSeries } from "@remotion/transitions";

export const KineticTypography: React.FC = () => (
  <>
    <Audio src={staticFile("sounds/bg_music.mp3")} volume={0.18} />
    <TransitionSeries>
      {/* כל הסצנות */}
    </TransitionSeries>
  </>
);

מרנדרים ל-MP4

אחרי שהוידאו נראה ונשמע טוב ב-Studio, מריצים פקודת רנדור אחת ומקבלים MP4 מוכן לשיתוף:

npx remotion render KineticTypography out/video.mp4

אפשר לציין פלאגים נוספים:

• --codec=h264 - הקודק (ברירת מחדל H.264)
• --crf=18 - איכות (נמוך = איכות גבוהה)
• --scale=1 - גודל הוידאו (1 = גודל מלא, 0.5 = חצי)

npx remotion render KineticTypography out/video.mp4 --crf=18

הקובץ נשמר ב-out/video.mp4 ומוכן להעלות ללינקדאין, לסלאק, ליוטיוב או לכל מקום אחר.