مهارة Claude Code Remotion: أنشئ فيديوهات بالكود (أمثلة)

قد يبدو كتابة فقرة واحدة والحصول على ملف MP4 مُصيَّر في المقابل أشبه بحيلة، إلى أن تراه يحدث فعلًا. مع مهارة Claude Code Remotion، تصف المشهد بلغة إنجليزية بسيطة، فيكتب الوكيل مكوّنات React، ويحوّل Remotion كل إطار إلى ملف فيديو حقيقي. لا خط زمني تسحبه، ولا نافذة تصدير تخفي الإعداد الذي تحتاجه. يعرض هذا المقال طريقة التثبيت، والأوامر النصية الفعّالة، وأكواد جاهزة للنسخ، والمزالق التي تستنزف وقتًا طويلًا.

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

ماذا يفعل Remotion فعليًا

Remotion إطار عمل يصيّر الفيديو من أكواد React. تكتب المكوّنات، فيشغّلها Remotion إطارًا تلو الآخر داخل متصفح بلا واجهة، ويلتقط كل إطار، ثم يجمع النتيجة في ملف MP4 أو WebM أو GIF أو صورة ثابتة. كل ما تستطيع صفحة الويب رسمه، مثل SVG وتخطيطات CSS والمخططات والخطوط الويب واللوحات القماشية (canvas)، يصبح مادة للفيديو.

الفيديو دالة React

تلخّص وثائق Remotion الفكرة المحورية في سطر واحد: الفيديو دالة لصور عبر الزمن. يقرأ المكوّن رقم الإطار الحالي، ويعيد شكل ذلك الإطار. عندما تتغير قيمة من إطار إلى آخر، تحصل على رسوم متحركة.

يحتاج كل تكوين (composition) إلى أربعة أرقام:

• width و height بالبكسل
• fps، أي عدد الإطارات في الثانية
• durationInFrames، أي المدة الإجمالية بالإطارات

الإطار الأول هو 0 والإطار الأخير هو durationInFrames - 1. مقطع مدته 5 ثوانٍ بمعدل 30 fps يساوي 150 إطارًا. هذا الحساب مهم لاحقًا، لأنه أول ما يخطئ فيه الأمر النصي الغامض.

لماذا تغيّر المهارة النتائج

يكتب Claude Code بالفعل React جيدًا. ما لا يعرفه افتراضيًا هو قواعد Remotion الداخلية. يجب أن تُقاد الرسوم المتحركة بواسطة useCurrentFrame()، لأن انتقالات CSS لا تُصيَّر بشكل حتمي. ينبغي تحميل الوسائط المحلية باستخدام staticFile(). تنتمي مقاطع الفيديو إلى <OffthreadVideo>، لا إلى وسم <video> عادي. إن أخطأت في واحدة من هذه، تبدو المعاينة سليمة بينما يفشل التصيير النهائي.

المهارة مجموعة من التعليمات يحمّلها الوكيل حين يكتشف مهمة فيديو. تشمل أفضل ممارسات Remotion، وإنشاء المشروع والتكوينات، وتشغيل Studio، والتصيير، وإضافات مثل التسميات التوضيحية وترقية الحزم. يتوقف الوكيل عن التخمين، ويبدأ باتباع أعراف الإطار.

💡 المهارة إرشاد وليست أداة تصيير. مشروعك وتثبيت Node.js لديك وRemotion نفسه ما زالت هي التي تنتج الفيديو. المهارة فقط تمنع الوكيل من كتابة أكواد تتعارض مع الإطار.

تثبيت المهارة في خمس دقائق

تحتاج إلى Node.js وطرفية و Claude Code، الذي يتطلب خطة Anthropic مدفوعة أو نقاط API. كل شيء آخر يُثبَّت من npm.

إنشاء المشروع

npx create-video --yes --blank my-video
cd my-video
npm install

نسخ الأمر النصي

يمنحك الخيار --blank مشروعًا بسيطًا بدلًا من نسخة تجريبية، فلا يكون أمام الوكيل ما يفكّه قبل أن يبدأ.

إضافة المهارة

من داخل مجلد المشروع:

npx remotion skills add

نسخ الأمر النصي

توجد بديلان. تُثبَّت حزمة المهارات بالأمر npx skills add remotion-dev/skills، ويُثبَّت ملحق Claude Code الرسمي بهذين الأمرين:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

نسخ الأمر النصي

تشغيل Studio والوكيل

افتح طرفيتين في مجلد المشروع. أبقِ المعاينة تعمل في الأولى، وشغّل الوكيل في الثانية:

# terminal 1
npm run dev

# terminal 2
claude

نسخ الأمر النصي

يفتح Studio معاينة في المتصفح تُحدَّث في كل مرة يحفظ فيها الوكيل ملفًا. ابدأ جلسة Claude Code جديدة بعد التثبيت، وإلا فقد لا تُحمَّل المهارة. تظهر المهارة كأوامر شرطة مائلة: /remotion-create و/remotion-studio و/remotion-render و/remotion-docs و/remotion-best-practices، وهو الأمر الذي يجمع كل الأوامر الأخرى حين لا تكون متأكدًا أيها ينطبق.

