إنتاج الفيديو (Remotion) [قراءة اختيارية]

📚 تنقل السلسلة: المقال السابق 52 مسرد المصطلحات (صديق للمبتدئين) قام بجمع المصطلحات التي ظهرت في الدورة بالكامل في جدول يسهل البحث فيه. هذا المقال يمثل المحطة الأخيرة في الدورة التعليمية بالكامل، وهو أسلوب تشغيل إضافي [قراءة اختيارية] — لتوجيه Claude Code لمساعدتك في إنشاء فيديو بالاعتماد على الأكواد. ويعتمد هذا الأسلوب على Remotion (إطار عمل يتيح كتابة الفيديوهات باستخدام React): حيث تشرح التأثير المطلوب بلغة بسيطة، ويقوم هو بكتابة أكواد «رسم كل إطار»، لتوليد الفيديو النهائي بصيغة mp4. وقراءتك للمقال تطلعك على فائدته ومواضع استخدامه الفعالة، ومتى يمثل إضاعة للوقت.

📌 حول موقع هذا المقال: لا تحتوي المستندات الرسمية لـ Claude Code على صفحة مخصصة لـ Remotion — فهذه ليست ميزة مدمجة في Claude Code، بل هي طريقة استخدام لـ «توجيه Claude Code لكتابة أكواد لإطار عمل آخر». ولذلك تعتمد الحقائق التقنية في هذا المقال على المعارف العامة لـ Remotion + تجارب الدورة التعليمية، ولا تقتبس من مستندات Claude Code الرسمية (لأنها لا تتحدث عن هذا إطلاقًا). وتصنيف المقال كـ «اختياري» يرجع لكونه ميزة فرعية: لن يحتاجها معظم المستخدمين، ولكن من يحتاجها سيجدها مدهشة ومفيدة للغاية.

أيها الأصدقاء، دعونا نبدأ ببعض البيانات البسيطة لتوضيح الفكرة.

حصد مشروع Remotion مفتوح المصدر أكثر من خمسين ألف نجمة (star) على GitHub. وحصول إطار عمل يتيح «كتابة الفيديو باستخدام React» على هذا مستوى من الاهتمام يثبت شيئًا واحدًا — «معاملة الفيديو كأكواد برمجية» ليس مجرد تسلية للمبرمجين الهواة، بل هناك من يعتمد عليه لإنجاز أعمال حقيقية.

الاستخدام الأكثر شهرة للمشروع هو كالتالي: تقوم بعض المنتجات بتوليد «فيديو ملخص سنوي مخصص» لكل مستخدم — يوضح عدد ساعات التشغيل، الأغاني الأكثر استماعًا، وترتيبك، وتوليد الفيديوهات لعشرات الآلاف من المستخدمين يعني إنتاج عشرات الآلاف من الفيديوهات المختلفة المحتوى ولكنها متطابقة في القالب. هل تتخيل قيام المونتير بتعديل وإنتاج هذه الفيديوهات واحدًا تلو الآخر باستخدام Pr أو AE؟ سيستغرق الأمر دهرًا. ولكن إذا كان الفيديو عبارة عن كود برمجي يستقبل معاملات (parameters)، فسيصبح الأمر مجرد حلقة تكرار (loop) بسيطة — تغير البيانات، وتولد فيديو جديدًا.

وبالحديث عن «أكواد تستقبل معاملات»، هل يذكرك هذا بأحد؟ نعم، هذا هو الملعب الرئيسي لـ Claude Code. فبمجرد تحول الفيديو إلى أكواد React، فلن يختلف عن أي أكواد تعاملت معها في المقالات الاثنين والخمسين السابقة — تشرح المتطلبات، ويقوم هو بالكتابة والتعديل والضبط. هذا المقال سيوضح لك كيفية تشغيل هذا المزيج، والسؤال الأهم: هل يناسبك؟

بعد قراءة هذا المقال، ستحصل على:

• شرح مبسط في جملة واحدة لـ Remotion، وكيف يتيح «إنتاج الفيديو بالأكواد»
• سبب التكامل الممتاز بين Remotion و Claude Code — فالفيديو يتحول لأكواد، وكتابة الأكواد هي تخصص Claude
• مسار مبسط يبدأ «من دليل فارغ وحتى إنتاج فيديو mp4»، مع توضيح المخرجات المتوقعة لكل خطوة لتطبيقها بنفسك
• شرح مبسط لثلاثة مفاهيم أساسية (الإطار، الاستيفاء، المرونة)، لتفهم ما تعنيه الأكواد التي يولدها Claude
• جدول مقارنة لـ «من يجب عليه استخدامها / ومن يجب عليه تجنبها»، لمساعدتك في اتخاذ القرار

---

01 أولاً: كيف يتيح Remotion «إنتاج الفيديو بالأكواد»

الخلاصة أولاً: يقوم Remotion بتحويل «كل إطار في الفيديو» إلى صورة يتم رندرتها باستخدام React، ثم يجمع هذه الصور بالترتيب لتوليد الفيديو. لن تستخدم الماوس لسحب المواد على الجدول الزمني بعد الآن，بل ستكتب كودًا يصف «شكل الإطار الفلاني».

قد يبدو هذا غير مألوف — أليست الفيديوهات تُصوّر وتُعدّل؟ كيف يمكن «كتابتها»؟ السر يكمن في نوع الفيديوهات التي ينتجها: ليست فيديوهات تصوير واقعي أو مونتاج أشخاص حقيقيين، بل هي رسوم متحركة للنصوص، الرسوم البيانية، مقدمات الشعارات (logos)，وعروض الأكواد وغيرها من الفيديوهات التي «يتم توليد مشاهدها بالكامل بناءً على القواعد». هذا النوع من الفيديوهات لا يتطلب تصويرًا واقعيًا، بل «رسمًا هندسيًا بناءً على القواعد» — والرسم بناءً على القواعد هو تخصص الأكواد البرمجية.

