دليل شامل لنظام قوالب Rendervid. تعلم كيفية إنشاء قوالب فيديو JSON، استخدام المتغيرات الديناميكية بصيغة {{variable}}، تكوين أكثر من 40 إعداد مسبق للرسوم المتحركة، 17 انتقال للمشاهد، وأكثر من 30 دالة تسهيل.
Rendervid هو محرك عرض فيديو برمجي مبني حول نظام قوالب تصريحي قائم على JSON. بدلاً من تحرير الفيديو يدوياً في خط زمني، تقوم بتعريف كل جانب من جوانب الفيديو الخاص بك – المشاهد، الطبقات، الرسوم المتحركة، الانتقالات، وإعدادات الإخراج – في مستند JSON واحد. هذا النهج يجعل القوالب عديمة الحالة، قابلة للتحكم في الإصدار، وقابلة للتوليد بواسطة الآلة، مما يفتح الباب أمام إنتاج الفيديو المدعوم بالذكاء الاصطناعي، وخطوط أنابيب العرض الدفعي، وسير عمل المحتوى الآلي بالكامل.
يغطي هذا الدليل نظام قوالب Rendervid الكامل من الأعلى إلى الأسفل: التكوين على مستوى الجذر، إعدادات الإخراج، نظام المتغيرات والإدخال، المشاهد والتركيب، جميع أنواع الطبقات الثمانية، أكثر من 40 إعداد مسبق للرسوم المتحركة، أكثر من 30 دالة تسهيل، 17 انتقال للمشاهد، المؤثرات البصرية، تكوين الخطوط، وتنسيقات الإخراج.
كل قالب Rendervid هو كائن JSON مع مجموعة محددة جيداً من الحقول على مستوى الجذر. إليك هيكل القالب الكامل:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
name | string | نعم | معرف القالب القابل للقراءة |
output | object | نعم | تكوين إخراج الفيديو أو الصورة (الأبعاد، معدل الإطارات، المدة، التنسيق) |
inputs | array | لا | تعريفات الإدخال الديناميكية لمتغيرات القالب |
composition | object | نعم | يحتوي على مصفوفة scenes التي تحدد كل المحتوى المرئي |
fonts | object | لا | تصريحات Google Fonts والخطوط المخصصة |
customComponents | object | لا | مكونات الطبقة المخصصة المسجلة |
defaults | object | لا | القيم الافتراضية المطبقة على جميع الطبقات ما لم يتم تجاوزها |
حقل name مخصص لأغراض تنظيمية – لا يؤثر على العرض. حقلا output و composition هما الركيزتان الأساسيتان اللتان يجب أن يحتوي عليهما كل قالب. كل شيء آخر اختياري ولكنه يفتح قدرات قوية.
كائن output يتحكم في الملف المعروض النهائي: تنسيقه، أبعاده، معدل الإطارات، المدة، ولون الخلفية.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| الحقل | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | string | "video" | نوع الإخراج: "video" أو "image" |
width | number | 1920 | العرض بالبكسل (حتى 7680 لـ 8K) |
height | number | 1080 | الارتفاع بالبكسل (حتى 4320 لـ 8K) |
fps | number | 30 | الإطارات في الثانية (1-120) |
duration | number | – | المدة الإجمالية بالثواني |
backgroundColor | string | "#000000" | لون الخلفية بتنسيق hex، RGB، أو اسم لون |
إليك تكوينات الإخراج للتنسيقات الشائعة:
1080p Full HD (YouTube، الاستخدام العام):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 عمودي):
{
"type": "video",
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 30,
"backgroundColor": "#FFFFFF"
}
4K UHD:
{
"type": "video",
"width": 3840,
"height": 2160,
"fps": 60,
"duration": 120,
"backgroundColor": "#000000"
}
Open Graph / صورة المشاركة الاجتماعية:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
بالنسبة لإخراج الصور، يتم تجاهل fps و duration – يلتقط العارض إطاراً واحداً.
نظام الإدخال والمتغيرات هو ما يجعل قوالب Rendervid قابلة لإعادة الاستخدام. بدلاً من ترميز النص أو الألوان أو عناوين URL في القالب الخاص بك، تقوم بتعريف مدخلات والإشارة إليها باستخدام صيغة {{variableName}} في أي مكان في القالب.
يتم تصريح المدخلات في مصفوفة inputs على المستوى الأعلى. كل كائن إدخال يصف متغيراً واحداً:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Title",
"description": "Main title text displayed in the intro scene",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Brand Color",
"description": "Primary brand color used for backgrounds and accents",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Show Subtitle",
"description": "Toggle subtitle visibility",
"required": false,
"default": true
}
]
}
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
key | string | نعم | معرف فريد يستخدم في مراجع {{key}} |
type | string | نعم | نوع البيانات: string، number، boolean، color، url، array |
label | string | لا | تسمية قابلة للقراءة لعرض واجهة المستخدم |
description | string | لا | شرح لما يتحكم فيه هذا الإدخال |
required | boolean | لا | ما إذا كان يجب توفير الإدخال في وقت العرض |
default | any | لا | قيمة احتياطية إذا لم يتم توفير إدخال |
string – نص حر. يستخدم للعناوين والأوصاف والتسميات التوضيحية أو أي محتوى نصي.number – قيم رقمية. يستخدم للمدد والأحجام والمواضع ومستويات العتامة أو الأعداد.boolean – مفاتيح صح/خطأ. يستخدم للرؤية الشرطية أو علامات الميزات أو مفاتيح التشغيل/الإيقاف.color – قيم الألوان بتنسيق hex (#FF5733)، RGB (rgb(255,87,51))، أو تنسيق مسمى. يستخدم للخلفيات وألوان النص والتمييزات.url – سلاسل عناوين URL صالحة. يستخدم لمصادر الصور ومصادر الفيديو والروابط وعناوين URL للخطوط.array – قوائم القيم. يستخدم لمعارض الصور وقوائم النصوص ومحتوى الشرائح أو أي بيانات متكررة.بمجرد تعريف المدخلات، قم بالإشارة إليها في أي مكان في القالب باستخدام أقواس معقوفة مزدوجة:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
يتم حل المتغيرات في وقت العرض. عندما تستدعي Rendervid API أو CLI، تمرر القيم الفعلية:
{
"title": "Summer Sale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
إليك قالب كامل مع أنواع إدخال متعددة تعمل معاً:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"description": "Name of the product being promoted",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "Price",
"description": "Product price displayed in the video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Product Image URL",
"description": "URL to the product image",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accent Color",
"description": "Color used for CTA buttons and highlights",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Show Sale Badge",
"description": "Whether to display the sale badge overlay",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Product Features",
"description": "List of feature bullet points",
"required": false,
"default": ["Feature 1", "Feature 2", "Feature 3"]
}
],
"composition": {
"scenes": [
{
"name": "hero",
"duration": 15,
"layers": [
{
"type": "image",
"src": "{{productImage}}",
"position": { "x": 540, "y": 400 },
"size": { "width": 600, "height": 600 }
},
{
"type": "text",
"text": "{{productName}}",
"style": { "fontSize": 48, "fontWeight": 700, "color": "#FFFFFF" },
"position": { "x": 540, "y": 80 }
},
{
"type": "text",
"text": "${{price}}",
"style": { "fontSize": 64, "fontWeight": 900, "color": "{{accentColor}}" },
"position": { "x": 540, "y": 900 }
}
]
}
]
}
}
يمكن لهذا القالب الواحد توليد الآلاف من مقاطع الفيديو الفريدة للمنتجات ببساطة عن طريق تغيير قيم الإدخال في وقت العرض – دون الحاجة إلى تعديلات على القالب.
كائن composition هو المكان الذي يوجد فيه محتوى الفيديو الخاص بك. يحتوي على مصفوفة scenes، وكل مشهد يمثل قطعة متميزة من الفيديو مع مدته وطبقاته وانتقاله الخاص.
{
"composition": {
"scenes": [
{
"name": "intro",
"duration": 5,
"transition": {
"type": "fade",
"duration": 1
},
"layers": [ ... ]
},
{
"name": "main-content",
"duration": 20,
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "left"
},
"layers": [ ... ]
},
{
"name": "outro",
"duration": 5,
"layers": [ ... ]
}
]
}
}
| الحقل | النوع | مطلوب | الوصف |
|---|---|---|---|
name | string | لا | معرف للمشهد (للقراءة وتصحيح الأخطاء) |
duration | number | نعم | طول المشهد بالثواني |
transition | object | لا | تأثير الانتقال عند الدخول إلى هذا المشهد من المشهد السابق |
layers | array | نعم | مصفوفة مرتبة لكائنات الطبقة المعروضة من الأسفل إلى الأعلى |
تُشغل المشاهد بالتسلسل. إجمالي مدة الفيديو هو مجموع جميع مدد المشاهد (ناقص أي تداخل انتقالي). يتم عرض الطبقات داخل المشهد بترتيب المصفوفة – الطبقة الأولى تقع في أسفل المكدس المرئي، والطبقة الأخيرة تقع في الأعلى.
إذا لم يتم تحديد انتقال، يستخدم المشهد cut قاسٍ افتراضياً.
يدعم Rendervid ثمانية أنواع متميزة من الطبقات. كل نوع طبقة يخدم غرضاً محدداً ويقبل مجموعته الخاصة من الخصائص بالإضافة إلى التكوين الأساسي المشترك.
كل طبقة، بغض النظر عن النوع، تدعم هذه الخصائص الأساسية:
{
"position": { "x": 100, "y": 100 },
"size": { "width": 500, "height": 200 },
"rotation": 0,
"scale": { "x": 1, "y": 1 },
"anchor": { "x": 0.5, "y": 0.5 },
"opacity": 1,
"blendMode": "normal",
"from": 0,
"duration": -1,
"filters": [],
"style": {},
"className": ""
}
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
position | object | {x: 0, y: 0} | إحداثيات X/Y بالبكسل |
size | object | – | العرض والارتفاع بالبكسل |
rotation | number | 0 | زاوية الدوران بالدرجات |
scale | object | {x: 1, y: 1} | مضاعف القياس لمحاور X وY |
anchor | object | {x: 0.5, y: 0.5} | نقطة الارتساء للتحويلات (نطاق 0-1، 0.5 = المركز) |
opacity | number | 1 | عتامة الطبقة (0 = شفاف، 1 = معتم) |
blendMode | string | "normal" | وضع المزج CSS للتركيب |
from | number | 0 | وقت البدء بالثواني (نسبة إلى بداية المشهد) |
duration | number | -1 | مدة الطبقة بالثواني (-1 = مدة المشهد الكاملة) |
filters | array | [] | مصفوفة كائنات المرشحات البصرية |
style | object | {} | خصائص نمط إضافية شبيهة بـ CSS |
className | string | "" | اسم فئة CSS للتنسيق المخصص |
text – يعرض نصاً منسقاً مع تحكم كامل في الخط والحجم واللون والمحاذاة وارتفاع السطر والتباعد بين الحروف وظلال النص والمزيد. يدعم صيغة {{variable}} للمحتوى الديناميكي.
image – يعرض صوراً ثابتة من عناوين URL أو مسارات محلية. يدعم الاقتصاص وأوضاع object-fit ونصف قطر الحدود ومرشحات الصور.
video – يضمن مقاطع الفيديو داخل مشهد. يدعم القص (البداية/النهاية) والتحكم في مستوى الصوت ومعدل التشغيل والتكرار والكتم.
shape – يعرض أشكالاً هندسية بدائية: مستطيلات ودوائر وأشكال بيضاوية وخطوط ومضلعات. يدعم التعبئة والحد ونصف قطر الحدود والتدرجات والظلال.
audio – يضيف مسارات صوتية إلى مشهد. يدعم مستوى الصوت والظهور/الاختفاء التدريجي والقص والتكرار. طبقات الصوت ليس لها تمثيل مرئي.
group – طبقة حاوية تحمل طبقات فرعية. تسمح المجموعات بتطبيق التحويلات والرسوم المتحركة والتأثيرات على طبقات متعددة في وقت واحد.
lottie – يعرض رسوم متحركة Lottie/Bodymovin JSON. يدعم سرعة التشغيل والتكرار والتحكم في القطع لتشغيل نطاقات إطارات محددة.
custom – يحمل مكونات مخصصة مسجلة محددة في حقل customComponents. استخدم هذا لقوالب طبقات قابلة لإعادة الاستخدام ومعلمة.
للحصول على تكوين تفصيلي لكل نوع طبقة، بما في ذلك جميع الخصائص المتاحة وأمثلة التعليمات البرمجية، راجع مرجع مكونات Rendervid .
يتضمن Rendervid أكثر من 40 إعداداً مسبقاً مدمجاً للرسوم المتحركة منظمة في أربع فئات: الدخول، الخروج، التأكيد، والإطار الرئيسي. يتم إرفاق الرسوم المتحركة بأي طبقة وتتحكم في كيفية ظهور تلك الطبقة أو اختفائها أو تصرفها خلال عمرها.
{
"type": "text",
"text": "Animated Title",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| الحقل | النوع | الافتراضي | الوصف |
|---|---|---|---|
type | string | – | فئة الرسوم المتحركة: entrance، exit، emphasis، keyframe |
effect | string | – | اسم الإعداد المسبق (مثل fadeInUp، pulse، bounceOut) |
duration | number | 30 | المدة بالإطارات |
delay | number | 0 | التأخير قبل بدء الرسوم المتحركة، بالإطارات |
easing | string | "ease" | اسم دالة التسهيل |
loop | number | 0 | عدد التكرارات (0 = لا تكرار، -1 = لا نهائي) |
alternate | boolean | false | عكس الاتجاه في التكرارات البديلة |
تتحكم رسوم متحركة الدخول في كيفية ظهور الطبقة على الشاشة. تعمل مرة واحدة عند الوصول إلى وقت بدء الطبقة.
| الإعداد المسبق | الوصف |
|---|---|
fadeIn | تلاشي بسيط للعتامة من 0 إلى 1 |
fadeInUp | يتلاشى أثناء الانزلاق لأعلى |
fadeInDown | يتلاشى أثناء الانزلاق لأسفل |
fadeInLeft | يتلاشى أثناء الانزلاق من اليسار |
fadeInRight | يتلاشى أثناء الانزلاق من اليمين |
slideInUp | ينزلق من أسفل الإطار |
slideInDown | ينزلق من أعلى الإطار |
slideInLeft | ينزلق من الحافة اليسرى |
slideInRight | ينزلق من الحافة اليمنى |
scaleIn | يتوسع من 0 إلى الحجم الكامل |
zoomIn | يقترب من مقياس أصغر مع تجاوز طفيف |
rotateIn | يدور إلى الموضع من زاوية إزاحة |
bounceIn | يرتد إلى الموضع مع تجاوز مرن |
flipInX | قلب ثلاثي الأبعاد على محور X (قلب أفقي) |
flipInY | قلب ثلاثي الأبعاد على محور Y (قلب عمودي) |
typewriter | تظهر الأحرف واحداً تلو الآخر (طبقات النص) |
revealLeft | كشف القناع ينزلق من اليسار |
revealRight | كشف القناع ينزلق من اليمين |
revealUp | كشف القناع ينزلق لأعلى |
revealDown | كشف القناع ينزلق لأسفل |
تتحكم رسوم متحركة الخروج في كيفية اختفاء الطبقة. تعمل في نهاية مدة الطبقة.
| الإعداد المسبق | الوصف |
|---|---|
fadeOut | تلاشي بسيط للعتامة من 1 إلى 0 |
slideOutUp | ينزلق عبر أعلى الإطار |
slideOutDown | ينزلق عبر أسفل الإطار |
scaleOut | يتقلص من الحجم الكامل إلى 0 |
zoomOut | يبتعد إلى مقياس أصغر ويتلاشى |
rotateOut | يدور خارج الموضع إلى زاوية إزاحة |
bounceOut | يرتد للخارج مع تجاوز مرن قبل الاختفاء |
flipOutX | قلب ثلاثي الأبعاد للخارج على محور X |
flipOutY | قلب ثلاثي الأبعاد للخارج على محور Y |
تجذب رسوم متحركة التأكيد الانتباه إلى طبقة بينما تظل مرئية. تعمل بشكل جيد مع التكرار.
| الإعداد المسبق | الوصف |
|---|---|
pulse | نبض مقياس إيقاعي (ينمو ويتقلص) |
shake | اهتزاز أفقي سريع |
bounce | حركة ارتداد عمودية |
swing | تأرجح دوراني يشبه البندول |
wobble | تمايل خارج المحور يجمع بين الدوران والترجمة |
flash | ومضات عتامة سريعة |
rubberBand | تأثير تمدد ومفاجأة مرن |
heartbeat | إيقاع نبضة قلب مزدوجة |
float | حركة طفو لطيفة لأعلى ولأسفل |
spin | دوران مستمر بزاوية 360 درجة |
للتحكم الإبداعي الكامل، تتيح لك رسوم متحركة الإطار الرئيسي تحديد تغييرات خصائص مخصصة إطاراً بإطار:
{
"type": "keyframe",
"keyframes": [
{ "frame": 0, "opacity": 0, "x": -100 },
{ "frame": 15, "opacity": 1, "x": 0 },
{ "frame": 30, "opacity": 1, "x": 0 },
{ "frame": 45, "opacity": 0, "x": 100 }
],
"easing": "easeInOutCubic"
}
يمكن لرسوم متحركة الإطار الرئيسي تحريك أي خاصية رقمية: opacity، x، y، rotation، scaleX، scaleY، والمزيد. كل إطار رئيسي يحدد رقم إطار وقيم الخصائص في ذلك الإطار. يقوم العارض بالاستيفاء بين الإطارات الرئيسية باستخدام دالة التسهيل المحددة.
يمكن أن تحتوي طبقة واحدة على رسوم متحركة متعددة. على سبيل المثال، رسوم متحركة دخول متبوعة بحلقة تأكيد، ثم رسوم متحركة خروج:
{
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"easing": "easeOutCubic"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 30,
"delay": 20,
"loop": -1
},
{
"type": "exit",
"effect": "fadeOut",
"duration": 15,
"easing": "easeInCubic"
}
]
}
تتحكم دوال التسهيل في معدل التغيير أثناء الرسوم المتحركة، مما يحدد ما إذا كانت الحركة تبدو خطية أو سلسة أو مرتدة أو مرنة. يتضمن Rendervid أكثر من 30 دالة تسهيل مدمجة.
| الدالة | الوصف |
|---|---|
linear | سرعة ثابتة من البداية إلى النهاية، بدون تسارع |
ease | تسهيل افتراضي شبيه بـ CSS مع تسارع وتباطؤ لطيف |
easeIn | يبدأ ببطء، يتسارع نحو النهاية |
easeOut | يبدأ بسرعة، يتباطأ نحو النهاية |
easeInOut | يتسارع في النصف الأول، يتباطأ في الثاني |
| الدالة | الوصف |
|---|---|
easeInQuad | تسارع تربيعي (t^2) |
easeOutQuad | تباطؤ تربيعي |
easeInOutQuad | تسارع تربيعي ثم تباطؤ |
| الدالة | الوصف |
|---|---|
easeInCubic | تسارع تكعيبي (t^3) – أكثر وضوحاً من التربيعي |
easeOutCubic | تباطؤ تكعيبي – توقف سلس وطبيعي |
easeInOutCubic | تسهيل تكعيبي للدخول والخروج – الأكثر استخداماً |
| الدالة | الوصف |
|---|---|
easeInQuart | تسارع رباعي (t^4) |
easeOutQuart | تباطؤ رباعي |
easeInOutQuart | تسهيل رباعي للدخول والخروج |
| الدالة | الوصف |
|---|---|
easeInQuint | تسارع خماسي (t^5) – بداية حادة جداً |
easeOutQuint | تباطؤ خماسي – توقف حاد جداً |
easeInOutQuint | تسهيل خماسي للدخول والخروج |
| الدالة | الوصف |
|---|---|
easeInSine | تسارع قائم على الجيب – منحنى التسهيل الأكثر لطفاً |
easeOutSine | تباطؤ قائم على الجيب |
easeInOutSine | تسهيل جيبي للدخول والخروج |
| الدالة | الوصف |
|---|---|
easeInExpo | تسارع أسي – مسطح تقريباً ثم حاد |
easeOutExpo | تباطؤ أسي – حاد ثم مسطح تقريباً |
easeInOutExpo | تسهيل أسي للدخول والخروج |
| الدالة | الوصف |
|---|---|
easeInCirc | منحنى تسارع دائري |
easeOutCirc | منحنى تباطؤ دائري |
easeInOutCirc | تسهيل دائري للدخول والخروج |
| الدالة | الوصف |
|---|---|
easeInBack | يسحب للخلف قليلاً قبل التسارع للأمام (توقع) |
easeOutBack | يتجاوز الهدف ثم يستقر مرة أخرى (تجاوز) |
easeInOutBack | توقع عند الدخول، تجاوز عند الخروج |
| الدالة | الوصف |
|---|---|
easeInElastic | تمايل مرن عند التسارع – لف يشبه الزنبرك |
easeOutElastic | تمايل مرن عند التباطؤ – مفاجأة تشبه الزنبرك |
easeInOutElastic | مرن على كلا الطرفين |
| الدالة | الوصف |
|---|---|
easeInBounce | تأثير ارتداد عند الدخول – مثل كرة سقطت بالعكس |
easeOutBounce | تأثير ارتداد عند الخروج – مثل كرة تصطدم بالأرض |
easeInOutBounce | ارتداد على كلا الطرفين |
easeOutCubic أو easeOutQuart لمداخل ذات شعور طبيعيeaseOutElastic أو easeOutBack لتجاوز مرحeaseInOutSine لحركة لطيفة ومستمرةeaseInExpo للبناء، easeOutExpo لتوقفات سريعةeaseOutBounce لتأثيرات تشبه الجاذبيةتتحكم الانتقالات في كيفية تدفق مشهد إلى التالي. يوفر Rendervid 17 نوعاً من الانتقالات تتراوح من القطع البسيط إلى التأثيرات السينمائية ثلاثية الأبعاد.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
يتم وضع كائن transition على المشهد الوارد (المشهد الذي يتم الانتقال إليه). تنطبق خاصية direction فقط على الانتقالات الاتجاهية مثل slide و wipe و push.
| الانتقال | الوصف |
|---|---|
cut | تبديل فوري بدون تأثير بصري (افتراضي) |
fade | تلاشي متقاطع بين المشاهد – المشهد الخارج يتلاشى بينما يتلاشى المشهد الوارد |
zoom | يقترب من المشهد الخارج بينما يظهر المشهد الوارد |
slide | المشهد الوارد ينزلق فوق المشهد الخارج من اتجاه قابل للتكوين (يسار، يمين، أعلى، أسفل) |
wipe | مسح بحافة صلبة يكشف المشهد الوارد، يتحرك عبر الإطار في الاتجاه المحدد |
push | المشهد الوارد يدفع المشهد الخارج خارج الشاشة في الاتجاه المحدد |
rotate | المشهد الخارج يدور بعيداً بينما يدور المشهد الوارد |
flip | انتقال قلب ثلاثي الأبعاد – الإطار يقلب مثل بطاقة للكشف عن المشهد التالي |
blur | المشهد الخارج يتشوش بينما يتضح المشهد الوارد |
circle | قناع دائري يتوسع من المركز (أو نقطة محددة) للكشف عن المشهد التالي |
glitch | تأثير تشويه رقمي مع انحراف لوني وإزاحة |
dissolve | حل على مستوى البكسل حيث تنتقل البكسلات الفردية عشوائياً بين المشاهد |
cube | دوران مكعب ثلاثي الأبعاد – المشاهد على وجوه متجاورة لمكعب دوار |
swirl | تشويه حلزوني يدور المشهد الخارج إلى المشهد الوارد |
diagonal-wipe | مسح بحافة صلبة قطري يتحرك من زاوية إلى الزاوية المقابلة |
iris | قزحية دائرية تفتح أو تغلق مثل فتحة الكاميرا |
crosszoom | كلا المشهدين يقتربان في وقت واحد – الخارج يقترب، والوارد يبتعد |
تلاشي سينمائي مع تلاشي متقاطع طويل:
{
"transition": {
"type": "fade",
"duration": 2
}
}
انزلاق من اليمين (شائع للمحتوى المتسلسل):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
دوران مكعب ثلاثي الأبعاد (شعور ديناميكي وحديث):
{
"transition": {
"type": "cube",
"duration": 1
}
}
تأثير خلل (نشيط، تقني متقدم):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
تدعم طبقات Rendervid مجموعة من المؤثرات البصرية من خلال المرشحات وأوضاع المزج والظلال والتحويلات.
يتم تطبيق المرشحات عبر مصفوفة filters على أي طبقة. كل مرشح هو كائن مع type و value:
{
"filters": [
{ "type": "blur", "value": 5 },
{ "type": "brightness", "value": 1.2 },
{ "type": "contrast", "value": 1.1 },
{ "type": "grayscale", "value": 0.5 },
{ "type": "saturate", "value": 1.5 }
]
}
| المرشح | نطاق القيمة | الوصف |
|---|---|---|
blur | 0+ (بكسل) | تشويش غاوسي – القيم الأعلى تنتج مزيداً من التشويش |
brightness | 0+ (مضاعف) | 0 = أسود، 1 = عادي، 2 = سطوع مزدوج |
contrast | 0+ (مضاعف) | 0 = رمادي، 1 = عادي، 2 = تباين مزدوج |
grayscale | 0-1 | 0 = لون كامل، 1 = غير مشبع بالكامل |
hue-rotate | 0-360 (درجات) | يدور الألوان حول عجلة الألوان |
invert | 0-1 | 0 = عادي، 1 = ألوان معكوسة بالكامل |
saturate | 0+ (مضاعف) | 0 = غير مشبع، 1 = عادي، 2 = تشبع مزدوج |
sepia | 0-1 | 0 = عادي، 1 = نغمة بنية كاملة |
تتحكم خاصية blendMode في كيفية تركيب طبقة مع الطبقات الموجودة تحتها:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
أوضاع المزج المدعومة: normal، multiply، screen، overlay، darken، lighten، color-dodge، color-burn، hard-light، soft-light، difference، exclusion، hue، saturation، color، luminosity.
تدعم طبقات النص والأشكال تأثيرات الظل من خلال خاصية style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
يمكن دمج المرشحات وأوضاع المزج والعتامة والظلال جميعها على طبقة واحدة للحصول على معالجات بصرية متطورة:
{
"type": "image",
"src": "{{backgroundImage}}",
"opacity": 0.7,
"blendMode": "overlay",
"filters": [
{ "type": "blur", "value": 3 },
{ "type": "brightness", "value": 0.8 }
],
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.3)",
"offsetX": 0,
"offsetY": 10,
"blur": 20
}
}
}
يدعم Rendervid كلاً من Google Fonts (أكثر من 100 عائلة مدمجة) والخطوط المخصصة المحملة من عناوين URL خارجية.
صرح عن Google Fonts في مصفوفة fonts.google:
{
"fonts": {
"google": [
{ "family": "Roboto", "weights": [400, 700] },
{ "family": "Open Sans", "weights": [300, 400, 600, 700] },
{ "family": "Montserrat", "weights": [400, 500, 700, 900] },
{ "family": "Playfair Display", "weights": [400, 700] }
]
}
}
كل كائن خط يتطلب:
| الحقل | النوع | الوصف |
|---|---|---|
family | string | اسم عائلة Google Font (مطابقة دقيقة مطلوبة) |
weights | array | مصفوفة الأوزان الرقمية للتحميل (100-900) |
أوزان الخطوط الشائعة: 100 (رفيع)، 200 (رفيع جداً)، 300 (خفيف)، 400 (عادي)، 500 (متوسط)، 600 (شبه عريض)، 700 (عريض)، 800 (عريض جداً)، 900 (أسود).
حمّل الخطوط من عناوين URL خارجية باستخدام مصفوفة fonts.custom:
{
"fonts": {
"custom": [
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font.woff2",
"weight": 400,
"style": "normal"
},
{
"family": "MyBrandFont",
"src": "https://example.com/fonts/brand-font-bold.woff2",
"weight": 700,
"style": "normal"
}
]
}
}
تنسيقات الخطوط المدعومة: WOFF2 (موصى به لأصغر حجم ملف)، WOFF، TTF، وOTF.
أشر إلى الخطوط المصرح بها باسم العائلة في أنماط طبقة النص:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
يتضمن Rendervid سلاسل احتياطية للخطوط الخاصة بالمنصة لضمان عرض متسق عبر بيئات مختلفة. إذا لم يكن الخط المحدد متاحاً، يتراجع العارض إلى خطوط النظام المطابقة لنفس التصنيف (serif، sans-serif، monospace).
يدعم Rendervid مجموعة واسعة من تنسيقات الإخراج وبرامج الترميز لكل من عرض الفيديو والصور.
| التنسيق | برنامج الترميز | امتداد الملف | الأفضل لـ |
|---|---|---|---|
| MP4 | H.264 | .mp4 | أقصى توافق – الويب، الجوال، وسائل التواصل الاجتماعي |
| WebM | VP8 / VP9 | .webm | تضمين الويب مع أحجام ملفات أصغر |
| MOV | ProRes | .mov | سير عمل التحرير الاحترافي، جودة بدون فقدان |
| GIF | – | .gif | رسوم متحركة قصيرة، مشاركة اجتماعية، بريد إلكتروني |
| MP4 | H.265 / HEVC | .mp4 | أجهزة أحدث، ملفات أصغر بنسبة 50٪ من H.264 بنفس الجودة |
| WebM | AV1 | .webm | برنامج ترميز الجيل التالي، أفضل كفاءة ضغط |
| التنسيق | امتداد الملف | الأفضل لـ |
|---|---|---|
| PNG | .png | جودة بدون فقدان، دعم الشفافية |
| JPEG | .jpg | الصور الفوتوغرافية، أحجام ملفات أصغر |
| WebP | .webp | الويب الحديث، أفضل توازن بين الجودة والحجم |
| الإعداد المسبق | الوصف |
|---|---|
draft | عرض سريع مع جودة مخفضة – مثالي للمعاينة |
standard | جودة وحجم ملف متوازنان – جيد لمعظم حالات الاستخدام |
high | معدل بت وجودة أعلى – للتسليمات النهائية |
lossless | أقصى جودة بدون عيوب ضغط |
يدعم Rendervid الدقات من الصور المصغرة الصغيرة حتى 8K:
| الدقة | الأبعاد | الاستخدام الشائع |
|---|---|---|
| SD | 640 x 480 | صور مصغرة، معاينات |
| HD | 1280 x 720 | فيديو ويب، بريد إلكتروني |
| Full HD | 1920 x 1080 | YouTube، عروض تقديمية |
| 2K | 2560 x 1440 | شاشات عالية الجودة |
| 4K UHD | 3840 x 2160 | احترافي، بث |
| 8K | 7680 x 4320 | دقة قصوى، مقاومة للمستقبل |
معدلات الإطارات من 1 إطار في الثانية (عروض شرائح) إلى 120 إطاراً في الثانية (حركة بطيئة، محتوى ألعاب) مدعومة. الخيارات الشائعة هي 24 إطاراً في الثانية (سينمائي)، 30 إطاراً في الثانية (ويب/اجتماعي)، و60 إطاراً في الثانية (حركة سلسة).
إليك قالب Rendervid كامل يوضح الميزات الرئيسية لنظام القوالب تعمل معاً: مدخلات ديناميكية، مشاهد متعددة مع انتقالات، تركيبات متعددة الطبقات، رسوم متحركة مع تسهيل، خطوط، ومؤثرات بصرية.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "The future is here."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Image",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primary Color",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Learn More"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "Introducing",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
ينشئ هذا القالب فيديو إطلاق منتج مدته 20 ثانية مع ثلاثة مشاهد: مقدمة طباعية مع رسوم متحركة نصية متداخلة، وعرض منتج مع صورة عائمة وتأثير آلة كاتبة، ومشهد دعوة لاتخاذ إجراء ختامي مع زر نابض. جميع النصوص والألوان والصور مدفوعة بمتغيرات القالب، مما يجعله قابلاً لإعادة الاستخدام بالكامل.
قوالب Rendervid هي ملفات JSON تحدد البنية والمحتوى والرسوم المتحركة وإعدادات الإخراج للفيديو أو الصورة. يتضمن كل قالب تكوين الإخراج (الأبعاد، معدل الإطارات، المدة)، تعريفات الإدخال للمتغيرات الديناميكية، تركيب مع مشاهد وطبقات، وتكوينات اختيارية للخطوط والمكونات المخصصة.
تستخدم متغيرات القالب صيغة {{variableName}}. تقوم بتعريف المدخلات في مصفوفة inputs الخاصة بالقالب مع مفتاح ونوع (string، number، boolean، color، url، array) وتسمية ووصف وقيمة افتراضية. في وقت العرض، يتم استبدال هذه المتغيرات بالقيم الفعلية، مما يجعل القوالب قابلة لإعادة الاستخدام وديناميكية.
يتضمن Rendervid أكثر من 40 إعداد مسبق مدمج للرسوم المتحركة منظمة في أربع فئات: رسوم متحركة للدخول (fadeIn، slideIn، scaleIn، bounceIn، إلخ)، رسوم متحركة للخروج (fadeOut، slideOut، zoomOut، إلخ)، رسوم متحركة للتأكيد (pulse، shake، bounce، swing، heartbeat، إلخ)، ورسوم متحركة قابلة للتخصيص بالكامل بالإطارات الرئيسية مع أكثر من 30 دالة تسهيل.
يوفر Rendervid 17 نوعاً من انتقالات المشاهد: cut، fade، zoom، slide، wipe، push، rotate، flip (3D)، blur، circle، glitch، dissolve، cube (3D)، swirl، diagonal-wipe، iris، وcrosszoom. يمكن تكوين كل انتقال بمعاملات المدة والاتجاه.
يدعم Rendervid تنسيقات إخراج متعددة بما في ذلك MP4 (H.264)، WebM (VP8/VP9)، MOV (ProRes)، GIF للفيديو، وPNG، JPEG، WebP للصور. كما يتم دعم برامج الترميز المتقدمة مثل H.265/HEVC وAV1. تصل الدقة إلى 8K (7680x4320) مع معدلات إطارات من 1 إلى 120 إطار في الثانية.
نعم، يدعم Rendervid أكثر من 100 خط مدمج من Google Fonts وتحميل الخطوط المخصصة من عناوين URL بتنسيقات WOFF2، WOFF، TTF، وOTF. يمكنك تحديد أوزان الخطوط من 100-900 وتكوين البدائل الخاصة بالمنصة لتوافق عبر البيئات المختلفة.
نحن نساعد الشركات مثل شركتك في تطوير روبوتات الدردشة الذكية، وخوادم MCP، وأدوات الذكاء الاصطناعي أو أنواع أخرى من أتمتة الذكاء الاصطناعي لاستبدال البشر في المهام المتكررة في مؤسستك.
استكشف جميع مكونات Rendervid: 8 أنواع طبقات مدمجة (نص، صورة، فيديو، شكل، صوت، مجموعة، lottie، مخصص)، مكونات React جاهزة، محرر القوالب المرئي، ومشغل الفيديو. قم ...
انشر Rendervid في أي مكان: العرض في المتصفح للمعاينات، Node.js لمعالجة الدفعات من جانب الخادم، أو العرض السحابي على AWS Lambda وAzure Functions وGCP وDocker للح...
اكتشف Rendervid، البديل المجاني مفتوح المصدر لـ Remotion لإنشاء الفيديو البرمجي. تصميم يعتمد على الذكاء الاصطناعي مع تكامل MCP، قوالب JSON، عرض سحابي، وبدون رسو...