Ghid complet pentru sistemul de șabloane Rendervid. Învață cum să creezi șabloane video JSON, să folosești variabile dinamice cu sintaxa {{variable}}, să configurezi peste 40 de presetări de animații, 17 tranziții de scene și peste 30 de funcții easing.
Rendervid este un motor de randare video programatic construit în jurul unui sistem de șabloane declarativ, bazat pe JSON. În loc să editați manual video într-o linie de timp, definiți fiecare aspect al video-ului dvs. – scene, straturi, animații, tranziții și setări de ieșire – într-un singur document JSON. Această abordare face șabloanele fără stare, controlabile prin versiuni și generabile de mașină, deschizând ușa către producția video condusă de AI, pipeline-uri de randare în loturi și fluxuri de lucru de conținut complet automatizate.
Acest ghid acoperă sistemul complet de șabloane Rendervid de sus până jos: configurație la nivel de rădăcină, setări de ieșire, sistemul de variabile și intrări, scene și compoziție, toate cele opt tipuri de straturi, peste 40 de presetări de animații, peste 30 de funcții easing, 17 tranziții de scene, efecte vizuale, configurarea fonturilor și formate de ieșire.
Fiecare șablon Rendervid este un obiect JSON cu un set bine definit de câmpuri la nivel de rădăcină. Iată scheletul unui șablon complet:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Câmp | Tip | Obligatoriu | Descriere |
|---|---|---|---|
name | string | Da | Identificator de șablon lizibil pentru om |
output | object | Da | Configurație de ieșire video sau imagine (dimensiuni, fps, durată, format) |
inputs | array | Nu | Definiții de intrare dinamice pentru variabile de șablon |
composition | object | Da | Conține matricea scenes care definește tot conținutul vizual |
fonts | object | Nu | Declarații Google Fonts și fonturi personalizate |
customComponents | object | Nu | Componente de strat personalizate înregistrate |
defaults | object | Nu | Valori implicite aplicate tuturor straturilor dacă nu sunt suprascrise |
Câmpul name este în scopuri organizaționale – nu afectează randarea. Câmpurile output și composition sunt cei doi stâlpi pe care trebuie să îi aibă fiecare șablon. Tot restul este opțional, dar deblochează capabilități puternice.
Obiectul output controlează fișierul final randat: formatul său, dimensiunile, rata de cadre, durata și culoarea de fundal.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Câmp | Tip | Implicit | Descriere |
|---|---|---|---|
type | string | "video" | Tip ieșire: "video" sau "image" |
width | number | 1920 | Lățime în pixeli (până la 7680 pentru 8K) |
height | number | 1080 | Înălțime în pixeli (până la 4320 pentru 8K) |
fps | number | 30 | Cadre pe secundă (1-120) |
duration | number | – | Durată totală în secunde |
backgroundColor | string | "#000000" | Culoare de fundal ca hex, RGB sau culoare denumită |
Iată configurații de ieșire pentru formate populare:
1080p Full HD (YouTube, scop general):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertical):
{
"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 / Imagine Partajare Social:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Pentru ieșirea imagine, fps și duration sunt ignorate – renderer-ul capturează un singur cadru.
Sistemul de intrare și variabile este ceea ce face șabloanele Rendervid reutilizabile. În loc să codificați fix text, culori sau URL-uri în șablonul dvs., definiți intrări și le referențiați folosind sintaxa {{variableName}} oriunde în șablon.
Intrările sunt declarate în matricea de nivel superior inputs. Fiecare obiect de intrare descrie o singură variabilă:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titlu",
"description": "Textul titlului principal afișat în scena intro",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Culoare Brand",
"description": "Culoarea principală a brandului folosită pentru fundaluri și accente",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Arată Subtitlu",
"description": "Comutați vizibilitatea subtitlului",
"required": false,
"default": true
}
]
}
| Câmp | Tip | Obligatoriu | Descriere |
|---|---|---|---|
key | string | Da | Identificator unic folosit în referințele {{key}} |
type | string | Da | Tip de date: string, number, boolean, color, url, array |
label | string | Nu | Etichetă lizibilă pentru om pentru randarea UI |
description | string | Nu | Explicație a ceea ce controlează această intrare |
required | boolean | Nu | Dacă intrarea trebuie furnizată la momentul randării |
default | any | Nu | Valoare de fallback dacă nu este furnizată nicio intrare |
string – Text în formă liberă. Folosiți pentru titluri, descrieri, subtitrări sau orice conținut text.number – Valori numerice. Folosiți pentru durată, dimensiuni, poziții, niveluri de opacitate sau numărători.boolean – Comutatoare adevărat/fals. Folosiți pentru vizibilitate condițională, flag-uri de caracteristici sau comutatoare pornit/oprit.color – Valori de culoare în hex (#FF5733), RGB (rgb(255,87,51)) sau format denumit. Folosiți pentru fundaluri, culori text și accente.url – Șiruri URL valide. Folosiți pentru surse de imagini, surse video, link-uri și URL-uri de fonturi.array – Liste de valori. Folosiți pentru galerii de imagini, liste de text, conținut diapozitive sau orice date repetate.Odată ce intrările sunt definite, referențiați-le oriunde în șablon folosind acolade duble:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variabilele sunt rezolvate la momentul randării. Când apelați API-ul Rendervid sau CLI, treceți valorile reale:
{
"title": "Vânzare de Vară 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Iată un șablon complet cu multiple tipuri de intrare lucrând împreună:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nume Produs",
"description": "Numele produsului promovat",
"required": true,
"default": "Produs"
},
{
"key": "price",
"type": "number",
"label": "Preț",
"description": "Prețul produsului afișat în video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL Imagine Produs",
"description": "URL către imaginea produsului",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Culoare Accent",
"description": "Culoarea folosită pentru butoane CTA și evidențieri",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Arată Insignă Vânzare",
"description": "Dacă să afișeze suprapunerea insignei de vânzare",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Caracteristici Produs",
"description": "Lista de puncte marcatoare ale caracteristicilor",
"required": false,
"default": ["Caracteristică 1", "Caracteristică 2", "Caracteristică 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 }
}
]
}
]
}
}
Acest singur șablon poate genera mii de videoclipuri de produse unice prin simpla schimbare a valorilor de intrare la momentul randării – nu sunt necesare modificări de șablon.
Obiectul composition este locul unde trăiește conținutul video-ului dvs. Conține o matrice scenes, și fiecare scenă reprezintă un segment distinct al video-ului cu propria sa durată, straturi și tranziție.
{
"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": [ ... ]
}
]
}
}
| Câmp | Tip | Obligatoriu | Descriere |
|---|---|---|---|
name | string | Nu | Identificator pentru scenă (pentru lizibilitate și depanare) |
duration | number | Da | Lungimea scenei în secunde |
transition | object | Nu | Efect de tranziție la intrarea în această scenă din cea anterioară |
layers | array | Da | Matrice ordonată de obiecte strat randate de jos în sus |
Scenele se redau în secvență. Durata totală a video-ului este suma tuturor duratelor scenelor (minus orice suprapunere de tranziție). Straturile dintr-o scenă sunt randate în ordinea matricei – primul strat stă în partea de jos a stivei vizuale, iar ultimul strat stă deasupra.
Dacă nu este specificată nicio tranziție, scena folosește un cut dur în mod implicit.
Rendervid suportă opt tipuri distincte de straturi. Fiecare tip de strat servește un scop specific și acceptă propriul set de proprietăți pe lângă configurația de bază partajată.
Fiecare strat, indiferent de tip, suportă aceste proprietăți de bază:
{
"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": ""
}
| Proprietate | Tip | Implicit | Descriere |
|---|---|---|---|
position | object | {x: 0, y: 0} | Coordonate X/Y în pixeli |
size | object | – | Lățime și înălțime în pixeli |
rotation | number | 0 | Unghi de rotație în grade |
scale | object | {x: 1, y: 1} | Multiplicator de scală pentru axele X și Y |
anchor | object | {x: 0.5, y: 0.5} | Punct de ancoră pentru transformări (interval 0-1, 0.5 = centru) |
opacity | number | 1 | Opacitate strat (0 = transparent, 1 = opac) |
blendMode | string | "normal" | Mod de amestecare CSS pentru compunere |
from | number | 0 | Timp de start în secunde (relativ la începutul scenei) |
duration | number | -1 | Durată strat în secunde (-1 = durată completă scenă) |
filters | array | [] | Matrice de obiecte filtru vizual |
style | object | {} | Proprietăți de stil suplimentare asemănătoare CSS |
className | string | "" | Nume clasă CSS pentru stilizare personalizată |
text – Randează text stilizat cu control complet asupra fontului, dimensiunii, culorii, alinierii, înălțimii liniei, spațierii literelor, umbrele text și multe altele. Suportă sintaxa {{variable}} pentru conținut dinamic.
image – Afișează imagini statice din URL-uri sau căi locale. Suportă tăiere, moduri object-fit, rază de margine și filtre de imagine.
video – Încorporează clipuri video într-o scenă. Suportă tăiere (start/end), control volum, rată de redare, buclare și mute.
shape – Randează primitive geometrice: dreptunghiuri, cercuri, elipse, linii și poligoane. Suportă umplere, contur, rază de margine, gradienți și umbre.
audio – Adaugă piste audio la o scenă. Suportă volum, fade in/out, tăiere și buclare. Straturile audio nu au reprezentare vizuală.
group – Un strat container care deține straturi copil. Grupurile vă permit să aplicați transformări, animații și efecte mai multor straturi deodată.
lottie – Randează animații JSON Lottie/Bodymovin. Suportă viteză de redare, buclare și control segment pentru redarea anumitor intervale de cadre.
custom – Încarcă componente personalizate înregistrate definite în câmpul customComponents. Folosiți aceasta pentru șabloane de straturi reutilizabile, parametrizate.
Pentru configurarea detaliată a fiecărui tip de strat, inclusiv toate proprietățile disponibile și exemple de cod, consultați Referința Componentelor Rendervid .
Rendervid include peste 40 de presetări de animații încorporate organizate în patru categorii: entrance (intrare), exit (ieșire), emphasis (accent) și keyframe. Animațiile sunt atașate oricărui strat și controlează modul în care acel strat apare, dispare sau se comportă pe parcursul vieții sale.
{
"type": "text",
"text": "Titlu Animat",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Câmp | Tip | Implicit | Descriere |
|---|---|---|---|
type | string | – | Categorie animație: entrance, exit, emphasis, keyframe |
effect | string | – | Nume presetare (de ex., fadeInUp, pulse, bounceOut) |
duration | number | 30 | Durată în cadre |
delay | number | 0 | Întârziere înainte de începerea animației, în cadre |
easing | string | "ease" | Nume funcție easing |
loop | number | 0 | Număr de bucle (0 = fără buclă, -1 = infinit) |
alternate | boolean | false | Inversează direcția la bucle alternative |
Animațiile de intrare controlează modul în care un strat apare pe ecran. Rulează o dată când este atins timpul de start al stratului.
| Presetare | Descriere |
|---|---|
fadeIn | Estompare simplă a opacității de la 0 la 1 |
fadeInUp | Se estompează în timp ce alunecă în sus |
fadeInDown | Se estompează în timp ce alunecă în jos |
fadeInLeft | Se estompează în timp ce alunecă de la stânga |
fadeInRight | Se estompează în timp ce alunecă de la dreapta |
slideInUp | Alunecă din partea de jos a cadrului |
slideInDown | Alunecă din partea de sus a cadrului |
slideInLeft | Alunecă de la marginea stângă |
slideInRight | Alunecă de la marginea dreaptă |
scaleIn | Se mărește de la 0 la dimensiunea completă |
zoomIn | Face zoom de la o scară mai mică cu ușoară depășire |
rotateIn | Rotește în poziție de la un unghi decalat |
bounceIn | Sare în poziție cu depășire elastică |
flipInX | Întoarcere 3D pe axa X (întoarcere orizontală) |
flipInY | Întoarcere 3D pe axa Y (întoarcere verticală) |
typewriter | Caracterele apar unul câte unul (straturi text) |
revealLeft | Dezvăluire mască alunecând de la stânga |
revealRight | Dezvăluire mască alunecând de la dreapta |
revealUp | Dezvăluire mască alunecând în sus |
revealDown | Dezvăluire mască alunecând în jos |
Animațiile de ieșire controlează modul în care un strat dispare. Rulează la sfârșitul duratei stratului.
| Presetare | Descriere |
|---|---|
fadeOut | Estompare simplă a opacității de la 1 la 0 |
slideOutUp | Alunecă afară prin partea de sus a cadrului |
slideOutDown | Alunecă afară prin partea de jos a cadrului |
scaleOut | Se micșorează de la dimensiunea completă la 0 |
zoomOut | Face zoom la o scară mai mică și se estompează |
rotateOut | Rotește afară din poziție la un unghi decalat |
bounceOut | Sare în afară cu depășire elastică înainte de a dispărea |
flipOutX | Întoarcere 3D afară pe axa X |
flipOutY | Întoarcere 3D afară pe axa Y |
Animațiile de accent atrag atenția asupra unui strat în timp ce rămâne vizibil. Funcționează bine cu buclarea.
| Presetare | Descriere |
|---|---|
pulse | Puls de scală ritmic (crește și se micșorează) |
shake | Scuturare orizontală rapidă |
bounce | Mișcare de salt verticală |
swing | Rotație de leagăn asemănătoare pendulului |
wobble | Legănare în afara axei combinând rotație și translație |
flash | Clipiri rapide de opacitate |
rubberBand | Efect de întindere elastică și revenire bruscă |
heartbeat | Ritm de bătăi de inimă cu puls dublu |
float | Mișcare blândă de plutire sus-și-jos |
spin | Rotație continuă de 360 de grade |
Pentru control creativ complet, animațiile keyframe vă permit să definiți modificări personalizate ale proprietăților cadru cu cadru:
{
"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"
}
Animațiile keyframe pot anima orice proprietate numerică: opacity, x, y, rotation, scaleX, scaleY și multe altele. Fiecare keyframe specifică un număr de cadru și valorile proprietăților la acel cadru. Renderer-ul interpolează între keyframe-uri folosind funcția de easing specificată.
Un singur strat poate avea multiple animații. De exemplu, o animație de intrare urmată de o buclă de accent, apoi o animație de ieșire:
{
"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"
}
]
}
Funcțiile easing controlează rata de schimbare în timpul unei animații, determinând dacă mișcarea se simte liniară, netedă, săritoare sau elastică. Rendervid include peste 30 de funcții easing încorporate.
| Funcție | Descriere |
|---|---|
linear | Viteză constantă de la început la sfârșit, fără accelerare |
ease | Easing implicit asemănător CSS cu accelerare și decelerare blândă |
easeIn | Începe încet, accelerează spre sfârșit |
easeOut | Începe rapid, decelerează spre sfârșit |
easeInOut | Accelerează în prima jumătate, decelerează în a doua |
| Funcție | Descriere |
|---|---|
easeInQuad | Accelerare pătratică (t^2) |
easeOutQuad | Decelerare pătratică |
easeInOutQuad | Accelerare pătratică apoi decelerare |
| Funcție | Descriere |
|---|---|
easeInCubic | Accelerare cubică (t^3) – mai pronunțată decât pătratică |
easeOutCubic | Decelerare cubică – oprire netedă și cu aspect natural |
easeInOutCubic | Easing cubic la intrare și ieșire – cel mai utilizat easing |
| Funcție | Descriere |
|---|---|
easeInQuart | Accelerare quartică (t^4) |
easeOutQuart | Decelerare quartică |
easeInOutQuart | Easing quartic la intrare și ieșire |
| Funcție | Descriere |
|---|---|
easeInQuint | Accelerare quintică (t^5) – start foarte brusc |
easeOutQuint | Decelerare quintică – oprire foarte bruscă |
easeInOutQuint | Easing quintic la intrare și ieșire |
| Funcție | Descriere |
|---|---|
easeInSine | Accelerare bazată pe sinus – curba de easing cea mai blândă |
easeOutSine | Decelerare bazată pe sinus |
easeInOutSine | Easing bazat pe sinus la intrare și ieșire |
| Funcție | Descriere |
|---|---|
easeInExpo | Accelerare exponențială – aproape plat apoi brusc |
easeOutExpo | Decelerare exponențială – brusc apoi aproape plat |
easeInOutExpo | Easing exponențial la intrare și ieșire |
| Funcție | Descriere |
|---|---|
easeInCirc | Curbă de accelerare circulară |
easeOutCirc | Curbă de decelerare circulară |
easeInOutCirc | Easing circular la intrare și ieșire |
| Funcție | Descriere |
|---|---|
easeInBack | Se trage ușor înapoi înainte de a accelera înainte (anticipare) |
easeOutBack | Depășește ținta apoi se stabilește înapoi (depășire) |
easeInOutBack | Anticipare la intrare, depășire la ieșire |
| Funcție | Descriere |
|---|---|
easeInElastic | Legănare elastică la accelerare – înfășurare asemănătoare arcului |
easeOutElastic | Legănare elastică la decelerare – revenire bruscă asemănătoare arcului |
easeInOutElastic | Elastic la ambele capete |
| Funcție | Descriere |
|---|---|
easeInBounce | Efect de salt la intrare – ca o minge aruncată în sens invers |
easeOutBounce | Efect de salt la ieșire – ca o minge lovind pământul |
easeInOutBounce | Salt la ambele capete |
easeOutCubic sau easeOutQuart pentru intrări cu aspect naturaleaseOutElastic sau easeOutBack pentru depășire jucăușăeaseInOutSine pentru mișcare blândă, continuăeaseInExpo pentru acumulări, easeOutExpo pentru opriri rapideeaseOutBounce pentru efecte asemănătoare gravitațieiTranzițiile controlează modul în care o scenă trece în următoarea. Rendervid oferă 17 tipuri de tranziții de la tăieturi simple la efecte 3D cinematice.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Obiectul transition este plasat pe scena de intrare (scena către care se face tranziția). Proprietatea direction se aplică doar tranzițiilor direcționale precum slide, wipe și push.
| Tranziție | Descriere |
|---|---|
cut | Comutare instantanee fără efect vizual (implicit) |
fade | Estompare încrucișată între scene – scena de ieșire se estompează pe măsură ce scena de intrare apare |
zoom | Face zoom în scena de ieșire în timp ce apare scena de intrare |
slide | Scena de intrare alunecă peste scena de ieșire dintr-o direcție configurabilă (stânga, dreapta, sus, jos) |
wipe | O ștergere cu margine dură dezvăluie scena de intrare, deplasându-se peste cadru în direcția dată |
push | Scena de intrare împinge scena de ieșire în afara ecranului în direcția specificată |
rotate | Scena de ieșire rotește afară în timp ce scena de intrare rotește înăuntru |
flip | Tranziție de întoarcere 3D – cadrul se întoarce ca un card pentru a dezvălui următoarea scenă |
blur | Scena de ieșire se estompează în timp ce scena de intrare devine clară |
circle | O mască circulară se extinde din centru (sau un punct specificat) pentru a dezvălui următoarea scenă |
glitch | Efect de distorsiune glitch digital cu aberație cromatică și deplasare |
dissolve | Dizolvare la nivel de pixel unde pixelii individuali trec aleatoriu între scene |
cube | Rotație cub 3D – scenele sunt pe fețe adiacente ale unui cub rotativ |
swirl | Distorsiune spirală care învârte scena de ieșire în scena de intrare |
diagonal-wipe | O ștergere diagonală cu margine dură deplasându-se dintr-un colț în cel opus |
iris | Iris circular care se deschide sau se închide ca o diafragmă de cameră |
crosszoom | Ambele scene fac zoom simultan – cea de ieșire face zoom în, cea de intrare face zoom afară |
Estompare cinematică cu o estompare încrucișată lungă:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Alunecare de la dreapta (comună pentru conținut secvențial):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Rotație cub 3D (aspect dinamic, modern):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Efect glitch (energic, orientat spre tehnologie):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Straturile Rendervid suportă o gamă de efecte vizuale prin filtre, moduri de amestecare, umbre și transformări.
Filtrele sunt aplicate prin matricea filters pe orice strat. Fiecare filtru este un obiect cu un type și 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 }
]
}
| Filtru | Interval Valoare | Descriere |
|---|---|---|
blur | 0+ (pixeli) | Estompare gaussiană – valori mai mari produc mai multă estompare |
brightness | 0+ (multiplicator) | 0 = negru, 1 = normal, 2 = luminozitate dublă |
contrast | 0+ (multiplicator) | 0 = gri, 1 = normal, 2 = contrast dublu |
grayscale | 0-1 | 0 = culoare completă, 1 = complet desaturat |
hue-rotate | 0-360 (grade) | Rotește culorile în jurul roții culorilor |
invert | 0-1 | 0 = normal, 1 = culori complet inversate |
saturate | 0+ (multiplicator) | 0 = desaturat, 1 = normal, 2 = saturație dublă |
sepia | 0-1 | 0 = normal, 1 = ton sepia complet |
Proprietatea blendMode controlează modul în care un strat se compune cu straturile de dedesubt:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Moduri de amestecare suportate: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Straturile de text și formă suportă efecte de umbră prin proprietatea style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtrele, modurile de amestecare, opacitatea și umbrele pot fi toate combinate pe un singur strat pentru tratamente vizuale sofisticate:
{
"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 suportă atât Google Fonts (peste 100 de familii încorporate) cât și fonturi personalizate încărcate din URL-uri externe.
Declarați Google Fonts în matricea 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] }
]
}
}
Fiecare obiect font necesită:
| Câmp | Tip | Descriere |
|---|---|---|
family | string | Nume familie Google Font (potrivire exactă necesară) |
weights | array | Matrice de greutăți numerice de încărcat (100-900) |
Greutăți comune de fonturi: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Încărcați fonturi din URL-uri externe folosind matricea 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"
}
]
}
}
Formate de font suportate: WOFF2 (recomandat pentru cea mai mică dimensiune de fișier), WOFF, TTF și OTF.
Referențiați fonturile declarate după numele familiei în stilurile stratului de text:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid include lanțuri de fallback de fonturi specifice platformei pentru a asigura randarea consecventă în diferite medii. Dacă un font specificat nu este disponibil, renderer-ul revine la fonturile sistemului care se potrivesc cu aceeași clasificare (serif, sans-serif, monospace).
Rendervid suportă o gamă largă de formate de ieșire și codecuri atât pentru randarea video cât și pentru imagini.
| Format | Codec | Extensie Fișier | Cel Mai Bun Pentru |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Compatibilitate maximă – web, mobil, social media |
| WebM | VP8 / VP9 | .webm | Încorporare web cu dimensiuni de fișier mai mici |
| MOV | ProRes | .mov | Fluxuri de lucru de editare profesională, calitate fără pierderi |
| GIF | – | .gif | Animații scurte, partajare socială, email |
| MP4 | H.265 / HEVC | .mp4 | Dispozitive mai noi, fișiere cu 50% mai mici decât H.264 la aceeași calitate |
| WebM | AV1 | .webm | Codec de generație următoare, cea mai bună eficiență de compresie |
| Format | Extensie Fișier | Cel Mai Bun Pentru |
|---|---|---|
| PNG | .png | Calitate fără pierderi, suport transparență |
| JPEG | .jpg | Fotografii, dimensiuni de fișier mai mici |
| WebP | .webp | Web modern, cel mai bun echilibru între calitate și dimensiune |
| Presetare | Descriere |
|---|---|
draft | Randare rapidă cu calitate redusă – ideal pentru previzualizare |
standard | Calitate și dimensiune de fișier echilibrate – bun pentru majoritatea cazurilor de utilizare |
high | Bitrate și calitate mai ridicate – pentru livrabile finale |
lossless | Calitate maximă fără artefacte de compresie |
Rendervid suportă rezoluții de la miniaturi mici până la 8K:
| Rezoluție | Dimensiuni | Utilizare Comună |
|---|---|---|
| SD | 640 x 480 | Miniaturi, previzualizări |
| HD | 1280 x 720 | Video web, email |
| Full HD | 1920 x 1080 | YouTube, prezentări |
| 2K | 2560 x 1440 | Afișaje de înaltă calitate |
| 4K UHD | 3840 x 2160 | Profesional, broadcast |
| 8K | 7680 x 4320 | Rezoluție maximă, pregătit pentru viitor |
Rate de cadre de la 1 fps (prezentări de diapozitive) la 120 fps (slow motion, conținut gaming) sunt suportate. Alegerile comune sunt 24 fps (cinematic), 30 fps (web/social) și 60 fps (mișcare netedă).
Iată un șablon Rendervid complet care demonstrează caracteristicile cheie ale sistemului de șabloane lucrând împreună: intrări dinamice, multiple scene cu tranziții, compoziții stratificate, animații cu easing, fonturi și efecte vizuale.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nume Produs",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "Viitorul este aici."
},
{
"key": "heroImage",
"type": "url",
"label": "Imagine Hero",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Culoare Primară",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Îndemn la Acțiune",
"default": "Află Mai Multe"
}
],
"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": "Prezentăm",
"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"
}
]
}
]
}
]
}
}
Acest șablon creează un video de lansare de produs de 20 de secunde cu trei scene: un intro tipografic cu animații de text eșalonate, o prezentare de produs cu o imagine plutitoare și efect de mașină de scris, și o scenă finală de îndemn la acțiune cu un buton pulsant. Tot textul, culorile și imaginile sunt conduse de variabile de șablon, făcându-l complet reutilizabil.
Șabloanele Rendervid sunt fișiere JSON care definesc structura, conținutul, animațiile și setările de ieșire ale unui video sau imagine. Fiecare șablon include o configurație de ieșire (dimensiuni, fps, durată), definiții de intrare pentru variabile dinamice, o compoziție cu scene și straturi, și configurații opționale de fonturi și componente personalizate.
Variabilele de șablon folosesc sintaxa {{variableName}}. Definiți intrările în matricea de intrări a șablonului cu o cheie, tip (string, number, boolean, color, url, array), etichetă, descriere și valoare implicită. La momentul randării, aceste variabile sunt înlocuite cu valori reale, făcând șabloanele reutilizabile și dinamice.
Rendervid include peste 40 de presetări de animații încorporate organizate în patru categorii: animații de intrare (fadeIn, slideIn, scaleIn, bounceIn, etc.), animații de ieșire (fadeOut, slideOut, zoomOut, etc.), animații de accent (pulse, shake, bounce, swing, heartbeat, etc.) și animații keyframe complet personalizabile cu peste 30 de funcții easing.
Rendervid oferă 17 tipuri de tranziții de scene: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris și crosszoom. Fiecare tranziție poate fi configurată cu parametri de durată și direcție.
Rendervid suportă multiple formate de ieșire inclusiv MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF pentru video și PNG, JPEG, WebP pentru imagini. Codecuri avansate precum H.265/HEVC și AV1 sunt de asemenea suportate. Rezoluția merge până la 8K (7680x4320) cu rate de cadre de la 1 la 120 fps.
Da, Rendervid suportă peste 100 de Google Fonts încorporate și încărcarea fonturilor personalizate din URL-uri în formatele WOFF2, WOFF, TTF și OTF. Puteți specifica greutăți de font de la 100-900 și puteți configura fallback-uri specifice platformei pentru compatibilitate între medii.
Ajutăm companii ca a ta să dezvolte chatboți inteligenți, servere MCP, instrumente AI sau alte tipuri de automatizare AI pentru a înlocui oamenii în sarcinile repetitive din organizația ta.
Explorați toate componentele Rendervid: 8 tipuri de straturi încorporate (text, imagine, video, formă, audio, grup, lottie, personalizat), componente React pre-...
Implementați Rendervid oriunde: randare în browser pentru previzualizări, Node.js pentru procesare batch pe server sau randare cloud pe AWS Lambda, Azure Functi...
Integrați FlowHunt cu serverul json2video-mcp pentru a automatiza generarea programatică de videoclipuri, a gestiona șabloane personalizate și a conecta fluxuri...