تشبيه: دفاتر الرسوم المتحركة القابلة للتقليب (flip book) التي كنا نلعب بها في الصغر. ترسم شخصًا صغيرًا على زاوية كل صفحة من دفتر الملاحظات، في الصفحة الأولى يرفع قدمه اليسرى، وفي الثانية يرفع اليمنى، وفي الثالثة يقفز... بنظرة فردية تجد أن كل صفحة هي صورة ثابتة، ولكن عند تقليب الصفحات بسرعة بإبهامك، يبدو الشخص كأنه يتحرك ويركض. جوهر الفيديو يماثل هذا تمامًا — مجموعة من الصور الثابتة التي تُعرض بسرعة كافية لتراها العين كحركة مستمرة. ودور Remotion هو تمكينك من رسم كل صفحة في هذا الدفتر باستخدام الأكواد: فتكتب دالة تخبره بـ «أن النص في الصفحة 0 يكون خارج الشاشة، وفي الصفحة 30 ينزلق للمنتصف»، وسيتولى هو حساب ورسم وتوصيل الصفحات البينية لتوليد الفيديو.

وفي السيناريوهات الواقعية، يبرع Remotion في إنتاج الفيديوهات التالية:

• فيديوهات الرسوم البيانية للبيانات: مثل رسوم متحركة لعداد أرقام يرتفع من 0 إلى مليون، أو رسم بياني عمودي ينمو مع الوقت — فالبيانات تقود العملية وتتحكم بها الأكواد بدقة.
• الفيديوهات المخصصة الجماعية: مثل «الملخص السنوي» المذكور سابقًا، حيث يتم دمج بيانات مختلفة في نفس القالب ورندرة آلاف الفيديوهات بالتكرار بسهولة.
• العروض التقنية / مقدمات الشروحات: مثل تظليل أسطر الأكواد تدريجيًا، تأثيرات الكتابة في الطرفية، ورسوم دخول الشعارات — فالرسامون والمبرمجون يمكنهم إنتاج عروضهم الخاصة دون الحصول على AE المعقد.

تخيل سيناريو شائعًا: تريد إنتاج فيديو دعائي مدته 15 ثانية لإطلاق أداة صغيرة. أنت لا تتقن After Effects، وتكلفة الاستعانة بمونتير خارجي لإنتاج 15 ثانية تبدو غير مجدية. في هذه الحالة، استخدام Claude Code بالاشتراك مع Remotion ينجز لك فيديو mp4 مقبولاً من دليل فارغ في حوالي ساعة ونصف فقط — وقضيت معظم هذا الوقت في تعديل تفاصيل مثل «هذه الكلمة تتحرك بسرعة كبيرة» أو «الخلفية غير مناسبة». لو كان هذا في الماضي، لما كنت قد انتهيت من تثبيت البرنامج بعد.

ولكي تتضح الصورة بشكل أفضل، قارنا بين Remotion وبين الأدوات الشائعة الأخرى في هذا الجدول:

نوع الأداة	كيفية إنتاج الفيديو	نقاط القوة	نقاط الضعف
برامج المونتاج (Pr / AE)	استخدام الماوس لسحب المواد وتثبيت الإطارات الرئيسية يدويًا	تناسب التصوير الواقعي، الإبداع الحر، والحصول على معاينة فورية	تعذر الرندرة الجماعية، تطلب التعديل اليدوي لكل موضع، وبطء التعلم
القوالب السحابية (منصات التوليد السريعة)	دمج المحتويات في قوالب جاهزة	السرعة وغياب متطلبات التعلم	القيود الصارمة للقوالب، تعذر تعديل التفاصيل، وتطابق التصميمات
Remotion	كتابة كود يصف كل إطار	التحكم الدقيق، إمكانية الرندرة الجماعية، إمكانية الإدارة عبر git، وإعادة الاستخدام	لا تناسب التصوير الواقعي، وتتطلب بيئة برمجية (ولكن يتولى Claude إدارتها)

💡 الخلاصة في جملة واحدة: يقوم Remotion بتحويل الفيديو إلى إطارات صور ثابتة يتم رندرتها بـ React، وتصف الأكواد شكل كل إطار ليجمعها تلقائيًا؛ ويبرع في رسوم النصوص والبيانات والشعارات المنظمة بقواعد، ولا يناسب لقطات التصوير الحقيقي أو الرسوم التلقائية السريعة، ويركز على الدقة والمرونة.

---

02 سبب التكامل الممتاز بين Remotion 与 Claude Code

بمجرد تحول الفيديو إلى أكواد، تتحول عملية إنتاج الفيديو إلى كتابة أكواد، وكتابة الأكواد هي التخصص الرئيسي لـ Claude Code. وهذا هو السبب الكامل لجمعهما معًا.

يكمن جمال هذا التكامل في توافقه التام مع الميزات الأكثر تميزًا لـ Claude Code:

مراحل إنتاج الفيديو	الأسلوب التقليدي (يدويًا)	Claude Code + Remotion
بدء المشروع من الصفر	تهيئة React، تثبيت الاعتمادات، وإنشاء المجلدات بنفسك	توجيهه في جملة واحدة ليقوم ببناء هيكل المشروع بالكامل
كتابة منطق الرسوم المتحركة	تثبيت الإطارات الرئيسية يدويًا في AE	تشرح التأثير المطلوب، ويقوم بكتابة أكواد interpolate و spring
تعديل التفاصيل الدقيقة	البحث في طبقات الرسوم البيانية لتعديل المعاملات في البرنامج	توجيهه بـ «النص في المشهد الثاني صغير جدًا» لتحديد الكود وتعديله
توليد إصدارات مختلفة جماعيًا	حفظ الملفات بأسماء مختلفة وإعادة تعديلها واحدًا تلو الآخر	تعديل المعاملات ورندرة آلاف الفيديوهات بالتكرار بسهولة

تظهر متعة التعديل بوضوح في الخطوة الثالثة. فعند ملاحظة سرعة دخول مشهد معين، تضطر في برامج المونتاج للبحث داخل طبقات الرسوم البيانية لتعديل الإطارات؛ بينما تكتفي هنا بكتابة «اجعل دخول العناصر في المشهد FeaturesScene أبطأ قليلاً» في الطرفية، ليقوم Claude بتعديل الكود في ملف .tsx المقابل وتحديث المعاينة فورًا. والتعديل باللغة الطبيعية هو الميزة الأكثر متعة في هذا التكامل.

هنا يجب وضع شرط هام لتفادي الفهم الخاطئ: جوهر هذا التكامل هو قيام Claude Code بكتابة أكواد React، وليس قيام Claude Code نفسه بـ «إنتاج الفيديو». لذا فإن الأساليب المشروحة في المقالات السابقة تظل صالحة ومفيدة هنا —

