فيديو ترويجي لـ prompts.chat باستخدام Remotion

أنشئ فيديو ترويجيًا مدته 30 ثانية لمنصة prompts.chat

الأصول المطلوبة

- https://prompts.chat/logo.svg - شعار بصيغة SVG
- https://raw.githubusercontent.com/flekschas/simple-world-map/refs/heads/master/world-map.svg - خريطة عالم بصيغة SVG لاستخدامها في مشهد المجتمع العالمي

نمط الألوان (فاتح)

- الخلفية: #ffffff
- خلفية بديلة: #f8fafc
- اللون الأساسي: #6366f1 (Indigo)
- اللون الأساسي الفاتح: #818cf8
- لون التمييز: #22c55e (Green)
- النص: #0f172a
- النص الخافت: #64748b

الخط

- Inter (الأوزان: 400, 600, 700, 800)

---
بنية المشاهد (8 مشاهد)

المشهد 1: الافتتاحية (5 ثوانٍ)

- يظهر الشعار
- يتمركز الشعار في الشاشة، ويكبر بتأثير spring animation
- بعد الحركة: يظهر نص «prompts.chat» من اليسار إلى اليمين أسفل الشعار باستخدام clip-path
- تظهر العبارة التعريفية: «المنصة الاجتماعية المجانية لبرومبتات الذكاء الاصطناعي»

المشهد 2: المجتمع العالمي (4 ثوانٍ)

- خريطة عالم بملء الشاشة كخلفية بشفافية 25%
- 16 نقطة نشاط نابضة في مدن رئيسية: لوس أنجلوس، نيويورك، تورونتو، ساو باولو، لندن، باريس، برلين، لاغوس، موسكو، دبي، مومباي، بكين، طوكيو، سنغافورة، سيدني، وارسو
- كل نقطة تحتوي على حلقة نبض خارجية، ونبض داخلي، ونقطة مركزية مع توهج
- العنوان: «مجتمع عالمي من صُنّاع البرومبتات»
- صف الإحصائيات: أكثر من 8 آلاف مستخدم، أكثر من 3 آلاف زائر يوميًا، أكثر من ألف برومبت، أكثر من 300 مساهم، أكثر من 10 لغات
- تدرج لوني في الأسفل لتحسين وضوح النص

المشهد 3: الحل (2.5 ثانية)

- تظهر ثلاث كلمات بالتتابع مع spring animation: «اكتشف.» «شارك.» «احفظ.»
- كل كلمة بلون مختلف: الأساسي، لون التمييز، الأساسي الفاتح

المشهد 4: مصممة للجميع (4 ثوانٍ)

- 8 أيقونات لشخصيات مستهدفة تطفو حول أطراف الشاشة بحركة عائمة باستخدام موجات sine/cosine
- الفئات: الطلاب، المعلّمون، الباحثون، المطورون، الفنانون، الكتّاب، المسوقون، رواد الأعمال
- لكل فئة حاوية أيقونة بمقاس 130x130 مع خلفية/حدود ملوّنة
- عنوان في الوسط: «مصممة للجميع»
- العنوان الفرعي: «قد يفصلك برومبت واحد عن إنجازك القادم.»

المشهد 5: أنواع البرومبتات (5 ثوانٍ)

- العنوان: «برومبتات لكل احتياج»
- إطار يشبه المتصفح بمقاس 1400x800 مع أزرار macOS الثلاثية وشريط URL يعرض «prompts.chat»
- لقطة هيكلية بأسلوب masonry تتحرك عموديًا بسلاسة باستخدام eased animation (cubic ease-in-out)
- 7 تسميات عائمة بشكل كبسولات حول الأطراف مع أيقونات:
  - نص (بنفسجي)، صورة (وردي)، فيديو (كهرماني)، صوت (أخضر)، مسارات عمل (بنفسجي مزرق)، مهارات (تركوازي)، JSON (أحمر)

المشهد 6: الميزات (4 ثوانٍ)

- 4 بطاقات ميزات تظهر بالتتابع مع spring animation:
  - مكتبة البرومبتات (أيقونة كتاب) - «آلاف البرومبتات في مختلف التصنيفات»
  - المهارات ومسارات العمل (أيقونة برق) - «أتمتة مهام الذكاء الاصطناعي متعددة الخطوات»
  - المجتمع (أيقونة مستخدمين) - «شارك واكتشف برومبتات من صُنّاعها»
  - مفتوح المصدر (أيقونة دائرة مع علامة زائد) - «استضافة ذاتية بخصوصية كاملة»

المشهد 7: الثقة والدليل الاجتماعي (4 ثوانٍ)

- عدّاد نجوم GitHub متحرك (0 → 143,000+)
- أيقونة نجمة بجانب الرقم
- شارة: «أول مكتبة برومبتات — منذ ديسمبر 2022» مع أيقونة كأس
- النص: «حظيت بتأييد مؤسسين مشاركين في OpenAI • وتستخدمها Harvard وColumbia وغيرها»

المشهد 8: الدعوة لاتخاذ إجراء (3.5 ثانية)

- حركة توهج في الخلفية (تدرج شعاعي نابض)
- العنوان: «ابدأ الاستكشاف اليوم»
- زر كبير يحتوي على الشعار + نص «prompts.chat» (خلفية متدرجة مع نبض خفيف)
- العنوان الفرعي: «مجانية ومفتوحة المصدر»

---
الانتقالات (0.4 ثانية لكل انتقال)

- المشهد 1→2: تلاشي (Fade)
- المشهد 2→3: انزلاق من اليمين (Slide from right)
- المشهد 3→4: تلاشي (Fade)
- المشهد 4→5: تلاشي (Fade)
- المشهد 5→6: انزلاق من اليمين (Slide from right)
- المشهد 6→7: انزلاق من الأسفل (Slide from bottom)
- المشهد 7→8: تلاشي (Fade)

تقنيات الحركة المستخدمة

- spring() لحركات التكبير المرنة
- interpolate() للتحكم بالشفافية، والموضع، وclip-path
- Easing.inOut(Easing.cubic) للتمرير السلس
- Math.sin()/Math.cos() للحركات العائمة
- تأخيرات متدرجة لظهور العناصر بالتتابع

المكونات الأساسية

- مكونات أيقونات SVG مخصصة لكل الأيقونات (بدون رموز تعبيرية)
- مكون شعار يحتوي على مسار حرف «P» الخاص بـ prompts.chat
- مكون FeatureCard قابل لإعادة الاستخدام
- TransitionSeries لإدارة المشاهد