HyperFrames

صفحة HTML… تصير فيديو

الأداة 2 من 10

وش هي؟

نفس فكرة Remotion بس أسهل: المشهد كله صفحة HTML عادية، مثل صفحة موقع، بس تتحرك وتنحفظ فيديو. من HeyGen، وانبنت من أول يوم عشان وكلاء الذكاء الاصطناعي مثل Claude يكتبونها. هي اللي ورا كثير من فيديوهاتنا الأخيرة.

متى تستخدمها؟

لو هذي أول مرة تسوي فيديو بالكود
ستايلات كاملة للشورتات: ساحة المواجهة، ملف القضية، شاشة الهولوغرام
كابشن عربي ينطق مع الصوت كلمة كلمة

كيف تشغّلها

افتح Claude Code في مجلد جديد، أو محادثة جديدة في شات Claude العادي.
الصق واحد من البرومبتات اللي تحت.
Claude يثبّت الأداة بنفسه، يكتب الكود، ويرندر لك MP4.

أمر التثبيت اللي يشغّله Claude (للي يحب يعرف):

npx hyperframes init my-video

البرومبتات الثلاث

غيّر اللي بين الأقواس [ ] بفكرتك، وبعدها الصقه في Claude Code أو شات Claude العادي.

1مشهد لأي فكرة: كود يتحوّل لعنوان

معروض في الحلقة

سوّ مشهد HyperFrames [المدة، مثلاً 8] ثواني عن [فكرتك]: [وش يصير في أول المشهد]، وبعدها يتحوّل لعنوان «[العنوان]» مع [عنصر مميز، مثلاً ختم ✓ أو رقم يعدّ]. خلفية [لون الخلفية]، خط Cairo للعربي، وحرّك الكلمات العربية كاملة بدون تقسيم الحروف. طلّع MP4 بمقاس [1920×1080 أو 1080×1920].

البرومبت بالضبط مثل ما طلع في الحلقة

سوّ مشهد HyperFrames 8 ثواني: نافذة كود تنكتب سطر سطر، وبعدها تتحول لعنوان «صفحة HTML… صارت فيديو» مع ختم ✓ وعدّاد فريمات.

2ستايل «ساحة المواجهة» لأي مقارنة

سوّ بـ HyperFrames شورت عمودي 1080×1920 مدته [المدة] ثانية بستايل «ساحة المواجهة» يقارن بين [الشي الأول] و[الشي الثاني]: النص العلوي أزرق فيه رقم 1، والنص السفلي أحمر فيه رقم 2، وشعار VS بالنص يدخل بضربة، وفوق لوحة نتيجة للجولات. حط صوري [اسم الصورة 1] و[اسم الصورة 2] في النصين، والجولات هي: [الجولة 1]، [الجولة 2]، [الجولة 3]. خط Cairo، خلفية داكنة، طلّع MP4.

3ستايل «شاشة الهولوغرام» لأي خبر

سوّ بـ HyperFrames مشهد عمودي 1080×1920 مدته [المدة] ثانية بستايل «شاشة هولوغرام» عن [الخبر أو الفكرة]: خطوط سماوية مضيئة على خلفية سودا، [العنصر الرئيسي، مثلاً قفل أو جوال] مرسوم بخطوط (wireframe) ويلف ببطء في نص الشاشة، خط مسح يمشي من فوق لتحت، [نص أو رقم مهم] ينكتب حرف حرف، وعنوان «[العنوان]» فوق بخط Cairo. طلّع MP4.

⚠️ خذ بالك

لو فيه نص عربي، اطلب منه يحرّك الكلمة كاملة: تقسيم الكلمة لحروف يفصل الحروف العربية عن بعض.
للكابشن على الصوت: النموذج small.en يحوّل العربي لحروف إنجليزية. اطلب نموذج متعدد اللغات واللغة ar.

السعر والرخصة

مجانية ومفتوحة المصدر برخصة Apache-2.0 (حتى للاستخدام التجاري).

روابط رسمية

GitHub ↗

شفتها في الحلقة

تبي تشوف الأداة وهي تشتغل؟ الحلقة فيها 3 أمثلة حقيقية لكل أداة.

صفحة الحلقة ←

أدوات ثانية في القسم

Remotionتبني الفيديو كامل… بالقوالب

← كل أدوات Claude