شنو هو Awesome AI Motion؟
Awesome AI Motion هو دليل عملي لتصميم الحركة، موجه للناس ولعملاء البرمجة بالذكاء الاصطناعي بجوج. بلا ما تختار الأنيميشن غير على حساب الشكل ديالو، تقدر تبدا من شنو خاص المشهد يوصل، ومن بعد تختار التأثير ولا الوصفة ولا المسار التصميمي المناسب.
المستودع كيجمع 637 تقنية، و128 مقطع مرجعي، و11 وصفة، و7 مسارات تصميم. كل بطاقة ديال التأثير تقدر تضم تعريف، ومعاملات مضبوطة، وأمثلة، ومراجع المصادر، وبرومبتات لـ Claude Code وCodex.
الدليل مفيد ملي كتحتاج تصمم تقديمات ديال المنتجات، وتسلسلات العناوين، وبدايات تعليمية، وخطافات لفيديوهات قصيرة، وقصص البيانات، وعروض واجهات المستخدم، ولا مشاهد أخرى مبنية على الحركة.
المميزات الرئيسية
- بطاقات تأثير قابلة للقراءة من طرف الذكاء الاصطناعي: العملاء يقدرو يفحصو البطاقة قبل ما يكيّفو الحركة ديالها.
- مراجع مرندرة: التأثيرات المرندرة تقدر تضم مرحلة HTML، ومقطع MP4، ومعاينة GIF متحركة، وصورة ملصق.
- اكتشاف حسب الهدف: جداول القرار كيساعدوك تختار الحركة حسب الهدف ديال المشهد ولا الوسيط المستعمل.
- وصفات مركبة: الوصفات كتبرز كيفاش كتخدم عدة تأثيرات مع بعضياتها داخل مشهد مضبوط بالتوقيت.
- مسارات التصميم: وثائق المسارات كتعونك تخطط لمخرجات كبيرة بحال الإعلانات الترويجية، والفيديوهات القصيرة، والعروض. وثائق المسارات مكتوبة بالكورية.
- المقارنة فالمتصفح: موقع المشروع كيدعم التصفية، والتشغيل البطيء، والمقارنة بين حتى أربعة ديال المقاطع.
- الرندرة المحلية: سكريبت الرندرة المرفق يقدر ينشئ نسخ مخصصة بلا ما يبدل التأثير المرجعي.
- بيانات وصفية منظمة: ملف
index.jsonالأساسي كيخلي الكتالوج قابل للاستعلام مباشرة.
أمثلة على الحركة المتاحة
المجموعة كتمتد من حركة الكاميرا والطباعة إلى الانتقالات، والكشف، والمنظور المتوازي، وتأثيرات الضوء، وتحويلات الأشكال. من بين الأمثلة البارزة: Infinite Canvas Pan، وCamera Fly-through، وInfinite Zoom، وKinetic Type Sweep، وGiant Mask Reveal، وMorph Match Cut، وNoise Dissolve، وKen Burns، وParticle Scatter & Assemble.
Particle Scatter & Assemble واحد من تأثيرات الرندرة المرجعية فالمستودع.
اختار نقطة البداية المناسبة
المستودع كيوفر بزاف ديال المداخل. اختار واحد منها على حساب المهمة اللي باغي تكمل:
- الموقع: تصفح، وشغل، وصفي، وبطّأ، وقارن المقاطع بصريا.
- محتويات التوثيق: تنقل فالدليل بلا ما تحل كل بطاقة ديال التأثير.
- الكتالوج الكامل: راجع التقنيات مجمعة حسب عائلة الحركة، وتأكد من توفر المقاطع.
- جداول القرار: اختار التأثير حسب الهدف ولا الوسيط.
- الوصفات: جمع التأثيرات فمشهد كامل مضبوط بالتوقيت.
- مسارات التصميم: خطط لمخرج حركي كبير.
- سير عمل العميل: تبع مراحل تحديد الهدف، والبطاقة، والتكييف، والرندرة، والتحقق.
التثبيت والإعداد
الخطوة 1: نسخ الدليل
نسخ المستودع ودخل للمجلد ديالو:
git clone https://github.com/gongnyang/awesome-ai-motion.git
cd awesome-ai-motionما محتاجش تثبت التبعيات غير باش تتصفح الموقع، ولا تقرا بطاقات التأثيرات، ولا تربط الدليل كمهارة للعميل.
الخطوة 2: وجد تبعيات الرندرة الاختيارية
الرندرة المحلية كتحتاج Node.js 20 ولا أحدث، وffmpeg يكون فمسار النظام، وPlaywright مع Chromium. شغل الأوامر التالية غير إلا كانت هاد التبعيات ناقصة:
npm install
npx playwright install chromium
ffmpeg -versionتثبيت الحزمة اختياري إلا كان Playwright متاح من قبل بشكل عام. وتقدر حتى تتجاوز أمر تثبيت Chromium إلا كان عندك تثبيت مناسب ديال Chromium موجود من قبل.
الخطوة 3: ربط الدليل مع Claude Code
صايب مجلد المهارات ديال Claude Code وربط المستودع فيه:
mkdir -p ~/.claude/skills
ln -s "$PWD" ~/.claude/skills/awesome-ai-motionالرابط الرمزي مناسب حيث المهارة كتستعمل النسخة المحلية الحالية. إلا ما كانوش الروابط مناسبين للبيئة ديالك، نسخ المجلد بلاصتهم:
mkdir -p ~/.claude/skills
cp -R "$PWD" ~/.claude/skills/awesome-ai-motionاختار غير طريقة وحدة وتأكد بلي المسار ديال الوجهة ما مستعملش. بالنسبة لـ Codex، حط نفس الرابط ولا النسخة فـ ~/.codex/skills/.
النسخة المنسوخة من المهارة ما كتستقبلش أوتوماتيكياً التغييرات اللي كاتوقع من بعد فالمستودع. حدّث النسخة ولا بدّلها ملي كيتبدّل الدليل.
الاستعمال الأساسي
طلب من وكيل يختار تأثير
وصف الهدف التواصلي ديال المشهد ديالك، ومن بعد قل للوكيل يراجع بطاقة التأثير المناسبة ويحافظ على الإعدادات الافتراضية المضبوطة ديالها. مثلاً:
Choose motion for a product reveal. Read the effect card and use its default parameters.
هاد الطلب كيعطي للوكيل هدف واضح، كيوجّهُه للتنفيذ الموثّق، وكيجنّبو يخمّن قيم عشوائية ديال الحركة.
وتقدر حتى تصيغ الطلبات حول أهداف أخرى بلا ما تسمّي التأثير من اللول:
Choose motion for an educational opening hook. Review the guide and identify an appropriate effect or recipe before adapting it.الدليل فيه أمثلة ديال الوصفات بحال Educational Opening Hook وShorts Hook وTitle Opener وProduct UI Demo وData Story وConcept Explainer وBefore and After وScroll Deck Scene.
قرا بطاقة التأثير يدوياً
كل بطاقة كاينة فـ:
effects/<slug>/README.mdمثلاً، بطاقة كشف القناع كاينة فـ effects/mask-reveal/README.md. قرا التعريف ديال البطاقة، والبارامترات، والأمثلة، والطلبات، والمصادر قبل ما تبدّل التأثير. ملي كيكون التأثير فيه أصول مرندرة، الدليل ديالو يقدر حتى يحتوي على:
index.htmlلمرحلة الحركةclip.mp4لإخراج الفيديوpreview.gifلمعاينة متحركةposter.jpgلصورة ثابتة
رندّر أول مقطع مخصّص ديالك
شغّل أداة الرندر المرفقة على تأثير كشف القناع. هاد الأمر كيبدّل النص اللي باين، وكيصايب مرحلة قابلة للتضمين، وكيكتب النتيجة فدليل منفصل ديال التهييء:
node scripts/render.mjs effects/mask-reveal \
--embed --text "Make it move" --out .staging/my-first-motionمن بعد الرندر، تفقد هاد الملفات اللي تخلقات:
.staging/my-first-motion/clip.mp4.staging/my-first-motion/preview.gif.staging/my-first-motion/poster.jpg
حيت الإخراج كيمشي لـ .staging/my-first-motion، التأثير الأصلي كيبقى سليم وقابل لإعادة الاستعمال.
مسار عملي للاختيار
- حدّد الهدف ديال المشهد. قرّر واش الحركة خاصها تبيّن منتوج، تبرز التراتبية، تشرح مفهوم، تورّي تحوّل، ولا توجّه الانتباه.
- تصفّح الكاتالوغ ولا قلّب فيه. استعمل الموقع للاستكشاف البصري، وجداول القرار للاختيار حسب الهدف، ولا
index.jsonللبيانات المهيكلة. - حلّ بطاقة التأثير. راجع التعريف، والبارامترات المضبوطة، والأمثلة، والطلبات، ومراجع المصادر.
- شوف وصفة ملي تأثير واحد ما يكونش كافي. الوصفات كتبرهن كيفاش يمكن ترتيب التأثيرات داخل مشهد مضبوط بالتوقيت.
- كيّف نسخة. خلّي التنفيذ المرجعي كيف ما هو، وصيفط الملفات اللي تخلقات لدليل إخراج منفصل.
- رندّر وتحقّق. راجع MP4 وGIF والبوستر والمرحلة، وما تفترضش بلي الإخراج صحيح غير اعتماداً على الكود المصدر.
نصائح متقدمة
قارن المرشحين قبل ما تحسم
استعمل موقع المشروع باش تقارن حتى لأربعة مقاطع. التشغيل البطيء يقدر يسهّل تقييم التوقيت، والتدرّج، وإخفاء العناصر، والانتقالات. هاد الشي مفيد خصوصاً ملي كتكون تقنيات متعددة كتخدم نفس الهدف التواصلي ولكن كتنتج مستويات مختلفة ديال الطاقة أو التركيز.
بدا بالإعدادات الافتراضية، ومن بعد كيّف
بطاقات التأثير كتوفّر بارامترات مضبوطة. طلب من الوكيل يبدا بهاد القيم قبل ما يبدّل التوقيت ولا طريقة العرض. هاد الشي كيحافظ على السلوك المقصود وكيعطيك أساس معروف باش تقيّم التغييرات اللي من بعد.
خلّي الإخراج اللي تخلق بعيد على الأدلة المرجعية
ما تكتبش الرندرات المخصّصة داخل effects/ ولا recipes/. استعمل بلاصة بحال .staging/ باش تبقى المقاطع المرجعية سليمة ويكون تفقد تغييرات المستودع أسهل.
استعمل الوصفات للمشاهد الكاملة
التأثير الواحد كيبين تقنية ديال الحركة، بينما الوصفة كتجمع التقنيات فواحد التسلسل. بدا بوصفة ملي كيحتاج التسليم ديالك لمقدمة، وانتقال، وقسم ديال المحتوى، ونهاية، عوض حركة معزولة وحدة.
استعمل البيانات المهيكلة للأتمتة
الملف الجذري index.json هو الكاتالوغ الرسمي. الأدوات والوكلاء يقدرو يفحصوه مباشرة بلا ما يستخرجو المعطيات من صفحات البطاقات. الكاتالوغ الكامل مناسب أكثر للتصفح البشري حيث كيجمع التقنيات حسب عائلة الحركة وكيبيّن حالة المقاطع.
تعامل مع المهارات المرتبطة والمنسوخة بطرق مختلفة
الرابط الرمزي كيبقى كيشير للنسخة المحلية ديالك، وبالتالي جلب تحديثات المستودع كيحدّث حتى شنو كيقراه الوكيل. أما المهارة المنسوخة فهي مستقلة وخصها تتحدّث يدوياً من بعد ما يتبدّل الدليل المصدر.
تحقّق من مساهمات الكاتالوغ
ملي كتزيد تأثيرات، ولا كتحسّن الإعدادات الافتراضية، ولا كتحدّث المقاطع المرجعية، تبع إرشادات المساهمة ديال المستودع. حدّث المصدر ولا المولّد المناسب، وما تعتبرش التوثيق المولّد هو مصدر الحقيقة. من بعد عاود التوليد وتحقق من المشروع:
node scripts/build.mjs
node scripts/check.mjsخاص المساهمات تحافظ على وضوح الحركة، وتستعمل المنصّة المشتركة، وتتأكّد من النتيجة المعرُوضة.
راجع التراخيص قبل إعادة التوزيع
العمل الأصلي ديال المشروع مرخّص بترخيص MIT. مراجع المصدر وتراخيص المكوّنات مسجّلين فـ ATTRIBUTIONS.md وبطاقات التأثيرات الفردية. GSAP والخطوط المضمّنة عندهم التراخيص ديالهم، لذلك راجع معلومات الإسناد قبل ما تعاود توزّع هاد الأصول.
الخلاصة
Awesome AI Motion كيحوّل مكتبة كبيرة ديال مراجع الحركة لسير عمل عملي للبشر ووكلاء البرمجة. بدا بالغرض ديال المشهد، اختار تأثير أو وصفة موثّقة، حافظ على الإعدادات الافتراضية المضبوطة، صَيّر فمجلد منفصل، وتحقّق من الأصول الناتجة. هاد العملية كتعاونك تنتاقل من النيّة الإبداعية لمقطع حركة قابل لإعادة الاستعمال، بلا ما تكتب فوق التطبيقات المرجعية ديال الدليل.