كيف بيصير الفيديو كود؟
Remotion مكتبة بتحوّل كود React لفيديو: كل فريم صفحة ويب صغيرة بتترسم وبتتصوّر. يعني الحركة، الألوان، النصوص، والتوقيت كلها أسطر كود. وأي شي أسطر كود، Claude Code بيكتبه. إنت بتوصف الإعلان بجملة، هو بيكتب المشروع، بيشغّل المعاينة، وبيصلّح اللي بيطلع غلط.
بدك Node.js (نسخة LTS من موقعه الرسمي) وClaude Code مثبّت. إذا لسا ما ثبّته: دليل التثبيت.
مشروع Remotion + Claude Code جوّاه
افتح الـ terminal بالمجلد اللي بدك المشروع فيه، واعمل مشروع Remotion جديد (بيسألك عن القالب: اختار Blank أو Hello World):
npx create-video@latest
ادخل على مجلد المشروع وشغّل Claude Code جوّاه:
cd my-video
claude
- ليش جوّا المجلد؟ عشان يشوف ملفات المشروع ويعدّلها مباشرة بدل ما تنسخ وتلصق.
- الصوت والصور بتحطها بمجلد public/ جوّا المشروع، وهو بيستعملها بـ staticFile().
علّم Claude أسلوب Remotion (اختياري بس بيفرق)
Remotion نازلة مهارات رسمية لـ Claude Code: أفضل الممارسات، الترجمات، الخرائط، التصدير… أمر واحد بيثبّتها بالمشروع (بتنحط بمجلد .agents/skills وبيربطها بـ .claude/skills لحالها):
npx remotion skills add
أو من خارج مشروع Remotion:
npx skills add remotion-dev/skills
بعدها لما تكتب البرومت، Claude بيستعمل مهارة /remotion-best-practices لحاله (وفي مهارات أخص، مثلاً /remotion-create أو /remotion-render). الفرق: كود أنظف، حركات spring صح من أول مرة، وتصدير بدون مفاجآت.
هاد البرومت اللي بدأت فيه إعلان «مَوعِد». بدّل اللي بين الأقواس المربعة بس.
البرومت اللي بدأت فيه (انسخه وبدّل اسم منتجك)
اعملّي إعلان موشن جرافيك عمودي 1080×1920، 12 ثانية، لتطبيق اسمه «[اسم منتجك]» بيعمل [شو بيعمل بجملة].
المشاهد: (1) أيقونة التطبيق بتطلع مع حلقة ضو واسم التطبيق بحركة كلمة كلمة، (2) جملة «[الفايدة الأساسية]» وموبايل مرسوم بالكود جواته شاشة التطبيق وكبسة على زر، (3) ثلاث إشعارات بتطلع ورا بعض، (4) شاشة نهاية: الأيقونة والاسم وجملة قصيرة.
الألوان: [لونين]، خلفية غامقة، خط عربي عريض. كل الحركات بالكود (spring وeasing)، وفلاش خفيف بين المشاهد. حط مكان للموسيقى، وخلّي كل مشهد بين 2 و4 ثواني.
اعرضلي الخطة بالأول، وبعد ما أوافق اكتب الكود وشغّل المعاينة.
- «اعرضلي الخطة بالأول» هي الجملة اللي بتوفّر عليك أكتر شي: بتشوف المشاهد والتوقيت قبل ما يكتب سطر كود.
- 12 ثانية و4 مشاهد مقصودة: إعلان الريلز بدو يوصل الفكرة قبل ما الناس تسحب. مشهد بين 2 و4 ثواني هو الإيقاع المريح.
- «موبايل مرسوم بالكود»: ما بدك صورة موبايل من النت. Claude بيرسمه بـ CSS وبيحط «شاشة التطبيق» جوّاه، فبتقدر تغيّر محتواها بجملة.
مثال معبّى (إعلان «مَوعِد» نفسه):
اعملّي إعلان موشن جرافيك عمودي 1080×1920، 12 ثانية، لتطبيق اسمه «مَوعِد» بيعمل حجوزات للعيادات والصالونات بدون مكالمات.
المشاهد: (1) أيقونة التطبيق بتطلع مع حلقة ضو واسم التطبيق بحركة كلمة كلمة، (2) جملة «حجوزاتك… بلا مكالمات» وموبايل مرسوم بالكود جواته شاشة التطبيق وكبسة على زر «احجز»، (3) ثلاث إشعارات تذكير بالمواعيد بتطلع ورا بعض، (4) شاشة نهاية: الأيقونة والاسم وجملة «احجز بثانيتين».
الألوان: تيل #2DD4BF وعنبري #F59E0B، خلفية غامقة، خط عربي عريض. كل الحركات بالكود (spring وeasing)، وفلاش خفيف بين المشاهد. حط مكان للموسيقى، وخلّي كل مشهد بين 2 و4 ثواني.
اعرضلي الخطة بالأول، وبعد ما أوافق اكتب الكود وشغّل المعاينة.
المشاهد الأربعة وشو بيكتب Claude ورا كل واحد
مش لازم تقرأ الكود، بس لما تعرف شو بيصير ورا كل مشهد بتعرف شو تطلب بالتعديل:
| المشهد | شو بيبين | شو بيكتب Claude |
|---|---|---|
| 1 · الشعار | الأيقونة بتكبر مع حلقة ضو، والاسم بيطلع كلمة كلمة | spring() على حجم الأيقونة، وتأخير صغير لكل كلمة |
| 2 · الفايدة | الجملة الأساسية وموبايل جوّاه شاشة التطبيق وكبسة زر | موبايل بـ CSS، وinterpolate() لحركة الكبسة |
| 3 · الإشعارات | ثلاث بطاقات بتنزل ورا بعض | <Sequence> لكل بطاقة بتأخير 10–15 فريم |
| 4 · النهاية | الأيقونة والاسم وجملة قصيرة | نفس عناصر المشهد 1 بوضعية هادية + مكان للموسيقى |
وبالخلفية في ملف واحد بيعرّف الفيديو كله: القياس، الفريمات بالثانية، والمدة. هاد اللي بتغيّره لما تطلب نسخة أفقية ليوتيوب:
<Composition
id="MawidAd"
component={MawidAd}
width={1080}
height={1920}
fps={30}
durationInFrames={12 * 30}
/>
والصوت: حط الملفات بـ public/ واطلب منه يستعمل <Audio> من @remotion/media (النسخة الحديثة؛ القديمة من remotion صارت اسمها Html5Audio):
import {staticFile} from 'remotion';
import {Audio} from '@remotion/media';
<Audio src={staticFile('music.mp3')} />
المعاينة والتصدير
المعاينة (بيفتح Remotion Studio بالمتصفح: بتشوف الإعلان فريم فريم وبتقدر تسحب الزمن)
npm run dev
التصدير لـ MP4 (بدّل MawidAd باسم الـ Composition عندك)
npx remotion render MawidAd out/ad.mp4
- أو اطلبها منه: «شغّل المعاينة» و«صدّر الفيديو» جمل عادية بـ Claude Code، هو بينفّذ الأوامر وبيعطيك مسار الملف.
- بدون اسم Composition الأمر بيسألك تختار من قائمة، وبدون مسار بيحط الناتج بمجلد out/.
عدّل بالحكي: جمل جاهزة
هون الفرق الحقيقي عن المصمم. كل جملة من هدول بتاخد دقيقة وإعادة تصدير:
الكود بيرسم الحركة. الصوت وصور المنتج بتجيبهم من برا وبتحطهم بـ public/.
ElevenLabs للصوت · Google Flow للصور
بعد ما تحط الملفات، البرومت الإضافي سطر واحد: «الصوت بـ public/voice.mp3 والموسيقى بـ public/music.mp3، خلّي الموسيقى أوطى من الصوت وابدأها بعد أول ثانية».
الرخصة والتكلفة
| الأداة | التكلفة |
|---|---|
| Remotion | مجانية للأفراد، والشركات لحد 3 أشخاص، والجمعيات غير الربحية. شركة 4 أشخاص وأكتر بدها Company License من remotion.pro. |
| Claude Code | ضمن اشتراكك (Pro أو أعلى، أو حساب Console). الإعلان كله جلسة وحدة قصيرة. |
| ElevenLabs | بالحروف: 12 ثانية تعليق + مؤثرات = جزء بسيط من الخطة المجانية أو الأساسية. |
| Google Flow | الصور الثابتة بدون كريدت أو بكريدت قليل حسب خطتك؛ ما في فيديو مولّد هون، كل الحركة بالكود. |
يعني الإعلان اللي كان بيكلّف مصمم وأسبوع، صار ساعة ومشروع بتعيد استعماله لكل منتج.
أخطاء بتطلّع الإعلان رخيص
- ملفات الصوت مش بـ public/: الكود ما بيلاقيها، والمعاينة صامتة.
- تنسى تحدّد القياس: بيطلع أفقي 1920×1080 وبتضطر تعيد. اكتب 1080×1920 بأول سطر.
- تعدّل الكود بإيدك وتخرب: خلّي التعديل بالحكي، وإذا خرب شي: «رجّع آخر نسخة كانت شغالة».