• كلما كانت المتطلبات محددة، زادت دقة الإنجاز (راجع المقال 15 «كيفية طرح الأسئلة»)，فصيغة مثل «6 ثوانٍ، بدقة 1920x1080، وبسرعة 30fps، وخلفية سوداء ونصوص ذهبية» أفضل بمئات المرات من «إنتاج مقدمة مذهلة»؛
• استخدام /init أو ملف CLAUDE.md لتثبيت اتفاقيات وقواعد المشروع (راجع المقالين 12 و18) يضمن استقرار تعديلاته البرمجية لاحقًا؛
• كما يمكنك تزويده بـ Skill مخصصة تطلعه على معايير «كيفية كتابة Remotion» (راجع المقال 26) لرفع جودة الأكواد المولدة بشكل ملحوظ.

وبعبارة أخرى: لا داعي لتعلم تفاصيل Remotion من الصفر، ومهارات «كيفية توجيه Claude Code لكتابة الأكواد» التي تدربت عليها في المقالات الاثنين والخمسين السابقة صالحة للاستخدام هنا مباشرة.

💡 الخلاصة في جملة واحدة: يحول Remotion الفيديو إلى كود React، وكتابة كود React هي ملعب Claude الرئيسي؛ وتكتفي أنت بشرح متطلباتك باللغة الطبيعية وتقييم النتائج، ويتولى هو إنشاء المشروع وتصميم الرسوم وتعديل الأكواد تلقائيًا.

---

03 ثلاثة مفاهيم أساسية: لتفهم ما تعنيه الأكواد التي يولدها Claude

يمكنك إنتاج الفيديو بتوجيه Claude باللغة الطبيعية دون معرفة كتابة الأكواد إطلاقًا. ولكن قضاء ثلاث دقائق للتعرف على ثلاثة مصطلحات سيزيل الغموض عن الأكواد التي يولدها，ويمنحك ثقة أكبر عند التعديل. هذه المصطلحات الثلاثة تمثل أساس Remotion بالكامل: الإطار، الاستيفاء، والمرونة。

帧（frame）：视频是按「第几帧」算的

بالعودة لتشبه الدفتر الورقي — الإطار هو الوحدة الصغرى للفيديو، ويعادل «صفحة واحدة» في الدفتر. ويستخدم Remotion دالة أساسية وهي useCurrentFrame() لإخبارك بـ «رقم الإطار الذي يتم رسمه حاليًا». وجوهر الرسوم المتحركة يدور حول الإجابة عن: «كيف يكون شكل المشهد في الإطار الحالي (frame)».

ويتم تحويل الإطار إلى ثوانٍ بالمعادلة التالية:

إجمالي الإطارات = عدد الثواني × سرعة الإطارات（fps）。على سبيل المثال، فيديو مدته 6 ثوانٍ بسرعة 30fps يتكون من 6 × 30 = 180 إطارًا.

لذا عند رؤية durationInFrames={180} مع fps={30} في الأكواد، تدرك فورًا: أن هذا الفيديو مدته 6 ثوانٍ (وتعني fps عدد الإطارات في الثانية الواحدة؛ وسرعة 30fps تمنح حركة سلسة، وسرعة 60fps تمنح حركة أكثر انسيابية بملف أكبر حجمًا).

插值（interpolate）：把「从 A 到 B」平滑算出来

دالة interpolate() هي الأكثر استخدامًا، وتتلخص فائدتها في: حساب قيم الانتقال السلس بين نقطتين زمنيتين وقيمتين محددتين لكل إطار بينهما.

على سبيل المثال، لجعل نص يظهر تدريجيًا من «شفاف تمامًا» إلى «ظاهر تمامًا» خلال أول 30 إطارًا:

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
// عند الإطار 0 تكون الشفافية 0، وعند الإطار 30 تصبح 1، وتُحسب القيم البينية تلقائيًا
const opacity = interpolate(frame, [0, 30], [0, 1]);

صيغة interpolate(frame, [0, 30], [0, 1]) تعني باللغة الطبيعية «عندما يتغير frame من 0 إلى 30، قم بتغيير القيمة المقابلة تدريجيًا من 0 إلى 1». ويعتمد عليها Claude لإنتاج تأثيرات الظهور والاختفاء، الإزاحة، التكبير، والتدوير. ورؤية interpolate توضح لك: وجود عنصر تتغير حالته بسلاسة إلى حالة أخرى.

弹性（spring）：让动画「Q 弹」而不是直愣愣

دالة spring() تُused لإضافة تأثيرات الحركة الفيزيائية المرنة للرسوم المتحركة. وتنتج دالة interpolate حركة خطية ثابتة السرعة تبدو «ميكانيكية»؛ بينما تحاكي دالة spring حركة الزنبرك (النافض) التي تتجاوز الهدف ثم ترتد لتستقر، مما يجعل الحركة تبدو أكثر طبيعية وانسيابية.

إن الرسوم المتحركة التي تعتمد على spring() تبدو أكثر طبيعية بمئات المرات مقارنة بالحركة الخطية. وفي المثال السابق للفيديو الدعائي، عند ظهور شعار (Logo) بشكل مفاجئ واستقراره في المنتصف فإنه سيبدو جافًا؛ وتوجيه Claude لـ «تطبيق تأثيرات حركة مرنة للشعار» يستبدل دالة interpolate بدالة spring ليظهر الشعار بتأثير ارتداد احترافي. لذا عند الرغبة في إضفاء احترافية للرسوم، وجهه صراحة لـ «استخدم حركة مرنة».

الجدول التالي يساعدك على مطابقة المفاهيم مع التوجيهات:

المصطلح المكتوب	ماذا يفعل	صيغة توجيه Claude
useCurrentFrame()	جلب «رقم الإطار الحالي»	(لا يتطلب تدخلك، ويستخدمه النموذج ذاتيًا)
durationInFrames / fps	تحديد طول وانسيابية الفيديو	«قم بإنتاج فيديو مدته 6 ثوانٍ وبسرعة 30fps»
interpolate(...)	الانتقال السلس من النقطة A إلى B	«اجعل العنصر يظهر تدريجيًا / ينزلق للشاشة / يتكبد»
spring(...)	الانتقال بتأثيرات حركة مرنة	«استخدم حركة مرنة لتأثير ارتداد ملموس»

