Remotion — إنشاء فيديوهات باستخدام React و TypeScript (دليل 2026)

npx create-video@latest my-video --template blank
cd my-video

npm install
npm start

import { Composition } from "remotion";
import { MyComposition } from "./Composition";
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyVideo"
        component={MyComposition}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

import { useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";
import React from "react";
 
export const MyComposition: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  // تحريك نابضي للعنوان
  const titleScale = spring({
    frame,
    fps,
    config: {
      damping: 12,
      stiffness: 200,
      mass: 0.5,
    },
  });
 
  // إظهار العنوان الفرعي بعد 20 إطار
  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
 
  // تحريك العنوان الفرعي للأعلى
  const subtitleY = interpolate(frame, [20, 40], [30, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
 
  return (
    <div
      style={{
        flex: 1,
        background: "linear-gradient(135deg, #0f0c29, #302b63, #24243e)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        fontFamily: "Inter, sans-serif",
      }}
    >
      <h1
        style={{
          fontSize: 80,
          color: "white",
          fontWeight: 900,
          transform: `scale(${titleScale})`,
          textAlign: "center",
        }}
      >
        مرحباً، Remotion
      </h1>
 
      <p
        style={{
          fontSize: 32,
          color: "#a8a8ff",
          opacity: subtitleOpacity,
          transform: `translateY(${subtitleY}px)`,
          marginTop: 20,
        }}
      >
        فيديوهات مدعومة بـ React
      </p>
    </div>
  );
};

import {
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
  Sequence,
  AbsoluteFill,
} from "remotion";
import React from "react";
 
const Title: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const scale = spring({ frame, fps, config: { damping: 12 } });
  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1
        style={{
          fontSize: 72,
          color: "white",
          transform: `scale(${scale})`,
          opacity,
          fontWeight: 800,
        }}
      >
        {text}
      </h1>
    </AbsoluteFill>
  );
};
 
const FadeOut: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 10], [1, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
 
  return <AbsoluteFill style={{ opacity }}>{children}</AbsoluteFill>;
};
 
export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        background: "linear-gradient(135deg, #0f0c29, #302b63, #24243e)",
      }}
    >
      {/* المشهد 1: المقدمة (الإطارات 0-59) */}
      <Sequence from={0} durationInFrames={60}>
        <Title text="مرحباً" />
      </Sequence>
 
      {/* المشهد 2: الرسالة الرئيسية (الإطارات 45-119) */}
      <Sequence from={45} durationInFrames={75}>
        <Title text="ابنِ فيديوهات بالكود" />
      </Sequence>
 
      {/* المشهد 3: الخاتمة مع تلاشي (الإطارات 110-150) */}
      <Sequence from={110} durationInFrames={40}>
        <FadeOut>
          <Title text="!هيّا بنا" />
        </FadeOut>
      </Sequence>
    </AbsoluteFill>
  );
};

import { Audio, Sequence, staticFile } from "remotion";
 
// ضع ملف الصوت في مجلد /public
// مثال: public/music.mp3
 
export const MyComposition: React.FC = () => {
  return (
    <AbsoluteFill style={{ background: "#0f0c29" }}>
      {/* موسيقى خلفية تبدأ من الإطار 0 */}
      <Audio src={staticFile("music.mp3")} volume={0.3} />
 
      {/* مؤثر صوتي عند الإطار 30 */}
      <Sequence from={30}>
        <Audio src={staticFile("whoosh.mp3")} volume={0.8} />
      </Sequence>
 
      {/* المحتوى المرئي */}
      <Sequence from={0}>
        <Title text="!مع الصوت" />
      </Sequence>
    </AbsoluteFill>
  );
};

<Audio
  src={staticFile("music.mp3")}
  volume={(f) =>
    interpolate(f, [0, 30, 120, 150], [0, 0.5, 0.5, 0], {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    })
  }
/>

import React from "react";
import {
  useCurrentFrame,
  useVideoConfig,
  interpolate,
  spring,
  Sequence,
  AbsoluteFill,
} from "remotion";
 
interface StatsProps {
  title: string;
  stats: Array<{ label: string; value: number; color: string }>;
}
 
const AnimatedBar: React.FC<{
  label: string;
  value: number;
  maxValue: number;
  color: string;
  delay: number;
}> = ({ label, value, maxValue, color, delay }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const progress = spring({
    frame: frame - delay,
    fps,
    config: { damping: 15, stiffness: 100 },
  });
 
  const width = interpolate(progress, [0, 1], [0, (value / maxValue) * 100]);
 
  const labelOpacity = interpolate(frame, [delay, delay + 10], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
 
  return (
    <div style={{ marginBottom: 24, opacity: labelOpacity }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: 8,
          fontSize: 24,
          color: "white",
          fontFamily: "Inter, sans-serif",
        }}
      >
        <span>{label}</span>
        <span style={{ fontWeight: 700 }}>
          {Math.round(value * progress)}
        </span>
      </div>
      <div
        style={{
          height: 32,
          background: "rgba(255,255,255,0.1)",
          borderRadius: 16,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            height: "100%",
            width: `${width}%`,
            background: `linear-gradient(90deg, ${color}, ${color}aa)`,
            borderRadius: 16,
          }}
        />
      </div>
    </div>
  );
};
 
