GSAP
تحريك العناصر باحتراف
الأداة 7 من 10وش هي؟
أشهر مكتبة لتحريك العناصر في صفحات الويب: نصوص، أرقام، أشكال. صار مجاني بالكامل، حتى للاستخدام التجاري وحتى الإضافات اللي كانت مدفوعة مثل تحويل الأشكال (MorphSVG).
متى تستخدمها؟
- عناوين تدخل كلمة كلمة
- عدّادات أرقام مع رسم بياني
- شكل يتحوّل لشكل ثاني
كيف تشغّلها
- افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
- الصق واحد من البرومبتات اللي تحت.
- Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.
أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):
npm i gsap
البرومبتات الثلاث
غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.
1عنوان عربي يدخل كلمة كلمة
سوّ لي مشهد [المدة، مثلاً 6] ثواني بـ GSAP (صفحة HTML ورندرها فيديو 1920×1080): العنوان «[عنوانك]» يدخل كلمة كلمة، وحرّك كل كلمة كاملة ولا تقسمها لحروف عشان الحروف العربية تبقى متصلة. تحته خط يرسم نفسه، وبعدها شيبس تنط فيها: [الكلمة 1]، [الكلمة 2]، [الكلمة 3]. خط Cairo، خلفية [لون الخلفية]، طلّع MP4.
2عدّاد لأي رقم مع رسم بياني
سوّ بـ GSAP مشهد [المدة، مثلاً 6] ثواني: رقم يعدّ من 0 لين [رقمك] وتحته كلمة «[وش الرقم، مثلاً مشاهدة أو ريال]»، وبنفس الوقت خط بياني يرسم نفسه تحت الرقم. العدّاد يبطّئ قرب النهاية. أرقام إنجليزية بفاصلة الآلاف، خط Cairo، طلّع MP4.
3شكل يتحوّل لأشكال تختارها
سوّ بـ GSAP وإضافة MorphSVG مشهد [المدة، مثلاً 6] ثواني: [الشكل الأول] يتحوّل لـ [الشكل الثاني]، بعدين لـ [الشكل الثالث]، وكل تحوّل بحركة ناعمة ولون مختلف، وتحت الشكل جملة «[جملتك]». خط Cairo، طلّع MP4.
⚠️ خذ بالك
- تقسيم النص لحروف (SplitText) يكسر الحروف العربية المتصلة. اطلب تحريك الكلمات كاملة.
السعر والرخصة
مجانية بالكامل لكل الناس، حتى للاستخدام التجاري، تحت رخصة GSAP الخاصة (مو مفتوحة المصدر بالمعنى الحرفي).
روابط رسمية
شفتها في الحلقة
تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.