Volledige gids voor het Rendervid sjabloonsysteem. Leer hoe je JSON video sjablonen maakt, dynamische variabelen gebruikt met {{variable}} syntax, 40+ animatie presets configureert, 17 scène overgangen, en 30+ easing functies.
Rendervid is een programmatische video rendering engine gebouwd rond een declaratief, JSON-gebaseerd sjabloonsysteem. In plaats van handmatig video te bewerken in een tijdlijn, definieer je elk aspect van je video – scènes, lagen, animaties, overgangen en uitvoerinstellingen – in één enkel JSON-document. Deze benadering maakt sjablonen staatloos, versiecontroleerbaar en machinegenereerbaar, wat de deur opent naar AI-gestuurde videoproductie, batch rendering pipelines en volledig geautomatiseerde contentworkflows.
Deze gids behandelt het complete Rendervid sjabloonsysteem van boven naar beneden: root-level configuratie, uitvoerinstellingen, het variabelen- en invoersysteem, scènes en compositie, alle acht laagtypen, 40+ animatie presets, 30+ easing functies, 17 scène overgangen, visuele effecten, lettertypeconfiguratie en uitvoerformaten.
Elk Rendervid sjabloon is een JSON-object met een goed gedefinieerde set root-level velden. Hier is het skelet van een compleet sjabloon:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Veld | Type | Verplicht | Beschrijving |
|---|---|---|---|
name | string | Ja | Menselijk leesbare sjabloon identifier |
output | object | Ja | Video of afbeelding uitvoerconfiguratie (afmetingen, fps, duur, formaat) |
inputs | array | Nee | Dynamische invoerdefinities voor sjabloonvariabelen |
composition | object | Ja | Bevat de scenes array die alle visuele inhoud definieert |
fonts | object | Nee | Google Fonts en aangepaste lettertype declaraties |
customComponents | object | Nee | Geregistreerde aangepaste laagcomponenten |
defaults | object | Nee | Standaardwaarden toegepast op alle lagen tenzij overschreven |
Het name veld is voor organisatorische doeleinden – het heeft geen invloed op rendering. De output en composition velden zijn de twee pijlers die elk sjabloon moet hebben. Alles anders is optioneel maar ontgrendelt krachtige mogelijkheden.
Het output object regelt het uiteindelijk gerenderde bestand: het formaat, afmetingen, framerate, duur en achtergrondkleur.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Veld | Type | Standaard | Beschrijving |
|---|---|---|---|
type | string | "video" | Uitvoertype: "video" of "image" |
width | number | 1920 | Breedte in pixels (tot 7680 voor 8K) |
height | number | 1080 | Hoogte in pixels (tot 4320 voor 8K) |
fps | number | 30 | Frames per seconde (1-120) |
duration | number | – | Totale duur in seconden |
backgroundColor | string | "#000000" | Achtergrondkleur als hex, RGB of benoemde kleur |
Hier zijn uitvoerconfiguraties voor populaire formaten:
1080p Full HD (YouTube, algemeen gebruik):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 verticaal):
{
"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 / Social Share Afbeelding:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Voor afbeeldinguitvoer worden fps en duration genegeerd – de renderer legt een enkel frame vast.
Het invoer- en variabelensysteem is wat Rendervid sjablonen herbruikbaar maakt. In plaats van tekst, kleuren of URL’s hardcoded in je sjabloon te zetten, definieer je inputs en verwijs je ernaar met de {{variableName}} syntax overal in het sjabloon.
Invoer wordt gedeclareerd in de top-level inputs array. Elk invoer object beschrijft een enkele variabele:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titel",
"description": "Hoofdtiteltekst weergegeven in de intro scène",
"required": true,
"default": "Hallo Wereld"
},
{
"key": "brandColor",
"type": "color",
"label": "Merkkleur",
"description": "Primaire merkkleur gebruikt voor achtergronden en accenten",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Toon Ondertitel",
"description": "Schakel ondertitel zichtbaarheid",
"required": false,
"default": true
}
]
}
| Veld | Type | Verplicht | Beschrijving |
|---|---|---|---|
key | string | Ja | Unieke identifier gebruikt in {{key}} referenties |
type | string | Ja | Datatype: string, number, boolean, color, url, array |
label | string | Nee | Menselijk leesbaar label voor UI rendering |
description | string | Nee | Uitleg van wat deze invoer regelt |
required | boolean | Nee | Of de invoer moet worden verstrekt bij render tijd |
default | any | Nee | Fallback waarde als geen invoer wordt verstrekt |
string – Vrije tekst. Gebruik voor titels, beschrijvingen, bijschriften of elke tekstinhoud.number – Numerieke waarden. Gebruik voor duur, groottes, posities, opacity niveaus of tellingen.boolean – Waar/onwaar schakelaars. Gebruik voor voorwaardelijke zichtbaarheid, feature flags of aan/uit schakelaars.color – Kleurwaarden in hex (#FF5733), RGB (rgb(255,87,51)), of benoemd formaat. Gebruik voor achtergronden, tekstkleuren en accenten.url – Geldige URL strings. Gebruik voor afbeeldingsbronnen, videobronnen, links en lettertype URL’s.array – Lijsten van waarden. Gebruik voor afbeeldingsgalerijen, tekstlijsten, dia-inhoud of elke herhaalde data.Zodra invoer is gedefinieerd, verwijs je ernaar overal in het sjabloon met dubbele accolades:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variabelen worden opgelost bij render tijd. Wanneer je de Rendervid API of CLI aanroept, geef je de werkelijke waarden door:
{
"title": "Zomeruitverkoop 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Hier is een compleet sjabloon met meerdere invoertypen die samenwerken:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Productnaam",
"description": "Naam van het product dat wordt gepromoot",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "Prijs",
"description": "Productprijs weergegeven in de video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Productafbeelding URL",
"description": "URL naar de productafbeelding",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accentkleur",
"description": "Kleur gebruikt voor CTA knoppen en highlights",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Toon Uitverkoop Badge",
"description": "Of de uitverkoop badge overlay moet worden weergegeven",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Productkenmerken",
"description": "Lijst van kenmerk opsommingspunten",
"required": false,
"default": ["Kenmerk 1", "Kenmerk 2", "Kenmerk 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 }
}
]
}
]
}
}
Dit enkele sjabloon kan duizenden unieke productvideo’s genereren door simpelweg de invoerwaarden te veranderen bij render tijd – geen sjabloonwijzigingen nodig.
Het composition object is waar de inhoud van je video leeft. Het bevat een scenes array, en elke scène vertegenwoordigt een apart segment van de video met zijn eigen duur, lagen en overgang.
{
"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": [ ... ]
}
]
}
}
| Veld | Type | Verplicht | Beschrijving |
|---|---|---|---|
name | string | Nee | Identifier voor de scène (voor leesbaarheid en debugging) |
duration | number | Ja | Scènelengte in seconden |
transition | object | Nee | Overgangseffect bij het betreden van deze scène vanuit de vorige |
layers | array | Ja | Geordende array van laagobjecten gerenderd van onder naar boven |
Scènes spelen in volgorde. De totale videoduur is de som van alle scèneduren (minus eventuele overgangsoverlap). Lagen binnen een scène worden gerenderd in array volgorde – de eerste laag zit onderaan de visuele stack, en de laatste laag zit bovenop.
Als geen overgang is gespecificeerd, gebruikt de scène standaard een harde cut.
Rendervid ondersteunt acht verschillende laagtypen. Elk laagtype heeft een specifiek doel en accepteert zijn eigen set eigenschappen bovenop de gedeelde basisconfiguratie.
Elke laag, ongeacht type, ondersteunt deze basiseigenschappen:
{
"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": ""
}
| Eigenschap | Type | Standaard | Beschrijving |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y coördinaten in pixels |
size | object | – | Breedte en hoogte in pixels |
rotation | number | 0 | Rotatiehoek in graden |
scale | object | {x: 1, y: 1} | Schaalmultiplier voor X en Y assen |
anchor | object | {x: 0.5, y: 0.5} | Ankerpunt voor transformaties (0-1 bereik, 0.5 = centrum) |
opacity | number | 1 | Laag opacity (0 = transparant, 1 = ondoorzichtig) |
blendMode | string | "normal" | CSS blend mode voor compositing |
from | number | 0 | Starttijd in seconden (relatief aan scène start) |
duration | number | -1 | Laagduur in seconden (-1 = volledige scèneduur) |
filters | array | [] | Array van visuele filterobjecten |
style | object | {} | Aanvullende CSS-achtige stijleigenschappen |
className | string | "" | CSS klassenaam voor aangepaste styling |
text – Rendert gestileerde tekst met volledige controle over lettertype, grootte, kleur, uitlijning, regelhoogte, letterafstand, tekstschaduwen en meer. Ondersteunt de {{variable}} syntax voor dynamische inhoud.
image – Toont statische afbeeldingen van URL’s of lokale paden. Ondersteunt bijsnijden, object-fit modes, border radius en afbeeldingsfilters.
video – Voegt videoclips in binnen een scène. Ondersteunt trimmen (start/einde), volumecontrole, afspeelsnelheid, looping en dempen.
shape – Rendert geometrische primitieven: rechthoeken, cirkels, ellipsen, lijnen en polygonen. Ondersteunt vulling, lijn, border radius, gradiënten en schaduwen.
audio – Voegt audiotracks toe aan een scène. Ondersteunt volume, fade in/out, trimmen en looping. Audiolagen hebben geen visuele representatie.
group – Een containerlaag die onderliggende lagen bevat. Groepen stellen je in staat transformaties, animaties en effecten toe te passen op meerdere lagen tegelijk.
lottie – Rendert Lottie/Bodymovin JSON animaties. Ondersteunt afspeelsnelheid, looping en segmentcontrole voor het afspelen van specifieke framebereiken.
custom – Laadt geregistreerde aangepaste componenten gedefinieerd in het customComponents veld. Gebruik dit voor herbruikbare, geparameteriseerde laagsjablonen.
Voor gedetailleerde configuratie van elk laagtype, inclusief alle beschikbare eigenschappen en codevoorbeelden, zie de Rendervid Componenten Referentie .
Rendervid bevat meer dan 40 ingebouwde animatie presets georganiseerd in vier categorieën: entrance, exit, emphasis en keyframe. Animaties worden gekoppeld aan elke laag en bepalen hoe die laag verschijnt, verdwijnt of zich gedraagt tijdens zijn levensduur.
{
"type": "text",
"text": "Geanimeerde Titel",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Veld | Type | Standaard | Beschrijving |
|---|---|---|---|
type | string | – | Animatiecategorie: entrance, exit, emphasis, keyframe |
effect | string | – | Preset naam (bijv. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Duur in frames |
delay | number | 0 | Vertraging voordat animatie start, in frames |
easing | string | "ease" | Easing functienaam |
loop | number | 0 | Aantal loops (0 = geen loop, -1 = oneindig) |
alternate | boolean | false | Keer richting om bij alternatieve loops |
Entrance animaties bepalen hoe een laag op het scherm verschijnt. Ze worden eenmalig uitgevoerd wanneer de starttijd van de laag wordt bereikt.
| Preset | Beschrijving |
|---|---|
fadeIn | Eenvoudige opacity fade van 0 naar 1 |
fadeInUp | Fadet in terwijl het omhoog schuift |
fadeInDown | Fadet in terwijl het naar beneden schuift |
fadeInLeft | Fadet in terwijl het van links schuift |
fadeInRight | Fadet in terwijl het van rechts schuift |
slideInUp | Schuift in van onder het frame |
slideInDown | Schuift in van boven het frame |
slideInLeft | Schuift in van de linkerrand |
slideInRight | Schuift in van de rechterrand |
scaleIn | Schaalt op van 0 naar volledige grootte |
zoomIn | Zoomt in van een kleinere schaal met lichte overshoot |
rotateIn | Roteert naar positie vanuit een offset hoek |
bounceIn | Stuitert naar positie met elastische overshoot |
flipInX | 3D flip op de X-as (horizontale flip) |
flipInY | 3D flip op de Y-as (verticale flip) |
typewriter | Karakters verschijnen één voor één (tekstlagen) |
revealLeft | Masker onthulling schuivend van links |
revealRight | Masker onthulling schuivend van rechts |
revealUp | Masker onthulling schuivend omhoog |
revealDown | Masker onthulling schuivend naar beneden |
Exit animaties bepalen hoe een laag verdwijnt. Ze worden uitgevoerd aan het einde van de duur van de laag.
| Preset | Beschrijving |
|---|---|
fadeOut | Eenvoudige opacity fade van 1 naar 0 |
slideOutUp | Schuift uit door de bovenkant van het frame |
slideOutDown | Schuift uit door de onderkant van het frame |
scaleOut | Schaalt naar beneden van volledige grootte naar 0 |
zoomOut | Zoomt uit naar een kleinere schaal en fadet |
rotateOut | Roteert uit positie naar een offset hoek |
bounceOut | Stuitert naar buiten met elastische overshoot voordat het verdwijnt |
flipOutX | 3D flip uit op de X-as |
flipOutY | 3D flip uit op de Y-as |
Emphasis animaties trekken aandacht naar een laag terwijl deze zichtbaar blijft. Ze werken goed met looping.
| Preset | Beschrijving |
|---|---|
pulse | Ritmische schaalpuls (groeit en krimpt) |
shake | Snelle horizontale schudding |
bounce | Verticale stuiterbeweging |
swing | Slinger-achtige zwaairotatie |
wobble | Off-axis wiebeling combinerend rotatie en translatie |
flash | Snelle opacity flitsen |
rubberBand | Elastische rek en klik effect |
heartbeat | Dubbele-puls hartslagritme |
float | Zachte drijvende op-en-neer beweging |
spin | Continue 360-graden rotatie |
Voor volledige creatieve controle laten keyframe animaties je aangepaste frame-voor-frame eigenschapswijzigingen definiëren:
{
"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"
}
Keyframe animaties kunnen elke numerieke eigenschap animeren: opacity, x, y, rotation, scaleX, scaleY, en meer. Elk keyframe specificeert een framenummer en de eigenschapswaarden op dat frame. De renderer interpoleert tussen keyframes met behulp van de gespecificeerde easing functie.
Een enkele laag kan meerdere animaties hebben. Bijvoorbeeld een entrance animatie gevolgd door een emphasis loop, dan een exit animatie:
{
"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"
}
]
}
Easing functies bepalen de veranderingssnelheid tijdens een animatie, wat bepaalt of beweging lineair, soepel, stuiterend of elastisch aanvoelt. Rendervid bevat meer dan 30 ingebouwde easing functies.
| Functie | Beschrijving |
|---|---|
linear | Constante snelheid van start tot einde, geen versnelling |
ease | Standaard CSS-achtige easing met zachte versnelling en vertraging |
easeIn | Begint langzaam, versnelt naar het einde |
easeOut | Begint snel, vertraagt naar het einde |
easeInOut | Versnelt in de eerste helft, vertraagt in de tweede |
| Functie | Beschrijving |
|---|---|
easeInQuad | Quadratische versnelling (t^2) |
easeOutQuad | Quadratische vertraging |
easeInOutQuad | Quadratische versnelling dan vertraging |
| Functie | Beschrijving |
|---|---|
easeInCubic | Kubische versnelling (t^3) – meer uitgesproken dan quadratisch |
easeOutCubic | Kubische vertraging – soepele en natuurlijk aanvoelende stop |
easeInOutCubic | Kubische ease in en out – de meest gebruikte easing |
| Functie | Beschrijving |
|---|---|
easeInQuart | Kwartische versnelling (t^4) |
easeOutQuart | Kwartische vertraging |
easeInOutQuart | Kwartische ease in en out |
| Functie | Beschrijving |
|---|---|
easeInQuint | Kwintische versnelling (t^5) – zeer scherpe start |
easeOutQuint | Kwintische vertraging – zeer scherpe stop |
easeInOutQuint | Kwintische ease in en out |
| Functie | Beschrijving |
|---|---|
easeInSine | Sinus-gebaseerde versnelling – de zachtste easing curve |
easeOutSine | Sinus-gebaseerde vertraging |
easeInOutSine | Sinus-gebaseerde ease in en out |
| Functie | Beschrijving |
|---|---|
easeInExpo | Exponentiële versnelling – bijna vlak dan scherp |
easeOutExpo | Exponentiële vertraging – scherp dan bijna vlak |
easeInOutExpo | Exponentiële ease in en out |
| Functie | Beschrijving |
|---|---|
easeInCirc | Circulaire versnellingscurve |
easeOutCirc | Circulaire vertragingscurve |
easeInOutCirc | Circulaire ease in en out |
| Functie | Beschrijving |
|---|---|
easeInBack | Trekt iets terug voordat het vooruit versnelt (anticipatie) |
easeOutBack | Schiet over het doel heen en komt dan terug (overshoot) |
easeInOutBack | Anticipatie bij binnenkomst, overshoot bij uitgang |
| Functie | Beschrijving |
|---|---|
easeInElastic | Elastische wiebeling bij versnelling – veerachtig opwinden |
easeOutElastic | Elastische wiebeling bij vertraging – veerachtig klikken |
easeInOutElastic | Elastisch aan beide kanten |
| Functie | Beschrijving |
|---|---|
easeInBounce | Stuitereffect bij binnenkomst – zoals een bal omgekeerd laten vallen |
easeOutBounce | Stuitereffect bij uitgang – zoals een bal die de grond raakt |
easeInOutBounce | Stuiterend aan beide kanten |
easeOutCubic of easeOutQuart voor natuurlijk aanvoelende entranceseaseOutElastic of easeOutBack voor speelse overshooteaseInOutSine voor zachte, continue bewegingeaseInExpo voor opbouw, easeOutExpo voor snelle stopseaseOutBounce voor zwaartekracht-achtige effectenOvergangen bepalen hoe één scène overgaat in de volgende. Rendervid biedt 17 overgangstypen variërend van eenvoudige cuts tot cinematische 3D effecten.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Het transition object wordt geplaatst op de binnenkomende scène (de scène waarnaar wordt overgegaan). De direction eigenschap is alleen van toepassing op directionele overgangen zoals slide, wipe en push.
| Overgang | Beschrijving |
|---|---|
cut | Directe switch zonder visueel effect (standaard) |
fade | Crossfade tussen scènes – de uitgaande scène fadet uit terwijl de binnenkomende scène fadet in |
zoom | Zoomt in op de uitgaande scène terwijl de binnenkomende scène verschijnt |
slide | De binnenkomende scène schuift over de uitgaande scène vanuit een configureerbare richting (links, rechts, omhoog, omlaag) |
wipe | Een harde-rand wipe onthult de binnenkomende scène, bewegend over het frame in de gegeven richting |
push | De binnenkomende scène duwt de uitgaande scène van het scherm in de gespecificeerde richting |
rotate | De uitgaande scène roteert weg terwijl de binnenkomende scène naar binnen roteert |
flip | 3D flip overgang – het frame flipt zoals een kaart om de volgende scène te onthullen |
blur | De uitgaande scène vervaagt terwijl de binnenkomende scène scherp wordt |
circle | Een circulair masker breidt uit vanuit het centrum (of een gespecificeerd punt) om de volgende scène te onthullen |
glitch | Digitaal glitch verstoringseffect met chromatische aberratie en verplaatsing |
dissolve | Pixel-niveau dissolve waarbij individuele pixels willekeurig tussen scènes overgaan |
cube | 3D kubus rotatie – de scènes zijn op aangrenzende vlakken van een roterende kubus |
swirl | Spiraalverstoring die de uitgaande scène in de binnenkomende scène draait |
diagonal-wipe | Een diagonale harde-rand wipe bewegend van één hoek naar de tegenovergestelde |
iris | Circulaire iris die opent of sluit zoals een camera-apertuur |
crosszoom | Beide scènes zoomen tegelijkertijd – de uitgaande zoomt in, de binnenkomende zoomt uit |
Cinematische fade met een lange crossfade:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Slide van rechts (gebruikelijk voor sequentiële inhoud):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D kubus rotatie (dynamisch, modern gevoel):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Glitch effect (energiek, tech-forward):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid lagen ondersteunen een reeks visuele effecten via filters, blend modes, schaduwen en transformaties.
Filters worden toegepast via de filters array op elke laag. Elk filter is een object met een type en 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 }
]
}
| Filter | Waardebereik | Beschrijving |
|---|---|---|
blur | 0+ (pixels) | Gaussiaanse vervaging – hogere waarden produceren meer vervaging |
brightness | 0+ (multiplier) | 0 = zwart, 1 = normaal, 2 = dubbele helderheid |
contrast | 0+ (multiplier) | 0 = grijs, 1 = normaal, 2 = dubbel contrast |
grayscale | 0-1 | 0 = volle kleur, 1 = volledig onverzadigd |
hue-rotate | 0-360 (graden) | Roteert kleuren rond het kleurenwiel |
invert | 0-1 | 0 = normaal, 1 = volledig geïnverteerde kleuren |
saturate | 0+ (multiplier) | 0 = onverzadigd, 1 = normaal, 2 = dubbele verzadiging |
sepia | 0-1 | 0 = normaal, 1 = volle sepia toon |
De blendMode eigenschap bepaalt hoe een laag samengesteld wordt met de lagen eronder:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Ondersteunde blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Tekst- en vormlagen ondersteunen schaduweffecten via de style eigenschap:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filters, blend modes, opacity en schaduwen kunnen allemaal worden gecombineerd op een enkele laag voor geavanceerde visuele behandelingen:
{
"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 ondersteunt zowel Google Fonts (100+ families ingebouwd) als aangepaste lettertypen geladen van externe URL’s.
Declareer Google Fonts in de fonts.google array:
{
"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] }
]
}
}
Elk lettertype object vereist:
| Veld | Type | Beschrijving |
|---|---|---|
family | string | Google Font familienaam (exacte match vereist) |
weights | array | Array van numerieke gewichten om te laden (100-900) |
Veelgebruikte lettertypegewichten: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Laad lettertypen van externe URL’s met behulp van de fonts.custom array:
{
"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"
}
]
}
}
Ondersteunde lettertypeformaten: WOFF2 (aanbevolen voor kleinste bestandsgrootte), WOFF, TTF en OTF.
Verwijs naar gedeclareerde lettertypen op familienaam in tekstlaagstijlen:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid bevat platformspecifieke lettertype fallback ketens om consistente rendering over verschillende omgevingen te garanderen. Als een gespecificeerd lettertype niet beschikbaar is, valt de renderer terug op systeemlettertypen die overeenkomen met dezelfde classificatie (serif, sans-serif, monospace).
Rendervid ondersteunt een breed scala aan uitvoerformaten en codecs voor zowel video als afbeeldingsrendering.
| Formaat | Codec | Bestandsextensie | Beste Voor |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maximale compatibiliteit – web, mobiel, sociale media |
| WebM | VP8 / VP9 | .webm | Web embedding met kleinere bestandsgroottes |
| MOV | ProRes | .mov | Professionele bewerkingsworkflows, lossless kwaliteit |
| GIF | – | .gif | Korte animaties, social sharing, email |
| MP4 | H.265 / HEVC | .mp4 | Nieuwere apparaten, 50% kleinere bestanden dan H.264 bij dezelfde kwaliteit |
| WebM | AV1 | .webm | Volgende generatie codec, beste compressie-efficiëntie |
| Formaat | Bestandsextensie | Beste Voor |
|---|---|---|
| PNG | .png | Lossless kwaliteit, transparantie ondersteuning |
| JPEG | .jpg | Foto’s, kleinere bestandsgroottes |
| WebP | .webp | Modern web, beste balans van kwaliteit en grootte |
| Preset | Beschrijving |
|---|---|
draft | Snelle rendering met verminderde kwaliteit – ideaal voor preview |
standard | Gebalanceerde kwaliteit en bestandsgrootte – goed voor de meeste gebruikssituaties |
high | Hogere bitrate en kwaliteit – voor definitieve deliverables |
lossless | Maximale kwaliteit zonder compressie-artefacten |
Rendervid ondersteunt resoluties van kleine thumbnails tot 8K:
| Resolutie | Afmetingen | Veelgebruikt Voor |
|---|---|---|
| SD | 640 x 480 | Thumbnails, previews |
| HD | 1280 x 720 | Web video, email |
| Full HD | 1920 x 1080 | YouTube, presentaties |
| 2K | 2560 x 1440 | Hoge kwaliteit displays |
| 4K UHD | 3840 x 2160 | Professioneel, broadcast |
| 8K | 7680 x 4320 | Maximale resolutie, toekomstbestendig |
Framerates van 1 fps (diavoorstellingen) tot 120 fps (slow motion, gaming content) worden ondersteund. Veelgebruikte keuzes zijn 24 fps (cinematisch), 30 fps (web/social) en 60 fps (soepele beweging).
Hier is een volledig Rendervid sjabloon dat de belangrijkste kenmerken van het sjabloonsysteem demonstreert die samenwerken: dynamische invoer, meerdere scènes met overgangen, gelaagde composities, animaties met easing, lettertypen en visuele effecten.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Productnaam",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "De toekomst is hier."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Afbeelding",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primaire Kleur",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Meer Informatie"
}
],
"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": "Introductie",
"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"
}
]
}
]
}
]
}
}
Dit sjabloon creëert een 20 seconden durende productlancering video met drie scènes: een typografische intro met gelaagde tekstanimaties, een product showcase met een zwevende afbeelding en typewriter effect, en een afsluitende call-to-action scène met een pulserende knop. Alle tekst, kleuren en afbeeldingen worden aangestuurd door sjabloonvariabelen, waardoor het volledig herbruikbaar is.
Rendervid sjablonen zijn JSON-bestanden die de structuur, inhoud, animaties en uitvoerinstellingen van een video of afbeelding definiëren. Elk sjabloon bevat een uitvoerconfiguratie (afmetingen, fps, duur), invoerdefinities voor dynamische variabelen, een compositie met scènes en lagen, en optionele lettertype- en aangepaste componentconfiguraties.
Sjabloonvariabelen gebruiken de {{variableName}} syntax. Je definieert invoer in de inputs array van het sjabloon met een key, type (string, number, boolean, color, url, array), label, beschrijving en standaardwaarde. Bij het renderen worden deze variabelen vervangen door werkelijke waarden, waardoor sjablonen herbruikbaar en dynamisch worden.
Rendervid bevat 40+ ingebouwde animatie presets georganiseerd in vier categorieën: entrance animaties (fadeIn, slideIn, scaleIn, bounceIn, etc.), exit animaties (fadeOut, slideOut, zoomOut, etc.), emphasis animaties (pulse, shake, bounce, swing, heartbeat, etc.), en volledig aanpasbare keyframe animaties met 30+ easing functies.
Rendervid biedt 17 scène overgangstypen: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris, en crosszoom. Elke overgang kan worden geconfigureerd met duur en richting parameters.
Rendervid ondersteunt meerdere uitvoerformaten waaronder MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF voor video, en PNG, JPEG, WebP voor afbeeldingen. Geavanceerde codecs zoals H.265/HEVC en AV1 worden ook ondersteund. Resolutie gaat tot 8K (7680x4320) met framerates van 1 tot 120 fps.
Ja, Rendervid ondersteunt 100+ ingebouwde Google Fonts en aangepast lettertype laden vanaf URL's in WOFF2, WOFF, TTF en OTF formaten. Je kunt lettertypegewichten van 100-900 specificeren en platformspecifieke fallbacks configureren voor cross-environment compatibiliteit.
Wij helpen bedrijven zoals die van u bij het ontwikkelen van slimme chatbots, MCP-servers, AI-tools of andere soorten AI-automatisering om mensen te vervangen bij repetitieve taken in uw organisatie.
Ontdek alle Rendervid componenten: 8 ingebouwde laagtypen (tekst, afbeelding, video, vorm, audio, groep, lottie, aangepast), kant-en-klare React componenten, de...
Implementeer Rendervid overal: browser-gebaseerde rendering voor voorbeelden, Node.js voor server-side batch verwerking, of cloud rendering op AWS Lambda, Azure...
Ontdek Rendervid, het gratis open-source alternatief voor Remotion voor programmatische videogeneratie. AI-first ontwerp met MCP-integratie, JSON-templates, clo...