Anime.js
حركات خفيفة ومطاطية
الأداة 7 من 10وش هي؟
مكتبة تحريك خفيفة، ممتازة لما يكون عندك عناصر كثيرة تتحرك ورا بعض: نقاط، شبكات، بطاقات. فيها حركة «مطاطية» حلوة للأشياء اللي تنط.
متى تستخدمها؟
- نقاط أو عناصر كثيرة تتجمع في شكل
- شبكة تتموّج من النص للأطراف
- بطاقات تنط بحركة مطاطية
كيف تشغّلها
- افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
- الصق واحد من البرومبتات اللي تحت.
- Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.
أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):
npm i animejs
البرومبتات الثلاث
غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.
1نقاط تتجمع وتصير شكل
سوّ بـ Anime.js مشهد [المدة، مثلاً 6] ثواني (صفحة HTML ورندرها فيديو 1920×1080): [عدد] نقطة متفرقة على الشاشة، تتجمع ورا بعض وتصير شكل [الشكل، مثلاً زر تشغيل أو شعارك البسيط]، وبعدها الشكل ينبض مرة. ألوان [الألوان]، خلفية داكنة، طلّع MP4.
2شبكة تتموّج من النص
سوّ بـ Anime.js شبكة [عدد الأعمدة]×[عدد الصفوف] مربعات صغيرة، وموجة تبدأ من [النص / الزاوية] وتنتشر: كل مربع يكبر ويلمع بلون [اللون] ويرجع، بتأخير حسب بُعده (stagger). تتكرر [كم مرة]، [المدة] ثواني، طلّع MP4.
3بطاقات تنط بحركة مطاطية
سوّ بـ Anime.js بطاقات جنب بعض فيها أيقونات وكلمات: [البطاقة 1]، [البطاقة 2]، [البطاقة 3]. البطاقات تنط من تحت وحدة ورا الثانية بحركة مطاطية (spring)، وبعدها تهتز شوي وتثبت. استخدم أيقونات SVG، خط Cairo، [المدة] ثواني، طلّع MP4.
⚠️ خذ بالك
- لو الإيموجي ما طلعت في الرندر، اطلب منه يستخدم أيقونات SVG بدالها.
السعر والرخصة
مجانية ومفتوحة المصدر برخصة MIT.
روابط رسمية
شفتها في الحلقة
تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.