الكود التالي يمثل مكونًا مبسطًا قد يولده Claude — كتابة كلمة HELLO، تظهر تدريجيًا مع تكبير مرن. لا داعي لتعلم كتابتها، واكتفِ بمطابقتها مع التعليقات التوضيحية المرفقة:

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const Hello = () => {
  const frame = useCurrentFrame();        // تحديد الإطار الحالي الذي يتم رسمه
  const { fps } = useVideoConfig();        // جلب سرعة إطارات الفيديو

  // يظهر العنصر تدريجيًا (تغير الشفافية من 0 إلى 1) خلال أول 30 إطارًا
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  // حساب معامل التكبير بتأثير حركة مرنة للانتقال من الصغير للحجم الطبيعي
  const scale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>HELLO</div>
  );
};

فهم هذا الكود بسيط للغاية: دالة useCurrentFrame() تجلب «رقم الإطار الحالي» ← دالة interpolate تغير الشفافية من 0 إلى 1 (ظهور تدريجي) ← دالة spring تضيف حركة مرنة للتكبير ← ويتم تطبيق القيمتين على نمط كتابة الكلمة. فالكود بالكامل يجيب عن سؤال واحد: «كيف يكون شكل كلمة HELLO في الإطار الحالي (frame)». ومهما تعقدت الأكواد التي يولدها Claude، فإنها تتبع نفس هذا المخطط الهيكلي — ومعرفتك لهذه المصطلحات تمكنك من مناقشته وتوجيهه لتعديل المواضع المطلوبة.

💡 الخلاصة في جملة واحدة: ثلاثة مصطلحات تلخص الأكواد — الإطار يمثل صفحة من صفحات الفيديو، ودالة interpolate تحسب الانتقال الخطي السلس بين النقطتين، ودالة spring تضفي فيزيائية مرنة وانسيابية؛ وتعمل معًا لتحديد رسم وتأثيرات كل إطار.

---

04 المسار الكامل لإنتاج فيديو mp4 من دليل فارغ

استيعاب المسار بالكامل يضمن لك العمل بثقة وتفادي التشتت. ويتكون المسار من خمس خطوات أساسية، تتمثل إما في توجيه Claude أو تشغيل أمر لمراجعة النتائج.

مسار العمل الكلي موضح في هذا الرسم البياني:

يوضح الرسم البياني تسلسل الخطوات: تهيئة البيئة ← شرح متطلباتك لـ Claude ← كتابة الأكواد وتعديلها ← المعاينة ← التصدير النهائي عند الرضا بعد جولات التعديل.

الخطوة الأولى: تهيئة البيئة

يعتمد Remotion على Node.js، لذا يجب توفر إصدار Node.js 18 أو أحدث على جهازك، بالإضافة لتثبيت Claude Code (لمزيد من التفاصيل حول التثبيت راجع المقال 02). للتحقق من إصدار Node.js:

node --version

المتوقع: طباعة رقم الإصدار، مثل v20.11.0. ويكفي أن يكون الرقم الأول أكبر من أو يساوي 18. وإذا كان أقل من 18، فسيحدث خطأ عند تشغيل Remotion Studio — وهو الفخ الأول للمبتدئين (ويمكنك استخدام أدوات مثل nvm لترقية الإصدار إلى 20).

⚠️ ملاحظة: عند رندرة الفيديو، يستخدم Remotion متصفحًا بدون واجهة (headless Chromium يعمل في الخلفية لالتقاط صور لكل إطار). وقد يتطلب التشغيل الأول تنزيل هذا المتصفح، وإذا تعطل التحميل بسبب قيود الشبكة، قم بتشغيل VPN للمحاولة مجددًا.

الخطوة الثانية: إنشاء دليل فارغ، تشغيل Claude Code، وشرح المتطلبات بوضوح

mkdir hello-video && cd hello-video
claude

بعد الدخول لواجهة claude التفاعلية، اشرح متطلباتك بكامل التفاصيل دفعة واحدة. فالتوضيح يضمن دقة التنفيذ من المحاولة الأولى. وإليك توجيهًا مبسطًا كمثال:

