
شنو هما فيديوهات Awesome Opus 5.5؟
فيديوهات Awesome Opus 5.5 هي مجموعة منتقاة ديال الفيديوهات الرائجة اللي تدارو باستعمال Claude Opus 5.5. كل مشروع تدار من خلال طلب من Claude باش يكتب الأنيميشن على شكل كود، باستعمال تقنيات بحال HTML وCanvas وSVG وThree.js وGSAP وGLSL وWebGL وWeb Audio والجزيئات.
المستودع فيه 282 برومبت فالمجلد prompts/ وملف data/videos.json. ملف README كيسلط الضوء على 100 إدخال، بمثال واحد لكل برومبت مختلف، وكيربط كل إدخال بالمنشور الأصلي ديال المبدع.
هاد الشي ماشي مكتبة برمجية كتسطاليها وكتستوردها. بالعكس، هي معرض عملي ديال البرومبتات: اختار مثال، نسخ البرومبت ديالو، وطلب من وكيل البرمجة بالذكاء الاصطناعي ديالك يصاوب تجربة مشابهة.

تفرج على الفيديوهات الـ282 كاملين حداهُم لحداهُم مع نسخ مباشرة على Skillry.

تصفّح المجموعة حسب الفئة الإبداعية
الأمثلة المميزة منظمة فـ4 مجموعات رئيسية. هاد الشي كيسهّل عليك تبدا بالستايل البصري ولا نوع التفاعل اللي باغي تستكشف.
- رسومات حركية: 58 مثال مبنيين على تركيبات بصرية متحركة.
- شروحات: 16 مثال كيوصلو فكرة عن طريق الأنيميشن.
- مشاهد ثلاثية الأبعاد: 14 مثال كيستعملو تصاور ثلاثية الأبعاد خدامة فالمتصفح.
- ألعاب وتفاعل: 12 مثال كيتفاعلو مع إدخال المستخدم ولا كيتصرفو بحال تجارب صغيرة قابلة للعب.

التطبيقات المدرجة كتتراوح بين تجارب خفيفة بـCanvas وSVG ومشاريع كتستعمل Three.js وGSAP وGLSL وWebGL وWeb Audio وصور مولدة بالذكاء الاصطناعي وأنظمة الجزيئات. التسميات التقنية اللي باينة حد كل إدخال تقدر تعاونك تختار نقطة بداية مناسبة.

وجد المستودع
ما محتاجش تسطالي شي حزمة باش تتصفح البرومبتات. النسخة المحلية كتكون مفيدة إلا بغيتي تقلب، تحفظ المراجع، ولا تفحص معطيات الفيديو المنظمة.
- نسخ مستودع GitHub للحاسوب ديالك.
- حل مجلد المستودع فالمحرر ديالك.
- تصفّح مجلد
prompts/باش تلقى ملفات Markdown ديال البرومبتات الفردية. - حل
data/videos.jsonملي بغيتي تخدم بالمجموعة كاملة على شكل معطيات منظمة.

git clone <repository-url>
cd <repository-directory>
ملف README ما كيحدد لا بيئة تشغيل ضرورية، لا أمر لتسطال ديال التبعيات، لا سيرفر محلي للتطبيق. المجموعة موجهة بالأساس لقراية البرومبتات واتباع الأمثلة المرتبطة بها. إلا كان المشروع المولد كيستعمل مكتبات خارجية ولا واجهات API ديال المتصفح، طلب من Claude يضيف تعليمات الإعداد اللازمة لهاد المشروع بالضبط.
كيفاش تستعمل برومبت
كل إدخال مميز فيه رابط مكتوب عليه Prompt. اختار مثال كيناسب نوع الأنيميشن اللي باغي، ومن بعد حل ملف البرومبت ديالو فالمستودع.

- اختار فئة بحال الرسومات الحركية، الشروحات، المشاهد ثلاثية الأبعاد، ولا المشاريع التفاعلية.
- راجع التسميات التقنية، بحال
CanvasوSVGوGSAPولاThree.js. - حل ملف Markdown المرتبط فـ
prompts/. - نسخ البرومبت وحطو فـClaude Opus 5.5 ولا وكيل البرمجة المفضل عندك.
- طلب من الوكيل يولد ملفات المشروع ويشرح لك كيفاش تشغلو.
- حل مشروع HTML الناتج فالمتصفح وعاود حسّن النتيجة.
مثلا، ملف برومبت مرتبط بمثال ديال Canvas يقدر يكون نقطة البداية لأنيميشن فالمتصفح. بلا ما تنسخ غير الفكرة البصرية، حافظ على المتطلبات المهمة فالبرومبت، بحال طريقة العرض، وسلوك الحركة، والجو البصري، والتفاعل، والقيود التقنية. من بعد بدّل الموضوع ولا الستايل باش تولي النتيجة ديالك.
بدا ببرومبت واحد، نسخو بدقة، شغّل النتيجة المولدة، ودير التغييرات بطلبات متابعة قصيرة.