أوامر تنتج فيديوهات جيدة

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

صيغة الأمر

قل ما يجب تجنبه. عبارة "بلا تدرجات، بلا رموز تعبيرية، وبلونين على الأكثر" تمنع من إعادة العمل أكثر من أي تعليمة إيجابية.

مثال: بطاقة إطلاق منتج

هذا الأمر مبني على النموذج الموجود في شرح Tella:

/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.

نسخ الأمر النصي

النتيجة متوقعة: ثلاثة مكوّنات للمشاهد، وتكوين جذر من 450 إطارًا، وكائن defaultProps يحمل النصوص. عاين الناتج في Studio، ثم عدّل بمتابعات قصيرة مثل "اجعل العنوان يدخل بعد 10 إطارات" أو "أبطئ الزنبرك في دعوة الإجراء".

مثال: مخطط بيانات متحرك

فيديوهات البيانات هي الحالة التي يتفوق فيها الكود على محرر الخط الزمني، لأن الأرقام مدخلات حقيقية وليست أعمدة مرسومة يدويًا.

Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.

نسخ الأمر النصي

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

مثال: تسميات توضيحية على مقطع

تتضمن المهارة إرشادات حول التسميات التوضيحية، لذا يعمل أمر مثل هذا جيدًا: "أضِف تسميات توضيحية كلمة بكلمة إلى public/clips/interview.mp4 باستخدام captions.json. أبرز الكلمة النشطة باللون الأصفر، وأبقِ التسميات داخل الثلث السفلي." زوّد الوكيل بتوقيتات كلمات حقيقية في ملف بدلًا من أن تطلب منه اختراعها. التوقيتات المخترعة تنحرف عن التزامن خلال ثوانٍ.

أمثلة أكواد تستحق النسخ

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

مشهد عنوان بزنبرك

import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const TitleCard: React.FC<{title: string}> = ({title}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  const enter = spring({frame, fps, config: {damping: 200}});
  const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

  return (
    <AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
      <h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
        {title}
      </h1>
    </AbsoluteFill>
  );
};

نسخ الأمر النصي

تعطي قيمة damping البالغة 200 دخولًا سلسًا بلا ارتداد. تحوّل interpolate الإطارات من 0 إلى 15 إلى شفافية من 0 إلى 1، وتمنع extrapolateRight: 'clamp' القيمة من التجاوز عن 1 بعد ذلك.

تسلسلات لتوقيت المشاهد

import {AbsoluteFill, Sequence} from 'remotion';

export const LaunchVideo: React.FC = () => (
  <AbsoluteFill>
    <Sequence from={0} durationInFrames={60}>
      <TitleCard title="Notes, finally fast" />
    </Sequence>
    <Sequence from={60} durationInFrames={240}>
      <ProductDemo />
    </Sequence>
    <Sequence from={300} durationInFrames={150}>
      <CallToAction />
    </Sequence>
  </AbsoluteFill>
);

نسخ الأمر النصي

داخل Sequence، يعود useCurrentFrame() إلى الصفر، فيمكن كتابة كل مشهد واختباره وحده. عند 30 fps تستمر هذه الكتل 2 و8 و5 ثوانٍ، وهو ما يساوي 450 إطارًا في أمر الإطلاق.

خصائص لنسخ الإصدارات بالدفعات

import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';

export const Root: React.FC = () => (
  <Composition
    id="TitleCard"
    component={TitleCard}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{title: 'Hello from code'}}
  />
);

نسخ الأمر النصي

الآن استبدل النص وقت التصيير، وكرّر على قائمة:

for name in "Spring sale" "Black Friday" "New arrivals"; do
  npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done

نسخ الأمر النصي

ثلاثة فيديوهات من مكوّن واحد، دون فتح أي محرر.

💡 قل للوكيل منذ البداية: "كل نص ولون ورقم يذهب إلى الخصائص (props)." هذا لا يكلّف شيئًا، ويجعل إصدارات الدفعات واختبارات A/B والترجمات سهلة لاحقًا.

كيفية استخدام Seedance 2.0 على PicassoIA

يحرّك Remotion ما تعطيه له: النص، والأشكال، والمخططات، والصور، والمقاطع. وللحصول على لقطات تبدو حقيقية أو على مشاهد مصورة أوضح، تُحضر المادة من الخارج. تغطي PicassoIA الطرفين، بصفحة Claude Sonnet 5 لصياغة مواصفات المشاهد والأكواد، وصفحة Seedance 2.0 لتوليد المقاطع.

ارسم المشاهد المصورة أولًا

