Rendervid şablon sistemine kapsamlı rehber. JSON video şablonları oluşturmayı, {{variable}} sözdizimi ile dinamik değişkenler kullanmayı, 40+ animasyon ön ayarı, 17 sahne geçişi ve 30+ kolaylaştırma fonksiyonu yapılandırmayı öğrenin.
Rendervid, bildirimsel, JSON tabanlı bir şablon sistemi etrafında inşa edilmiş programatik bir video render motorudur. Bir zaman çizelgesinde videoyu manuel olarak düzenlemek yerine, videonuzun her yönünü – sahneler, katmanlar, animasyonlar, geçişler ve çıktı ayarları – tek bir JSON belgesinde tanımlarsınız. Bu yaklaşım, şablonları durumsuz, sürüm kontrolüne uygun ve makine tarafından oluşturulabilir hale getirerek yapay zeka destekli video üretimi, toplu render hattı ve tamamen otomatik içerik iş akışlarına kapı açar.
Bu rehber, Rendervid şablon sistemini baştan sona kapsar: kök seviye yapılandırma, çıktı ayarları, değişken ve giriş sistemi, sahneler ve kompozisyon, sekiz katman türünün tümü, 40+ animasyon ön ayarı, 30+ kolaylaştırma fonksiyonu, 17 sahne geçişi, görsel efektler, yazı tipi yapılandırması ve çıktı formatları.
Her Rendervid şablonu, iyi tanımlanmış bir kök seviye alan kümesine sahip bir JSON nesnesidir. İşte tam bir şablonun iskeleti:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Alan | Tür | Gerekli | Açıklama |
|---|---|---|---|
name | string | Evet | İnsan tarafından okunabilir şablon tanımlayıcısı |
output | object | Evet | Video veya görüntü çıktı yapılandırması (boyutlar, fps, süre, format) |
inputs | array | Hayır | Şablon değişkenleri için dinamik giriş tanımları |
composition | object | Evet | Tüm görsel içeriği tanımlayan scenes dizisini içerir |
fonts | object | Hayır | Google Fonts ve özel yazı tipi bildirimleri |
customComponents | object | Hayır | Kayıtlı özel katman bileşenleri |
defaults | object | Hayır | Geçersiz kılınmadığı sürece tüm katmanlara uygulanan varsayılan değerler |
name alanı organizasyonel amaçlar içindir – render’ı etkilemez. output ve composition alanları, her şablonun sahip olması gereken iki sütundur. Geri kalan her şey isteğe bağlıdır ancak güçlü yeteneklerin kilidini açar.
output nesnesi, son render edilen dosyayı kontrol eder: formatı, boyutları, kare hızı, süresi ve arka plan rengi.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Alan | Tür | Varsayılan | Açıklama |
|---|---|---|---|
type | string | "video" | Çıktı türü: "video" veya "image" |
width | number | 1920 | Piksel cinsinden genişlik (8K için 7680’e kadar) |
height | number | 1080 | Piksel cinsinden yükseklik (8K için 4320’ye kadar) |
fps | number | 30 | Saniyedeki kare sayısı (1-120) |
duration | number | – | Saniye cinsinden toplam süre |
backgroundColor | string | "#000000" | Hex, RGB veya adlandırılmış renk olarak arka plan rengi |
İşte popüler formatlar için çıktı yapılandırmaları:
1080p Full HD (YouTube, genel amaçlı):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 dikey):
{
"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 / Sosyal Paylaşım Görseli:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Görüntü çıktısı için, fps ve duration göz ardı edilir – render edici tek bir kare yakalar.
Giriş ve değişken sistemi, Rendervid şablonlarını yeniden kullanılabilir kılan şeydir. Metin, renkler veya URL’leri şablonunuza sabit kodlamak yerine, girişler tanımlar ve bunlara şablonun herhangi bir yerinde {{variableName}} sözdizimini kullanarak referans verirsiniz.
Girişler, üst seviye inputs dizisinde bildirilir. Her giriş nesnesi tek bir değişkeni tanımlar:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Başlık",
"description": "Giriş sahnesinde görüntülenen ana başlık metni",
"required": true,
"default": "Merhaba Dünya"
},
{
"key": "brandColor",
"type": "color",
"label": "Marka Rengi",
"description": "Arka planlar ve vurgular için kullanılan birincil marka rengi",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Alt Yazı Göster",
"description": "Alt yazı görünürlüğünü aç/kapat",
"required": false,
"default": true
}
]
}
| Alan | Tür | Gerekli | Açıklama |
|---|---|---|---|
key | string | Evet | {{key}} referanslarında kullanılan benzersiz tanımlayıcı |
type | string | Evet | Veri türü: string, number, boolean, color, url, array |
label | string | Hayır | UI render için insan tarafından okunabilir etiket |
description | string | Hayır | Bu girişin neyi kontrol ettiğinin açıklaması |
required | boolean | Hayır | Render zamanında girişin sağlanması gerekip gerekmediği |
default | any | Hayır | Giriş sağlanmazsa yedek değer |
string – Serbest biçimli metin. Başlıklar, açıklamalar, altyazılar veya herhangi bir metin içeriği için kullanın.number – Sayısal değerler. Süreler, boyutlar, konumlar, opaklık seviyeleri veya sayılar için kullanın.boolean – Doğru/yanlış anahtarları. Koşullu görünürlük, özellik bayrakları veya açma/kapama anahtarları için kullanın.color – Hex (#FF5733), RGB (rgb(255,87,51)) veya adlandırılmış formatta renk değerleri. Arka planlar, metin renkleri ve vurgular için kullanın.url – Geçerli URL dizeleri. Görüntü kaynakları, video kaynakları, bağlantılar ve yazı tipi URL’leri için kullanın.array – Değer listeleri. Görüntü galerileri, metin listeleri, slayt içeriği veya herhangi bir tekrarlanan veri için kullanın.Girişler tanımlandıktan sonra, şablonun herhangi bir yerinde çift süslü parantez kullanarak bunlara referans verin:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Değişkenler render zamanında çözülür. Rendervid API’sini veya CLI’sini çağırdığınızda, gerçek değerleri geçirirsiniz:
{
"title": "Yaz İndirimi 2026",
"brandColor": "#E63946",
"titleSize": 72
}
İşte birlikte çalışan birden fazla giriş türüne sahip tam bir şablon:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Ürün Adı",
"description": "Tanıtılan ürünün adı",
"required": true,
"default": "Ürün"
},
{
"key": "price",
"type": "number",
"label": "Fiyat",
"description": "Videoda görüntülenen ürün fiyatı",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Ürün Görsel URL",
"description": "Ürün görselinin URL'si",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Vurgu Rengi",
"description": "CTA düğmeleri ve vurgular için kullanılan renk",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "İndirim Rozeti Göster",
"description": "İndirim rozeti katmanının görüntülenip görüntülenmeyeceği",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Ürün Özellikleri",
"description": "Özellik madde işareti listesi",
"required": false,
"default": ["Özellik 1", "Özellik 2", "Özellik 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 }
}
]
}
]
}
}
Bu tek şablon, render zamanında giriş değerlerini değiştirerek binlerce benzersiz ürün videosu oluşturabilir – şablon değişikliğine gerek yoktur.
composition nesnesi, videonuzun içeriğinin bulunduğu yerdir. Bir scenes dizisi içerir ve her sahne, kendi süresi, katmanları ve geçişi olan videonun ayrı bir bölümünü temsil eder.
{
"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": [ ... ]
}
]
}
}
| Alan | Tür | Gerekli | Açıklama |
|---|---|---|---|
name | string | Hayır | Sahne için tanımlayıcı (okunabilirlik ve hata ayıklama için) |
duration | number | Evet | Saniye cinsinden sahne uzunluğu |
transition | object | Hayır | Önceki sahneden bu sahneye girerken geçiş efekti |
layers | array | Evet | Alttan üste render edilen sıralı katman nesneleri dizisi |
Sahneler sırayla oynatılır. Toplam video süresi, tüm sahne sürelerinin toplamıdır (herhangi bir geçiş örtüşmesi hariç). Bir sahne içindeki katmanlar dizi sırasına göre render edilir – ilk katman görsel yığının altında, son katman ise en üstte bulunur.
Geçiş belirtilmezse, sahne varsayılan olarak sert bir cut kullanır.
Rendervid sekiz farklı katman türünü destekler. Her katman türü belirli bir amaca hizmet eder ve paylaşılan temel yapılandırmanın üzerine kendi özellik kümesini kabul eder.
Türünden bağımsız olarak her katman, bu temel özellikleri destekler:
{
"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": ""
}
| Özellik | Tür | Varsayılan | Açıklama |
|---|---|---|---|
position | object | {x: 0, y: 0} | Piksel cinsinden X/Y koordinatları |
size | object | – | Piksel cinsinden genişlik ve yükseklik |
rotation | number | 0 | Derece cinsinden dönme açısı |
scale | object | {x: 1, y: 1} | X ve Y eksenleri için ölçek çarpanı |
anchor | object | {x: 0.5, y: 0.5} | Dönüşümler için bağlantı noktası (0-1 aralığı, 0.5 = merkez) |
opacity | number | 1 | Katman opaklığı (0 = şeffaf, 1 = opak) |
blendMode | string | "normal" | Birleştirme için CSS karışım modu |
from | number | 0 | Saniye cinsinden başlangıç zamanı (sahne başlangıcına göre) |
duration | number | -1 | Saniye cinsinden katman süresi (-1 = tam sahne süresi) |
filters | array | [] | Görsel filtre nesneleri dizisi |
style | object | {} | Ek CSS benzeri stil özellikleri |
className | string | "" | Özel stil için CSS sınıf adı |
text – Yazı tipi, boyut, renk, hizalama, satır yüksekliği, harf aralığı, metin gölgeleri ve daha fazlası üzerinde tam kontrol ile stilize metin render eder. Dinamik içerik için {{variable}} sözdizimini destekler.
image – URL’lerden veya yerel yollardan statik görüntüleri görüntüler. Kırpma, nesne uyum modları, kenarlık yarıçapı ve görüntü filtrelerini destekler.
video – Bir sahne içinde video klipleri gömer. Kırpma (başlangıç/bitiş), ses kontrolü, oynatma hızı, döngü ve sessize almayı destekler.
shape – Geometrik ilkelleri render eder: dikdörtgenler, daireler, elipsler, çizgiler ve çokgenler. Dolgu, kontur, kenarlık yarıçapı, degradeler ve gölgeleri destekler.
audio – Bir sahneye ses parçaları ekler. Ses, solma/açma, kırpma ve döngüyü destekler. Ses katmanlarının görsel temsili yoktur.
group – Alt katmanları tutan bir konteyner katmanı. Gruplar, birden fazla katmana aynı anda dönüşümler, animasyonlar ve efektler uygulamanıza olanak tanır.
lottie – Lottie/Bodymovin JSON animasyonlarını render eder. Oynatma hızı, döngü ve belirli kare aralıklarını oynatmak için segment kontrolünü destekler.
custom – customComponents alanında tanımlanan kayıtlı özel bileşenleri yükler. Yeniden kullanılabilir, parametreli katman şablonları için bunu kullanın.
Her katman türünün ayrıntılı yapılandırması için, tüm mevcut özellikler ve kod örnekleri dahil, Rendervid Bileşenleri Referansı bölümüne bakın.
Rendervid, dört kategoride düzenlenmiş 40’tan fazla yerleşik animasyon ön ayarı içerir: giriş, çıkış, vurgu ve anahtar kare. Animasyonlar herhangi bir katmana eklenir ve o katmanın nasıl göründüğünü, kaybolduğunu veya ömrü boyunca nasıl davrandığını kontrol eder.
{
"type": "text",
"text": "Animasyonlu Başlık",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Alan | Tür | Varsayılan | Açıklama |
|---|---|---|---|
type | string | – | Animasyon kategorisi: entrance, exit, emphasis, keyframe |
effect | string | – | Ön ayar adı (örn. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Kare cinsinden süre |
delay | number | 0 | Animasyon başlamadan önceki gecikme, kare cinsinden |
easing | string | "ease" | Kolaylaştırma fonksiyonu adı |
loop | number | 0 | Döngü sayısı (0 = döngü yok, -1 = sonsuz) |
alternate | boolean | false | Alternatif döngülerde yönü tersine çevir |
Giriş animasyonları, bir katmanın ekranda nasıl göründüğünü kontrol eder. Katmanın başlangıç zamanına ulaşıldığında bir kez çalışırlar.
| Ön Ayar | Açıklama |
|---|---|
fadeIn | 0’dan 1’e basit opaklık solması |
fadeInUp | Yukarı kayarken solarak girer |
fadeInDown | Aşağı kayarken solarak girer |
fadeInLeft | Soldan kayarken solarak girer |
fadeInRight | Sağdan kayarken solarak girer |
slideInUp | Çerçevenin altından içeri kayar |
slideInDown | Çerçevenin üstünden içeri kayar |
slideInLeft | Sol kenardan içeri kayar |
slideInRight | Sağ kenardan içeri kayar |
scaleIn | 0’dan tam boyuta ölçeklenir |
zoomIn | Hafif aşma ile daha küçük bir ölçekten yakınlaşır |
rotateIn | Bir ofset açısından konuma döner |
bounceIn | Elastik aşma ile konuma sıçrar |
flipInX | X ekseninde 3D çevirme (yatay çevirme) |
flipInY | Y ekseninde 3D çevirme (dikey çevirme) |
typewriter | Karakterler birer birer görünür (metin katmanları) |
revealLeft | Soldan kayan maske açılımı |
revealRight | Sağdan kayan maske açılımı |
revealUp | Yukarı kayan maske açılımı |
revealDown | Aşağı kayan maske açılımı |
Çıkış animasyonları, bir katmanın nasıl kaybolduğunu kontrol eder. Katmanın süresinin sonunda çalışırlar.
| Ön Ayar | Açıklama |
|---|---|
fadeOut | 1’den 0’a basit opaklık solması |
slideOutUp | Çerçevenin üstünden kayarak çıkar |
slideOutDown | Çerçevenin altından kayarak çıkar |
scaleOut | Tam boyuttan 0’a küçülür |
zoomOut | Daha küçük bir ölçeğe uzaklaşır ve solar |
rotateOut | Bir ofset açısına konumdan döner |
bounceOut | Kaybolmadan önce elastik aşma ile dışarı sıçrar |
flipOutX | X ekseninde 3D çevirme ile çıkar |
flipOutY | Y ekseninde 3D çevirme ile çıkar |
Vurgu animasyonları, görünür kalırken bir katmana dikkat çeker. Döngü ile iyi çalışırlar.
| Ön Ayar | Açıklama |
|---|---|
pulse | Ritmik ölçek nabzı (büyür ve küçülür) |
shake | Hızlı yatay sarsıntı |
bounce | Dikey zıplama hareketi |
swing | Sarkaç benzeri salınım dönüşü |
wobble | Dönme ve ötelemeyi birleştiren eksen dışı sallanma |
flash | Hızlı opaklık yanıp sönmeleri |
rubberBand | Elastik germe ve geri çekilme efekti |
heartbeat | Çift nabız kalp atışı ritmi |
float | Yumuşak yukarı-aşağı yüzme hareketi |
spin | Sürekli 360 derece dönüş |
Tam yaratıcı kontrol için, anahtar kare animasyonları özel kare-kare özellik değişiklikleri tanımlamanıza izin verir:
{
"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"
}
Anahtar kare animasyonları herhangi bir sayısal özelliği canlandırabilir: opacity, x, y, rotation, scaleX, scaleY ve daha fazlası. Her anahtar kare bir kare numarası ve o karedeki özellik değerlerini belirtir. Render edici, belirtilen kolaylaştırma fonksiyonunu kullanarak anahtar kareler arasında enterpolasyon yapar.
Tek bir katman birden fazla animasyona sahip olabilir. Örneğin, bir giriş animasyonu ardından bir vurgu döngüsü, ardından bir çıkış animasyonu:
{
"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"
}
]
}
Kolaylaştırma fonksiyonları, bir animasyon sırasında değişim oranını kontrol eder, hareketin doğrusal, yumuşak, zıplayan veya elastik hissedilip hissedilmediğini belirler. Rendervid 30’dan fazla yerleşik kolaylaştırma fonksiyonu içerir.
| Fonksiyon | Açıklama |
|---|---|
linear | Baştan sona sabit hız, ivme yok |
ease | Yumuşak ivme ve yavaşlama ile varsayılan CSS benzeri kolaylaştırma |
easeIn | Yavaş başlar, sona doğru hızlanır |
easeOut | Hızlı başlar, sona doğru yavaşlar |
easeInOut | İlk yarıda hızlanır, ikinci yarıda yavaşlar |
| Fonksiyon | Açıklama |
|---|---|
easeInQuad | Kuadratik ivme (t^2) |
easeOutQuad | Kuadratik yavaşlama |
easeInOutQuad | Kuadratik ivme sonra yavaşlama |
| Fonksiyon | Açıklama |
|---|---|
easeInCubic | Kübik ivme (t^3) – kuadratikten daha belirgin |
easeOutCubic | Kübik yavaşlama – yumuşak ve doğal hissettiren duruş |
easeInOutCubic | Kübik kolaylaştırma girişi ve çıkışı – en yaygın kullanılan kolaylaştırma |
| Fonksiyon | Açıklama |
|---|---|
easeInQuart | Kuartik ivme (t^4) |
easeOutQuart | Kuartik yavaşlama |
easeInOutQuart | Kuartik kolaylaştırma girişi ve çıkışı |
| Fonksiyon | Açıklama |
|---|---|
easeInQuint | Kuintik ivme (t^5) – çok keskin başlangıç |
easeOutQuint | Kuintik yavaşlama – çok keskin duruş |
easeInOutQuint | Kuintik kolaylaştırma girişi ve çıkışı |
| Fonksiyon | Açıklama |
|---|---|
easeInSine | Sinüs tabanlı ivme – en yumuşak kolaylaştırma eğrisi |
easeOutSine | Sinüs tabanlı yavaşlama |
easeInOutSine | Sinüs tabanlı kolaylaştırma girişi ve çıkışı |
| Fonksiyon | Açıklama |
|---|---|
easeInExpo | Üstel ivme – neredeyse düz sonra keskin |
easeOutExpo | Üstel yavaşlama – keskin sonra neredeyse düz |
easeInOutExpo | Üstel kolaylaştırma girişi ve çıkışı |
| Fonksiyon | Açıklama |
|---|---|
easeInCirc | Dairesel ivme eğrisi |
easeOutCirc | Dairesel yavaşlama eğrisi |
easeInOutCirc | Dairesel kolaylaştırma girişi ve çıkışı |
| Fonksiyon | Açıklama |
|---|---|
easeInBack | İleri hızlanmadan önce hafifçe geri çeker (beklenti) |
easeOutBack | Hedefi aşar sonra geri yerleşir (aşma) |
easeInOutBack | Girişte beklenti, çıkışta aşma |
| Fonksiyon | Açıklama |
|---|---|
easeInElastic | İvmede elastik sallanma – yay benzeri sarma |
easeOutElastic | Yavaşlamada elastik sallanma – yay benzeri çekilme |
easeInOutElastic | Her iki uçta elastik |
| Fonksiyon | Açıklama |
|---|---|
easeInBounce | Girişte zıplama efekti – ters düşürülmüş bir top gibi |
easeOutBounce | Çıkışta zıplama efekti – yere çarpan bir top gibi |
easeInOutBounce | Her iki uçta zıplama |
easeOutCubic veya easeOutQuarteaseOutElastic veya easeOutBackeaseInOutSineeaseInExpo, hızlı duruşlar için easeOutExpoeaseOutBounceGeçişler, bir sahnenin bir sonrakine nasıl aktığını kontrol eder. Rendervid, basit kesimlerden sinematik 3D efektlere kadar 17 geçiş türü sağlar.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
transition nesnesi gelen sahneye (geçiş yapılan sahne) yerleştirilir. direction özelliği yalnızca slide, wipe ve push gibi yönlü geçişlere uygulanır.
| Geçiş | Açıklama |
|---|---|
cut | Görsel efekt olmadan anında geçiş (varsayılan) |
fade | Sahneler arası çapraz solma – giden sahne solarken gelen sahne belirir |
zoom | Gelen sahne görünürken giden sahneye yakınlaşır |
slide | Gelen sahne, yapılandırılabilir bir yönden (sol, sağ, yukarı, aşağı) giden sahnenin üzerine kayar |
wipe | Sert kenarlı bir silme, verilen yönde çerçeve boyunca hareket ederek gelen sahneyi ortaya çıkarır |
push | Gelen sahne, giden sahneyi belirtilen yönde ekran dışına iter |
rotate | Giden sahne dönerek uzaklaşırken gelen sahne dönerek girer |
flip | 3D çevirme geçişi – çerçeve bir kart gibi çevrilerek sonraki sahneyi gösterir |
blur | Giden sahne bulanıklaşırken gelen sahne netleşerek odaklanır |
circle | Dairesel bir maske merkezden (veya belirtilen bir noktadan) genişleyerek sonraki sahneyi ortaya çıkarır |
glitch | Kromatik sapma ve yer değiştirme ile dijital arıza bozulma efekti |
dissolve | Bireysel piksellerin sahneler arasında rastgele geçiş yaptığı piksel seviyesinde çözülme |
cube | 3D küp dönüşü – sahneler dönen bir küpün bitişik yüzlerindedir |
swirl | Giden sahneyi gelen sahneye döndüren spiral bozulma |
diagonal-wipe | Bir köşeden karşı köşeye hareket eden çapraz sert kenarlı silme |
iris | Kamera diyaframı gibi açılan veya kapanan dairesel iris |
crosszoom | Her iki sahne de aynı anda yakınlaşır – giden yakınlaşır, gelen uzaklaşır |
Uzun çapraz solma ile sinematik solma:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Sağdan kaydırma (sıralı içerik için yaygın):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D küp dönüşü (dinamik, modern his):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Arıza efekti (enerjik, teknoloji odaklı):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid katmanları, filtreler, karışım modları, gölgeler ve dönüşümler aracılığıyla bir dizi görsel efekti destekler.
Filtreler, herhangi bir katmandaki filters dizisi aracılığıyla uygulanır. Her filtre, bir type ve value içeren bir nesnedir:
{
"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 }
]
}
| Filtre | Değer Aralığı | Açıklama |
|---|---|---|
blur | 0+ (piksel) | Gauss bulanıklığı – daha yüksek değerler daha fazla bulanıklık üretir |
brightness | 0+ (çarpan) | 0 = siyah, 1 = normal, 2 = çift parlaklık |
contrast | 0+ (çarpan) | 0 = gri, 1 = normal, 2 = çift kontrast |
grayscale | 0-1 | 0 = tam renk, 1 = tamamen doygunluktan arındırılmış |
hue-rotate | 0-360 (derece) | Renkleri renk çemberi etrafında döndürür |
invert | 0-1 | 0 = normal, 1 = tamamen ters renklere çevrilmiş |
saturate | 0+ (çarpan) | 0 = doygunluktan arındırılmış, 1 = normal, 2 = çift doygunluk |
sepia | 0-1 | 0 = normal, 1 = tam sepya tonu |
blendMode özelliği, bir katmanın altındaki katmanlarla nasıl birleştiğini kontrol eder:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Desteklenen karışım modları: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Metin ve şekil katmanları, style özelliği aracılığıyla gölge efektlerini destekler:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtreler, karışım modları, opaklık ve gölgeler, sofistike görsel işlemler için tek bir katmanda birleştirilebilir:
{
"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, hem Google Fonts’u (100+ aile yerleşik) hem de harici URL’lerden yüklenen özel yazı tiplerini destekler.
Google Fonts’u fonts.google dizisinde bildirin:
{
"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] }
]
}
}
Her yazı tipi nesnesi şunları gerektirir:
| Alan | Tür | Açıklama |
|---|---|---|
family | string | Google Font aile adı (tam eşleşme gerekli) |
weights | array | Yüklenecek sayısal ağırlıklar dizisi (100-900) |
Yaygın yazı tipi ağırlıkları: 100 (İnce), 200 (Ekstra Hafif), 300 (Hafif), 400 (Normal), 500 (Orta), 600 (Yarı Kalın), 700 (Kalın), 800 (Ekstra Kalın), 900 (Siyah).
fonts.custom dizisini kullanarak harici URL’lerden yazı tipleri yükleyin:
{
"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"
}
]
}
}
Desteklenen yazı tipi formatları: WOFF2 (en küçük dosya boyutu için önerilir), WOFF, TTF ve OTF.
Metin katmanı stillerinde aile adına göre bildirilen yazı tiplerine referans verin:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid, farklı ortamlarda tutarlı render sağlamak için platforma özel yazı tipi yedek zincirleri içerir. Belirtilen bir yazı tipi kullanılamıyorsa, render edici aynı sınıflandırmaya uyan sistem yazı tiplerine (serif, sans-serif, monospace) geri döner.
Rendervid, hem video hem de görüntü render için geniş bir çıktı formatı ve codec yelpazesini destekler.
| Format | Codec | Dosya Uzantısı | En İyi Kullanım |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maksimum uyumluluk – web, mobil, sosyal medya |
| WebM | VP8 / VP9 | .webm | Daha küçük dosya boyutlarıyla web yerleştirme |
| MOV | ProRes | .mov | Profesyonel düzenleme iş akışları, kayıpsız kalite |
| GIF | – | .gif | Kısa animasyonlar, sosyal paylaşım, e-posta |
| MP4 | H.265 / HEVC | .mp4 | Daha yeni cihazlar, aynı kalitede H.264’ten %50 daha küçük dosyalar |
| WebM | AV1 | .webm | Yeni nesil codec, en iyi sıkıştırma verimliliği |
| Format | Dosya Uzantısı | En İyi Kullanım |
|---|---|---|
| PNG | .png | Kayıpsız kalite, şeffaflık desteği |
| JPEG | .jpg | Fotoğraflar, daha küçük dosya boyutları |
| WebP | .webp | Modern web, kalite ve boyut arasında en iyi denge |
| Ön Ayar | Açıklama |
|---|---|
draft | Azaltılmış kalite ile hızlı render – önizleme için ideal |
standard | Dengeli kalite ve dosya boyutu – çoğu kullanım durumu için iyi |
high | Daha yüksek bit hızı ve kalite – nihai teslimatlar için |
lossless | Sıkıştırma yapay nesneleri olmadan maksimum kalite |
Rendervid, küçük küçük resimlerden 8K’ya kadar çözünürlükleri destekler:
| Çözünürlük | Boyutlar | Yaygın Kullanım |
|---|---|---|
| SD | 640 x 480 | Küçük resimler, önizlemeler |
| HD | 1280 x 720 | Web videosu, e-posta |
| Full HD | 1920 x 1080 | YouTube, sunumlar |
| 2K | 2560 x 1440 | Yüksek kaliteli ekranlar |
| 4K UHD | 3840 x 2160 | Profesyonel, yayın |
| 8K | 7680 x 4320 | Maksimum çözünürlük, geleceğe hazır |
1 fps (slayt gösterileri) ile 120 fps (ağır çekim, oyun içeriği) arasındaki kare hızları desteklenir. Yaygın seçimler 24 fps (sinematik), 30 fps (web/sosyal) ve 60 fps’dir (yumuşak hareket).
İşte şablon sisteminin temel özelliklerini birlikte gösteren tam bir Rendervid şablonu: dinamik girişler, geçişli birden fazla sahne, katmanlı kompozisyonlar, kolaylaştırmalı animasyonlar, yazı tipleri ve görsel efektler.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Ürün Adı",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "Gelecek burada."
},
{
"key": "heroImage",
"type": "url",
"label": "Ana Görsel",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Birincil Renk",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Harekete Geçirici Mesaj",
"default": "Daha Fazla Bilgi"
}
],
"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": "Tanıtıyoruz",
"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"
}
]
}
]
}
]
}
}
Bu şablon, üç sahneli 20 saniyelik bir ürün lansmanı videosu oluşturur: kademeli metin animasyonları ile tipografik bir giriş, yüzen bir görüntü ve daktilo efekti ile bir ürün vitrini ve titreşen bir düğme ile kapanış harekete geçirici mesaj sahnesi. Tüm metinler, renkler ve görseller şablon değişkenleri tarafından yönlendirilir, bu da tamamen yeniden kullanılabilir hale getirir.
Rendervid şablonları, bir videonun veya görüntünün yapısını, içeriğini, animasyonlarını ve çıktı ayarlarını tanımlayan JSON dosyalarıdır. Her şablon, bir çıktı yapılandırması (boyutlar, fps, süre), dinamik değişkenler için giriş tanımları, sahneler ve katmanlarla bir kompozisyon ve isteğe bağlı yazı tipi ve özel bileşen yapılandırmalarını içerir.
Şablon değişkenleri {{variableName}} sözdizimini kullanır. Şablonun inputs dizisinde bir anahtar, tür (string, number, boolean, color, url, array), etiket, açıklama ve varsayılan değer ile girişler tanımlarsınız. Render zamanında, bu değişkenler gerçek değerlerle değiştirilir, bu da şablonları yeniden kullanılabilir ve dinamik yapar.
Rendervid, dört kategoride düzenlenmiş 40+ yerleşik animasyon ön ayarı içerir: giriş animasyonları (fadeIn, slideIn, scaleIn, bounceIn, vb.), çıkış animasyonları (fadeOut, slideOut, zoomOut, vb.), vurgu animasyonları (pulse, shake, bounce, swing, heartbeat, vb.) ve 30+ kolaylaştırma fonksiyonu ile tamamen özelleştirilebilir anahtar kare animasyonları.
Rendervid 17 sahne geçiş türü sunar: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris ve crosszoom. Her geçiş, süre ve yön parametreleri ile yapılandırılabilir.
Rendervid, video için MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF ve görüntüler için PNG, JPEG, WebP dahil olmak üzere birden fazla çıktı formatını destekler. H.265/HEVC ve AV1 gibi gelişmiş codec'ler de desteklenir. Çözünürlük, 1 ila 120 fps arasındaki kare hızlarıyla 8K'ya (7680x4320) kadar çıkar.
Evet, Rendervid 100+ yerleşik Google Font ve WOFF2, WOFF, TTF ve OTF formatlarında URL'lerden özel yazı tipi yüklemeyi destekler. 100-900 arasında yazı tipi ağırlıkları belirtebilir ve platformlar arası uyumluluk için platforma özel yedekleri yapılandırabilirsiniz.
Sizinki gibi şirketlere akıllı chatbotlar, MCP Sunucuları, AI araçları veya organizasyonunuzdaki tekrarlanan görevlerde insanları değiştirmek için diğer AI otomasyon türlerini geliştirmede yardım ediyoruz.
Tüm Rendervid bileşenlerini keşfedin: 8 yerleşik katman tipi (metin, resim, video, şekil, ses, grup, lottie, özel), önceden hazırlanmış React bileşenleri, görse...
Programatik video üretimi için Remotion'a ücretsiz açık kaynak alternatif Rendervid'i keşfedin. MCP entegrasyonu, JSON şablonları, bulut rendering ve lisans ücr...
FlowHunt'i json2video-mcp sunucusuyla entegre ederek programatik video üretimini otomatikleştirin, özel şablonları yönetin ve video iş akışlarını güvenli ve esn...