HyperFrames: كتب Motion بـ HTML وCSS وخرج فيديو، ماشي Text-to-video model

عندك نفس Intro كتعاودو فكل فيديو: عنوان، جوج سطور، Logo ولقطة. كل مرة كتبدل غير النص، ولكن كتعاود الضبط فـ Timeline. هنا كاين نوع ديال الخدمة كيستافد من قالب مكتوب: تحدد الشكل والتوقيت مرة، وتعاود تستعملو مع محتوى جديد. مع HyperFrames، القالب كيبقى فملفات ديال الويب يقدر Agent أو Developer يقراهم ويعدل فيهم.

هو Framework كيحول HTML وCSS وMedia مع Animation قابلة للتحكم فالوقت لـ MP4. ماشي Model كيتخيل لقطة مصورة من Prompt. يقدر يخدم مع AI Agent كيكتب Composition، ولكن صناعة الصورة أو الصوت خدمة أخرى إلا احتجتيها. هاد الدليل مبني على الوثائق المراجعة فـ 25 أكتوبر 2026، والأوامر من نفس الوثائق. ماجربناش Render ديال هاد المثال على الأنظمة المختلفة.

شنو مناسب لهاد الطريقة؟

Titles، رسوم بيانية، شرح واجهة، Product intro أو Captions عندهم بنية واضحة كيتناسبو مع وصف برمجي. النصوص والألوان والمدد كيبقاو قابلين للتعديل فملفات. إلا كتخرج نفس النوع من الفيديو مراراً، تقدر تراجع القالب بدل ما تحرك كل عنصر من جديد يدوياً.

إلا بغيتي مشهد سينمائي مصور من الصفر، HyperFrames بوحدو ماكيجيبش هاد اللقطة. خاصك تصوير، Stock أو Provider توليد منفصل مع الحقوق والمصاريف ديالو. وإلا الخدمة كلها مونتاج حساس للتعبير واللحظة، برنامج Timeline المعتاد يقدر يبقى أريح. الأداة كتبدل طريقة Composition، ماشي جميع قرارات الإخراج.

شنو خاص للجهاز؟

المسار اليدوي فـ README كيطلب Node.js 22 أو أحدث وFFmpeg. كاتحتاج مساحة للـ Media والـ Frames وOutput، وموارد حسب المقاس والمدة والمؤثرات. ماكاينش Minimum موحد ديال RAM أو GPU نقدر نعمموه على أي فيلم. جرب عينة قصيرة بنفس Style المقصود قبل Render طويل.

كاين حتى Studio app موثق لـ Mac وLinux؛ Quickstart كايذكر أن Windows Desktop مازال جاي. هادشي مختلف على مسار CLI مع Agent، اللي الوثائق كاتقدمو للأنظمة اللي كتدعم الأدوات المطلوبة. ماتحمّلش App من موقع آخر على أساس أنه النسخة الرسمية لـ Windows. حساب HeyGen مطلوب لمسار Studio الموصوف، بينما التجربة المحلية اليدوية خاصها تتبع متطلبات CLI.

أول Workflow موثق من Terminal

فمجلد مناسب للمشاريع، شغل Quick start الرسمي:

npx hyperframes init my-video
cd my-video
npx hyperframes preview

الأمر الأول كيوجد المشروع، الثاني كيدخل للمجلد، والثالث كيفتح Preview حسب المسار الموثق. my-video اسم المثال؛ اختار مجلد جديد وما تكتبش فوق مشروع عندك. npm يقدر ينزل Package والموارد المرتبطة به، لذلك خاص اتصال وثقة فالمصدر. هاد التهيئة ماكاتطلبش Clone ديال Monorepo الكامل باش تبدا فيديو.

إلا كنتي كتستعمل Coding agent، المشروع كيعطي حتى هاد الأمر لتحديث Core skills:

npx hyperframes skills update

مسار Plugin مختلف وعندو تعليمات خاصة بالـ Client. ماخاصكش تثبت Plugin ونسخ Skills متعددة بلا حاجة. راجع فين غادي يتكتب الإعداد قبل التنفيذ، خصوصاً فمجلد فيه Skills سبق ليك عدلتيها.

تجربة صغيرة: عشرة ثواني بعنوان مقروء

خلي أول فيديو محدود: عنوان، سطر توضيحي وClosing بسيط، بلا API وبلا ميديا سرية. فتح ملفات المثال اللي وجد init وخلي البنية ديال Composition الأصلية. بدل النص فقط فالأول، باش تعرف أن Preview كيعكس التعديل قبل ما تزيد مؤثرات أو Assets.

تقدر تعطي Agent هاد Brief المقترح، باش يكتب ليك Composition. هادا مثال ديال طلب كتوجه ليه، ماشي Command داخلي فـ HyperFrames:

