🎯 ما هي مهارة Remotion؟ | What Is Remotion Skill?
أداة لإنشاء فيديوهات برمجياً باستخدام React وTypeScript. بدل ما تستخدم برامج المونتاج التقليدية، تكتب كود React وتصدّر فيديو MP4 عالي الجودة. مثالية لفيديوهات السوشيال ميديا المتكررة، الشروحات، والمحتوى المؤتمت.
A tool to create videos programmatically using React and TypeScript. Instead of traditional editing software, you write React code and export high-quality MP4 videos. Perfect for repetitive social media videos, explainers, and automated content.
⚡ ماذا تفعل؟ | What Does It Do?
✅ تحوّل React Components إلى فيديوهات
✅ تدعم الأنيميشن، الترانزيشن، والصوت
✅ تصدّر MP4 بجودة احترافية
✅ تعمل مع Brand Systems — ألوان، خطوط، قوالب
✅ تؤتمت إنتاج الفيديو بالكامل
✅ Turns React Components into videos
✅ Supports animation, transitions, and audio
✅ Exports professional-quality MP4s
✅ Works with Brand Systems — colors, fonts, templates
✅ Fully automates video production
📦 التثبيت | Installation
من GitHub
bash# استنسخ المستودع | Clone the repository
# ادخل المجلد | Enter the directory
cd remotion-skill
# ثبّت الاعتماديات | Install dependencies
npm install
من Terminal مباشرة
bash# إنشاء مشروع Remotion جديد | Create new Remotion project
npx create-video@latest
# أو استخدم قالب جاهز | Or use existing template
npx create-video@latest --template=hello-world
🚀 كيف تستخدمها؟ | How to Use?
1️⃣ اكتب الكومبوننت
jsx// MyVideo.jsx
import { AbsoluteFill, useCurrentFrame } from 'remotion';
export const MyVideo = () => {
const frame = useCurrentFrame();
return (
<AbsoluteFill style={{
backgroundColor: '#000',
justifyContent: 'center',
alignItems: 'center'
}}>
<h1 style={{
fontSize: 100,
opacity: Math.min(1, frame / 30)
}}>
مرحباً بك! 🎬
</h1>
</AbsoluteFill>
);
};
2️⃣ عاين الفيديو
bash# تشغيل المعاينة المباشرة | Run live preview
npm start
يفتح متصفح على http://localhost:3000 تشوف فيه الفيديو live مع كل تعديل.
Opens browser at http://localhost:3000 where you see the video live with every edit.
3️⃣ صدّر MP4
bash# تصدير فيديو نهائي | Export final video
npm run build
# أو تصدير مخصص | Or custom export
npx remotion render MyVideo out/video.mp4
🛠️ الأدوات المستخدمة | Tools Used
Remotion
الغرض: محرك الفيديو البرمجي
التكلفة: مجاني (مفتوح المصدر)
React
الغرض: كتابة مكونات الفيديو
التكلفة: مجاني
FFmpeg
الغرض: ترميز وتصدير الفيديو
التكلفة: مجاني
TypeScript (اختياري)
الغرض: Type safety للمشاريع الكبيرة
التكلفة: مجاني
📂 هيكلية المشروع | Project Structure
remotion-skill/
├── src/
│ ├── Video.tsx → الكومبوننت الرئيسي
│ ├── Root.tsx → تعريف الفيديوهات
│ └── compositions/ → قوالب مختلفة
├── public/ → الصور والخطوط
├── out/ → الفيديوهات المصدّرة
├── remotion.config.ts → الإعدادات
└── package.json
🎨 مثال متقدم: فيديو براند | Advanced Example
jsximport { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
export const BrandVideo = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
const scale = interpolate(frame, [0, 30], [0.8, 1]);
return (
<AbsoluteFill style={{
backgroundColor: '#1a1a1a',
fontFamily: 'Cairo'
}}>
<div style={{
fontSize: 80,
color: '#fff',
transform: `scale(${scale})`,
opacity
}}>
Flow Plus 🚀
</div>
</AbsoluteFill>
);
};
⚙️ الإعدادات | Configuration
remotion.config.ts
typescriptimport { Config } from '@remotion/cli/config';
Config.setVideoImageFormat('jpeg');
Config.setOverwriteOutput(true);
Config.setCodec('h264');
Config.setConcurrency(4);
🎯 حالات الاستخدام | Use Cases
✅ فيديوهات سوشيال ميديا متكررة
✅ Explainer videos مع data ديناميكية
✅ شروحات منتجات مؤتمتة
✅ نتائج وإحصائيات متحركة
✅ قوالب فيديو للعملاء
✅ Repetitive social media videos
✅ Explainer videos with dynamic data
✅ Automated product demos
✅ Animated results and stats
✅ Video templates for clients
💡 نصيحة واحدة | One Tip
ابني مكتبة Components قابلة لإعادة الاستخدام.
بدل ما تكتب كل فيديو من الصفر، اصنع:
<BrandIntro />
<TextSlide />
<Outro />
<Transition />
وركّبها زي Lego blocks. 🧱
Build a library of reusable Components.
Instead of writing each video from scratch, create:
<BrandIntro />
<TextSlide />
<Outro />
<Transition />
And compose them like Lego blocks. 🧱
📚 روابط مفيدة | Useful Links
🔗 التوثيق الرسمي: https://remotion.dev
🔗 GitHub: https://github.com/remotion-dev/remotion
🔗 أمثلة: https://remotion.dev/showcase
🔥 ابدأ إنشاء فيديوهات برمجياً اليوم! 🎬
Start creating videos programmatically today! 💪