Motion Canvas
شرح خطوة بخطوة
الأداة 5 من 10وش هي؟
أداة للشروحات التقنية: كل خطوة تطلع وقت ما تنشرح، بدال شاشة مليانة أسهم من البداية. أشهر شي فيها إنها تحرّك الكود نفسه: السطر يتعلّم والقيمة تتغيّر قدامك.
متى تستخدمها؟
- دروس برمجة: كود يتغيّر سطر سطر
- رحلة بيانات: من جوالك للسيرفر وترجع
- مخططات ترتّب نفسها لما تضيف خطوة
كيف تشغّلها
- افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
- الصق واحد من البرومبتات اللي تحت.
- Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.
أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):
npm init @motion-canvas@latest
البرومبتات الثلاث
غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.
1رحلة خطوة بخطوة لأي عملية
سوّ لي بـ Motion Canvas مشهد [المدة، مثلاً 12] ثانية يشرح [العملية اللي تبي تشرحها]: [نقطة البداية] على اليمين و[نقطة النهاية] على اليسار، و«[الشي اللي يتحرك]» يمشي بينهم على خط منقّط عبر [المحطات اللي في النص]، وبعدها [وش يرجع] يرجع على خط أخضر. كل خطوة تطلع بالترتيب وقت ما تنشرح. خط Cairo، خلفية كحلية، طلّع MP4.
2تحريك الكود نفسه لدرس برمجة
سوّ بـ Motion Canvas مشهد [المدة، مثلاً 10] ثواني فيه نافذة كود اسمها [اسم الملف] فيها هذا الكود: [الصق الكود]. بعدين [وش يتغيّر في الكود، سطر سطر] قدام المشاهد، والسطر اللي يتغيّر يتعلّم والباقي يبهت. طلّع MP4.
3مخطط يفسح مكان لخطوة جديدة
سوّ بـ Motion Canvas مخطط بعنوان «[العنوان]» فيه مربعات بالترتيب: [الخطوة 1] ← [الخطوة 2] ← [الخطوة 3] ← [الخطوة 4]. بعدين يدخل مربع جديد «[الخطوة الجديدة]» بين [الخطوة] و[الخطوة]، والمربعات الثانية تتحرك لحالها وتفسح له مكان. [المدة] ثواني، خط Cairo، طلّع MP4.
⚠️ خذ بالك
- آخر إصدار رسمي لها 3.17.2 في ديسمبر 2024. تشتغل، بس مو نشيطة مثل غيرها.
- توقيتها مربوط بالكلام: لو غيّرت التعليق الصوتي، لازم تضبط الحركة معه.
السعر والرخصة
مجانية ومفتوحة المصدر برخصة MIT.
روابط رسمية
شفتها في الحلقة
تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.