كيف بيصير الريل كود؟
Remotion مكتبة بتحوّل كود React لفيديو: كل مشهد صفحة ويب صغيرة، وكل ثانية 30 فريم بيرسمهم الكود. وClaude Code هو اللي بيكتب هالكود عنك من جملة عربية. يعني بدل تايملاين وماوس، عندك ملف نصي وأمر تصدير.
01
إنت
بتكتب نص الريل بلهجتك، وبتحط ملف الصوت بمجلد public.
02
Claude Code
بيكتب المشاهد والترجمة والحركة كود، وبيشغّل المعاينة ويصلّح الأخطاء.
03
Remotion
بيطلّع MP4 عمودي 1080×1920 جاهز للرفع.
ليش كود مش برنامج مونتاج؟ لأن التعديل بيصير بجملة («كبّر الترجمة»، «خلّي المشهد التالت أسرع»)، والريل الجاي بياخد دقايق لأنه نفس القالب بنص جديد. أول ريل بياخد وقت، والعاشر بياخد قهوة.
بدك إعلان منتج موشن جرافيك بدل ريل حكي؟ هداك إله دليله: إعلان «مَوعِد» بـ Claude Code. وهون التركيز على ريل بصوتك وترجمة كلمة بكلمة.
مرة وحدة بس
أمرين وبتصير جاهز. كل الريلز الجاية بنفس المشروع.
1
مشروع Remotion + Claude Code جوّاه
بدك Node.js (نسخة LTS من موقعه الرسمي) وClaude Code مثبّت (دليل التثبيت: المثبّت الرسمي ما بده Node أصلاً). بعدها بالتيرمنال:
اعمل مشروع Remotion جديد (بيسألك عن القالب: اختار Hello World، ولما يسألك عن Agent Skills اختار نعم)
npx create-video@latest
ادخل على المجلد وشغّل Claude Code جوّاه
cd my-video
claude
- ليش جوّا المجلد؟ عشان يشوف ملفات المشروع ويعدّلها مباشرة بدل ما تنسخ وتلصق كود.
- ما اخترت Agent Skills بالمعالج؟ ضيفها بعدين بأمر
npx remotion skills add: هي تعليمات رسمية من Remotion بتخلي Claude يكتب الكود بطريقتهم الصح. - أول مرة بس: من هون ورايح كل ريل = نفس المشروع، برومت جديد، وملف صوت جديد.
2
صوتك وموسيقاك بمجلد public
الكود ما بيشوف غير اللي جوّا مجلد public/ بالمشروع. حط فيه ملفين قبل ما تكتب البرومت:
| الملف | شو هو | من وين |
|---|---|---|
| public/voice.mp3 | صوتك وإنت بتقرا نص الريل | تسجيل من جوالك، أو صوت مولّد (أنا بستعمل ElevenLabs) |
| public/music.mp3 | موسيقى خفيفة تحت الصوت | أي موسيقى عندك حق استعمالها |
الصوت أول، الكود بعدين. طول الريل والترجمة كلها بتنبني على ملف الصوت. سجّل النص كامل بنفس الترتيب اللي رح تحطه بالبرومت، وبعدها خلّي Claude يطلّع توقيت كل كلمة منه.
انسخ، بدّل الأقواس، ابعت
بالعربي عادي. الشي الوحيد اللي بالإنجليزي أسماء الملفات والألوان.
3
البرومت الكامل (انسخه وبدّل اللي بين الأقواس)
الصقه بجلسة Claude Code جوّا المشروع. آخر سطر فيه هو الأهم: بيطلب خطة قبل الكود.
بدي ريل انستغرام عمودي بـ Remotion: 1080×1920، 30 فريم بالثانية، ومدته حسب طول ملف الصوت public/voice.mp3 (حوالي 30 ثانية)، عن: [فكرتك بجملة وحدة].
نص الريل بلهجتي، بنفس ترتيب الصوت:
[الصق نص الريل هون جملة بسطر. أو: اكتبلي 6 جمل قصيرة: هوك، المشكلة، أثرها، الحل، دليل، ودعوة للتعليق بكلمة «…»]
المطلوب:
1. أول فريم جاهز ومقروء: عنوان الهوك ظاهر من أول ثانية بدون انتظار.
2. كل جملة = مشهد بين 3 و5 ثواني، والصورة بتتغيّر مع كل جملة (خلفية، أيقونة كبيرة، أو رقم).
3. ترجمة كلمة بكلمة تحت: طلّع توقيت الكلمات من ملف الصوت، خط عريض، والكلمة اللي بتنحكى ملوّنة.
4. عنوان ثابت فوق الترجمة بيلخّص كل مشهد بكلمتين.
5. ألواني: [مثلاً تيل #2DD4BF وعنبري #F59E0B على خلفية غامقة #0B0F14]، وخط عربي واضح والاتجاه من اليمين لليسار.
6. الصوت: public/voice.mp3 من أول فريم. الموسيقى public/music.mp3 بتبلّش بعد 3 ثواني وصوتها واطي تحت الصوت.
7. آخر مشهد: «اكتب [الكلمة] بالتعليقات» بخط كبير مع سهم لتحت.
8. حركة بسيطة بس: دخول العناصر بنبضة خفيفة، بدون انتقالات معقّدة.
اعرضلي خطة المشاهد بالأول (رقم المشهد، الجملة، شو بيبين على الشاشة، المدة). بعد ما أوافق: اكتب الكود، شغّل المعاينة، وصلّح أي خطأ بيطلع بدون ما تسألني.
- النص قبل كل شي: لو ما عندك نص، خلّيه يكتبلك 6 جمل بالصيغة اللي بالبرومت، سجّلهم بصوتك، وبعدها ارجع كمّل.
- «حسب طول ملف الصوت»: أهم من أي رقم ثواني. الريل بيطلع بطول صوتك بالضبط، لا مقصوص ولا فاضي بالآخر.
- «بدون ما تسألني»: بيخليه يشغّل المعاينة ويقرا الأخطاء ويصلّحها لحاله بدل ما يوقف عند كل خطأ.
4
شو بيكتب Claude ورا كل بند
مش لازم تفهم الكود، بس لما تعرف أسماء القطع بتقدر تطلب تعديل دقيق. هاي الخريطة من البرومت للكود:
<Composition width={1080} height={1920} fps={30} />
المقاس والسرعةالبند الأول: ريل عمودي 1080×1920 بـ 30 فريم. مدة الريل durationInFrames بيحسبها من طول الصوت.
<Sequence from={…} durationInFrames={…}>
كل مشهدالبند 2: كل جملة بتصير Sequence بيبلّش من توقيت أول كلمة فيها.
import {Audio} from '@remotion/media'
الصوت والموسيقىالبند 6:
<Audio src={staticFile("voice.mp3")} />. حزمة @remotion/media هي الموصى فيها اليوم للصوت.@remotion/captions + Whisper
ترجمة كلمة بكلمةالبند 3: بيطلّع توقيت الكلمات بـ
@remotion/install-whisper-cpp (محلياً) أو @remotion/openai-whisper، وبيعرضها بـ createTikTokStyleCaptions.spring() · interpolate()
الحركةالبند 8: نبضة الدخول spring، والتلاشي والانزلاق interpolate على رقم الفريم من useCurrentFrame().
<AbsoluteFill style={{direction:'rtl'}}>
العربي صحالبند 5: اتجاه النص من اليمين، وخط عربي محمّل بالمشروع. بدونها الترجمة بتطلع مقلوبة أو مقطّعة.
شوف، عدّل، صدّر
أمرين كمان، أو اطلبهم منه بجملة.
5
المعاينة والتصدير
المعاينة (بيفتح Remotion Studio بالمتصفح: بتشوف الريل فريم فريم وبتعدّل)
npm run dev
التصدير (بدّل MyReel باسم الـ Composition اللي سمّاه Claude)
npx remotion render MyReel out/reel.mp4
- أو اطلبها منه: «شغّل المعاينة» و«صدّر الفيديو» جمل عادية بـ Claude Code، هو بينفّذ الأوامر وبيعطيك مسار الملف.
- بدون اسم Composition الأمر بيسألك تختار من قائمة، وبدون مسار بيحط الناتج بمجلد
out/. - أول تصدير بطيء شوي (بيجهّز المتصفح اللي بيرسم الفريمات)؛ اللي بعده أسرع.
6
عدّل بالحكي: جمل جاهزة
هون الفرق الحقيقي عن المونتاج اليدوي. كل جملة من هدول بتصير تعديل بالكود ومعاينة جديدة:
كبّر الترجمة 20% وخلّي الكلمة الملوّنة بالعنبري بدل التيل.
المشهد التالت طويل: قصّه ليبلّش مع كلمة «المنافس».
بدّل خلفية المشهد الأول بتدرّج غامق أزرق، وحط رقم «2:00» كبير بالنص.
الموسيقى عالية: نزّلها للنص لما أحكي، ورجّعها بآخر مشهد.
آخر مشهد: خلّي كلمة «ريل» تنبض كل ثانية وضيف سهم لتحت.
اعمل نسخة ثانية من الريل بنفس التصميم بس بهالنص الجديد: [النص].
«عدّل الريل شوي»ما بيعرف شو بدك. بيغيّر شي عشوائي وبتضيع وقت.
«المشهد التالت، الترجمة، أكبر 20%»مشهد + عنصر + قيمة. تعديل واحد بكل رسالة.
7
خلّيه يحفظ طريقته: Skill + CLAUDE.md
لما يطلع ريل عاجبك، لا تخلي الطريقة تروح مع الجلسة. شغلتين:
1. الأسلوب الثابت بملف CLAUDE.md (Claude بيقراه أول كل جلسة بالمشروع)
اكتب ملف CLAUDE.md بجذر المشروع فيه أسلوب ريلزي الثابت: المقاس 1080×1920 بـ 30 فريم، الألوان [ألوانك]، الخط العربي اللي استعملناه، شكل الترجمة (عريض، الكلمة المنطوقة ملوّنة)، والموسيقى بتبلّش بعد 3 ثواني. أي ريل جديد بهالمشروع يمشي على هالقواعد بدون ما أعيدها.
2. الطريقة كاملة كـ Skill (أمر بتناديه بـ /reel)
احفظ طريقة عمل الريل اللي عملناها هلّأ كـ skill اسمها reel بمجلد .claude/skills/reel/SKILL.md: الوصف «بيعمل ريل انستغرام عمودي من نص + ملف صوت»، والخطوات: اقرا النص، طلّع توقيت الكلمات من public/voice.mp3، ابني المشاهد بنفس القالب، شغّل المعاينة، وصدّر لمجلد out. لما أكتب /reel مع نص جديد، نفّذها من أولها.
- الـ Skill مجلد وملف:
.claude/skills/reel/SKILL.mdللمشروع، أو~/.claude/skills/reel/SKILL.mdلكل مشاريعك. Claude بيستعملها لحاله لما تناسب الطلب، أو بتناديها بـ/reel. - النتيجة: الريل الجاي = «/reel» + النص + ملف صوت جديد. بدون برومت طويل.
- بدك تفهم الـ Skills أكثر؟ دليل أول Skill.
الريل اللي شفته
نفس الطريقة، بس بأدوات أكثر شوي.
8
هيك انبنى الريل اللي شفته
الريل «الساعة 2 بالليل» ملف كود واحد اسمه ReelByClaude916.tsx، كتبه Claude Code بنفس منطق البرومت فوق:
الصوت
8 جمل مولّدة بـ ElevenLabs بصوتي، مع وسوم أداء زي [tired] و[excited] قبل كل جملة.
توقيت الكلمات
ملف مولّد من الصوت فيه بداية ونهاية كل كلمة؛ منه الترجمة ومنه بداية كل مشهد.
11 لقطة
لقطات إلي (أفاتار على أماكن مولّدة) + لوحة مونتاج مرسومة بالكود + شاشة كود + شريط «render» + كشف الريل جوّا موبايل.
المدة
34 ثانية بـ 30 فريم، 1080×1920، وتصدير بأمر واحد.
اللقطة اللي فيها كود بيمرق على الشاشة؟ هي مصدر نفس الملف اللي بيعرضها. يعني الريل بيعرض كوده وهو شغّال. هاد الشي ما بتعمله بأي برنامج مونتاج بسهولة، وبالكود جملة وحدة.
9
أخطاء بتخلي الريل يطلع «كود»
كل شي برسالة وحدة بدون خطةبيكتب 400 سطر وبتكتشف إن المشاهد مش زي ما تخيّلت.
«اعرضلي الخطة بالأول»بتصلّح الترتيب والمدد على الورق، وبعدها الكود بيطلع صح من أول مرة.
نسيان ملفات publicالكود بيدوّر على voice.mp3 وما بيلاقيه: ريل صامت أو خطأ بالمعاينة.
الصوت والموسيقى قبل البرومتوبنفس الأسماء اللي بالبرومت.
نص الريل بالإنجليزي والترجمة بالعربيالكلمات ما بتتطابق مع الصوت، والتلوين بيصير عشوائي.
نفس النص: صوت = ترجمة = برومتسجّل اللي كتبته حرفياً، وبدّل بالاتنين مع بعض.
- ترجمة بتبين مقلوبة أو مقطّعة: اطلب صراحةً «اتجاه النص من اليمين لليسار وخط عربي»، وهاد موجود بالبرومت فوق.
- خمس تعديلات برسالة وحدة: بيصلّح تلاتة وبينسى اتنين. تعديل واحد، معاينة، التالي.
- بتعدّل الكود بإيدك وبعدها بتطلب منه تعديل: احكيله شو غيّرت، وإلا بيرجّع نسخته.
?
أسئلة شائعة
لازم أعرف برمجة؟
لا. بدك تعرف تفتح التيرمنال، وتعرف وين مجلد public، وتوصف اللي بدك ياه بالعربي. الكود بيكتبه Claude وبيصلّحه. اللي بيفرق فعلاً: نص واضح وصوت نظيف.
كم بياخد وقت؟
أول ريل ساعة تقريباً (التجهيز + الخطة + تعديلين تلاتة). بعد ما تحفظ الطريقة كـ Skill، الريل الجاي ربع ساعة: نص جديد، صوت جديد، /reel، تصدير.
الصوت من وين؟
أسهل شي تسجّل بجوالك بمكان هادي وتسمّيه voice.mp3. أنا بستعمل ElevenLabs بصوت مستنسخ عشان أعدّل النص بدون ما أعيد التسجيل. المهم إن الكلمات اللي بالصوت هي نفسها اللي بالبرومت.
ليش الترجمة كلمة بكلمة مش جملة جملة؟
لأن الناس بتشوف الريل بدون صوت. الكلمة الملوّنة بتمشي مع الحكي وبتمسك العين. Remotion عنده حزمة جاهزة لهالشي (@remotion/captions)، وClaude بيستعملها لما تطلب «توقيت الكلمات من ملف الصوت».
بيشتغل على ويندوز؟
إيه. Node.js وRemotion وClaude Code كلهم بيشتغلوا على ويندوز وماك ولينكس. أنا بشتغل من ويندوز.
Remotion ببلاش؟
للأفراد وللشركات اللي فيها لحد 3 موظفين: إيه، ببلاش. الشركات الأكبر بدها رخصة شركة من موقعهم. Claude Code نفسه حسب اشتراكك بـ Claude.
بدي أحط لقطات حقيقية إلي مش بس نصوص وأشكال؟
حط الفيديوهات بمجلد public وقول له بالبرومت: «المشهد الأول فيديو public/me-1.mp4 والترجمة فوقه». الريل اللي شفته هيك معمول: لقطاتي بمشاهد، والمشاهد المرسومة بالكود بيناتهم.