تحويل HTML إلى فيديو
حوّل الرسوم المتحركة للويب وشيفرة Canvas وThree.js إلى MP4
ابدأ من قالب
- نافذة شرح مباشر نافذة متحدث مدوّرة مع شارة LIVE واسم؛ صوت الفيديو يوضع على المخطط الزمني
- وسائط بإطار نافذة بحافة بيضاء متوهجة وتسمية في الزاوية؛ تظهر بالتكبير ويمكنها التقريب على منطقة
- جدار صور صور عمودية تظهر جنبًا إلى جنب، لكل منها تعليق
- لقطات قريبة ثلاثية صور متجاورة بعرض كامل، لكل منها تسمية، ورقم الفصل وعنوانه في الأسفل
- معرض بشريط مصغرات تتناوب المصغرات في الأسفل والصورة الكبيرة تتبعها
- لوحة القصة والرئيسي عمود لقطات على اليسار ونافذة رئيسية بتسمية على اليمين
- شرح بشاشة مقسومة نص كبير يسارًا (السطر الثاني بلون مميز)، وسائط يمينًا، وعلامة مخطط زمني بالأسفل
- عنوان مملوء بالوسائط يظهر الفيديو أو الصورة داخل حروف ضخمة مع عنوان صغير فوقها وعنوان فرعي أسفلها
- نموذج هاتف لقطاتك داخل إطار هاتف يطفو بلطف
- شارة الزاوية يبقى شعارك واسمك في الزاوية
- تدرج حبيبي تدرج بطيء من الأزرق المخضر إلى البرتقالي مع حبيبات فيلم — ضعه في أسفل المسارات خلفيةً
- عنوان منبثق عنوان كبير مع خط سفلي وعنوان فرعي
- كلمة بكلمة تظهر الكلمات واحدة تلو الأخرى مع الإيقاع
- نمو البيانات تنمو الأعمدة بينما يتزايد الرقم
- شريط سفلي شريط بالاسم والدور
- مسح ضوئي شعاع ضوء يمر عبر الصورة
- عدّ تنازلي تظهر 3، 2، 1 بينما تنقص الحلقة
- آلة كاتبة يكتب حرفًا حرفًا مع مؤشر وامض
- حلقة التقدم تمتلئ الحلقة حتى النسبة المطلوبة ويرتفع الرقم
- تمييز بدائرة دائرة مرسومة باليد تحيط بالمهم
- شكل ثلاثي الأبعاد دوّار عقدة معدنية تدور ببطء (Three.js)
- أعمدة الموسيقى تقفز الأعمدة مع موسيقى الخط الزمني وتومض مع الإيقاع
- بطاقات الترجمة تظهر ترجمة الفترة نفسها كل سطر في بطاقة بشريط مميز؛ أخفِ مسار الترجمة لتبقى البطاقات فقط
- عنوان مُبرز شريط تمييز ساطع يمسح بطاقة كريمية بينما تسقط الحروف الكبيرة
- كلمات حركية كلمة في كل شاشة تدخل بقوة بينما تمسح كتل سوداء وصفراء وكريمية قطريًا
- بطاقة سؤال وسم صغير وسطران كبيران، الثاني فوق شريط ساطع
- ملصقات مائلة شرائط ورقية كريمية تظهر بزوايا مائلة (افصل بـ |)
- عد تنازلي بالكتل أرقام ضخمة تتناقص، كل رقم يدفع كتلة لون جديدة
- وسوم كبسولية عنوان كبير وصف من الوسوم الكبسولية الداكنة تظهر تباعًا وخلاصة مميزة في الأسفل
- بطاقات الحالة عمود بطاقات على اليسار يمر كل منها إلى الوسط بالتتابع، ومقارنة بخط كبير على اليمين
- جدول الوسوم لوحة داكنة تسرد «الوسم ← المعنى» سطرًا بسطر، والوسوم بخط ثابت العرض
- بطاقة اقتباس وسم صغير أعلى اليسار واقتباس طويل يظهر سطرًا بعد سطر
نقرة واحدة تفتح المحرر والحركة مضافة بالفعل. في القوالب ذات خانات الوسائط، اسحب فيديو أو صورة إلى البطاقة، أو اضغط «استخدم ملفاتي»، فتكون في مكانها عند فتح المحرر. تبقى الملفات على جهازك، ولا يُرفع شيء.
الصق رسومًا متحركة مكتوبة بـ Canvas أو SVG أو GSAP أو Three.js، فتُرسم إطارًا بإطار فوق الفيديو وتُصدَّر MP4 أو GIF. في المتصفح، مجانًا وبلا علامة مائية.
الصق شيفرة رسوم متحركة لصفحة ويب أو استورد ملف .html، فيصبح مقطع حركة على الخط الزمني: بخلفية شفافة، فوق الفيديو أو الصورة، ويمكن تحريكه وتغيير حجمه وشفافيته وإضافة إطارات مفتاحية وحركات دخول وخروج إليه مثل أي مقطع آخر.
يرسمه المحرر إطارًا بإطار حسب الزمن بدل تسجيل الشاشة: اللحظة نفسها تعطي الإطار نفسه دائمًا، فما تراه في المعاينة هو تمامًا ما يُصدَّر. تُحوَّل Math.random وDate وrequestAnimationFrame إلى ساعة حتمية، وGSAP وThree.js مدمجتان فلا حاجة إلى سكربتات خارجية.
تعمل الشيفرة في بيئة معزولة (sandbox) بلا اتصال بالشبكة، لذا لا تُحمَّل الصور والخطوط الخارجية؛ ضمّنها عند الحاجة بعناوين data:. والمعاملات التي يعلنها العمل نفسه (النص والألوان والأرقام) تظهر في لوحة الإعدادات على اليمين، ثم صدّر مباشرة بصيغة MP4 أو GIF.
الأسئلة الشائعة
- ما طرق الكتابة المدعومة؟
- تعمل أربع طرق شائعة مباشرة: تعريف window.__seek(t) ليرسم إطارًا لكل قيمة بالثواني؛ أو إنشاء خط زمني GSAP متوقف ووضعه في window.__timelines؛ أو ضبط مشهد Three.js حسب الزمن داخل __seek ثم عرضه؛ أو حلقة requestAnimationFrame عادية. إذا كانت الصفحة لوحة Canvas واحدة فقط تؤخذ اللوحة مباشرة، وإلا تُرسم الصفحة كلها (SVG وCSS والنص) إطارًا واحدًا.
- هل يمكن استخدام مكتبات من CDN؟
- GSAP (مع إضافات CustomEase وMotionPath وMorphSVG وDrawSVG وSplitText) وThree.js مدمجتان، وتُستبدل عناوين CDN التي تشير إليهما تلقائيًا بالنسخة المدمجة. أما المكتبات الخارجية الأخرى فلا تُحمَّل، لأن البيئة المعزولة لا تتصل بالشبكة.
- هل في الفيديو المُصدَّر صوت؟
- مقطع الحركة لا صوت له، والصوت الذي تشغّله الشيفرة لا يُسجَّل. أضف موسيقى أو تعليقًا صوتيًا على الخط الزمني بشكل منفصل وصدّره مع الحركة.
- ماذا أفعل إذا ظهر خطأ في الشيفرة؟
- يظهر تنبيه بالخطأ أعلى المعاينة وعلى المقطع، ونص الخطأ الأصلي في نافذة الشيفرة. انقر «اطلب من الذكاء الاصطناعي الإصلاح» فيقرأ الشيفرة ويصلحها ثم يتحقق من النتيجة. وحتى ذلك الحين تبقى المعاينة على آخر إطار سليم، دون أن تتأثر المقاطع الأخرى.
- هل تُرفع شيفرتي؟
- لا. تُحفظ الشيفرة مع المشروع في متصفحك، وتُعرض وتُصدَّر على جهازك. ولا تُرفع مع المشروع إلا إذا اخترت بنفسك حفظ المشروع في السحابة.