Kompletny przewodnik po systemie szablonów Rendervid. Dowiedz się, jak tworzyć szablony wideo JSON, używać dynamicznych zmiennych ze składnią {{zmienna}}, konfigurować ponad 40 presetów animacji, 17 przejść między scenami i ponad 30 funkcji wygładzania.
Rendervid to programatyczny silnik renderowania wideo zbudowany wokół deklaratywnego systemu szablonów opartego na JSON. Zamiast ręcznie edytować wideo na osi czasu, definiujesz każdy aspekt swojego wideo – sceny, warstwy, animacje, przejścia i ustawienia wyjściowe – w pojedynczym dokumencie JSON. To podejście sprawia, że szablony są bezstanowe, kontrolowalne wersjonowo i możliwe do wygenerowania maszynowo, otwierając drzwi do produkcji wideo opartej na AI, potoków renderowania wsadowego i w pełni zautomatyzowanych przepływów pracy związanych z treścią.
Ten przewodnik obejmuje kompletny system szablonów Rendervid od góry do dołu: konfigurację na poziomie głównym, ustawienia wyjściowe, system zmiennych i wejść, sceny i kompozycję, wszystkie osiem typów warstw, ponad 40 presetów animacji, ponad 30 funkcji wygładzania, 17 przejść między scenami, efekty wizualne, konfigurację czcionek i formaty wyjściowe.
Każdy szablon Rendervid to obiekt JSON z dobrze zdefiniowanym zestawem pól na poziomie głównym. Oto szkielet kompletnego szablonu:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Pole | Typ | Wymagane | Opis |
|---|---|---|---|
name | string | Tak | Czytelny dla człowieka identyfikator szablonu |
output | object | Tak | Konfiguracja wyjścia wideo lub obrazu (wymiary, fps, czas trwania, format) |
inputs | array | Nie | Definicje wejść dynamicznych dla zmiennych szablonu |
composition | object | Tak | Zawiera tablicę scenes, która definiuje całą zawartość wizualną |
fonts | object | Nie | Deklaracje Google Fonts i niestandardowych czcionek |
customComponents | object | Nie | Zarejestrowane niestandardowe komponenty warstw |
defaults | object | Nie | Wartości domyślne stosowane do wszystkich warstw, chyba że zostaną nadpisane |
Pole name służy celom organizacyjnym – nie wpływa na renderowanie. Pola output i composition to dwa filary, które musi mieć każdy szablon. Wszystko inne jest opcjonalne, ale odblokowuje potężne możliwości.
Obiekt output kontroluje ostateczny wyrenderowany plik: jego format, wymiary, częstotliwość klatek, czas trwania i kolor tła.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Pole | Typ | Domyślnie | Opis |
|---|---|---|---|
type | string | "video" | Typ wyjścia: "video" lub "image" |
width | number | 1920 | Szerokość w pikselach (do 7680 dla 8K) |
height | number | 1080 | Wysokość w pikselach (do 4320 dla 8K) |
fps | number | 30 | Klatki na sekundę (1-120) |
duration | number | – | Całkowity czas trwania w sekundach |
backgroundColor | string | "#000000" | Kolor tła jako hex, RGB lub nazwany kolor |
Oto konfiguracje wyjściowe dla popularnych formatów:
1080p Full HD (YouTube, ogólne zastosowanie):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 pionowo):
{
"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 / Obraz Udostępniania Społecznościowego:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Dla wyjścia obrazu fps i duration są ignorowane – renderer przechwytuje pojedynczą klatkę.
System wejść i zmiennych sprawia, że szablony Rendervid są wielokrotnego użytku. Zamiast kodować na sztywno tekst, kolory lub adresy URL w szablonie, definiujesz wejścia i odwołujesz się do nich za pomocą składni {{nazwaZmiennej}} w dowolnym miejscu szablonu.
Wejścia są deklarowane w tablicy inputs najwyższego poziomu. Każdy obiekt wejściowy opisuje pojedynczą zmienną:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Tytuł",
"description": "Główny tekst tytułu wyświetlany w scenie intro",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Kolor Marki",
"description": "Główny kolor marki używany dla tła i akcentów",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Pokaż Podtytuł",
"description": "Przełącz widoczność podtytułu",
"required": false,
"default": true
}
]
}
| Pole | Typ | Wymagane | Opis |
|---|---|---|---|
key | string | Tak | Unikalny identyfikator używany w odwołaniach {{key}} |
type | string | Tak | Typ danych: string, number, boolean, color, url, array |
label | string | Nie | Czytelna dla człowieka etykieta do renderowania UI |
description | string | Nie | Wyjaśnienie, co kontroluje to wejście |
required | boolean | Nie | Czy wejście musi być dostarczone w czasie renderowania |
default | any | Nie | Wartość zastępcza, jeśli nie dostarczono wejścia |
string – Dowolny tekst. Używaj dla tytułów, opisów, podpisów lub dowolnej zawartości tekstowej.number – Wartości liczbowe. Używaj dla czasów trwania, rozmiarów, pozycji, poziomów przezroczystości lub liczników.boolean – Przełączniki prawda/fałsz. Używaj dla warunkowej widoczności, flag funkcji lub przełączników włącz/wyłącz.color – Wartości kolorów w formacie hex (#FF5733), RGB (rgb(255,87,51)) lub nazwanym. Używaj dla tła, kolorów tekstu i akcentów.url – Prawidłowe ciągi URL. Używaj dla źródeł obrazów, źródeł wideo, linków i adresów URL czcionek.array – Listy wartości. Używaj dla galerii obrazów, list tekstowych, zawartości slajdów lub dowolnych powtarzających się danych.Po zdefiniowaniu wejść odwołuj się do nich w dowolnym miejscu szablonu za pomocą podwójnych nawiasów klamrowych:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Zmienne są rozwiązywane w czasie renderowania. Gdy wywołujesz API lub CLI Rendervid, przekazujesz rzeczywiste wartości:
{
"title": "Letnia Wyprzedaż 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Oto kompletny szablon z wieloma typami wejść współpracującymi ze sobą:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nazwa Produktu",
"description": "Nazwa promowanego produktu",
"required": true,
"default": "Produkt"
},
{
"key": "price",
"type": "number",
"label": "Cena",
"description": "Cena produktu wyświetlana w wideo",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL Obrazu Produktu",
"description": "URL do obrazu produktu",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Kolor Akcentu",
"description": "Kolor używany dla przycisków CTA i podświetleń",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Pokaż Odznakę Wyprzedaży",
"description": "Czy wyświetlić nakładkę odznaki wyprzedaży",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Cechy Produktu",
"description": "Lista punktów wypunktowanych cech",
"required": false,
"default": ["Cecha 1", "Cecha 2", "Cecha 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 }
}
]
}
]
}
}
Ten pojedynczy szablon może wygenerować tysiące unikalnych wideo produktowych, po prostu zmieniając wartości wejściowe w czasie renderowania – nie są potrzebne żadne modyfikacje szablonu.
Obiekt composition to miejsce, w którym znajduje się zawartość Twojego wideo. Zawiera tablicę scenes, a każda scena reprezentuje odrębny segment wideo z własnym czasem trwania, warstwami i przejściem.
{
"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 | Wymagane | Opis |
|---|---|---|---|
name | string | Nie | Identyfikator sceny (dla czytelności i debugowania) |
duration | number | Tak | Długość sceny w sekundach |
transition | object | Nie | Efekt przejścia przy wchodzeniu do tej sceny z poprzedniej |
layers | array | Tak | Uporządkowana tablica obiektów warstw renderowanych od dołu do góry |
Sceny odtwarzają się sekwencyjnie. Całkowity czas trwania wideo to suma wszystkich czasów trwania scen (minus ewentualne nakładanie się przejść). Warstwy w scenie są renderowane w kolejności tablicy – pierwsza warstwa znajduje się na dole stosu wizualnego, a ostatnia warstwa na górze.
Jeśli nie określono przejścia, scena domyślnie używa twardego cut.
Rendervid obsługuje osiem różnych typów warstw. Każdy typ warstwy służy określonemu celowi i akceptuje własny zestaw właściwości oprócz wspólnej konfiguracji bazowej.
Każda warstwa, niezależnie od typu, obsługuje te podstawowe właściwości:
{
"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": ""
}
| Właściwość | Typ | Domyślnie | Opis |
|---|---|---|---|
position | object | {x: 0, y: 0} | Współrzędne X/Y w pikselach |
size | object | – | Szerokość i wysokość w pikselach |
rotation | number | 0 | Kąt obrotu w stopniach |
scale | object | {x: 1, y: 1} | Mnożnik skali dla osi X i Y |
anchor | object | {x: 0.5, y: 0.5} | Punkt zakotwiczenia dla przekształceń (zakres 0-1, 0.5 = środek) |
opacity | number | 1 | Przezroczystość warstwy (0 = przezroczysta, 1 = nieprzezroczysta) |
blendMode | string | "normal" | Tryb mieszania CSS do kompozytowania |
from | number | 0 | Czas rozpoczęcia w sekundach (względem początku sceny) |
duration | number | -1 | Czas trwania warstwy w sekundach (-1 = pełny czas trwania sceny) |
filters | array | [] | Tablica obiektów filtrów wizualnych |
style | object | {} | Dodatkowe właściwości stylu podobne do CSS |
className | string | "" | Nazwa klasy CSS do niestandardowego stylowania |
text – Renderuje stylizowany tekst z pełną kontrolą nad czcionką, rozmiarem, kolorem, wyrównaniem, wysokością linii, odstępami między literami, cieniami tekstu i więcej. Obsługuje składnię {{zmienna}} dla dynamicznej zawartości.
image – Wyświetla statyczne obrazy z adresów URL lub ścieżek lokalnych. Obsługuje przycinanie, tryby dopasowania obiektu, zaokrąglenie brzegów i filtry obrazów.
video – Osadza klipy wideo w scenie. Obsługuje przycinanie (początek/koniec), kontrolę głośności, szybkość odtwarzania, zapętlanie i wyciszanie.
shape – Renderuje prymitywy geometryczne: prostokąty, koła, elipsy, linie i wielokąty. Obsługuje wypełnienie, obrys, zaokrąglenie brzegów, gradienty i cienie.
audio – Dodaje ścieżki audio do sceny. Obsługuje głośność, zanikanie/pojawianie się, przycinanie i zapętlanie. Warstwy audio nie mają reprezentacji wizualnej.
group – Warstwa kontenera, która przechowuje warstwy podrzędne. Grupy pozwalają stosować przekształcenia, animacje i efekty do wielu warstw jednocześnie.
lottie – Renderuje animacje JSON Lottie/Bodymovin. Obsługuje szybkość odtwarzania, zapętlanie i kontrolę segmentów do odtwarzania określonych zakresów klatek.
custom – Ładuje zarejestrowane niestandardowe komponenty zdefiniowane w polu customComponents. Używaj tego dla szablonów warstw wielokrotnego użytku, sparametryzowanych.
Aby uzyskać szczegółową konfigurację każdego typu warstwy, w tym wszystkie dostępne właściwości i przykłady kodu, zobacz Referencję Komponentów Rendervid .
Rendervid zawiera ponad 40 wbudowanych presetów animacji podzielonych na cztery kategorie: entrance (wejście), exit (wyjście), emphasis (akcent) i keyframe (klatka kluczowa). Animacje są dołączane do dowolnej warstwy i kontrolują, jak ta warstwa pojawia się, znika lub zachowuje się podczas swojego istnienia.
{
"type": "text",
"text": "Animowany Tytuł",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Pole | Typ | Domyślnie | Opis |
|---|---|---|---|
type | string | – | Kategoria animacji: entrance, exit, emphasis, keyframe |
effect | string | – | Nazwa presetu (np. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Czas trwania w klatkach |
delay | number | 0 | Opóźnienie przed rozpoczęciem animacji, w klatkach |
easing | string | "ease" | Nazwa funkcji wygładzania |
loop | number | 0 | Liczba pętli (0 = brak pętli, -1 = nieskończoność) |
alternate | boolean | false | Odwróć kierunek w przemiennych pętlach |
Animacje wejścia kontrolują, jak warstwa pojawia się na ekranie. Uruchamiają się raz, gdy osiągnięty zostanie czas rozpoczęcia warstwy.
| Preset | Opis |
|---|---|
fadeIn | Proste zanikanie przezroczystości od 0 do 1 |
fadeInUp | Zanika podczas przesuwania w górę |
fadeInDown | Zanika podczas przesuwania w dół |
fadeInLeft | Zanika podczas przesuwania z lewej |
fadeInRight | Zanika podczas przesuwania z prawej |
slideInUp | Wsuwa się od dołu ramki |
slideInDown | Wsuwa się od góry ramki |
slideInLeft | Wsuwa się z lewej krawędzi |
slideInRight | Wsuwa się z prawej krawędzi |
scaleIn | Skaluje się od 0 do pełnego rozmiaru |
zoomIn | Powiększa się z mniejszej skali z lekkim przekroczeniem |
rotateIn | Obraca się na pozycję z kąta przesunięcia |
bounceIn | Odbija się na pozycję z elastycznym przekroczeniem |
flipInX | Obrót 3D na osi X (obrót poziomy) |
flipInY | Obrót 3D na osi Y (obrót pionowy) |
typewriter | Znaki pojawiają się pojedynczo (warstwy tekstowe) |
revealLeft | Odsłonięcie maski przesuwające się z lewej |
revealRight | Odsłonięcie maski przesuwające się z prawej |
revealUp | Odsłonięcie maski przesuwające się w górę |
revealDown | Odsłonięcie maski przesuwające się w dół |
Animacje wyjścia kontrolują, jak warstwa znika. Uruchamiają się pod koniec czasu trwania warstwy.
| Preset | Opis |
|---|---|
fadeOut | Proste zanikanie przezroczystości od 1 do 0 |
slideOutUp | Wysuwa się przez górę ramki |
slideOutDown | Wysuwa się przez dół ramki |
scaleOut | Skaluje się w dół od pełnego rozmiaru do 0 |
zoomOut | Pomniejsza się do mniejszej skali i zanika |
rotateOut | Obraca się z pozycji do kąta przesunięcia |
bounceOut | Odbija się na zewnątrz z elastycznym przekroczeniem przed zniknięciem |
flipOutX | Obrót 3D na zewnątrz na osi X |
flipOutY | Obrót 3D na zewnątrz na osi Y |
Animacje akcentujące przyciągają uwagę do warstwy, gdy pozostaje widoczna. Dobrze współpracują z zapętlaniem.
| Preset | Opis |
|---|---|
pulse | Rytmiczne pulsowanie skali (rośnie i maleje) |
shake | Szybkie poziome trzęsienie |
bounce | Pionowy ruch odbijania |
swing | Ruch wahadłowy kołysania się |
wobble | Kołysanie poza osią łączące obrót i translację |
flash | Szybkie błyski przezroczystości |
rubberBand | Efekt elastycznego rozciągania i przyciągania |
heartbeat | Rytm podwójnego bicia serca |
float | Delikatny ruch unoszenia się w górę i w dół |
spin | Ciągły obrót o 360 stopni |
Dla pełnej kreatywnej kontroli animacje klatek kluczowych pozwalają definiować niestandardowe zmiany właściwości klatka po klatce:
{
"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"
}
Animacje klatek kluczowych mogą animować dowolną właściwość liczbową: opacity, x, y, rotation, scaleX, scaleY i więcej. Każda klatka kluczowa określa numer klatki i wartości właściwości w tej klatce. Renderer interpoluje między klatkami kluczowymi przy użyciu określonej funkcji wygładzania.
Pojedyncza warstwa może mieć wiele animacji. Na przykład animację wejścia, po której następuje pętla akcentująca, a następnie animacja wyjścia:
{
"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"
}
]
}
Funkcje wygładzania kontrolują tempo zmian podczas animacji, określając, czy ruch wydaje się liniowy, płynny, odbijający się lub elastyczny. Rendervid zawiera ponad 30 wbudowanych funkcji wygładzania.
| Funkcja | Opis |
|---|---|
linear | Stała prędkość od początku do końca, bez przyspieszenia |
ease | Domyślne wygładzanie podobne do CSS z delikatnym przyspieszeniem i zwalnianiem |
easeIn | Zaczyna wolno, przyspiesza w kierunku końca |
easeOut | Zaczyna szybko, zwalnia w kierunku końca |
easeInOut | Przyspiesza w pierwszej połowie, zwalnia w drugiej |
| Funkcja | Opis |
|---|---|
easeInQuad | Przyspieszenie kwadratowe (t^2) |
easeOutQuad | Zwalnianie kwadratowe |
easeInOutQuad | Przyspieszenie kwadratowe, następnie zwalnianie |
| Funkcja | Opis |
|---|---|
easeInCubic | Przyspieszenie sześcienne (t^3) – bardziej wyraźne niż kwadratowe |
easeOutCubic | Zwalnianie sześcienne – płynne i naturalne zatrzymanie |
easeInOutCubic | Wygładzanie sześcienne wejścia i wyjścia – najczęściej używane wygładzanie |
| Funkcja | Opis |
|---|---|
easeInQuart | Przyspieszenie czwartego stopnia (t^4) |
easeOutQuart | Zwalnianie czwartego stopnia |
easeInOutQuart | Wygładzanie czwartego stopnia wejścia i wyjścia |
| Funkcja | Opis |
|---|---|
easeInQuint | Przyspieszenie piątego stopnia (t^5) – bardzo ostry start |
easeOutQuint | Zwalnianie piątego stopnia – bardzo ostre zatrzymanie |
easeInOutQuint | Wygładzanie piątego stopnia wejścia i wyjścia |
| Funkcja | Opis |
|---|---|
easeInSine | Przyspieszenie oparte na sinusie – najdelikatniejsza krzywa wygładzania |
easeOutSine | Zwalnianie oparte na sinusie |
easeInOutSine | Wygładzanie oparte na sinusie wejścia i wyjścia |
| Funkcja | Opis |
|---|---|
easeInExpo | Przyspieszenie wykładnicze – prawie płaskie, potem ostre |
easeOutExpo | Zwalnianie wykładnicze – ostre, potem prawie płaskie |
easeInOutExpo | Wygładzanie wykładnicze wejścia i wyjścia |
| Funkcja | Opis |
|---|---|
easeInCirc | Krzywa przyspieszenia kołowego |
easeOutCirc | Krzywa zwalniania kołowego |
easeInOutCirc | Wygładzanie kołowe wejścia i wyjścia |
| Funkcja | Opis |
|---|---|
easeInBack | Lekko cofa się przed przyspieszeniem do przodu (antycypacja) |
easeOutBack | Przekracza cel, a następnie wraca (przekroczenie) |
easeInOutBack | Antycypacja przy wejściu, przekroczenie przy wyjściu |
| Funkcja | Opis |
|---|---|
easeInElastic | Elastyczne kołysanie przy przyspieszeniu – nawijanie podobne do sprężyny |
easeOutElastic | Elastyczne kołysanie przy zwalnianiu – przyciąganie podobne do sprężyny |
easeInOutElastic | Elastyczne na obu końcach |
| Funkcja | Opis |
|---|---|
easeInBounce | Efekt odbijania przy wejściu – jak piłka upuszczona w odwrotnej kolejności |
easeOutBounce | Efekt odbijania przy wyjściu – jak piłka uderzająca w ziemię |
easeInOutBounce | Odbijanie na obu końcach |
easeOutCubic lub easeOutQuart dla naturalnych wejśćeaseOutElastic lub easeOutBack dla zabawnego przekroczeniaeaseInOutSine dla delikatnego, ciągłego ruchueaseInExpo dla budowania, easeOutExpo dla szybkich zatrzymańeaseOutBounce dla efektów podobnych do grawitacjiPrzejścia kontrolują, jak jedna scena przechodzi w następną. Rendervid zapewnia 17 typów przejść, od prostych cięć po kinowe efekty 3D.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Obiekt transition jest umieszczany w nadchodzącej scenie (scenie, do której następuje przejście). Właściwość direction ma zastosowanie tylko do przejść kierunkowych, takich jak slide, wipe i push.
| Przejście | Opis |
|---|---|
cut | Natychmiastowe przełączenie bez efektu wizualnego (domyślnie) |
fade | Przenikanie między scenami – wychodząca scena zanika, gdy nadchodząca scena pojawia się |
zoom | Powiększa się do wychodzącej sceny, gdy pojawia się nadchodząca scena |
slide | Nadchodząca scena przesuwa się nad wychodzącą sceną z konfigurowalnego kierunku (lewo, prawo, góra, dół) |
wipe | Wymazywanie ostrej krawędzi odsłania nadchodzącą scenę, poruszając się przez ramkę w danym kierunku |
push | Nadchodząca scena wypycha wychodzącą scenę poza ekran w określonym kierunku |
rotate | Wychodząca scena obraca się, podczas gdy nadchodząca scena obraca się do środka |
flip | Przejście obrotu 3D – ramka obraca się jak karta, aby odsłonić następną scenę |
blur | Wychodząca scena rozmywa się, podczas gdy nadchodząca scena wyostrza się |
circle | Kołowa maska rozszerza się ze środka (lub określonego punktu), aby odsłonić następną scenę |
glitch | Cyfrowy efekt zniekształcenia usterki z aberracją chromatyczną i przemieszczeniem |
dissolve | Rozpuszczanie na poziomie pikseli, gdzie poszczególne piksele przechodzą losowo między scenami |
cube | Obrót sześcianu 3D – sceny znajdują się na sąsiednich ścianach obracającego się sześcianu |
swirl | Zniekształcenie spiralne, które wkręca wychodzącą scenę w nadchodzącą scenę |
diagonal-wipe | Ukośne wymazywanie ostrej krawędzi poruszające się z jednego rogu do przeciwnego |
iris | Kołowa przesłona, która otwiera się lub zamyka jak przysłona aparatu |
crosszoom | Obie sceny powiększają się jednocześnie – wychodząca powiększa się, nadchodząca pomniejsza się |
Kinowe zanikanie z długim przenikaniem:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Przesunięcie z prawej (powszechne dla sekwencyjnej zawartości):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Obrót sześcianu 3D (dynamiczne, nowoczesne wrażenie):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Efekt usterki (energetyczny, technologiczny):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Warstwy Rendervid obsługują szereg efektów wizualnych poprzez filtry, tryby mieszania, cienie i przekształcenia.
Filtry są stosowane przez tablicę filters w dowolnej warstwie. Każdy filtr to obiekt z 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 }
]
}
| Filtr | Zakres Wartości | Opis |
|---|---|---|
blur | 0+ (piksele) | Rozmycie Gaussa – wyższe wartości dają więcej rozmycia |
brightness | 0+ (mnożnik) | 0 = czarny, 1 = normalny, 2 = podwójna jasność |
contrast | 0+ (mnożnik) | 0 = szary, 1 = normalny, 2 = podwójny kontrast |
grayscale | 0-1 | 0 = pełny kolor, 1 = całkowicie odbarwiony |
hue-rotate | 0-360 (stopnie) | Obraca kolory wokół koła kolorów |
invert | 0-1 | 0 = normalny, 1 = całkowicie odwrócone kolory |
saturate | 0+ (mnożnik) | 0 = odbarwiony, 1 = normalny, 2 = podwójna saturacja |
sepia | 0-1 | 0 = normalny, 1 = pełny odcień sepii |
Właściwość blendMode kontroluje, jak warstwa komponuje się z warstwami poniżej:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Obsługiwane tryby mieszania: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Warstwy tekstowe i kształtów obsługują efekty cieni poprzez właściwość style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtry, tryby mieszania, przezroczystość i cienie mogą być wszystkie połączone w pojedynczej warstwie dla wyrafinowanych zabiegów wizualnych:
{
"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 obsługuje zarówno czcionki Google Fonts (ponad 100 rodzin wbudowanych), jak i niestandardowe czcionki ładowane z zewnętrznych adresów URL.
Deklaruj czcionki Google w tablicy 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żdy obiekt czcionki wymaga:
| Pole | Typ | Opis |
|---|---|---|
family | string | Nazwa rodziny czcionki Google (wymagane dokładne dopasowanie) |
weights | array | Tablica grubości liczbowych do załadowania (100-900) |
Popularne grubości czcionek: 100 (Cienka), 200 (Bardzo Lekka), 300 (Lekka), 400 (Zwykła), 500 (Średnia), 600 (Półgruba), 700 (Pogrubiona), 800 (Bardzo Pogrubiona), 900 (Czarna).
Ładuj czcionki z zewnętrznych adresów URL za pomocą tablicy 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"
}
]
}
}
Obsługiwane formaty czcionek: WOFF2 (zalecane dla najmniejszego rozmiaru pliku), WOFF, TTF i OTF.
Odwołuj się do zadeklarowanych czcionek według nazwy rodziny w stylach warstw tekstowych:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid zawiera łańcuchy alternatywnych czcionek specyficzne dla platformy, aby zapewnić spójne renderowanie w różnych środowiskach. Jeśli określona czcionka jest niedostępna, renderer wraca do czcionek systemowych pasujących do tej samej klasyfikacji (szeryfowa, bezszeryfowa, monospace).
Rendervid obsługuje szeroki zakres formatów wyjściowych i kodeków zarówno do renderowania wideo, jak i obrazów.
| Format | Kodek | Rozszerzenie Pliku | Najlepsze Dla |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maksymalna zgodność – sieć, mobile, media społecznościowe |
| WebM | VP8 / VP9 | .webm | Osadzanie w sieci z mniejszymi rozmiarami plików |
| MOV | ProRes | .mov | Profesjonalne przepływy pracy edycyjne, bezstratna jakość |
| GIF | – | .gif | Krótkie animacje, udostępnianie społecznościowe, e-mail |
| MP4 | H.265 / HEVC | .mp4 | Nowsze urządzenia, 50% mniejsze pliki niż H.264 przy tej samej jakości |
| WebM | AV1 | .webm | Kodek nowej generacji, najlepsza wydajność kompresji |
| Format | Rozszerzenie Pliku | Najlepsze Dla |
|---|---|---|
| PNG | .png | Bezstratna jakość, obsługa przezroczystości |
| JPEG | .jpg | Fotografie, mniejsze rozmiary plików |
| WebP | .webp | Nowoczesna sieć, najlepsza równowaga jakości i rozmiaru |
| Preset | Opis |
|---|---|
draft | Szybkie renderowanie z obniżoną jakością – idealne do podglądu |
standard | Zrównoważona jakość i rozmiar pliku – dobre dla większości przypadków użycia |
high | Wyższy bitrate i jakość – dla ostatecznych produktów |
lossless | Maksymalna jakość bez artefaktów kompresji |
Rendervid obsługuje rozdzielczości od małych miniatur do 8K:
| Rozdzielczość | Wymiary | Powszechne Użycie |
|---|---|---|
| SD | 640 x 480 | Miniatury, podglądy |
| HD | 1280 x 720 | Wideo internetowe, e-mail |
| Full HD | 1920 x 1080 | YouTube, prezentacje |
| 2K | 2560 x 1440 | Wysokiej jakości wyświetlacze |
| 4K UHD | 3840 x 2160 | Profesjonalne, transmisja |
| 8K | 7680 x 4320 | Maksymalna rozdzielczość, zabezpieczenie na przyszłość |
Obsługiwane są częstotliwości klatek od 1 fps (pokazy slajdów) do 120 fps (zwolnione tempo, treści gamingowe). Popularne wybory to 24 fps (kinowe), 30 fps (sieć/społecznościowe) i 60 fps (płynny ruch).
Oto pełny szablon Rendervid, który demonstruje kluczowe funkcje systemu szablonów współpracujące ze sobą: dynamiczne wejścia, wiele scen z przejściami, warstwowe kompozycje, animacje z wygładzaniem, czcionki i efekty wizualne.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nazwa Produktu",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "Przyszłość jest tutaj."
},
{
"key": "heroImage",
"type": "url",
"label": "Obraz Główny",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Kolor Główny",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Wezwanie Do Działania",
"default": "Dowiedz Się Więcej"
}
],
"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": "Przedstawiamy",
"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"
}
]
}
]
}
]
}
}
Ten szablon tworzy 20-sekundowe wideo premiery produktu z trzema scenami: typograficzne intro z rozłożonymi animacjami tekstu, prezentacja produktu z unoszącym się obrazem i efektem maszyny do pisania oraz zamykająca scena wezwania do działania z pulsującym przyciskiem. Cały tekst, kolory i obrazy są sterowane przez zmienne szablonu, co czyni go w pełni wielokrotnego użytku.
Szablony Rendervid to pliki JSON, które definiują strukturę, zawartość, animacje i ustawienia wyjściowe wideo lub obrazu. Każdy szablon zawiera konfigurację wyjścia (wymiary, fps, czas trwania), definicje wejściowe dla zmiennych dynamicznych, kompozycję ze scenami i warstwami oraz opcjonalne konfiguracje czcionek i niestandardowych komponentów.
Zmienne szablonu używają składni {{nazwaZmiennej}}. Definiujesz wejścia w tablicy inputs szablonu z kluczem, typem (string, number, boolean, color, url, array), etykietą, opisem i wartością domyślną. W czasie renderowania zmienne te są zastępowane rzeczywistymi wartościami, co sprawia, że szablony są wielokrotnego użytku i dynamiczne.
Rendervid zawiera ponad 40 wbudowanych presetów animacji podzielonych na cztery kategorie: animacje wejścia (fadeIn, slideIn, scaleIn, bounceIn itp.), animacje wyjścia (fadeOut, slideOut, zoomOut itp.), animacje akcentujące (pulse, shake, bounce, swing, heartbeat itp.) oraz w pełni konfigurowalne animacje klatek kluczowych z ponad 30 funkcjami wygładzania.
Rendervid oferuje 17 typów przejść między scenami: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris i crosszoom. Każde przejście można skonfigurować za pomocą parametrów czasu trwania i kierunku.
Rendervid obsługuje wiele formatów wyjściowych, w tym MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF dla wideo oraz PNG, JPEG, WebP dla obrazów. Obsługiwane są również zaawansowane kodeki, takie jak H.265/HEVC i AV1. Rozdzielczość sięga do 8K (7680x4320) z częstotliwością klatek od 1 do 120 fps.
Tak, Rendervid obsługuje ponad 100 wbudowanych czcionek Google Fonts oraz ładowanie niestandardowych czcionek z adresów URL w formatach WOFF2, WOFF, TTF i OTF. Możesz określić grubości czcionek od 100 do 900 i skonfigurować alternatywy specyficzne dla platformy w celu zapewnienia zgodności między środowiskami.
Pomagamy firmom takim jak Twoja rozwijać inteligentne chatboty, serwery MCP, narzędzia AI lub inne rodzaje automatyzacji AI, aby zastąpić człowieka w powtarzalnych zadaniach w Twojej organizacji.
Poznaj wszystkie komponenty Rendervid: 8 wbudowanych typów warstw (tekst, obraz, wideo, kształt, dźwięk, grupa, lottie, niestandardowy), gotowe komponenty React...
Wdróż Rendervid wszędzie: renderowanie w przeglądarce do podglądów, Node.js do serwerowego przetwarzania wsadowego lub renderowanie w chmurze na AWS Lambda, Azu...
Dowiedz się, jak zintegrować Rendervid z agentami AI przy użyciu MCP (Model Context Protocol). Generuj wideo z promptów w języku naturalnym za pomocą Claude Cod...