الفيديو · اتجاه رائج
حوّل فيديو Claude إلى MP4 باستخدام HyperFrames: شرح عملي مُختبَر
كثيراً ما تذكر المنشورات عن فيديوهات Claude Opus 5.5 هذا الأسبوع أداة تصيير مثل HyperFrames أو Remotion: يكتب Claude الفيديو على هيئة شيفرة، وتحوّله أداة التصيير إلى MP4. وHyperFrames أداة تصيير مفتوحة المصدر من HeyGen. في 28 سبتمبر 2026 كان HyperFrames من أسرع عمليات البحث صعوداً بين عمليات البحث المرتبطة بـ Remotion في عرض الأيام الـ 90 على Google Trends.
اختبرناه بالطريقة التي سيستخدمه بها نشاط تجاري صغير. في 28 سبتمبر 2026 تلقّت جلسة Claude Code تعمل بنموذج Opus 5.5 موجز مقطع Reel المقهى نفسه الذي استخدمناه في claude.ai، ومعه واجهة سطر الأوامر الخاصة بـ HyperFrames. لا يشغّل Ciyo نموذج Claude Opus 5.5؛ فالصورة جاءت من Ciyo، وكل ما عداها عمل على جهاز MacBook.
ما الذي يفعله HyperFrames
يقرأ HyperFrames صفحة HTML تحمل عناصرها خصائص توقيت، ويشغّلها في Chrome دون واجهة (headless) إطاراً بعد إطار، ثم يرمّز الإطارات إلى MP4 باستخدام ffmpeg. ولأن كل إطار يُحسب من الصفحة بدلاً من تسجيله في الوقت الفعلي، يعطي الملف نفسه الفيديو نفسه في كل مرة.
المشروع مفتوح المصدر بترخيص Apache 2.0. يعود مستودعه على GitHub إلى مارس 2026، وصدر الإصدار 0.8.81 في 27 سبتمبر 2026. ويقدّم إضافة لـ Claude Code وأداة سطر أوامر؛ واستخدمنا أداة سطر الأوامر عبر npx، فلم يُثبَّت أي شيء على مستوى النظام.
| المعيار | في claude.ai | Claude Code مع HyperFrames |
|---|---|---|
| من يتولى التصيير | سكربت Claude نفسه في بيئة المحادثة المعزولة | HyperFrames على حاسوبك |
| ما تحتفظ به | ملف MP4 | ملف MP4 وتركيبة HTML قابلة للتعديل |
| تغيير سطر واحد | اطلب مرة أخرى؛ فيعيد التصيير | عدّل ملف HTML وصيّره مرة أخرى |
| الملف نفسه، الفيديو نفسه | لم نختبره | نعم: مطابق بايتاً ببايت في اختبارنا |
الموجز والصورة
صنعنا صورة المنتج في Ciyo بدقة 2K، فجاءت بمقاس 1440 × 2560 بكسل، أي أكبر من 1080 × 1920 الذي يحتاجه الـ Reel. ثم أعطينا Claude Code موجز المقهى نفسه الذي أرسلناه في claude.ai، مع تعليمة إضافية واحدة: استخدم سطر أوامر HyperFrames وتعلّم صيغته من توثيقه الخاص.
استخدم واجهة سطر الأوامر (CLI) الخاصة بـ HyperFrames عبر npx -y hyperframes@0.8.81. تعلّم صيغة التركيبة من npx -y hyperframes@0.8.81 docs (data-attributes، compositions، gsap، rendering). لا تثبّت مهارات أو إضافات أو أي شيء على مستوى النظام، ولا تنشر شيئاً. سلّم الفيديو النهائي باسم fernhollow-reel-hyperframes.mp4.ما الذي فعله Claude، خطوة بخطوة
استغرقت المهمة كلها 5 دقائق و44 ثانية. قرأ Opus التوثيق، وأنشأ هيكل مشروع بالأمر init، وكتب ملف HTML واحداً فيه أربعة مسارات: الصورة، والعنوان الرئيسي، والعرض، والبطاقة الختامية. كل منها عنصر له وقت بداية ومدة، وتحرّك GSAP ما يحدث داخله.
وقبل التصيير شغّل أمر check في HyperFrames، فلم يجد أخطاء ووجد أربعة تحذيرات عن البنية، ثم التقط صوراً ثابتة بالأمر snapshot عند لحظات مختارة. وفي تلك الصور كان السعر يتداخل مع أعلى الكأس، فنقل نقطة ارتكاز التكبير وصغّر العنوان. وأزال أيضاً نمط أحرف كبيرة كان قد حوّل "New for autumn" إلى أحرف كبيرة، ليبقى النص كما كُتب بالضبط.
التصيير، مقيساً
استغرق أمر render مدة 59 ثانية على MacBook Pro بشريحة M1 Max. ملف MP4 بمقاس 1080 × 1920 بمعدل 30 إطاراً في الثانية، و450 إطاراً، و15.0 ثانية، و16.4 MB، دون مسار صوتي. وأسطر النص الخمسة كلها مطابقة تماماً.
ثم صيّرنا المشروع نفسه مرة ثانية. استغرق ذلك 28 ثانية، وجاء الملف مطابقاً بايتاً ببايت: المجموع الاختباري SHA-256 نفسه، و450 من 450 إطاراً متطابقة. وهذا ما يجعل الفيديو المبني بالشيفرة مفيداً للأعمال التجارية. فحين تغيّر سعراً واحداً، يتغيّر ذلك السعر وحده.
أداة التصيير لا تصلح التصميم
يجعل HyperFrames التصيير دقيقاً؛ لكنه لا يجعل التصميم أفضل. فقد كانت لهذا الـ Reel العادات نفسها التي كانت للمقطع الذي صنعه Opus في claude.ai. الإطار الافتتاحي بلا نص، ويظهر السطر الأول تدريجياً بدءاً من 0.5 ثانية، وتضع البطاقة الختامية طبقة داكنة فوق الصورة، فينخفض سطوع الكأس إلى نحو 43 من 255.
والخبر الجيد أن كل إصلاح تعديل صغير في ملف واحد. اطلب من Claude الاسم في الإطار الأول ومنتجاً ساطعاً في البطاقة الختامية، ثم صيّر مرة أخرى في أقل من دقيقة.
ما يجب أن تعرفه قبل أن تبدأ
يحتاج HyperFrames إلى Node 22 وChrome وffmpeg على حاسوبك؛ ويتحقق منها أمر doctor الخاص به. حمّل المشروع GSAP من CDN وخطّين من Google Fonts، واستخدم خطاً من خطوط نظام macOS، لذلك قد يبدو التصيير على حاسوب آخر مختلفاً ما لم تستخدم خيار Docker الخاص به. ولأداة سطر الأوامر أيضاً قياس استخدام مجهول الهوية، ويمكنك إيقافه بالأمر hyperframes telemetry disable.
| الأمر | ما الذي فعله |
|---|---|
| الأمر npx hyperframes docs | عرض صيغة التركيبة |
| الأمر npx hyperframes init | أنشأ ملفات المشروع |
| الأمر npx hyperframes check | وجد مشكلات التخطيط والتباين قبل التصيير |
| الأمر npx hyperframes snapshot | صيّر صوراً ثابتة عند لحظات مختارة |
| الأمر npx hyperframes render | كتب ملف MP4 |
HyperFrames وClaude
ما هو HyperFrames؟
أداة مفتوحة المصدر من HeyGen تصيّر رسوم HTML وCSS وJavaScript المتحركة إلى MP4 أو WebM، إطاراً بعد إطار، في Chrome دون واجهة.
هل أحتاج إليه لصنع فيديو مع Claude؟
ليس في claude.ai: فهناك صيّر Opus 5.5 ملف MP4 بسكربته الخاص. أما في Claude Code على حاسوبك، فأداة تصيير مثل HyperFrames تحوّل HTML إلى فيديو وتُبقي المصدر قابلاً للتعديل.
كم يستغرق التصيير؟
استغرق مقطع Reel الذي مدته 15 ثانية بمقاس 1080 × 1920 مدة 59 ثانية في المرة الأولى و28 ثانية في المرة الثانية على MacBook Pro بشريحة M1 Max.
هل يشغّل Ciyo أداة HyperFrames أو Opus 5.5؟
لا. صنع Ciyo صورة المنتج. وعمل Opus 5.5 وHyperFrames في Claude Code على حاسوب محلي.
ابدأ بصورة تستحق التحريك
ولّد الصورة الثابتة للمنتج في Ciyo بدقة 2K، ثم دع الشيفرة تبني الحركة حولها.