Make a 10-second title sequence in this HyperFrames project.
Use only text and local assets. Keep Arabic text right-to-left.
Show a readable title, a short explanation and a simple ending.
Do not call paid media APIs. Preview before rendering.

فـ Preview، وقف عند البداية، الوسط وآخر Frame. شوف واش النص مقروء، الحروف العربية متصلة، وماكاين حتى عنصر طالع من الكادر. ماتكتفيش بتصغير Browser باش يشبه الموبايل؛ مقاس الفيديو نفسه خاصو يكون مطابق للوجهة اللي حددتي فالمشروع.

خاص الحركة تعطي نفس النتيجة فنفس اللحظة

الفيديو كيحتاج إمكانية الوصول لأي لحظة وإعادة نفس المشهد فداك الوقت. لهذا الوثائق كتتكلم على Seekable animation وAdapters، باش مايبقاش المشهد تابع غير للوقت اللي بدات فيه CSS animation مع تحميل الصفحة. GSAP أو مكتبات أخرى خاصها تكون مربوطة بمسار الوقت الموثق؛ الحركة اللي بدات مع تحميل الصفحة تقدر ماتعطيش نفس Frame ملي كتقلب مباشرة للثانية الخامسة.

متزيدش Timer عشوائي غير باش المشهد «يبان حي». استعمل نمط Composition اللي جاب المثال أو Guide ديال Animation، وخلي كل Clip والصوت تابعين لنفس Timeline. Preview ناعم ماكيضمنش أن Render يلقط كلشي كيف بغيتي، لذلك خاص فحص Output.

Render ومراجعة الملف

من بعد ما تكون Preview مقبولة، وقف Preview أو فتح Terminal آخر داخل نفس المشروع، وشغل الأمر الموثق:

npx hyperframes render

راجع المسار اللي كتعلن عليه CLI للملف النهائي بدل ما تفترض اسماً ثابتاً من عندك. حل MP4 فـ Player مستقل، وشوف المدة، المقاس، أول وآخر Frame، ومزامنة الصوت إلا كان. إلا بقى العنوان مخفي أو الخط تبدل، رجع للـ Fonts والـ Assets وتوقيت التحميل قبل تغيير جميع المؤثرات.

خلي الخطوط والملفات اللي محتاج قريبين من المشروع، مع رخص استعمالهم. روابط Media خارجية تقدر تتبدل أو تتعطل، وبيئة Render ماشي دائماً نفس Browser المفتوح عندك. حفظ نسخة المشروع والأصول أهم من MP4 بوحدو إلا ناوي تعاود التصدير.

المصاريف والحدود اللي خاص تبقى واضحة

باش تعرف واش القالب صالح للإعادة، بدل العنوان بواحد أطول قبل ما تعتمدو. راجع واش بقى داخل الكادر، واش الوقفات كافية للقراءة، وواش الترجمة الإنجليزية كتحتاج ترتيب مختلف. المحتوى اللي ناسب مثالاً قصيراً ماكيضمنش أن أي نص غادي يدخل فالبلاصة نفسها. نفس الشيء فالأرقام والرسوم: Labels أطول يقدرو يحتاجو Layout مختلف.

إلا القالب غادي يتسلم لشي واحد آخر، خلي معاه ملف بسيط كيشرح شنو يقدر يبدل، فين الأصول، وكيفاش يدير Preview وRender. وزيد عينة من الفيديو النهائي باش يقدر يقارن بها، حتى إلا ماكانش مطور وعارف تفاصيل الكود. الاحتفاظ بعينة مرجعية كيعاون يكتشف تبديل الخط أو Missing asset من أول تجربة، قبل ما يخرج Batch ديال فيديوهات بنفس العيب.

الكود الأساسي مرخص بـ Apache 2.0، وREADME كايذكر غياب رسوم لكل Render فهاد الإطار المفتوح. هادي ماشي مجانية جميع عناصر الإنتاج: Agent يقدر يكون باشتراك، وميديا HeyGen أو Providers أخرى عندها Credits، وCloud rendering عندو حسابو. فرق بين مشروع كترندرو محلياً وبين Connector خدام داخل حساب مستضاف؛ راجع شروط الخدمة اللي اخترتي فعلاً.

راجع حقوق الصور والموسيقى والخطوط، وماتدخلش بيانات زبون لخدمة خارجية بلا اتفاق. خدم أولاً بنص وAssets محلية باش تقيس الوقت والجودة بلا مفاجآت. إلا بغيت تنظم Script وصوت وصور بجانب Composition، OpenMontage كيشرح الطبقة اللي كتنسق هاد المراحل، وVoiceStudio كيوضح شنو خاص يتراجع فالصوت قبل ما يركب فالفيديو.