1. افتح صفحة Claude Sonnet 5 على PicassoIA.
2. ألصق تعليمة نظام مثل: "أنت تكتب مواصفات مشاهد Remotion. امنح كل مشهد اسمًا، وعدد إطارات بمعدل 30 fps، والنص الدقيق على الشاشة، وأسلوب الحركة."
3. اضبط effort على high عندما تحتاج إلى عدد إطارات دقيق عبر مشاهد كثيرة، وعلى low لإعادة الكتابة السريعة. اترك max tokens على الإعداد الافتراضي 8192 للمواصفات الطويلة.
4. صِف الفيديو في جملتين أو ثلاث وشغّل الطلب.
5. ألصق المواصفات الناتجة في Claude Code كأول رسالة لك بعد /remotion-create.

يقبل النموذج أيضًا صورة، لذا يمكن لقطة شاشة من واجهة منتجك أن تغذي المشاهد المصورة مباشرة.

توليد اللقطات

1. افتح صفحة Seedance 2.0.
2. اكتب أمرًا للقطة واحدة فقط: الشخص، والحركة، وحركة الكاميرا، والإضاءة.
3. اختر aspect ratio الذي يطابق التكوين: 16:9 لدقة 1920x1080، أو 9:16 للعمودي.
4. اضبط duration بالثواني، واترك resolution على الإعداد الافتراضي 720p.
5. أوقف Generate Audio إذا كنت ستضع موسيقاك أو مسار صوتك الخاص. أبقه مفعّلًا للصوت المحيط.
6. نزّل ملف MP4 واحفظه في public/clips/ داخل مشروع Remotion.

للحفاظ على هوية بصرية متسقة للعلامة، ارفع صورة ثابتة كأول إطار. يتعامل Seedance 2.0 معها كصورة افتتاحية للمقطع.

💡 ولّد لقطة واحدة لكل مقطع، ثم ادمجها معًا داخل Remotion. المقاطع القصيرة ذات حركة كاميرا واضحة أفضل من مقطع طويل واحد يضم خمس أفكار.

أدخل المقاطع إلى Remotion

import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';

export const HarborShot: React.FC = () => (
  <AbsoluteFill>
    <OffthreadVideo src={staticFile('clips/harbor.mp4')} />
  </AbsoluteFill>
);

نسخ الأمر النصي

ثم أضف النصوص والأشرطة السفلية والتسميات فوق اللقطات بواسطة React عادي. للمسات نهائية خارج Remotion، تناسب هذه الصفحات سير العمل:

التصيير وإصلاح المشكلات

Studio للتكرار، وسطر الأوامر للمخرجات. هذه هي الأوامر التي ستستخدمها أكثر:

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

• المهارة لا تظهر. أعد التثبيت من جذر المشروع، ثم ابدأ جلسة جديدة.
• المعاينة لا تبدأ. شغّل npm install أولًا، ثم تحقق في الطرفية من إصدار Node.js أو تعارض المنفذ.
• الوكيل يعيد كتابة نصف المشروع. ضيّق الطلب: "عدّل فقط src/scenes/Demo.tsx."
• المعاينة تعمل لكن التصيير يفشل. تحقق من الخطوط والوسائط البعيدة ومسارات الأصول. الملفات الخارجية تتصرف أثناء التصيير بشكل مختلف عنه في تبويب المتصفح.
• التوقيت يبدو خاطئًا. الإطارات والثواني اختلطت. اطلب من الوكيل أن يذكر معدل الإطارات وحساب الإطارات في تعليق فوق كل Sequence.

حين يستمر الوكيل في التخمين، يمنحه /remotion-docs الوثائق الرسمية ليتحقق بها.

التكلفة وأين تقع الحدود

يحدد ترخيص Remotion ما إذا كان هذا مجانيًا بالنسبة لك. وفقًا لصفحة ترخيص المشروع، فهو مجاني للأفراد، وللمنظمات الربحية التي لا يتجاوز عدد موظفيها 3، وللمنظمات غير الربحية، ولمن يقيّمه. تحتاج الشركات الأكبر إلى ترخيص للشركات. وقت الكتابة، تعرض Remotion هذه المستويات:

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

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

أنشئ أول مقطع لك اليوم

ابدأ بشيء صغير. أنشئ المشروع، وأضف المهارة، واطلب بطاقة عنوان مدتها خمس ثوانٍ بنصك الخاص. وبعد أن تُصيَّر، طوّرها: أضف مشهدًا، ومرّر النص كخصائص، ثم كرّر على قائمة لإنتاج عشرة إصدارات.

ثم أدخل مادة خارجية. ولّد خلفية متكررة بواسطة Seedance 2.0، وسجّل نصًا بواسطة Speech 2.8 HD، ودع Remotion يجمع كل شيء بتوقيت دقيق. تفضّل الصور الثابتة؟ أنشئ صورك وفنّ مشاهدك على PicassoIA عبر قائمة النماذج الكاملة وأدرجها في public/ كخلفيات لتكويناتك. جرّب، وكسّر، وأعد التصيير. الفيديو الذي يعيش في الكود يكلّف دقيقة لإصلاحه، فجرّب النسخة التي ما كنت لتجربها على خط زمني أبدًا.