ساعدني في إنشاء مشروع باستخدام Remotion لإنتاج فيديو مقدمة مدته 6 ثوانٍ.
المواصفات: دقة 1920x1080، وبسرعة 30fps，وخلفية سوداء بالكامل؛
يعرض في منتصف الشاشة كلمة "HELLO" باللون الأبيض وبحجم كبير، وتظهر تدريجيًا مع تكبير مرن بسيط،
وفي النهاية يظهر وهج باللون الأخضر (#67c23a) يحيط بالكلمة.
اكتفِ بـ Composition واحد، ولا داعي لتقسيم المشاهد المتعددة.

لاحظ أنني قمت بتحديد المدة، الدقة، سرعة الإطارات، الألوان، وأسلوب الحركة بدقة في التوجيه — وهذا يتماشى مع مبدأ «تخصيص التوجيهات» الذي تم التأكيد عليه في المقال 15. فتحديد التفاصيل يضمن دقة العمل مقارنة بعبارات عامة مثل «إنتاج مقدمة مذهلة».

لا داعي لابتكار الصياغة في كل مرة، وتذكر قائمة «العناصر الخمسة» واكتب التوجيه بناءً عليها:

العنصر	ماذا يجب توضيحه	مثال
المدة	عدد الثواني	«6 ثوانٍ»
الدقة + سرعة الإطارات	المنصة المستهدفة والانسيابية	«دقة 1920x1080 وبسرعة 30fps»
الخلفية	تحديد التصميم بدقة	«سوداء بالكامل» أو «تدرج من الرمادي الداكن للأزرق الداكن»
المحتوى الأساسي	النصوص أو الأرقام أو الأشكال المعروضة	«كلمة HELLO في منتصف الشاشة باللون الأبيض وبحجم كبير»
أسلوب الحركة	كيفية الدخول والخروج والارتداد	«تظهر تدريجيًا مع تكبير مرن بسيط»

بالنسبة للأبعاد، يمكنك توضيح المنصة المستهدفة مباشرة لتبسيط الأمر — مثل فيديو رأسي لـ TikTok بدقة (1080x1920)، فيديو أفقي لـ YouTube بدقة (1920x1080)، أو فيديو مربع للمنشورات بنسبة (1:1)، وسيتولى هو حساب الأبعاد المقابلة للمنصة. وتحديد التوجيه وفق هذه العناصر يضمن الحصول على النتائج المطلوبة بسرعة.

الخطوة الثالثة: 搭项目 + 写代码

سيقوم Claude Code بإنجاز العمل تلقائيًا: تهيئة ملف package.json، تثبيت اعتمادات Remotion، إنشاء مجلد src/، كتابة مكون Composition المخصص، وإعداد منطق الرسوم المتحركة باستخدام interpolate و spring. سيتولى هو إعداد هيكل المشروع بالكامل، وتكتفي بمشاهدة إنشاء الملفات. وعند الانتهاء، سيعرض لك أوامر «تثبيت الاعتمادات والتشغيل للمعاينة» — وقم بتنفيذها.

الخطوة 4：预览（这步最关键）

npm install
npx remotion studio

المتوقع: طباعة رسالة في الطرفية توضح تشغيل Remotion Studio running at http://localhost:3000 وفتح المعاينة في المتصفح تلقائيًا. ستشاهد واجهة للمعاينة مع جدول زمني — تتيح لك تشغيل الفيديو وسحب مؤشر الوقت لمراجعة الرسوم إطارًا بإطار.

هذه الخطوة هي عصب العملية بالكامل. فتقييم الرسوم يظهر هنا بكل دقة. وعند سحب مؤشر الوقت وملاحظة تفاصيل مثل «هذه الكلمة تتحرك بسرعة كبيرة» أو «الوهج الأخضر بحاجة للتخفيف»، سجل هذه الملاحظات — لتوجيه Claude لتعديلها في الخطوة التالية.

第五步：不满意就让它改，满意了渲染导出

عند وجود ملاحظات للتعديل، لا تبحث في الأكواد بنفسك، بل عد إلى طرفية Claude Code ووجهه باللغة الطبيعية:

ظهور كلمة "HELLO" سريع جدًا، اجعل مدة ظهورها تطول لتصبح ثانية واحدة؛ وخفف وهج اللون الأخضر قليلاً。

سيقوم بتحديد الأكواد وتعديلها، وسيقوم Remotion Studio بتحديث المعاينة تلقائيًا (hot reload)، لتشاهد التأثير الجديد في المتصفح فورًا. وتستمر في هذه الحلقة «توجيه ← تعديل ← معاينة» حتى ترضى عن النتيجة بالكامل.

وعند الرضا، قم برندرة وتصدير الفيديو بصيغة mp4:

npx remotion render HelloVideo out/hello.mp4

ويمثل HelloVideo معرف المكون الخاص بك Composition ID (ويجب أن يطابق المعرف المسجل في الأكواد، وسيوضحه لك Claude)، ويمثل out/hello.mp4 مسار تصدير الملف. المتوقع: ظهور شريط تقدم الرندرة في الطرفية، وعند الانتهاء تظهر رسالة تأكيد Rendered ... → out/hello.mp4. وبزيارة المجلد out/ ستجد ملف الفيديو mp4 جاهزًا للاستخدام.

إليك توضيحًا لنقطتين يسهل خلطهما على المبتدئين:

هل تعجز عن معرفة Composition ID؟ لا تخمن — اسأل Claude مباشرة «ما هو Composition ID لهذا الفيديو» وسيجيبك؛ أو افتح واجهة المعاينة remotion studio وستجد قائمة بجميع معرفات المكونات في العمود الأيسر لتنقل الاسم منها. وعند كتابة المعرف بشكل خاطئ، سيظهر تنبيه يفيد بتعذر العثور على المكون، وحينها تأكد من الاسم من الموضعين السابقين.

لماذا لا يجب تخطي المعاينة والرندرة مباشرة؟ لأن الرندرة عملية شاقة وتستهلك موارد الجهاز وقد تستغرق عدة دقائق لإنتاج الفيديو؛ بينما المعاينة فورية وتتيح مراجعة المشاهد إطارًا بإطار بسلاسة. لذا التصرف الصحيح هو: مراجعة وتعديل الفيديو في المعاينة أولاً، والقيام بالرندرة لمرة واحدة في النهاية لتصدير الملف. والقيام بالرندرة مع كل تعديل بسيط يضيع الكثير من الوقت في الانتظار دون فائدة — وتذكر قاعدة «تعديل في المعاينة، ورندرة للتصدير» لتوفير الوقت.

💡 الخلاصة في جملة واحدة: يتكون مسار العمل من خمس خطوات — تهيئة البيئة (Node 18+) ← شرح المتطلبات لـ Claude ← إعداد المشروع وتوليد الأكواد ← المعاينة في remotion studio ← التعديل باللغة الطبيعية والرندرة للتصدير. وتكرار التعديل والمعاينة هو مسار طبيعي، وركز على القيام بالرندرة لمرة واحدة في النهاية.

---

05 تمرين عملي: تشغيل وتأكيد سيناريو مبسط

القراءة دون تطبيق لا تساعد على التذكر. سنقوم في هذا القسم بتطبيق عملي مبسط مع توضيح المخرجات المتوقعة لكل خطوة. لا يتطلب هذا التمرين أي بيئة خاصة بالرسوم المتحركة، ويكفي وجود Node.js 18 أو أحدث وتثبيت Claude Code.

⚠️ تنبيه: سيوجه هذا التمرين أداة Claude Code للاتصال بالإنترنت وتثبيت اعتمادات برمجية وإنشاء ملفات وتشغيل عمليات الرندرة، وهو ما يستهلك رصيدًا وموارد أكثر من المحادثات المعتادة. وقد تستغرق أول عملية رندرة وتنزيل متصفح headless بضعة دقائق، وقم بتشغيل VPN عند بطء الاتصال.

الخطوة الأولى: التأكد من ملاءمة إصدار Node.js

node --version

المتوقع: طباعة إصدار مثل v18.x.x أو أحدث (مثل v20.11.0). ويجب أن يكون الرقم الأول أكبر من أو يساوي 18 للاستمرار، وإلا فقم بالترقية أولاً.

الخطوة الثانية: إنشاء دليل فارغ وتشغيل Claude Code

mkdir hello-video && cd hello-video
claude

المتوقع: الدخول لواجهة Claude Code التفاعلية، بانتظار إدخال توجيهك.

الخطوة الثالثة: نسخ وإرسال التوجيه المكتوب في القسم 04

استخدم التوجيه السابق لتحديد مواصفات الفيديو (المدة 6 ثوانٍ، دقة 1920x1080، سرعة 30fps، خلفية سوداء، كلمة HELLO بيضاء تظهر تدريجيًا بتكبير مرن بسيط مع وهج أخضر).

المتوقع: يبدأ Claude Code في إنشاء الملفات وكتابة الأكواد — ستلاحظ إنشاء ملف package.json، ومجلد وملف src/Root.tsx (أو src/index.ts)，ومكونات الرسوم المتحركة. وسيتوقف ليطلب موافقتك على «إنشاء ملفات» أو «تشغيل npm install» (وهذا يخضع لنظام الصلاحيات المشروح في المقال 20) — وقم بالموافقة للاستمرار. وسيعرض لك الخطوة التالية عند الانتهاء.

الخطوة الرابعة: تثبيت الاعتمادات وتشغيل المعاينة

npm install
npx remotion studio

المتوقع: تنزيل الاعتمادات بواسطة npm install (قد يستغرق الأمر بعض الوقت في المرة الأولى). ويطبع أمر remotion studio تأكيد تشغيل الخادم وتنبيه Remotion Studio running at http://localhost:3000 وفتح المعاينة في المتصفح لتشاهد ظهور كلمة HELLO بتأثير الوهج الأخضر على خلفية سوداء وسحب مؤشر الوقت لمراجعة الرسوم. مشاهدة المعاينة وتشغيلها يعني نجاح الربط بالكامل.

الخطوة الخامسة: تعديل الرسوم باللغة الطبيعية وتأكيد التحديث الفوري

عد إلى طرفية Claude Code واكتب:

اجعل ظهور كلمة HELLO يستغرق وقتًا أطول، لتدخل الشاشة بشكل أبطأ。

المتوقع: يحدد Claude الكود المقابل لدالة interpolate ويقوم بزيادة نطاق الإطارات للانتقال (مثل تعديله من [0, 15] ليصبح [0, 45]). ويقوم Remotion Studio بتحديث المعاينة تلقائيًا، لتلاحظ بطء ظهور الكلمة عند مراجعة المشهد في المتصفح. رؤية التحديث الفوري تعني اتقانك لجوهر هذه الآلية — إنتاج وتعديل الفيديو باللغة الطبيعية دون الحاجة لفتح برامج المونتاج.

الخطوة السادسة: رندرة وتصدير ملف mp4

npx remotion render HelloVideo out/hello.mp4

(استبدل HelloVideo بمعرف المكون الفعلي للمشروع). المتوقع: ظهور شريط تقدم الرندرة في الطرفية، وعند الانتهاء تظهر رسالة تأكيد Rendered ... → out/hello.mp4. وبفتح مجلد out/hello.mp4 ستجد ملف فيديو حقيقيًا وصالحًا للتشغيل بأي مشغل وسائط متاح.

بإتمام هذه الخطوات الست، تكون قد طبقت مسار العمل بالكامل بنفسك: «التأكد من البيئة ← توضيح المتطلبات ← كتابة الأكواد تلقائيًا ← المعاينة في المتصفح ← التعديل باللغة الطبيعية ← الرندرة للتصدير النهائي». وإنتاج رسوم متحركة أكثر تعقيدًا في المستقبل يتبع نفس هذا المسار مع زيادة جولات التعديل وتوضيح المتطلبات بدقة.

💡 الخلاصة في جملة واحدة: بتطبيق الخطوات الست node --version ← تشغيل claude مع التوجيه ← توليد الأكواد ← المعاينة في المتصفح ← التعديل باللغة الطبيعية لملاحظة التحديث الفوري ← الرندرة للتصدير، تكون قد أتقنت مسار إنتاج الفيديو البرمجي بالكامل عمليًا.

---

06 من يجب عليه استخدامها ومن يجب عليه تجنبها

هذا القسم يقدم النصيحة الأكثر أهمية لتحديد موقفك — فالأداة لا تناسب الجميع، وسنوضح من تمثل له أداة فعالة ومن تمثل له إضاعة للوقت.

الخلاصة: يناسب مزيج Remotion 与 Claude Code الفيديوهات التي تتصف بـ «البرمجة، المعلمات، الرندرة الجماعية، والاعتماد على البيانات»؛ ولا يناسب الفيديوهات التي تتصف بـ «التصاميم الفريدة لمرة واحدة، التصوير الواقعي، والمونتاج الكثيف للأشخاص». وإذا كنت مترددًا، طابق موقفك مع الجدول التالي:

السيناريو	هل يناسبك أم لا	السبب
توليد فيديوهات «ملخص سنوي» مخصصة لكل مستخدم لآلاف المستخدمين	✅ مناسب جدًا	استخدام قالب موحد مع بيانات مختلفة ورندرتها جماعياً بالتكرار هو ملعب الأكواد البرمجية الرئيسي
فيديوهات الرسوم البيانية المتغيرة والنمو الرقمي (رسوم البيانات)	✅ مناسب جدًا	التحكم الدقيق في البيانات لتوجيه الرسوم عبر الأكواد، بدلاً من التثبيت اليدوي للإطارات
إنتاج عروض تقنية أو مقدمات شروحات للمبرمجين لمشاريعهم	✅ مناسب	سهولة تمثيل تظليل الأسطر، الكتابة في الطرفية، ورسوم الشعارات، وتفادي عناء تعلم AE
الرسوم المتحركة التي تتطلب تحكمًا دقيقًا وإدارة عبر إصدارات الأكواد	✅ مناسب	الفيديو يتحول لأكواد قابلة للإدارة بـ git والمراجعة والـ diff
إنتاج فيديوهات رحلات أو مناسبات اجتماعية vlog بدمج لقطات مصورة لأشخاص	❌ تجنبها تمامًا	هذا عمل مونتاج تقليدي ويناسبه Pr أو تطبيقات الهواتف، ولا شأن لـ Remotion به
إنتاج فيديو موسيقي إبداعي mv فريد ويعتمد على الإلهام لمرة واحدة	❌ تجنبها تمامًا	غياب قالب موحد لإعادة استخدامه، وتكلفة كتابة الأكواد تفوق عناء التعديل اليدوي بكثير
لا ترغب في استخدام سطر الأوامر أو يزعجك تثبيت البيئات البرمجية	⚠️ تجنبها	على الرغم من مساعدة Claude، إلا أن تثبيت Node.js وتشغيل الأوامر هو شرط لا بد منه

معيار الحكم يتلخص في سؤال واحد: هل هذا الفيديو هو «لوحة فنية فريدة لمرة واحدة»، أم «قالب موحد يستقبل بيانات مختلفة لإعادة استخدامه»؟ الفئة الأولى تتطلب استخدام برامج المونتاج التقليدية، والفئة الثانية هي التي يبرع فيها Remotion. والفيديو الدعائي المذكور في المثال يستحق كتابة الأكواد لأنك ستنتج فيديوهات دعائية لأدوات أخرى مستقبلاً — فامتلاك الكود يتيح لك تغيير النصوص والألوان لإنتاج فيديو جديد في ثوانٍ، وهنا تكمن الفائدة. أما إذا كنت يريد إنتاج فيديو واحد ولن تعود إليه مستقبلاً، فإن قضاء عشر دقائق لتعلم تطبيق مونتاج بسيط للهواتف سيكون أسرع بكثير.

وبكل صراحة: يميل من يتعلم هذه الآلية حديثًا إلى المبالغة في تقدير حاجته لاستخدامها مستقبلاً. السيناريو المتكرر هو: قيامه بتهيئة البيئة بحماس وإنتاج مقدمة مذهلة، ثم... يتوقف كل شيء — لغياب الحاجة الفعلية لـ «الرندرة الجماعية للفيديوهات» في عمله اليومي. ومهما كانت الأداة مذهلة، فبدون سيناريوهات استخدام حقيقية تظل مجرد لعبة للتسلية لمرة واحدة. لذا نصيحتنا العملية هي: لا تتعلم لمجرد التعلم فقط. اسأل نفسك أولاً «هل لدي حاجة متكررة لإنتاج فيديوهات تعتمد على نفس القالب وتغير البيانات؟» — إذا كانت الإجابة نعم، فابدأ بالتطبيق فورًا؛ وإذا كانت لا، فيكفي معرفة وجود هذه الإمكانية فقط، لتشغيلها عند مواجهة الحاجة مستقبلاً بالرجوع إلى هذا المقال وتطبيق الخطوات الخمس. وهذا هو السبب الفعلي لتصنيف المقال كـ «اختياري».

وهناك تكلفة خفية يجب التنبيه إليها: تستهلك الرندرة موارد الجهاز وتتطلب وقتًا。رندرة فيديو مدته 60 ثانية يحتوي على تأثيرات بصرية على لابتوب متوسط قد يستغرق دقيقتين أو ثلاث، وكلما زاد طول الفيديو وتأثيراته، زاد استهلاك المعالج وارتفعت حرارته وصوت مراوح التبريد. ولحسن الحظ يتوفر حل بسيط: عند بطء الرندرة، وجه Claude لإضافة معامل --concurrency لتفعيل تعدد الخيوط البرمجية (multithreading) لتسريع العملية لعدة أضعاف。

وإليك نصيحتين لتفادي الفخاخ الشائعة:

الأولى: تجنب الطلب منه إنتاج فيديو معقد للغاية في جملة واحدة。 إذا تسرعت في البداية وطلب منه «إنتاج خمسة مشاهد بتأثيرات انتقال مختلفة ومطابقة إيقاع الموسيقى» لفيديو طويل، فستتشابك الأكواد المولدة وتتعقد، وتصبح عملية تعديلها أصعب من بنائها من جديد. الأسلوب السليم هو — توجيهه لإنتاج نسخة مبسطة للغاية وتشغيلها بنجاح أولاً، ثم إضافة المشاهد والتأثيرات واحدًا تلو الآخر تدريجيًا. هذا يتماشى مع مبدأ «تفكيك المهام المعقدة» المشروح في المقال 16، وتزداد أهميته هنا عند إنتاج الفيديو.

الثانية: لا تقلق عند تجمد رسوم spring المرنة على «الإطار الأول فقط». في بعض الأحيان قد يتعطل تشغيل الرسوم المرنة التي تحتوي على تأخير زمني، ويرجع السبب لخلل معروف — حيث ينتج حساب التأخير قيمة إطارات سالبة يتم تمريرها لدالة spring. لا داعي للبحث في السبب التقني، بل صف العطل لـ Claude مباشرة قائلاً: «تتجمد هذه الحركة وتظهر في الإطار الأول فقط دون حركة»，وسيعرف كيفية معالجتها فورًا (بإضافة حماية تمنع وصول قيمة الإطارات لأرقام سالبة). وهذه هي الفائدة الكبرى للجمع بينهما: لا حاجة لحل المشاكل بنفسك، ويكفي وصف المشكلة بدقة ليقوم هو بحلها بالنيابة عنك.

💡 الخلاصة في جملة واحدة: معيار الحكم هو: هل الفيديو لوحة فنية لمرة واحدة (مونتاج تقليدي) أم قالب موحد يكرر استخدامه (Remotion)؛ ويبرع الأخير في رسوم البيانات والمقدمات الرقمية والرندرة الجماعية؛ وللمشاريع الطويلة شغل خيوط معالجة متوازية لتوفير الوقت.

---

07 ملخص

اطلعنا في هذا المقال على إمكانية فرعية مسلية لـ Claude Code — وهي توجيه لمساعدتك في «إنتاج الفيديو بالأكواد» بالاستعانة بـ Remotion.

دعنا نستعرض النقاط الأساسية معًا:

النقطة المراد فهمها	التوضيح	الفائدة باختصار
ما هو Remotion	إطار عمل يتيح كتابة الفيديوهات باستخدام React	الفيديو يتكون من إطارات صور ثابتة تُعرض بسرعة، مثل الدفتر الورقي
سبب دمجه مع Claude Code	تحول الفيديو لأكواد، وكتابة الأكواد تخصص Claude	تكتفي أنت بالمتطلبات والتقييم، ويتولى هو تهيئة المشروع وكتابة الرسوم وتعديل التفاصيل
المفاهيم الأساسية المطلوبة	الإطار (frame)، الاستيفاء (interpolate)، والمرونة (spring)	يكفي معرفتها وتحديد متطلباتك باللغة الطبيعية؛ وإجمالي الإطارات = عدد الثواني × fps
كيفية العمل	المتطلبات ← كتابة الأكواد ← المعاينة ← التعديل ← الرندرة للتصدير	تكرار حلقة «معاينة ← تعديل ← معاينة» هو مسار العمل الطبيعي
الفئة المستهدفة	الفيديوهات البرمجية والجماعية والتي تعتمد على البيانات	لا تناسب فيديوهات التصوير الواقعي والتصاميم الفريدة لمرة واحدة

يجب أن تكون قادرًا الآن على: شرح كيفية إنتاج Remotion للفيديو بالأكواد في جملة واحدة (تحويل الإطارات لصور React وعرضها بسرعة كالدفتير الورقي)، توضيح سبب تكامله الممتاز مع Claude Code (الفيديو يتحول لأكواد وكتابة الأكواد هي تخصص Claude)، فهم أدوار الإطار و interpolate و spring في الأكواد المولدة، تطبيق خطوات التمرين العملي لإنتاج ملف mp4 حقيقي من دليل فارغ، والأهم من ذلك — اتخاذ القرار حول ما إذا كانت هذه الآلية تستحق قضاء وقتك لتعلمها أم لا. وهذا هو الهدف الأساسي للمقال الإضافي: ليس مطالبتك باتقان التقنية بالكامل، بل إطلاعك على وجود هذا المسار لتجده وتستعين به عند الحاجة.

بانتهاء هذا المقال، تكون دورة «Claude Code للمبتدئين» بالكامل قد وصلت إلى خط النهاية. والكلمات التالية هي كلمة ختامية مهداة إليك لقراءتك ومثابرتك طوال هذه الرحلة.

---

08 كلمة ختامية: لقد قطعنا الرحلة كاملة بـ 53 مقالاً

أيها الأصدقاء، عند الوصول لنهاية هذا المقال الأخير، يجب أن أحييكم أولاً وأقول: رائع للغاية.

وبالنظر إلى الرحلة التي قطعناها معًا —

• المجموعة الأولى: بدأنا من «التعريف بـ Claude Code»، تهيئة البيئة، إعداد الحسابات، وتشغيل أول تمرين مبسط، لتنتقل من مرحلة السماع بالأداة لمرحلة امتلاكها وتشغيلها بين يديك.
• المجموعة الثانية: قمنا بربط الأداة ببيئات التطوير المتنوعة مثل VS Code و JetBrains ونسخ الويب وسطح المكتب، وتوجيهك لـ بدء استخدامها في مشاريعك الحقيقية — تهيئة المشاريع واستكشاف هياكلها.
• المجموعة الثالثة: ركزت على المهارات الأساسية للتحاور: كيفية صياغة الأسئلة، إرفاق الصور واللقطات، كتابة ملف CLAUDE.md، إدارة مساحات السياق، إعداد الصلاحيات، والالتزام بحدود الأمان. واتقان هذه المجموعة يرفعك لمرحلة «المستخدم المتمكن» لـ Claude Code.
• المجموعة الرابعة: قدمت لك خمسة أسلحة برمجية أساسية — بروتوكول MCP، الوكلاء الفرعيين (Subagents)، الإضافات (Plugins)، آليات الذاكرة، والمهارات (Skills)، بالإضافة لفرق الوكلاء (Agent teams)، وتوضيح متطلبات وسيناريوهات استخدام كل منها.
• المجموعة الخامسة والسادسة: تعمقت في الإعدادات المتقدمة للمنظومة والتطوير العملي: ملفات settings، أنماط المخرجات، الـ hooks، تشغيل سطر الأوامر，نقاط الفحص، التحكم بـ Chrome، العمليات المتوازية، التعامل مع Git، إجراءات GitHub Actions، وحزمة Agent SDK... لنقلك من مرحلة الاستخدام المعتاد لمرحلة الاحترافية التامة والأتمتة.
• المجموعة السابعة: المراجعة والتلخيص النهائي: الممارسات الجيدة، الأنماط المضادة، استكشاف الأخطاء وإصلاحها، مسرد المصطلحات، والمقال الإضافي الحالي حول Remotion.

ثلاثة وخمسون مقالاً، بدأت من مجرد أداة بسيطة لسطر الأوامر، وانتهت بمنظومة وكلاء متكاملة تندمج بالكامل في مسار عملك اليومي.

وبكل صراحة — لم يكن الهدف من هذه الدورة هو حثك على «حفظ الأوامر» إطلاقًا. فالأوامر تتغير والنسخ تتحدث والميزات الجديدة تضاف باستمرار (ويمكنك ملاحظة سرعة تحديث سجل التغييرات changelog الرسمي). ولكن الفائدة الحقيقية التي نسعى لترسيخها في ذهنك هي «منهجية وأسلوب التعاون مع الذكاء الاصطناعي»: معاملته كشريك عمل بجانبك وليس مجرد محرك بحث، شرح المتطلبات بدقة، التحقق من الخطوات الهامة، تثبيت القواعد المتكررة، والوثوق به مع وضع قيود للأمان. هذه المنهجية ستبقى صالحة وفعالة وتعيش لفترة أطول بكثير من صلاحية أي أمر برمجي محدد.

وفي النهاية، لا تعامل هذه المقالات الثلاثة والخمسين كخط نهاية، بل كخط بداية لرحلتك. فالأدوات جامدة بطبيعتها، والمهارة الحقيقية تكتسبها عند استخدامها لحل مشاكلك الواقعية. ابدأ ببناء مشروع صغير كنت ترغب في بنائه وتكاسلت لضيق الوقت، ودع Claude Code يرافقك بدءًا من السطر الأول وحتى رفعه على الويب — وحينها ستتعلم وتكتسب مهارات تفوق ما حصلت عليه بقراءة الدورة بالكامل.

والطريقة المثلى للتدريب وإتقان الصنعة تظل دائمًا: أغلق الشروحات، افتح الطرفية，اكتب claude，وابدأ بإنجاز عملك الخاص。

咱们，后会有期。

---

قراءات موصى بها

• المهارات (Agent Skills): تزويد Claude بحقيبة قدرات مخصصة جاهزة للاستدعاء
• التطبيق العملي للمبتدئين: أخذ متطلب حقيقي وتطبيقه بدءًا من السطر الأول وحتى التسليم الكامل
• مسرد المصطلحات (صديق للمبتدئين): ترجمة مصطلحات هذه الرحلة إلى لغة مفهومة دفعة واحدة