Kompletní průvodce systémem šablon Rendervid. Naučte se vytvářet JSON video šablony, používat dynamické proměnné se syntaxí {{variable}}, konfigurovat více než 40 přednastavených animací, 17 přechodů scén a více než 30 funkcí easingu.
Rendervid je programatický nástroj pro renderování videa postavený na deklarativním systému šablon založeném na JSON. Místo ručního editování videa na časové ose definujete každý aspekt vašeho videa – scény, vrstvy, animace, přechody a nastavení výstupu – v jediném JSON dokumentu. Tento přístup činí šablony bezstavovými, verzovatelné a generovatelné strojem, což otevírá dveře k produkci videa řízenému AI, dávkovým renderovacím procesům a plně automatizovaným pracovním postupům obsahu.
Tato příručka pokrývá kompletní systém šablon Rendervid od shora dolů: konfiguraci na kořenové úrovni, nastavení výstupu, systém proměnných a vstupů, scény a kompozici, všech osm typů vrstev, více než 40 přednastavených animací, více než 30 funkcí easingu, 17 přechodů scén, vizuální efekty, konfiguraci fontů a výstupní formáty.
Každá šablona Rendervid je JSON objekt s dobře definovanou sadou polí na kořenové úrovni. Zde je kostra kompletní šablony:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Pole | Typ | Povinné | Popis |
|---|---|---|---|
name | string | Ano | Identifikátor šablony čitelný pro člověka |
output | object | Ano | Konfigurace výstupu videa nebo obrázku (rozměry, fps, délka, formát) |
inputs | array | Ne | Definice dynamických vstupů pro proměnné šablony |
composition | object | Ano | Obsahuje pole scenes, které definuje veškerý vizuální obsah |
fonts | object | Ne | Deklarace Google Fonts a vlastních fontů |
customComponents | object | Ne | Registrované vlastní komponenty vrstev |
defaults | object | Ne | Výchozí hodnoty aplikované na všechny vrstvy, pokud nejsou přepsány |
Pole name slouží pro organizační účely – neovlivňuje renderování. Pole output a composition jsou dva pilíře, které musí mít každá šablona. Vše ostatní je volitelné, ale odemyká výkonné schopnosti.
Objekt output ovládá finální renderovaný soubor: jeho formát, rozměry, snímkovou frekvenci, délku a barvu pozadí.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Pole | Typ | Výchozí | Popis |
|---|---|---|---|
type | string | "video" | Typ výstupu: "video" nebo "image" |
width | number | 1920 | Šířka v pixelech (až 7680 pro 8K) |
height | number | 1080 | Výška v pixelech (až 4320 pro 8K) |
fps | number | 30 | Snímků za sekundu (1-120) |
duration | number | – | Celková délka v sekundách |
backgroundColor | string | "#000000" | Barva pozadí jako hex, RGB nebo pojmenovaná barva |
Zde jsou konfigurace výstupu pro populární formáty:
1080p Full HD (YouTube, všeobecné použití):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertikální):
{
"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 / Obrázek pro sociální sdílení:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Pro výstup obrázku jsou fps a duration ignorovány – renderer zachytí jediný snímek.
Systém vstupů a proměnných je to, co činí šablony Rendervid znovupoužitelnými. Místo pevného zakódování textu, barev nebo URL do vaší šablony definujete vstupy a odkazujete na ně pomocí syntaxe {{variableName}} kdekoli v šabloně.
Vstupy jsou deklarovány v poli inputs na nejvyšší úrovni. Každý objekt vstupu popisuje jednu proměnnou:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titulek",
"description": "Hlavní text titulku zobrazený v úvodní scéně",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Barva značky",
"description": "Primární barva značky použitá pro pozadí a akcenty",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Zobrazit podtitulek",
"description": "Přepnout viditelnost podtitulku",
"required": false,
"default": true
}
]
}
| Pole | Typ | Povinné | Popis |
|---|---|---|---|
key | string | Ano | Jedinečný identifikátor použitý v odkazech {{key}} |
type | string | Ano | Datový typ: string, number, boolean, color, url, array |
label | string | Ne | Popisek čitelný pro člověka pro vykreslování UI |
description | string | Ne | Vysvětlení, co tento vstup ovládá |
required | boolean | Ne | Zda musí být vstup poskytnut v době renderování |
default | any | Ne | Záložní hodnota, pokud není poskytnut žádný vstup |
string – Volný text. Použijte pro titulky, popisy, titulky nebo jakýkoli textový obsah.number – Číselné hodnoty. Použijte pro délky, velikosti, pozice, úrovně průhlednosti nebo počty.boolean – Přepínače pravda/nepravda. Použijte pro podmíněnou viditelnost, příznaky funkcí nebo přepínače zapnuto/vypnuto.color – Hodnoty barev v hex (#FF5733), RGB (rgb(255,87,51)) nebo pojmenovaném formátu. Použijte pro pozadí, barvy textu a akcenty.url – Platné URL řetězce. Použijte pro zdroje obrázků, zdroje videí, odkazy a URL fontů.array – Seznamy hodnot. Použijte pro galerie obrázků, seznamy textu, obsah snímků nebo jakákoli opakovaná data.Jakmile jsou vstupy definovány, odkazujte na ně kdekoli v šabloně pomocí dvojitých složených závorek:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Proměnné jsou vyřešeny v době renderování. Když zavoláte Rendervid API nebo CLI, předáte skutečné hodnoty:
{
"title": "Letní výprodej 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Zde je kompletní šablona s více typy vstupů pracujících společně:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Název produktu",
"description": "Název propagovaného produktu",
"required": true,
"default": "Produkt"
},
{
"key": "price",
"type": "number",
"label": "Cena",
"description": "Cena produktu zobrazená ve videu",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL obrázku produktu",
"description": "URL k obrázku produktu",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Akcentová barva",
"description": "Barva použitá pro CTA tlačítka a zvýraznění",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Zobrazit odznak výprodeje",
"description": "Zda zobrazit překryvný odznak výprodeje",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Vlastnosti produktu",
"description": "Seznam odrážek vlastností",
"required": false,
"default": ["Vlastnost 1", "Vlastnost 2", "Vlastnost 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 }
}
]
}
]
}
}
Tato jediná šablona může generovat tisíce unikátních videí produktů pouhým změněním vstupních hodnot v době renderování – nejsou potřeba žádné úpravy šablony.
Objekt composition je místo, kde žije obsah vašeho videa. Obsahuje pole scenes a každá scéna představuje odlišný segment videa se svou vlastní délkou, vrstvami a přechodem.
{
"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": [ ... ]
}
]
}
}
| Pole | Typ | Povinné | Popis |
|---|---|---|---|
name | string | Ne | Identifikátor scény (pro čitelnost a ladění) |
duration | number | Ano | Délka scény v sekundách |
transition | object | Ne | Efekt přechodu při vstupu do této scény z předchozí |
layers | array | Ano | Uspořádané pole objektů vrstev renderovaných zdola nahoru |
Scény se přehrávají v pořadí. Celková délka videa je součtem všech délek scén (mínus jakékoli překrytí přechodů). Vrstvy ve scéně jsou renderovány v pořadí pole – první vrstva je ve spodní části vizuálního zásobníku a poslední vrstva je nahoře.
Pokud není specifikován žádný přechod, scéna používá výchozí tvrdý cut.
Rendervid podporuje osm odlišných typů vrstev. Každý typ vrstvy slouží specifickému účelu a přijímá svou vlastní sadu vlastností nad sdílenou základní konfigurací.
Každá vrstva, bez ohledu na typ, podporuje tyto základní vlastnosti:
{
"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": ""
}
| Vlastnost | Typ | Výchozí | Popis |
|---|---|---|---|
position | object | {x: 0, y: 0} | Souřadnice X/Y v pixelech |
size | object | – | Šířka a výška v pixelech |
rotation | number | 0 | Úhel rotace ve stupních |
scale | object | {x: 1, y: 1} | Multiplikátor měřítka pro osy X a Y |
anchor | object | {x: 0.5, y: 0.5} | Kotevní bod pro transformace (rozsah 0-1, 0.5 = střed) |
opacity | number | 1 | Průhlednost vrstvy (0 = průhledná, 1 = neprůhledná) |
blendMode | string | "normal" | CSS režim míchání pro kompozici |
from | number | 0 | Čas začátku v sekundách (relativní k začátku scény) |
duration | number | -1 | Délka vrstvy v sekundách (-1 = celá délka scény) |
filters | array | [] | Pole objektů vizuálních filtrů |
style | object | {} | Další vlastnosti stylu podobné CSS |
className | string | "" | Název CSS třídy pro vlastní stylování |
text – Vykresluje stylizovaný text s plnou kontrolou nad fontem, velikostí, barvou, zarovnáním, výškou řádku, mezerami mezi písmeny, stíny textu a dalšími. Podporuje syntaxi {{variable}} pro dynamický obsah.
image – Zobrazuje statické obrázky z URL nebo místních cest. Podporuje oříznutí, režimy object-fit, poloměr okrajů a filtry obrázků.
video – Vkládá video klipy do scény. Podporuje oříznutí (začátek/konec), ovládání hlasitosti, rychlost přehrávání, opakování a ztlumení.
shape – Vykresluje geometrické primitivy: obdélníky, kruhy, elipsy, čáry a polygony. Podporuje výplň, tah, poloměr okrajů, gradienty a stíny.
audio – Přidává zvukové stopy do scény. Podporuje hlasitost, postupné zesílení/zeslabení, oříznutí a opakování. Zvukové vrstvy nemají žádnou vizuální reprezentaci.
group – Kontejnerová vrstva, která drží podřízené vrstvy. Skupiny vám umožňují aplikovat transformace, animace a efekty na více vrstev najednou.
lottie – Vykresluje Lottie/Bodymovin JSON animace. Podporuje rychlost přehrávání, opakování a ovládání segmentů pro přehrávání konkrétních rozsahů snímků.
custom – Načítá registrované vlastní komponenty definované v poli customComponents. Použijte to pro znovupoužitelné, parametrizované šablony vrstev.
Pro podrobnou konfiguraci každého typu vrstvy, včetně všech dostupných vlastností a příkladů kódu, viz Reference komponent Rendervid .
Rendervid obsahuje více než 40 vestavěných přednastavených animací organizovaných do čtyř kategorií: vstup, výstup, zdůraznění a klíčový snímek. Animace jsou připojeny k jakékoli vrstvě a kontrolují, jak se tato vrstva objevuje, mizí nebo chová během své životnosti.
{
"type": "text",
"text": "Animovaný titulek",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Pole | Typ | Výchozí | Popis |
|---|---|---|---|
type | string | – | Kategorie animace: entrance, exit, emphasis, keyframe |
effect | string | – | Název přednastavení (např. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Délka ve snímcích |
delay | number | 0 | Zpoždění před začátkem animace, ve snímcích |
easing | string | "ease" | Název funkce easingu |
loop | number | 0 | Počet opakování (0 = žádné opakování, -1 = nekonečné) |
alternate | boolean | false | Obrátit směr při alternativních opakováních |
Vstupní animace kontrolují, jak se vrstva objeví na obrazovce. Spustí se jednou, když je dosaženo času začátku vrstvy.
| Přednastavení | Popis |
|---|---|
fadeIn | Jednoduché prolnutí průhlednosti z 0 na 1 |
fadeInUp | Prolíná se při posunu nahoru |
fadeInDown | Prolíná se při posunu dolů |
fadeInLeft | Prolíná se při posunu zleva |
fadeInRight | Prolíná se při posunu zprava |
slideInUp | Vjíždí zespodu rámce |
slideInDown | Vjíždí shora rámce |
slideInLeft | Vjíždí z levého okraje |
slideInRight | Vjíždí z pravého okraje |
scaleIn | Zvětšuje se z 0 na plnou velikost |
zoomIn | Přibližuje se z menšího měřítka s mírným přestřelením |
rotateIn | Rotuje do pozice z offsetového úhlu |
bounceIn | Odráží se do pozice s elastickým přestřelením |
flipInX | 3D překlopení na ose X (horizontální překlopení) |
flipInY | 3D překlopení na ose Y (vertikální překlopení) |
typewriter | Znaky se objevují jeden po druhém (textové vrstvy) |
revealLeft | Maskové odhalení posouvající se zleva |
revealRight | Maskové odhalení posouvající se zprava |
revealUp | Maskové odhalení posouvající se nahoru |
revealDown | Maskové odhalení posouvající se dolů |
Výstupní animace kontrolují, jak vrstva mizí. Spustí se na konci délky vrstvy.
| Přednastavení | Popis |
|---|---|
fadeOut | Jednoduché prolnutí průhlednosti z 1 na 0 |
slideOutUp | Vyjíždí horní částí rámce |
slideOutDown | Vyjíždí spodní částí rámce |
scaleOut | Zmenšuje se z plné velikosti na 0 |
zoomOut | Oddálí se na menší měřítko a prolne se |
rotateOut | Rotuje z pozice na offsetový úhel |
bounceOut | Odráží se ven s elastickým přestřelením před zmizením |
flipOutX | 3D překlopení ven na ose X |
flipOutY | 3D překlopení ven na ose Y |
Zdůrazňující animace přitahují pozornost k vrstvě, zatímco zůstává viditelná. Fungují dobře s opakováním.
| Přednastavení | Popis |
|---|---|
pulse | Rytmické pulzování měřítka (roste a zmenšuje se) |
shake | Rychlé horizontální třesení |
bounce | Vertikální poskakující pohyb |
swing | Kývavý pohyb rotace podobný kyvadlu |
wobble | Mimo osové kolébání kombinující rotaci a translaci |
flash | Rychlé blikání průhlednosti |
rubberBand | Elastické natažení a zpětný efekt |
heartbeat | Dvojitý pulz rytmu srdečního tepu |
float | Jemný plující pohyb nahoru a dolů |
spin | Kontinuální 360stupňová rotace |
Pro plnou kreativní kontrolu vám animace klíčových snímků umožňují definovat vlastní změny vlastností snímek po snímku:
{
"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"
}
Animace klíčových snímků mohou animovat jakoukoli číselnou vlastnost: opacity, x, y, rotation, scaleX, scaleY a další. Každý klíčový snímek specifikuje číslo snímku a hodnoty vlastností v tomto snímku. Renderer interpoluje mezi klíčovými snímky pomocí specifikované funkce easingu.
Jedna vrstva může mít více animací. Například vstupní animace následovaná zdůrazňujícím opakováním a pak výstupní animací:
{
"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"
}
]
}
Funkce easingu kontrolují rychlost změny během animace a určují, zda se pohyb cítí lineární, hladký, poskakující nebo elastický. Rendervid obsahuje více než 30 vestavěných funkcí easingu.
| Funkce | Popis |
|---|---|
linear | Konstantní rychlost od začátku do konce, žádné zrychlení |
ease | Výchozí easing podobný CSS s jemným zrychlením a zpomalením |
easeIn | Začíná pomalu, zrychluje ke konci |
easeOut | Začíná rychle, zpomaluje ke konci |
easeInOut | Zrychluje v první polovině, zpomaluje ve druhé |
| Funkce | Popis |
|---|---|
easeInQuad | Kvadratické zrychlení (t^2) |
easeOutQuad | Kvadratické zpomalení |
easeInOutQuad | Kvadratické zrychlení a pak zpomalení |
| Funkce | Popis |
|---|---|
easeInCubic | Kubické zrychlení (t^3) – výraznější než kvadratické |
easeOutCubic | Kubické zpomalení – hladké a přirozeně působící zastavení |
easeInOutCubic | Kubický ease in a out – nejčastěji používaný easing |
| Funkce | Popis |
|---|---|
easeInQuart | Kvartické zrychlení (t^4) |
easeOutQuart | Kvartické zpomalení |
easeInOutQuart | Kvartický ease in a out |
| Funkce | Popis |
|---|---|
easeInQuint | Kvintické zrychlení (t^5) – velmi ostrý začátek |
easeOutQuint | Kvintické zpomalení – velmi ostré zastavení |
easeInOutQuint | Kvintický ease in a out |
| Funkce | Popis |
|---|---|
easeInSine | Zrychlení založené na sinusoidě – nejjemnější křivka easingu |
easeOutSine | Zpomalení založené na sinusoidě |
easeInOutSine | Ease in a out založený na sinusoidě |
| Funkce | Popis |
|---|---|
easeInExpo | Exponenciální zrychlení – téměř ploché pak ostré |
easeOutExpo | Exponenciální zpomalení – ostré pak téměř ploché |
easeInOutExpo | Exponenciální ease in a out |
| Funkce | Popis |
|---|---|
easeInCirc | Křivka kruhového zrychlení |
easeOutCirc | Křivka kruhového zpomalení |
easeInOutCirc | Kruhový ease in a out |
| Funkce | Popis |
|---|---|
easeInBack | Mírně se stáhne zpět před zrychlením vpřed (anticipace) |
easeOutBack | Přestřelí cíl a pak se vrátí zpět (přestřelení) |
easeInOutBack | Anticipace při vstupu, přestřelení při výstupu |
| Funkce | Popis |
|---|---|
easeInElastic | Elastické kolébání při zrychlení – pružinové natažení |
easeOutElastic | Elastické kolébání při zpomalení – pružinové cvaknutí |
easeInOutElastic | Elastické na obou koncích |
| Funkce | Popis |
|---|---|
easeInBounce | Poskakující efekt při vstupu – jako míč puštěný v opačném směru |
easeOutBounce | Poskakující efekt při výstupu – jako míč dopadající na zem |
easeInOutBounce | Poskakování na obou koncích |
easeOutCubic nebo easeOutQuart pro přirozeně působící vstupyeaseOutElastic nebo easeOutBack pro hravé přestřeleníeaseInOutSine pro jemný, kontinuální pohybeaseInExpo pro budování, easeOutExpo pro rychlá zastaveníeaseOutBounce pro efekty podobné gravitaciPřechody kontrolují, jak jedna scéna přechází do další. Rendervid poskytuje 17 typů přechodů od jednoduchých střihů po kinematografické 3D efekty.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Objekt transition je umístěn na příchozí scéně (scéna, do které se přechází). Vlastnost direction se aplikuje pouze na směrové přechody jako slide, wipe a push.
| Přechod | Popis |
|---|---|
cut | Okamžité přepnutí bez vizuálního efektu (výchozí) |
fade | Křížové prolnutí mezi scénami – odcházející scéna se prolíná ven, zatímco příchozí scéna se prolíná dovnitř |
zoom | Přiblíží se k odcházející scéně, zatímco se objeví příchozí scéna |
slide | Příchozí scéna se přesouvá přes odcházející scénu z konfigurovatelného směru (vlevo, vpravo, nahoru, dolů) |
wipe | Ostré setření odhaluje příchozí scénu, pohybující se přes rámec v daném směru |
push | Příchozí scéna vytlačuje odcházející scénu z obrazovky ve specifikovaném směru |
rotate | Odcházející scéna rotuje pryč, zatímco příchozí scéna rotuje dovnitř |
flip | 3D přechod překlopení – rámec se překlopí jako karta pro odhalení další scény |
blur | Odcházející scéna se rozmazává, zatímco příchozí scéna se zostřuje do fokusu |
circle | Kruhová maska se rozšiřuje ze středu (nebo specifikovaného bodu) pro odhalení další scény |
glitch | Efekt digitálního zkreslení glitche s chromatickou aberací a posunem |
dissolve | Rozpuštění na úrovni pixelů, kde jednotlivé pixely přecházejí náhodně mezi scénami |
cube | 3D rotace krychle – scény jsou na sousedních stranách rotující krychle |
swirl | Spirálové zkreslení, které víří odcházející scénu do příchozí scény |
diagonal-wipe | Diagonální ostré setření pohybující se z jednoho rohu do opačného |
iris | Kruhová clona, která se otevírá nebo zavírá jako clona fotoaparátu |
crosszoom | Obě scény přibližují současně – odcházející přibližuje dovnitř, příchozí oddáluje ven |
Kinematografické prolnutí s dlouhým křížovým prolnutím:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Posun zprava (běžné pro sekvenční obsah):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D rotace krychle (dynamický, moderní pocit):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Efekt glitche (energický, technicky zaměřený):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Vrstvy Rendervid podporují řadu vizuálních efektů prostřednictvím filtrů, režimů míchání, stínů a transformací.
Filtry se aplikují prostřednictvím pole filters na jakoukoli vrstvu. Každý filtr je objekt s type a 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 }
]
}
| Filtr | Rozsah hodnot | Popis |
|---|---|---|
blur | 0+ (pixely) | Gaussovské rozmazání – vyšší hodnoty produkují více rozmazání |
brightness | 0+ (multiplikátor) | 0 = černá, 1 = normální, 2 = dvojnásobný jas |
contrast | 0+ (multiplikátor) | 0 = šedá, 1 = normální, 2 = dvojnásobný kontrast |
grayscale | 0-1 | 0 = plná barva, 1 = plně desaturováno |
hue-rotate | 0-360 (stupně) | Rotuje barvy kolem barevného kruhu |
invert | 0-1 | 0 = normální, 1 = plně invertované barvy |
saturate | 0+ (multiplikátor) | 0 = desaturováno, 1 = normální, 2 = dvojnásobná saturace |
sepia | 0-1 | 0 = normální, 1 = plný sépie tón |
Vlastnost blendMode kontroluje, jak se vrstva kompozituje s vrstvami pod ní:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Podporované režimy míchání: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Textové a tvarové vrstvy podporují efekty stínů prostřednictvím vlastnosti style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtry, režimy míchání, průhlednost a stíny mohou být všechny kombinovány na jedné vrstvě pro sofistikované vizuální zpracování:
{
"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 podporuje jak Google Fonts (více než 100 rodin vestavěných), tak vlastní fonty načítané z externích URL.
Deklarujte Google Fonts v poli 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] }
]
}
}
Každý objekt fontu vyžaduje:
| Pole | Typ | Popis |
|---|---|---|
family | string | Název rodiny Google Font (vyžadována přesná shoda) |
weights | array | Pole číselných tloušťek k načtení (100-900) |
Běžné tloušťky fontů: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Načtěte fonty z externích URL pomocí pole 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"
}
]
}
}
Podporované formáty fontů: WOFF2 (doporučeno pro nejmenší velikost souboru), WOFF, TTF a OTF.
Odkazujte na deklarované fonty podle názvu rodiny ve stylech textových vrstev:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid obsahuje řetězce záložních fontů specifické pro platformu, aby zajistil konzistentní renderování napříč různými prostředími. Pokud není specifikovaný font k dispozici, renderer se vrátí k systémovým fontům odpovídajícím stejné klasifikaci (serif, sans-serif, monospace).
Rendervid podporuje širokou škálu výstupních formátů a kodeků pro renderování videa i obrázků.
| Formát | Kodek | Přípona souboru | Nejlepší pro |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maximální kompatibilita – web, mobil, sociální média |
| WebM | VP8 / VP9 | .webm | Vkládání na web s menšími velikostmi souborů |
| MOV | ProRes | .mov | Profesionální editační pracovní postupy, bezeztrátová kvalita |
| GIF | – | .gif | Krátké animace, sociální sdílení, email |
| MP4 | H.265 / HEVC | .mp4 | Novější zařízení, o 50% menší soubory než H.264 při stejné kvalitě |
| WebM | AV1 | .webm | Kodek nové generace, nejlepší účinnost komprese |
| Formát | Přípona souboru | Nejlepší pro |
|---|---|---|
| PNG | .png | Bezeztrátová kvalita, podpora průhlednosti |
| JPEG | .jpg | Fotografie, menší velikosti souborů |
| WebP | .webp | Moderní web, nejlepší rovnováha kvality a velikosti |
| Přednastavení | Popis |
|---|---|
draft | Rychlé renderování se sníženou kvalitou – ideální pro náhled |
standard | Vyvážená kvalita a velikost souboru – dobré pro většinu případů použití |
high | Vyšší bitrate a kvalita – pro finální dodávky |
lossless | Maximální kvalita bez kompresních artefaktů |
Rendervid podporuje rozlišení od malých miniatur až do 8K:
| Rozlišení | Rozměry | Běžné použití |
|---|---|---|
| SD | 640 x 480 | Miniatury, náhledy |
| HD | 1280 x 720 | Webové video, email |
| Full HD | 1920 x 1080 | YouTube, prezentace |
| 2K | 2560 x 1440 | Vysoce kvalitní displeje |
| 4K UHD | 3840 x 2160 | Profesionální, vysílání |
| 8K | 7680 x 4320 | Maximální rozlišení, odolné vůči budoucnosti |
Podporovány jsou snímkové frekvence od 1 fps (prezentace) do 120 fps (zpomalený pohyb, herní obsah). Běžné volby jsou 24 fps (kinematografické), 30 fps (web/sociální) a 60 fps (hladký pohyb).
Zde je úplná šablona Rendervid, která demonstruje klíčové funkce systému šablon pracující společně: dynamické vstupy, více scén s přechody, vrstvené kompozice, animace s easingem, fonty a vizuální efekty.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Název produktu",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "Budoucnost je zde."
},
{
"key": "heroImage",
"type": "url",
"label": "Hlavní obrázek",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primární barva",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Výzva k akci",
"default": "Zjistit více"
}
],
"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": "Představujeme",
"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"
}
]
}
]
}
]
}
}
Tato šablona vytváří 20sekundové video pro uvedení produktu se třemi scénami: typografický úvod s odstupňovanými textovými animacemi, prezentace produktu s plovoucím obrázkem a efektem psacího stroje a závěrečná scéna s výzvou k akci s pulzujícím tlačítkem. Veškerý text, barvy a obrázky jsou řízeny proměnnými šablony, což ji činí plně znovupoužitelnou.
Šablony Rendervid jsou JSON soubory, které definují strukturu, obsah, animace a nastavení výstupu videa nebo obrázku. Každá šablona obsahuje konfiguraci výstupu (rozměry, fps, délka), definice vstupů pro dynamické proměnné, kompozici se scénami a vrstvami a volitelné konfigurace fontů a vlastních komponent.
Proměnné šablon používají syntaxi {{variableName}}. Vstupy definujete v poli inputs šablony s klíčem, typem (string, number, boolean, color, url, array), popiskem, popisem a výchozí hodnotou. V době renderování jsou tyto proměnné nahrazeny skutečnými hodnotami, což činí šablony znovupoužitelnými a dynamickými.
Rendervid obsahuje více než 40 vestavěných přednastavených animací organizovaných do čtyř kategorií: vstupní animace (fadeIn, slideIn, scaleIn, bounceIn atd.), výstupní animace (fadeOut, slideOut, zoomOut atd.), zdůrazňující animace (pulse, shake, bounce, swing, heartbeat atd.) a plně přizpůsobitelné klíčové snímky animací s více než 30 funkcemi easingu.
Rendervid nabízí 17 typů přechodů scén: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris a crosszoom. Každý přechod lze konfigurovat s parametry délky a směru.
Rendervid podporuje více výstupních formátů včetně MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF pro video a PNG, JPEG, WebP pro obrázky. Podporovány jsou také pokročilé kodeky jako H.265/HEVC a AV1. Rozlišení sahá až do 8K (7680x4320) s frekvencí snímků od 1 do 120 fps.
Ano, Rendervid podporuje více než 100 vestavěných Google Fonts a načítání vlastních fontů z URL ve formátech WOFF2, WOFF, TTF a OTF. Můžete specifikovat tloušťky fontů od 100 do 900 a konfigurovat záložní fonty specifické pro platformu pro kompatibilitu napříč různými prostředími.
Pomáháme společnostem jako je ta vaše vyvíjet inteligentní chatboty, MCP servery, AI nástroje nebo jiné typy AI automatizace pro nahrazení lidské práce u opakujících se úkolů ve vaší organizaci.
Prozkoumejte všechny Rendervid komponenty: 8 vestavěných typů vrstev (text, obrázek, video, tvar, audio, skupina, lottie, vlastní), předpřipravené React kompone...
Nasaďte Rendervid kdekoli: renderování v prohlížeči pro náhledy, Node.js pro dávkové zpracování na serveru, nebo cloud renderování na AWS Lambda, Azure Function...
Objevte Rendervid, bezplatnou open-source alternativu k Remotionu pro programové generování videa. Design zaměřený na AI s integrací MCP, JSON šablonami, cloudo...