اصنع فيديوهاتك بالكود مع كلود كود
لما الكود يصبح هو المحرر، شغل ساعة يتحول لثانية واحدة.
الفيديو مو بس صورة تتحرك، هو منطق بكل تفصيل. كل مشهد فيه توقيت، كل نص فيه موقع، وكل انتقال يسير على قاعدة. لو سبق وعدّلت نفس القالب بيدك عشر مرات لعشرة بوستات مختلفة، تعرف الوجع. الكود يحل هذا من جذوره.
🧩 إيش هو بالضبط
الفيديو ككود (Video as Code) يعني إنك بدل ما تسحب وتوصّل في برنامج تحرير، تكتب الكود اللي يصف كل إطار من الفيديو. مين يظهر وين، متى يتحرك، كم مدة المشهد، وكيف ينتهي. كل هذا ينكتب بلغة برمجة، ثم يُحوَّل آلياً لفيديو حقيقي.
فكّر فيه كالفرق بين ما ترسم جدار بيدك وبين ما تكتب المواصفات وتخلّي الماكينة تنفّذها. الماكينة ما تتعب، ما تغلط في التفاصيل، وتعيد نفس الشغل لو طلبت منها مئة مرة.
Remotion هي المكتبة اللي تجعل هذا واقعاً. تكتب مكوّنات React تصف مشاهدك، وهي تحوّلها لملف فيديو حقيقي.
⚙️ كيف يشتغل
الفكرة أبسط مما تتوقع:
1️⃣ تكتب كود React يصف كل مشهد من ناحية نص وصورة وحركة
2️⃣ Remotion تشغّل متصفحاً في الخلفية وتصوّر كل إطار لوحده بدقة
3️⃣ تجمع الإطارات مع بعض وتطلع ملف MP4 كامل جاهز
اللي يخلّيها قوية مع Claude Code هو طبقة المحادثة. تشرح المشهد بكلامك العادي، وهو يكتب كود Remotion كامل. تشغّل أمر واحد والفيديو يتصيّر.
🎯 الفائدة الكبرى: المحررون يشتغلون بيدهم مرة مرة. الكود يشتغل بالجملة، مرة واحدة لكل فكرة.
🌍 وين تشوفه في حياتك
🎬 صانعو المحتوى اللي يطلعون فيديوهات بشكل منتظم ويحتاجون نفس القالب بمحتوى مختلف كل مرة
📊 العروض والإنفوغرافيك اللي فيها أرقام وبيانات تتغير بين نسخة ونسخة
🛒 الإعلانات الرقمية اللي تحتاج عشر نسخ بألوان وأحجام مختلفة لمنصات مختلفة
🎓 المحتوى التعليمي اللي يحتاج تحديث دوري بدون ما يُعيد كل شيء من الصفر
🛠️ الأدوات اللي تستخدمها فعلاً
🔧 Remotion
مكتبة JavaScript مفتوحة المصدر تحوّل كود React لفيديوهات حقيقية. تشتغل محلياً على جهازك، تعطيك معاينة مباشرة في المتصفح وأنت تكتب، وتطلع ملفات MP4 قياسية لما تجهز.
كيف تبدأ:
1️⃣ تأكد إن Node.js مثبّت عندك من الموقع nodejs.org
2️⃣ في الطرفية (Terminal)، شغّل: npx create-video@latest
3️⃣ اختار القالب الأساسي، ثم شغّل: npm run dev
4️⃣ افتح المتصفح على الرابط اللي تطلعه الطرفية وشوف المعاينة المباشرة للفيديو
🔧 Claude Code
واجهة كلود المتخصصة للكود. تشرح له إيش تبي في الفيديو بكلامك العادي، وهو يكتب لك الكود الكامل لـ Remotion. مو بس يكتب، يقدر يعدّل ويضيف مشاهد ويصلح الأخطاء لما تقع.
كيف تبدأ:
1️⃣ روح على claude.ai/code أو ثبّت إضافة Claude Code في VS Code
2️⃣ افتح مجلد مشروع Remotion الخاص فيك داخل Claude Code
3️⃣ اكتب له وصف المشهد اللي تبيه، مثلاً: "أبي عنوان يطلع من الأسفل تدريجياً ويثبت في المنتصف ثانيتين ثم يتلاشى"
4️⃣ انسخ الكود اللي يعطيك، حطه في ملف المشروع، وشوف النتيجة فوراً في المعاينة
💡 جرّب بنفسك: خطوة بخطوة
هذا مثال كامل تقدر تطبّقه الحين. الهدف: فيديو بسيط فيه عنوان يظهر مع حركة.
1️⃣ في الطرفية شغّل npx create-video@latest وسمّ المشروع test-video
2️⃣ افتح المجلد في Claude Code وقوله: "في مكوّن الـ Composition الرئيسي، أبي نص يقول أهلاً يظهر من الأسفل تدريجياً خلال نصف ثانية ويبقى ثانيتين"
3️⃣ Claude Code راح يعدّل الملف ويستخدم useCurrentFrame وinterpolate من Remotion لبناء الحركة
4️⃣ ارجع للمتصفح على معاينة Remotion وشوف الأنيميشن يشتغل مباشرة
الحين غيّر مدة الظهور من نصف ثانية لثانية كاملة في الكود، وشوف كيف الحركة تتبطّأ بدون ما تلمس أي شيء ثاني. هذي هي القوة الحقيقية.
وش تسوي بعد ذا
✅ شغّل Remotion محلياً وأنتج أول فيديو لك، حتى لو كان مشهداً بسيطاً بعنوان فوق خلفية
✅ اسأل Claude Code يبني لك قالب فيديو تقدر تعيد استخدامه بمحتوى مختلف كل مرة تحتاجه
✅ حدّد أي محتوى تطلعه بشكل متكرر ويتبع هيكل بصري ثابت. هذا هو أول مرشح للأتمتة
الكود ما يتعب.
———— English ————
Make Your Videos With Code, Using Claude
When code becomes the editor, an hour of work becomes a single command.
Video is not just moving images. Every scene has timing, every text has a position, every transition follows a rule. If you have ever adjusted the same template by hand for ten different posts, you already understand the problem this solves.
**What it actually is**
Video as code means describing your video in a programming language instead of dragging elements around in an editor. You write what appears, where it sits, when it moves, and how long each moment lasts. A tool then converts that description into a real video file automatically.
Think of the difference between painting a wall by hand and writing a specification that a machine follows exactly. The machine does not get tired. It does not make inconsistent choices. And if you change one line, every version of the output updates instantly.
Remotion is the library that makes this real. You write React components describing your scenes, and it renders them into a proper MP4.
**How it works**
The process is more straightforward than it sounds:
1️⃣ You write React code describing each scene, what text appears, what moves, what fades
2️⃣ Remotion runs a headless browser in the background and captures every single frame
3️⃣ It stitches those frames into a finished video file
What makes this powerful alongside Claude Code is the conversation layer. You describe a scene in plain language and Claude Code writes the full Remotion code for you. Run one command and the video renders. Change a number, rerun, done.
🎯 The core payoff: editors work by hand, once per change. Code works in bulk, once per idea.
**Where you see it**
🎬 Content creators who produce regular videos and need the same template filled with different content each time
📊 Data visualizations and infographics where numbers shift between versions
🛒 Digital ads that need ten sizes and three color variants across platforms without rebuilding each one
🎓 Educational content that needs periodic updates without touching the full production from scratch
**🛠️ Tools you actually use**
🔧 Remotion
An open source JavaScript library that turns React components into real video files. It runs locally on your machine, gives you a live browser preview as you write, and outputs standard MP4 files when you are ready.
How to get started:
1️⃣ Make sure Node.js is installed on your machine from nodejs.org
2️⃣ In your terminal, run: npx create-video@latest
3️⃣ Choose the basic template, then run: npm run dev
4️⃣ Open your browser at the URL the terminal shows you and watch your video preview update live as you edit
🔧 Claude Code
Claude's dedicated interface for working with code. You describe what you want in the video using plain language, and it writes the full Remotion code for you. It does not just write — it edits, adds scenes, and fixes errors when things break.
Wait — the skill says no dashes. Let me correct that last line:
🔧 Claude Code
Claude's dedicated interface for working with code. You describe what you want in the video using plain language, and it writes the full Remotion code for you. Beyond writing, it edits scenes, adds new ones, and fixes errors when things break.
How to get started:
1️⃣ Go to claude.ai/code or install the Claude Code extension in VS Code
2️⃣ Open your Remotion project folder inside Claude Code
3️⃣ Describe the scene you want in plain language, for example: "I want a title to slide up from the bottom, hold in the center for two seconds, then fade out"
4️⃣ Paste the code it gives you into your project file and watch it appear in the Remotion preview immediately
**💡 Try it yourself: step by step**
Here is a complete example you can follow right now. The goal is a simple animated title video.
1️⃣ In your terminal, run npx create-video@latest and name the project test-video
2️⃣ Open that folder in Claude Code and tell it: "In the main Composition component, I want text that says Hello to slide up from below over half a second and stay visible for two seconds"
3️⃣ Claude Code will edit the file using useCurrentFrame and interpolate from Remotion to build the animation
4️⃣ Return to your browser at the Remotion preview URL and watch the animation run immediately
Now change the half second duration to a full second in the code. Check the preview again. The motion slows down and nothing else breaks. That is the whole point.
**What to do next**
✅ Run Remotion locally and produce your first video, even if it is just a title on a plain background
✅ Ask Claude Code to build you a reusable template that accepts different text and colors each time you run it
✅ Identify any content you produce on a regular schedule that follows a fixed visual structure. That is your first candidate for automation
The code runs the same way every single time.