remotion-render
تصيير الفيديوهات من كود React/Remotion
متاح أيضًا من: inference-sh-6,inference-sh-7
إنشاء فيديوهات احترافية برمجياً من كود TSX الخاص بـ React/Remotion. مرر كود المكون واحصل على مخرجات MP4 مع دعم كامل للرسوم المتحركة بما في ذلك الزنبرك والتسلسلات والاستيفاء.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "remotion-render". صير فيديو برسوم متحركة لكرة تقفز باستخدام فيزياء الزنبرك
النتيجة المتوقعة:
فيديو MP4 مدته 5 ثوانٍ عند 60 إطاراً في الثانية يعرض كرة بيضاء تقفز على خلفية بنفسجية مع فيزياء زنبرك واقعية
استخدام "remotion-render". إنشاء بطاقة عنوان متحركة مع العلامة التجارية للشركة
النتيجة المتوقعة:
فيديو مقدمة مدته 3 ثوانٍ مع شعار الشركة يتغير حجمه، شعار يتلاشى للأعلى، ورسوم مت��ركة سلسة لتدرج الخلفية
التدقيق الأمني
آمنAll static findings are false positives. The detected 'external_commands' patterns are markdown code fences in documentation, not actual shell execution. The 'pipe to shell' pattern is the standard documented install method for the inference.sh CLI with SHA-256 checksum verification. Network URLs are legitimate service integrations (inference.sh, remotion.dev). The skill makes API calls to inference.sh to render videos - this is intended functionality.
عوامل الخطر
🌐 الوصول إلى الشبكة (6)
درجة الجودة
ماذا يمكنك بناءه
فيديوهات التسويق القائمة على البيانات
إنشاء محتوى فيديو شخصي من البيانات: عناوين ديناميكية، عدادات متحركة، عروض المنتجات
رسوم متحركة للدروس التعليمية للمطورين
إنشاء فيديوهات درس تعليمية مع تمييز بناء الجملة المتحرك، تأثيرات إظهار الكود، والمخططات الديناميكية
أتمتة محتوى وسائل التواصل الاجتماعي
أتمتة إنشاء الفيديوهات لمنصات التواصل الاجتماعي مع رسوم متحركة مخصصة، تراكبات نصية، وعلامات تجارية
جرّب هذه الموجهات
صير فيديو بنص 'Hello World' يتلاشى على خلفية داكنة. استخدم 30 إطاراً في الثانية، مدة 3 ثوانٍ، دقة 1920×1080.
إنشاء رسوم متحركة للتحميل مع عداد ينتقل من 0 إلى 100٪. استخدم فيزياء الزنبرك لرسوم متحركة سلسة عند 60 إطاراً في الثانية.
إنشاء فيديو مع ثلاثة عناصر نصية تتلاشى بالتسلسل: 'First'، 'Second'، 'Third'. يظهر كل منها لمدة ثانية واحدة.
صير رسوم متحركة للمخطط الشريطي تعرض قيم البيانات [{value: 30}, {value: 70}, {value: 50}]. يجب أن تتحرك الأشرطة من 0 إلى قيمها.أفضل الممارسات
- احتفظ بالرسوم المتحركة أقل من 10 ثوانٍ للحصول على تصيير أسرع
- استخدم الاستيفاء للانتقالات السلسة للقيم بدلاً من حسابات الإطارات اليدوية
- اختبر الكود في Remotion Studio قبل استخدامه في الإنتاج
- مرر الخصائص للمحتوى الديناميكي بدلاً من ترميز القيم
تجنب
- تجنب التحويلات ثلاثية الأبعاد المعقدة التي تتطلب مكتبات إضافية
- لا تدمج صور base64 كبيرة في الكود - استخدم عناوين خارجية ��دلاً من ذلك
- تجنب تصيير فيديوهات طويلة جداً (>60 ثانية) في مرة واحدة