مثال على طريقة التكرار
طريقة عملية للخدمة كتكون هكذا:
- طلب من Claude يطبق الفكرة المختارة فملف HTML مستقل.
- شغّل الملف فمتصفح حديث وتأكد واش الأنيميشن كيبان مزيان.
- طلب تغيير واحد مركز، بحال ألوان مختلفة، انتقال أبطأ، ولا تفاعل جديد.
- جرّب النسخة المعدلة مرة أخرى قبل ما تطلب تغيير آخر.
- حفظ النسخ الناجحة بشكل منفصل باش تقدر تقارن بين المراحل.
ملي كيكون المشروع معتمد على تقنية معينة، ذكرها بوضوح فالطلب ديالك. مثلا، طلب تطبيق بـCanvas إلا كان المرجع موسوم بـCanvas، ولا طلب Three.js إلا كان المرجع كيستعمل مشهدا ثلاثي الأبعاد. هاد الشي كيخلي النتيجة المولدة قريبة من المثال الأصلي.


فهم التسميات التقنية
Canvas
أمثلة Canvas كترسم الغرافيك مباشرة فـ canvas ديال المتصفح، وغالباً كتكون اختيار مناسب للجسيمات، والرسوم المتحركة الإجرائية، والحركة إطار بإطار.
SVG

أمثلة SVG كتنشئ العناصر البصرية على شكل أشكال متجهية قابلة للتكبير. وكتناسب مزيان التركيبات الهندسية، والمخططات، والرسوم المتحركة اللي خاصها أشكال واضحة ودقيقة.
GSAP
GSAP كيبان فالأمثلة اللي كتستعمل مكتبة متخصصة فالرسوم المتحركة من أجل تنسيق الجداول الزمنية، والانتقالات، والحركة.
Three.js وWebGL وGLSL

هاد التسميات كتشير لأساليب عرض أكثر تقدماً. Three.js كيوفر إطار عمل بـ JavaScript للمشاهد ثلاثية الأبعاد، بينما WebGL وGLSL كيدعمو الغرافيك منخفض المستوى المسرّع بوحدة معالجة الرسوميات وتأثيرات الـ shaders.
Web Audio والجسيمات
أمثلة Web Audio كتوصل العناصر البصرية بإمكانيات الصوت ديال المتصفح. أما أمثلة الجسيمات فكتهم مجموعات ديال عناصر صغار متحركة كتنشئ تأثيرات بحال المجالات، والمسارات، والانفجارات.
نصائح متقدمة لنتائج أحسن
- استعمل المستودع كمكتبة ديال التعليمات: قارن بين عدة تعليمات قبل ما تختار وحدة، حتى إلا كنت ناوي تبني عنصراً بصرياً مختلفاً.
- تبع تسمية التقنية: بْدا بمثال أسلوب التنفيذ ديالو كيتوافق مع المشروع اللي باغي تدير.
- طلب نتيجة كاملة وقابلة للتشغيل: طلب من Claude يعطيك الكود كامل والتعليمات الواضحة ديال المتصفح، ماشي غير مقتطفات معزولة.
- طوّر المشروع بخطوات صغار: فرّق بين التغييرات البصرية، وتغييرات التفاعل، وتحسينات الأداء فطلبات مختلفة.
- خلي التعليمات الأصلية للمقارنة: حفظ النسخة المعدلة ديالك حدّ النسخة الأصلية باش تقدر تعرف شنو التغييرات اللي أثرت على النتيجة.
- تفقد روابط المصدر: كل إدخال مميز كيربط بالمنشور الأصلي ديال صاحبو، وكيعطي سياق إضافي على المشروع.
- استعمل البيانات المنظمة للاكتشاف: قلب فـ
data/videos.jsonملي تحتاج تخدم على المجموعة الكاملة ديال 282 إدخال، ماشي غير الأمثلة البارزة. - اختبر صلاحيات المتصفح: المشاريع اللي كتستعمل الصوت، أو إدخال المستخدم، أو الغرافيك المتقدم، ممكن تتصرف بشكل مختلف حسب صلاحيات المتصفح والعتاد.
الاعتمادات والأعمال الأصلية
المجموعة كتنسب الفضل للمبدعين اللي ورا الفيديوهات المميزة وكتربط بالمنشورات الأصلية ديالهم. ملي تعاود تستعمل فكرة أو تعليمة، راجع الإدخال الأصلي وحافظ على الإشارة المناسبة لصاحبو. المستودع مورد للاكتشاف والتعلم، أما الفيديوهات الفردية فهي ملك للمبدعين ديالها.
باش تستافد من تجربة التصفح الكاملة، استعمل معرض Skillry، أو تصفح ملفات التعليمات مباشرة فالمستودع.
الخلاصة
Awesome Opus 5.5 Videos كيوفر طريقة عملية لتعلم البرمجة الإبداعية المعتمدة على التعليمات. تصفح الفئات، اختار أسلوب التنفيذ، نسخ تعليمة من prompts/، وطلب من Claude Opus 5.5 ينشئ تجربة متصفح قابلة للتشغيل. ومع 282 تعليمة كتغطي Canvas وSVG وThree.js وGLSL وGSAP وWeb Audio وأكثر، كتقدم المجموعة بزاف ديال نقط البداية للرسوم المتحركة والتجارب التفاعلية ديالك.
