صايب B-Roll موشن غرافيك موقّت باستعمال Claude Code

شنو هو motion-graphics؟

motion-graphics هو مستودع ديال مهارات مركّزة فتصميم الحركة، مخصّصة لـ Claude Code ووكلاء آخرين اللي كيقدرو يقراو المهارات. أول مهارة متاحة فيه، motion-broll، كتقدر تنشئ لقطات B-roll متحركة انطلاقاً من فيديو مصدر ونص مفرّغ.

المهارة كتفحص اللقطات ديالك، وكتقدّر الوقت اللي كيتنطقو فيه الكلمات، وكتقترح رسومات مناسبة، وكتصيّب مقاطع متزامنة مع السرد. كل مقطع كيستعمل شكلاً واحداً كيتحوّل باستمرار، مثلاً كبسولة تقدر تولّي بطاقة أو نافذة طرفية أو رسم بياني، عوض التقطيع بين مشاهد ما عندهاش علاقة. المؤشر كيسوق التغييرات البصرية.

أهم المزايا

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

المتطلبات

قبل ما تثبّت المهارة، تأكد باللي النظام ديالك فيه البرامج التالية:

• Node.js 18 أو أحدث
• Python 3
• ffmpeg مع مُرمّز ProRes

الـ README كيوضح باللي مُرمّز ProRes المطلوب كيكون عادةً متوفر فنسخ ffmpeg المثبّتة عبر Homebrew. فأول تشغيل، المهارة كتثبّت حتى Playwright وChromium فمجلد محلي سميتو motion/.

ثبّت motion-broll

الخيار 1: التثبيت باستعمال npx

شغّل مُثبّت المهارات ديال المستودع:

npx skills add Barty-Bart/motion-graphics

ملي يطلب منك الاختيار، اختار motion-broll. هاد الطريقة كتثبّت المهارات من المستودع لـ Claude Code أو لأي وكيل متوافق آخر كيقرأ المهارات.

الخيار 2: نسخ المهارة يدوياً

تقدر حتى تنسخ المجلد skills/motion-broll لمجلد مهارات Claude ديال المشروع:

.claude/skills/

باش تولّي المهارة متاحة فالمشاريع كاملين، نسخها لمجلد المهارات ديال المستخدم:

~/.claude/skills/

وجد المدخلات ديالك

خاصك جوج مدخلات أساسية:

1. فيديو: هادي هي اللقطات المصدر اللي غادي تزيد عليها الرسومات المتحركة.
2. نص مفرّغ: سير ذاتي بصيغة SRT مصدّر من محرر، أو Descript، أو YouTube، مدعوم فطريقة العمل الموثقة.

النص المفرّغ كيعطي المهارة المحتوى المنطوق، بينما الفيديو كيوفر معلومات تقنية وتركيبية بحال معدل الإطارات، والأبعاد، والمساحة المتاحة حدا المتحدث.

أنشئ لقطات B-roll متحركة

الخطوة 1: شغّل المهارة

فوكيلك المتوافق، نفّذ:

/motion-broll

جاوب على الأسئلة ووجّه المهارة للفيديو والنص المفرّغ ديالك.

الخطوة 2: خليه يفحص اللقطات

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

الخطوة 3: راجع التوقيت المقدّر

motion-broll كيقدّر توقيت الكلمات انطلاقاً من النص المفرّغ. هاد التوقيتات كتخلي الانتقالات الرسومية والتأكيدات البصرية متوافقة مع كلمات أو عبارات محددة.

الخطوة 4: وافق على خطة المقاطع

قبل التصيير، المهارة كتقدم خطة فجدول. لكل مقطع محتمل، كتختار واحد من ثلاثة أنواع:

• لقطة انتقالية كاملة
• لوحة شفافة محطوطة فالفراغ
• بلا رسم متحرك

الخطة كتشرح حتى السبب ديال كل اختيار. راجعها مزيان ووافق عليها ملي تكون المواضع المقترحة موافقة للنية التحريرية ديالك.

الخطوة 5: بنِ المقاطع وتحقق منها

من بعد الموافقة، المهارة كتبني كل مقطع وكتفحص الإطارات الثابتة عند الكلمات المهمة. ومن بعد تقدر تصلح العناصر اللي ما متحاذياش مزيان مع هاد اللحظات.

الخطوة 6: صيّر وراجع

المهارة كتصيّر المقاطع بمعدل إطارات الفيديو، مع ضبابية الحركة. ومن بعد كتولّد معاينة للفيديو المعدّل وصفحات مبنية على المتصفح باش تفحص النتائج.

فهم الملفات المولّدة

الإخراج مصمم باش يعاون فالمراجعة وفالتحرير النهائي بجوج.