export const StatsVideo: React.FC<StatsProps> = ({ title, stats }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const titleScale = spring({ frame, fps, config: { damping: 12 } });
  const maxValue = Math.max(...stats.map((s) => s.value));
 
  return (
    <AbsoluteFill
      style={{
        background: "linear-gradient(180deg, #1a1a2e, #16213e)",
        padding: 80,
        justifyContent: "center",
      }}
    >
      <h1
        style={{
          fontSize: 56,
          color: "white",
          fontWeight: 900,
          marginBottom: 60,
          transform: `scale(${titleScale})`,
          fontFamily: "Inter, sans-serif",
        }}
      >
        {title}
      </h1>
 
      {stats.map((stat, i) => (
        <AnimatedBar
          key={stat.label}
          label={stat.label}
          value={stat.value}
          maxValue={maxValue}
          color={stat.color}
          delay={i * 15 + 10}
        />
      ))}
    </AbsoluteFill>
  );
};

<Composition
  id="WeeklyStats"
  component={StatsVideo}
  durationInFrames={180}
  fps={30}
  width={1080}
  height={1080}
  defaultProps={{
    title: "أداء هذا الأسبوع",
    stats: [
      { label: "مستخدمون جدد", value: 1247, color: "#6366f1" },
      { label: "مشاهدات الصفحة", value: 8432, color: "#22d3ee" },
      { label: "التحويلات", value: 342, color: "#f43f5e" },
      { label: "الإيرادات ($)", value: 5890, color: "#10b981" },
    ],
  }}
/>

npm install @remotion/google-fonts

import { loadFont } from "@remotion/google-fonts/Inter";
 
const { fontFamily } = loadFont();
 
// استخدمه في مكوناتك
<h1 style={{ fontFamily }}>مُنسّق بـ Inter</h1>

import { staticFile } from "remotion";
 
const fontFace = new FontFace("MyFont", `url(${staticFile("fonts/MyFont.woff2")})`);
 
React.useEffect(() => {
  document.fonts.add(fontFace);
  fontFace.load();
}, []);

npx remotion render MyVideo out/my-video.mp4

npx remotion render MyVideo out/my-video.mp4 \
  --codec h264 \
  --quality 80 \
  --concurrency 4

npx remotion render WeeklyStats out/stats-week-14.mp4 \
  --props='{"title":"إحصائيات الأسبوع 14","stats":[{"label":"المستخدمون","value":2000,"color":"#6366f1"}]}'

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";
 
async function renderVideo() {
  const bundleLocation = await bundle({
    entryPoint: path.resolve("./src/index.ts"),
  });
 
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: "WeeklyStats",
    inputProps: {
      title: "تقرير أبريل 2026",
      stats: [
        { label: "الإيرادات", value: 12500, color: "#10b981" },
        { label: "المستخدمون", value: 3400, color: "#6366f1" },
      ],
    },
  });
 
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: "out/april-report.mp4",
    onProgress: ({ progress }) => {
      console.log(`التصيير: ${Math.round(progress * 100)}%`);
    },
  });
 
  console.log("!تم تصيير الفيديو بنجاح");
}
 
renderVideo();

import { Easing, interpolate } from "remotion";
 
const value = interpolate(frame, [0, 30], [0, 1], {
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  extrapolateRight: "clamp",
});

const items = ["React", "TypeScript", "Remotion"];
 
return (
  <>
    {items.map((item, i) => {
      const delay = i * 10;
      const opacity = interpolate(frame, [delay, delay + 15], [0, 1], {
        extrapolateLeft: "clamp",
        extrapolateRight: "clamp",
      });
      const x = interpolate(frame, [delay, delay + 15], [-50, 0], {
        extrapolateLeft: "clamp",
        extrapolateRight: "clamp",
      });
 
      return (
        <p
          key={item}
          style={{
            opacity,
            transform: `translateX(${x}px)`,
            fontSize: 36,
            color: "white",
          }}
        >
          {item}
        </p>
      );
    })}
  </>
);

import { Img, Video, staticFile } from "remotion";
 
// صورة ثابتة
<Img src={staticFile("logo.png")} style={{ width: 200 }} />
 
// تضمين فيديو
<Video src={staticFile("background.mp4")} />

import { delayRender, continueRender } from "remotion";
 
const [handle] = React.useState(() => delayRender());
 
React.useEffect(() => {
  const font = new FontFace("MyFont", `url(${staticFile("font.woff2")})`);
  font.load().then(() => {
    document.fonts.add(font);
    continueRender(handle);
  });
}, [handle]);