Table of Contents
- مقدمة
- مشكلة الفيديو البرمجي اليوم
- الحل: الإطارات الفائقة
- الميزات الرئيسية
- البدء
- الاستخدام المتقدم
- المقارنة: HyperFrames مقابل Remotion
- لماذا هذا مهم الآن
- الخاتمة والخطوات التالية
مقدمة
!HyperFrames rendering pipeline: HTML template -> frame extraction -> video assembly
إذا سبق لك أن حاولت أتمتة إنتاج الفيديو، فقد اصطدمت بنفس الجدار: كل أداة - Premiere، وAfter Effects، وحتى أدوات التركيب المستندة إلى الويب - مصممة لشخص يجلس على مكتب ويحمل فأرة، وليس لبرنامج نصي يعمل دون مراقبة في مسار CI.
ماذا لو كان إنشاء مقاطع الفيديو يعمل بنفس الطريقة التي يعمل بها إنشاء موقع ويب؟
سننظر اليوم إلى HyperFrames — إطار عرض مفتوح المصدر من HeyGen والذي يتعامل مع HTML/CSS كتنسيق تأليف فيديو من الدرجة الأولى. يمكنك كتابة علامات قياسية، وإضافة بعض سمات البيانات للتوقيت، وتحويلها إلى ملف MP4 دقيق الإطار. لا رد فعل DSL. لا يوجد رسم بياني لمشهد الملكية. لا يوجد محرر فيديو.
هذه هي الأداة التي تتيح لعملاء الذكاء الاصطناعي مثل Claude Code الكتابة والتكرار على تركيبات الفيديو بنفس الطريقة التي يكتبون بها التعليمات البرمجية. وهو مرخص من Apache 2.0، ومفتوح المصدر بالكامل، على github.com/heygen-com/hyperframes.
مشكلة الفيديو البرمجي اليوم
لقد قاوم الفيديو معالجة "الكود كبنية أساسية" لعقود من الزمن. كل محاولة تتطلب إما:
- محرر واجهة المستخدم الرسومية لا يمكن كتابته ويتطلب تصديرًا يدويًا
- مجمّع React (النظر إليك، Remotion) الذي يضيف خطوة بناء وDSL حسب رأيه
- تسجيل الشاشة لنافذة المتصفح - هش، ومنخفض الجودة، ويسقط الإطار
- خدمات العرض السحابي التي تكلف بالدقيقة وتقيدك بالمورد
التكلفة الحقيقية ليست مجرد الأدوات. إنه ** لا يمكن لسير عمل الفيديو المشاركة في Git. ** لا يمكنك التمييز بين مشروع Premiere. لا يمكنك مراجعة تركيبة الفيديو في طلب السحب. لا يمكنك إعادة إنتاج نفس المخرجات من نفس المدخلات إلا إذا قام الفنان الخاص بك بذلك بنفس الطريقة تمامًا في كل مرة. ويتم استبعاد عملاء الذكاء الاصطناعي - الذين أصبحوا جيدين بشكل ملحوظ في كتابة التعليمات البرمجية - تمامًا من الوسط.
يتطلب الفيديو الآلي على نطاق واسع ثلاثة أشياء لا توفرها أي أداة موجودة بشكل كامل:
- الإخراج الحتمي — نفس الإدخال = فيديو متطابق دائمًا
- مصدر Git القابل للتتبع — اختلافات التعليمات البرمجية وعمليات التراجع والتفرع
- التأليف الأصلي للوكيل — يمكن لحاملي ماجستير القانون كتابة المقطوعات الموسيقية وتعديلها دون تدريب متخصص
تم تصميم HyperFrames لتقديم الثلاثة.
الحل: الإطارات الفائقة
HyperFrames هو إطار عرض فيديو مفتوح المصدر من HeyGen يتيح لك تحديد تركيبات الفيديو كملفات HTML وعرضها إلى MP4 عبر Chrome + FFmpeg بدون رأس.
فلسفتها الأساسية بسيطة وأنيقة: "اكتب HTML. اعرض الفيديو. مصمم للعملاء."
يصبح كل عنصر في HTML الخاص بك "مقطعًا" مؤقتًا على المخطط الزمني للفيديو، ويتم التحكم فيه من خلال سمات data-. الرسوم المتحركة موجودة في CSS/JS القياسي (GSAP، Lottie، Three.js). المعاينة هي متصفح إعادة التحميل المباشر. يتم تقديم الإخراج بتشفير FFmpeg ودقة الإطار. لا يوجد تنسيق خاص يقف بينك وبين الملف النهائي.
مع 19.9 ألف نجمة و1.9 ألف شوكة مع 145 إصدارًا اعتبارًا من مايو 2026، فهو بالفعل إطار الفيديو مفتوح المصدر الأكثر ثراءً والذي يتم شحنه في مساحة وكيل المطور + الذكاء الاصطناعي.
الميزات الرئيسية
تكوين HTML الأصلي
تركيبات HyperFrames هي ملفات HTML عادية. لا رد فعل. لا يوجد تسكس. لا المجمع.
<معرف القسم = "المرحلة"
معرف تكوين البيانات = "الفيديو الخاص بي"
بداية البيانات = "0"
عرض البيانات = "1920"
ارتفاع البيانات = "1080">
<فيديو
معرف = "مقطع-1"
بداية البيانات = "0"
مدة البيانات = "5"
فهرس مسار البيانات = "0"
سرك = "intro.mp4"
كتم الصوت
com.playsinline
></فيديو>
<img
معرف = "تراكب"
فئة = "مقطع"
بداية البيانات = "2"
مدة البيانات = "3"
فهرس مسار البيانات = "1"
سرك = "شعار.png"
/>
<الصوت
معرف = "bg-الموسيقى"
بداية البيانات = "0"
مدة البيانات = "9"
فهرس مسار البيانات = "2"
حجم البيانات = "0.5"
سرك = "الموسيقى.واف"
</الصوت>
</div>قاعدة الثلاثة تحكم المقطوعات الموسيقية الصالحة:
- العنصر الجذر يحتاج إلى
معرف تكوين البيانات،عرض البيانات،ارتفاع البيانات - العناصر الموقوتة تحتاج إلى
class="clip"وdata-startوdata-durationوdata-track-index - الرسوم المتحركة يجب أن تستخدم
{ مؤقت: صحيح }في المخططات الزمنية لـ GSAP والتسجيل فيwindow.__timelines
هذا حفل قريب من الصفر. يمكن لأي مطور ويب يمكنه كتابة عناصر "div" كتابة مقطع فيديو.
التصميم الأول بالذكاء الاصطناعي
لا تعد HyperFrames متوافقة مع الذكاء الاصطناعي فحسب، بل إنها *مصممة لوكلاء ترميز الذكاء الاصطناعي.
واجهة سطر الأوامر (CLI) غير تفاعلية بشكل افتراضي، مما يعني أنها قابلة للبرمجة حسب التصميم. رسائل الخطأ قابلة للقراءة آليًا. الإخراج هو نص عادي. لا توجد مطالبات TTY تمنع الوكيل مقطوع الرأس.
والأهم من ذلك، أن إطار العمل يأتي مزودًا بـ حزمة المهارات التي تعلم عملاء الذكاء الاصطناعي الأنماط الصحيحة:
نبكس سيقتل إضافة heygen-com/hyperframesبمجرد التثبيت، تصبح أوامر الشرطة المائلة التالية متاحة في Claude Code:
/hyperframes— مؤلف وتحرير المقطوعات الموسيقية/hyperframes-cli- init، lint، Preview، render/hyperframes-media- تحويل النص إلى كلام، والنسخ، وإزالة الخلفية/gsap،/lottie،/three،/animejs،/css-animations،/waapi- مهارات الرسوم المتحركة الخاصة بالمحول
إن مطالبة البداية الباردة مثل "إنشاء مقدمة منتج مدتها 10 ثوانٍ مع عنوان متدرج وموسيقى خلفية" تنتج مقطوعة موسيقية ناجحة. تعمل مطالبات البداية الدافئة التي تأخذ HTML/PDF/CSV الموجودة وتحولها إلى مقاطع فيديو بشكل جيد. التكرار هو مجرد لغة طبيعية: "اجعل العنوان أكبر مرتين، وأضف تلاشيًا في النهاية."
هذه تجربة مختلفة نوعيًا عن محاولة تشغيل Premiere عبر واجهة برمجة التطبيقات (API) أو تشفير JSX يدويًا في Remotion.
أكثر من 50 قطعة جاهزة للاستخدام
HyperFrames يأتي بتسجيل كتلة قابلة للتوسيع. قم بتثبيت المكونات المشتركة باستخدام أمر CLI واحد:
تضيف الإطارات التشعبية npx انتقالًا من خلال اللون الأبيض للتظليل
تضيف إطارات npx الفائقة تراكبًا اجتماعيًا لمتابعة Instagram
تضيف الإطارات التشعبية npx مخطط بيانات # مخططًا متحركًاتتضمن قوالب أنماط الفيديو "swiss-grid"، و"nyt-graph"، و"play-mode"، و"vignelli" - والتي تغطي سرد القصص عن البيانات التحريرية والنظيفة للشركات، ووسائل التواصل الاجتماعي النشطة، وتنسيقات الصور الشخصية مقاس 9:16.
نمط محول الإطار
يقدم HyperFrames فكرة "محول الإطار" التي تفصل بشكل واضح منطق التوقيت عن وقت تشغيل الرسوم المتحركة. قم بإحضار مكتبة الرسوم المتحركة الخاصة بك التي يمكن البحث عنها - GSAP، أو Lottie، أو CSS keyframes، أو Three.js، أو Web Animations API - ويتولى HyperFrames عملية البحث عن الإطارات وتركيبها.
هذا يعني أنك لست مضطرًا إلى إعادة كتابة معرفتك الحالية بالرسوم المتحركة. إذا كان فريقك يستخدم بالفعل مخططات GSAP الزمنية للرسوم المتحركة على الويب، فإن هذه المخططات الزمنية نفسها تعمل في تركيبات فيديو HyperFrames.
محرك العرض الحتمي
خط أنابيب العرض دقيق الإطار من خلال البناء:
مصدر HTML ← يقوم Chrome بتحميل تركيبة بدون رأس ← يسعى Chrome إلى الإطار = الأرضية (الوقت × FPS) ← التقاط الشاشة ← تشفير FFmpeg ← MP4توفر واجهة برمجة التطبيقات beginFrame في Chrome دقة الإطار الفرعي. لا يوجد تشغيل على مدار الساعة. لا توجد ظروف سباق بين رأس التشغيل والالتقاط. نفس HTML، نفس المدخلات، نفس ملف الفيديو في كل مرة.
هذه الحتمية هي ما يجعل سير العمل المعتمد على الذكاء الاصطناعي قابلاً للتطبيق. يمكن لـ LLM تعديل التركيبة بشكل متكرر بأمان، وإعادة العرض، والقيام بالتمييز البصري - وهو أمر مستحيل باستخدام الأدوات التي يتغير مخرجاتها بناءً على حمل الماكينة، أو انحراف الساعة، أو الوقت من اليوم.
مصدر مفتوح بالكامل (Apache 2.0)
يقوم HeyGen بشحن HyperFrames ضمن Apache 2.0 — وهو ترخيص متساهل ومعتمد بالكامل من OSI. لا يوجد مستوى مدفوع أعلى من حد الفريق الصغير (كما تستخدم الإزالة). لا يوجد ترخيص متاح المصدر. الحقوق الكاملة لتقسيم المنتج أو تعديله أو شحنه تجاريًا أو إنشاء منتج فوقه.
البدء
المتطلبات الأساسية
العقدة -v # تحتاج >= 22 (تحقق مع nvm)
ffmpeg -version # مطلوب للتشفيرالإعداد السريع
# الخيار 1: الحرف الأول للمشروع التفاعلي
إطارات npx الفائقة تقوم بتشغيل الفيديو الخاص بي
مؤتمر نزع السلاح بلدي الفيديو
npx Hyperframes Preview # يفتح المتصفح مع إعادة التحميل المباشر
تعرض الإطارات التشعبية npx # مخرجات MP4
## الخيار 2: وكيل الذكاء الاصطناعي (مستحسن)
تضيف مهارات npx heygen-com/hyperframes
## ثم استخدم الإطارات التشعبية/ في Claude Code وCursor وما إلى ذلك.التكوين الأول
أنشئ index.html في جذر مشروعك:
<معرف القسم = "الجذر"
معرف تكوين البيانات = "مرحبا"
عرض البيانات = "1920"
ارتفاع البيانات = "1080">
<h1 معرف = "العنوان" فئة = "مقطع"
بداية البيانات = "0"
مدة البيانات = "5"
فهرس مسار البيانات = "0"
النمط = "حجم الخط: 96 بكسل؛ اللون: أبيض؛ عائلة الخط: بلا serif؛">
الإطارات التشعبية
</h1>
</div>معاينة الإطارات التشعبية npx # شاهد النتيجة مباشرة
عرض الإطارات التشعبية npx # حفظ باسم الإخراج.mp4هذا كل شيء. لا المجمع. لا يوجد تثبيت npm لإطار العمل الأساسي. ملف HTML واحد عبارة عن تركيبة فيديو كاملة.
الاستخدام المتقدم
الرسوم المتحركة للجدول الزمني GSAP
تعمل الرسوم المتحركة لـ GSAP في HyperFrames بقاعدة مهمة واحدة - قم بإيقافها مؤقتًا حتى تتحكم HyperFrames في التشغيل:
// timeline.js — تم تحميله عبر <script> في تكوينك
const tl = gsap.timeline({ متوقف مؤقتًا: صحيح });
tl.to('#title', { x: 200, العتامة: 1, المدة: 2, السهولة: 'power2.out' })
.to('#subtitle', { y: 0, العتامة: 1, المدة: 1 }, '-=0.5');
// قم بالتسجيل حتى تتمكن إطارات HyperFrames من البحث عنه
window.__timelines = { main: tl };يبحث HyperFrames عن "window.__timelines.main" لتحديد موضع الإطار بدقةns أثناء التقديم. يمكنك تصفح المخطط الزمني في معاينة المتصفح في أي لحظة ورؤية معاينة دقيقة للإطار.
مؤلفات متعددة المسارات
تتحكم مؤشرات المسار في الطبقات في المُركب. يتم عرض "فهرس مسار البيانات" الأعلى في الأعلى:
<!-- المسار 0: الفيديو الأساسي -->
<video data-track-index="0" ... />
<!-- المسار 1: تراكب الرسومات -->
<svg data-track-index="1" ... />
<!-- المسار 2: التسميات التوضيحية (أعلى المجموعة) -->
<div class="clip" data-track-index="2" ... />ما يصل إلى جميع طبقات مكونات المتصفح المتاحة لكل إطار؛ لا يوجد حد ثابت لكل مشروع.
خط أنابيب من موقع الويب إلى الفيديو
تتضمن HyperFrames مهارة "الانتقال من موقع الويب إلى الإطارات التشعبية" التي تلتقط عنوان URL المباشر وتحوله إلى تركيبة فيديو. يتيح ذلك سير عمل مؤتمت بالكامل مثل:
- "عرض الصفحة الرئيسية على aratech.ae على شكل فيديو مسجل للشاشة مدته 30 ثانية"
- "خذ مستند Notion وحوّل كل قسم إلى شريحة محددة بوقت"
- "إنشاء عرض توضيحي للمنتج من عنوان URL المرحلي المباشر"
هذه هي حلقة إنشاء الفيديو المتوافقة مع CI والتي لا تزال معظم فرق التسويق تقوم بها يدويًا.
لوتي وThree.js
// مشغل Lottie مسجل بواسطة HyperFrames runtime
window.__hfLottie.play('animation.json');
// مشهد Three.js - تُدخل الإطارات الفائقة وقت الإطار الحالي
window.__hfThreeTime = 0; // ثانية، اضبط كل إطار حسب المحركتقوم مهارات المحول (/lottie، /3) بالتهيئة التلقائية للتوقيت العالمي الصحيح وكشف الإطار، لذلك لا تحتاج إلى إعداد أي سباكة بنفسك.
المقارنة: HyperFrames مقابل Remotion
HyperFrames مستوحاة مباشرة من Remotion — إطار عمل الفيديو البرمجي القائم على React والمستخدم في HeyGen في الإنتاج. كلاهما يقودان سيارة Chrome مقطوعة الرأس. كلاهما ينتج مخرجات حتمية دقيقة الإطار. كل من مهارات وكيل السفينة. يعتمد الانقسام المعماري على قرار أساسي واحد: ماذا يكتب المؤلف الرئيسي؟
بالنسبة للفرق التي تكتب بالفعل HTML/CSS أو تحتاج إلى تضمين أصول الويب الموجودة في الفيديو: HyperFrames هو الخيار الواضح. بالنسبة للفرق التي استثمرت بشكل كبير في مكتبة مكونات React مع CI/CD: تتمتع Remotion ببعض المزايا على الجبهة الموزعة.
تستحق فجوة الترخيص التأكيد عليها. يعني نموذج "المصدر المتاح" الخاص بـ Remotion أن حجم شركتك أو إيراداتها أو طوبولوجيا النشر قد يؤدي إلى تشغيل ترخيص مدفوع. لا يوجد لدى HyperFrames مثل هذا التقييد ضمن Apache 2.0.
لماذا هذا مهم الآن
هناك تحولان متقاربان يجعلان إطارات HyperFrames ذات صلة هذا العام بدلاً من بعض خطوط الأنابيب المستقبلية:
1. فيديو وكيل الذكاء الاصطناعي موجود هنا. يستطيع كلود كود، وكورسور، وكوديكس البرمجة. والآن، باستخدام HyperFrames، يمكنهم ترميز الفيديو. اللغة الطبيعية ← تكوين HTML ← MP4 المقدم هو سير عمل شامل يتم تشغيله اليوم. لا تحتاج إلى الانتظار حتى يصبح نموذج فيديو الذكاء الاصطناعي جيدًا بما فيه الكفاية؛ أنت بحاجة إلى HTML وعارض ليكونا جيدين بما فيه الكفاية - وهما كذلك.
2. يعد الفيديو البرمجي بمثابة خندق تنافسي. تتمتع الفرق التي تنشئ فيديو على نطاق واسع من البيانات المنظمة (CSV ← سباقات المخططات الشريطية، PDF ← مقاطع الفيديو الترويجية، موقع الويب ← بكرات العرض التوضيحي) بميزة غير إنسانية في سرعة إنتاج المحتوى. الأدوات التي تقفل معظم المطورين والوكلاء أولاً ستحدد البنية التحتية للموجة التالية من المحتوى الآلي.
HyperFrames هو إصدار مبكر ولكنه يتحرك بسرعة — 145 إصدارًا ونظامًا بيئيًا مخصصًا للمهارات والتكامل مع كل وكيل ترميز الذكاء الاصطناعي الرئيسي. إنه الوقت المناسب للبدء في البناء به.
الخاتمة والخطوات التالية
HyperFrames ليست مجرد أداة فيديو أخرى. إنه إطار العرض الأول الذي يتعامل مع تكوين الفيديو باعتباره قطعة أثرية من الدرجة الأولى في سير عمل المطور - يتم إصداره في Git، ومراجعته في العلاقات العامة، وتكراره بواسطة الوكلاء، ويتم تقديمه بشكل حتمي في كل التزام.
إذا كنت في حاجة إلى:
- أنشئ 100 مقطع فيديو تقديمي مخصص من بيانات CRM
- تحويل مجموعة من الصفحات المقصودة إلى شريط تجريبي
- أتمتة إنشاء المقاطع الاجتماعية من نصوص البودكاست
- تضمين إخراج الفيديو الذي تم إنشاؤه بواسطة الذكاء الاصطناعي في خط أنابيب CI/CD
…HyperFrames هي الأداة التي تغلق الحلقة.