• مقاطع مسمّاة حسب الخط الزمني: أسماء الملفات كاتبيّن فين خاص المقاطع تكون، بحال 04-master-prompt_0m32s40.mp4.
• لقطات انتقالية بصيغة MP4: الرسوم المتحركة اللي كاتعمر الكادر كامل كاتسلّم فملفات MP4.
• لوحات MOV شفافة: لوحات التراكب كاترندر فملفات ProRes 4444 MOV بالشفافية.
• رندر للمعاينة: نسخة من الفيديو الأصلي مدموجة فيها المقاطع كاتخليك تقيّم الإيقاع والبلاصة ديالها.
• compare.html: هاد الصفحة كاتزامن النسخة الأصلية مع النسخة المحسّنة. وكتدعم المقارنة حدّ بحد، وفوق لتحت، وبالمسح.
• viewer.html: هاد الصفحة كاتخليك تفحص المقاطع اللي تْولّدو واحد بواحد.
• TIMING.md: هاد الوثيقة كاتسجّل نقطة البداية، ونقطة النهاية، والسطر ديال النص المغطّى لكل مقطع.

المعاينة اللي تْولّدت مخصّصة للمراجعة. فالنسخة النهائية، دخّل المقاطع الفردية فبرنامج المونتاج ديالك.

مثال على سير العمل

يمكن لسير عمل عملي فالمونتاج يتبع هاد الخطوات:

1. صدّر الفيديو الأصلي ديالك وترانسكريبت بصيغة SRT.
2. شغّل /motion-broll وقدّم الملفين بجوج.
3. راجع اللقطات الانتقالية المقترحة، واللوحات الشفافة، والأجزاء اللي متخلّية عمداً بلا زواق.
4. وافق على الخطة وخلي المهارة ترندر المقاطع.
5. حلّ compare.html باش تقيّم النسخة الأصلية والمحسّنة بجوج.
6. استعمل viewer.html باش تفحص الحركات الفردية.
7. رجع لـ TIMING.md باش تعرف معلومات الوضع بدقّة.
8. دخّل ملفات MP4 وProRes 4444 MOV الشفافة لبرنامج المونتاج ديالك باش دير التجميع النهائي.

كيفاش كيخدم نظام الرندر

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

حيت النظام ماكايعتمدش على انتقالات CSS ولا على المؤقتات، يقدر يرندر أي فريم بشكل مستقل. هاد الشي مفيد لالتقاط الفريمات بشكل حتمي ولرندر الفيديو أوفلاين.

كل مقطع هو ملف HTML صغير مبني على المحرّك المشترك فـ skills/motion-broll/engine/motion.js. Chromium بلا واجهة كايلتقط أربعة فريمات فرعية لكل فريم ناتج عبر مصراع بزاوية 180 درجة. من بعد ffmpeg كاايدمج هاد العينات باش يصنع ضبابية الحركة.

نصائح متقدمة

راجع الخطة قبل ما تصرف الوقت على الرندر

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

استعمل الإخراج المناسب فبرنامج المونتاج ديالك

حطّ اللقطات الانتقالية بصيغة MP4 فالمسار البصري الرئيسي ملي خاصها تعوّض اللقطة. ركّب لوحات ProRes 4444 MOV فوق الفيديو الأصلي باش الشفافية ديالها تخلي اللقطة اللي تحت باينة.

خلّي البيانات الحقيقية مفصولة على العناصر المؤقتة

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

راجع التوقيت وتفاصيل الحركة بجوج

استعمل compare.html باش تراجع الإيقاع العام، وviewer.html باش تفحص كل مقطع بوحدو. قارن المواضع اللي فيها شك مع TIMING.md ومع السطر المقابل فالنص.

درس المثال التطبيقي المرفق

المجلد skills/motion-broll/examples/opus-aoe2/ فيه المقاطع الستة المستعملة فالعرض التوضيحي ديال المستودع. وهو مرجع مفيد لفهم بنية المقاطع المكتملة والأسلوب البصري المقصود.

الخلاصة

كايقدّم motion-broll طريقة منظّمة لتحويل السرد لمقاطع B-roll متحركة ومتزامنة. كاايدمج تحليل اللقطات، والتخطيط المعتمد على النص، وتحريك الأشكال بشكل مستمر، والرندر الحتمي، وأدوات عملية للمراجعة. من بعد ما توافق على الخطة وتراجع المعاينة، تقدر تدخل المقاطع المسماة حسب الخط الزمني لبرنامج المونتاج ديالك وتنتج الفيديو النهائي.

المشروع منشور بموجب رخصة MIT. خطوط Geist ديالو كتستعمل رخصة SIL Open Font License، ومسارات الأيقونات ديالو مقتبسة من Lucide بموجب رخصة ISC.