Komplet guide til Rendervid template systemet. Lær hvordan du opretter JSON video skabeloner, bruger dynamiske variabler med {{variable}} syntaks, konfigurerer 40+ animationsforudindstillinger, 17 sceneovergange og 30+ easing funktioner.
Rendervid er en programmatisk videorenderingsmotor bygget omkring et deklarativt, JSON-baseret skabelonsystem. I stedet for manuelt at redigere video i en tidslinje, definerer du hvert aspekt af din video – scener, lag, animationer, overgange og outputindstillinger – i et enkelt JSON-dokument. Denne tilgang gør skabeloner tilstandsløse, versionskontrollerbare og maskingenererede, hvilket åbner døren til AI-drevet videoproduktion, batch-renderingspipelines og fuldt automatiserede indholdsworkflows.
Denne guide dækker det komplette Rendervid skabelonsystem fra top til bund: rotniveau konfiguration, outputindstillinger, variabel- og inputsystemet, scener og komposition, alle otte lagtyper, 40+ animationsforudindstillinger, 30+ easing funktioner, 17 sceneovergange, visuelle effekter, skrifttypekonfiguration og outputformater.
Hver Rendervid skabelon er et JSON-objekt med et veldefineret sæt felter på rotniveau. Her er skelettet af en komplet skabelon:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Felt | Type | Påkrævet | Beskrivelse |
|---|---|---|---|
name | string | Ja | Menneskelæselig skabelonidentifikator |
output | object | Ja | Video- eller billedoutputkonfiguration (dimensioner, fps, varighed, format) |
inputs | array | Nej | Dynamiske inputdefinitioner for skabelonvariabler |
composition | object | Ja | Indeholder scenes arrayet, der definerer alt visuelt indhold |
fonts | object | Nej | Google Fonts og brugerdefinerede skrifttypedeklarationer |
customComponents | object | Nej | Registrerede brugerdefinerede lagkomponenter |
defaults | object | Nej | Standardværdier anvendt på alle lag medmindre overskrevet |
name feltet er til organisatoriske formål – det påvirker ikke renderingen. output og composition felterne er de to søjler, hver skabelon skal have. Alt andet er valgfrit, men låser op for kraftfulde muligheder.
output objektet styrer den endelige renderede fil: dens format, dimensioner, billedhastighed, varighed og baggrundsfarve.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Felt | Type | Standard | Beskrivelse |
|---|---|---|---|
type | string | "video" | Outputtype: "video" eller "image" |
width | number | 1920 | Bredde i pixels (op til 7680 for 8K) |
height | number | 1080 | Højde i pixels (op til 4320 for 8K) |
fps | number | 30 | Billeder pr. sekund (1-120) |
duration | number | – | Total varighed i sekunder |
backgroundColor | string | "#000000" | Baggrundsfarve som hex, RGB eller navngivet farve |
Her er outputkonfigurationer til populære formater:
1080p Full HD (YouTube, generelt formål):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 lodret):
{
"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 Billede:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
For billedoutput ignoreres fps og duration – rendereren fanger en enkelt frame.
Input- og variabelsystemet er det, der gør Rendervid skabeloner genanvendelige. I stedet for at hardkode tekst, farver eller URL’er i din skabelon, definerer du inputs og refererer til dem ved hjælp af {{variableName}} syntaksen hvor som helst i skabelonen.
Inputs deklareres i inputs arrayet på topniveau. Hvert inputobjekt beskriver en enkelt variabel:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titel",
"description": "Hovedtiteltekst vist i introscenen",
"required": true,
"default": "Hej Verden"
},
{
"key": "brandColor",
"type": "color",
"label": "Brandfarve",
"description": "Primær brandfarve brugt til baggrunde og accenter",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Vis Undertekst",
"description": "Skift undertekstsynlighed",
"required": false,
"default": true
}
]
}
| Felt | Type | Påkrævet | Beskrivelse |
|---|---|---|---|
key | string | Ja | Unik identifikator brugt i {{key}} referencer |
type | string | Ja | Datatype: string, number, boolean, color, url, array |
label | string | Nej | Menneskelæselig etiket til UI-rendering |
description | string | Nej | Forklaring af hvad dette input styrer |
required | boolean | Nej | Om inputtet skal leveres ved renderingstidspunkt |
default | any | Nej | Fallback-værdi hvis intet input leveres |
string – Fri tekst. Brug til titler, beskrivelser, billedtekster eller ethvert tekstindhold.number – Numeriske værdier. Brug til varigheder, størrelser, positioner, uigennemsigtigheds niveauer eller antal.boolean – Sand/falsk skift. Brug til betinget synlighed, funktionsflag eller til/fra kontakter.color – Farveværdier i hex (#FF5733), RGB (rgb(255,87,51)) eller navngivet format. Brug til baggrunde, tekstfarver og accenter.url – Gyldige URL-strenge. Brug til billedkilder, videokilder, links og skrifttype-URL’er.array – Lister af værdier. Brug til billedgallerier, tekstlister, slideindhold eller enhver gentaget data.Når inputs er defineret, referer til dem hvor som helst i skabelonen ved hjælp af dobbelte krøllede parenteser:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variabler løses ved renderingstidspunkt. Når du kalder Rendervid API eller CLI, sender du de faktiske værdier:
{
"title": "Sommerudsalg 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Her er en komplet skabelon med flere inputtyper, der arbejder sammen:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Produktnavn",
"description": "Navn på produktet, der promoveres",
"required": true,
"default": "Produkt"
},
{
"key": "price",
"type": "number",
"label": "Pris",
"description": "Produktpris vist i videoen",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Produktbillede URL",
"description": "URL til produktbilledet",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accentfarve",
"description": "Farve brugt til CTA-knapper og fremhævninger",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Vis Udsalgsmærke",
"description": "Om udsalgsmærket skal vises",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Produktfunktioner",
"description": "Liste over funktionspunkter",
"required": false,
"default": ["Funktion 1", "Funktion 2", "Funktion 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 }
}
]
}
]
}
}
Denne enkelte skabelon kan generere tusindvis af unikke produktvideoer ved blot at ændre inputværdierne ved renderingstidspunkt – ingen skabelonændringer nødvendige.
composition objektet er hvor din videos indhold lever. Det indeholder et scenes array, og hver scene repræsenterer et distinkt segment af videoen med sin egen varighed, lag og 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": [ ... ]
}
]
}
}
| Felt | Type | Påkrævet | Beskrivelse |
|---|---|---|---|
name | string | Nej | Identifikator for scenen (til læsbarhed og fejlfinding) |
duration | number | Ja | Scenelængde i sekunder |
transition | object | Nej | Overgangseffekt ved indtræden i denne scene fra den forrige |
layers | array | Ja | Ordnet array af lagobjekter renderet fra bund til top |
Scener afspilles i rækkefølge. Den totale videovarighed er summen af alle scenevarigheder (minus eventuel overgangsoverlap). Lag inden for en scene renderes i array-rækkefølge – det første lag sidder i bunden af den visuelle stak, og det sidste lag sidder øverst.
Hvis ingen overgang er angivet, bruger scenen et hårdt cut som standard.
Rendervid understøtter otte forskellige lagtyper. Hver lagtype tjener et specifikt formål og accepterer sit eget sæt af egenskaber oven på den delte basiskonfiguration.
Hvert lag, uanset type, understøtter disse basisegenskaber:
{
"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": ""
}
| Egenskab | Type | Standard | Beskrivelse |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y koordinater i pixels |
size | object | – | Bredde og højde i pixels |
rotation | number | 0 | Rotationsvinkel i grader |
scale | object | {x: 1, y: 1} | Skaleringsmultiplikator for X og Y akser |
anchor | object | {x: 0.5, y: 0.5} | Ankerpunkt for transformationer (0-1 område, 0.5 = center) |
opacity | number | 1 | Laguigennemsigtighed (0 = transparent, 1 = uigennemsigtig) |
blendMode | string | "normal" | CSS blend mode til compositing |
from | number | 0 | Starttidspunkt i sekunder (relativt til scenestart) |
duration | number | -1 | Lagvarighed i sekunder (-1 = fuld scenevarighed) |
filters | array | [] | Array af visuelle filterobjekter |
style | object | {} | Yderligere CSS-lignende stilegenskaber |
className | string | "" | CSS klassenavn til brugerdefineret styling |
text – Renderer stylet tekst med fuld kontrol over skrifttype, størrelse, farve, justering, linjehøjde, bogstavafstand, tekstskygger og mere. Understøtter {{variable}} syntaksen til dynamisk indhold.
image – Viser statiske billeder fra URL’er eller lokale stier. Understøtter beskæring, object-fit modes, border radius og billedfiltre.
video – Indlejrer videoclips i en scene. Understøtter trimning (start/slut), volumenkontrol, afspilningshastighed, looping og muting.
shape – Renderer geometriske primitiver: rektangler, cirkler, ellipser, linjer og polygoner. Understøtter fyld, streg, border radius, gradienter og skygger.
audio – Tilføjer lydspor til en scene. Understøtter volumen, fade ind/ud, trimning og looping. Lydlag har ingen visuel repræsentation.
group – Et containerlag, der indeholder underordnede lag. Grupper giver dig mulighed for at anvende transformationer, animationer og effekter på flere lag på én gang.
lottie – Renderer Lottie/Bodymovin JSON-animationer. Understøtter afspilningshastighed, looping og segmentkontrol til afspilning af specifikke frame-områder.
custom – Indlæser registrerede brugerdefinerede komponenter defineret i customComponents feltet. Brug dette til genanvendelige, parametriserede lagskabeloner.
For detaljeret konfiguration af hver lagtype, herunder alle tilgængelige egenskaber og kodeeksempler, se Rendervid Components Reference .
Rendervid inkluderer over 40 indbyggede animationsforudindstillinger organiseret i fire kategorier: entrance, exit, emphasis og keyframe. Animationer er knyttet til ethvert lag og styrer, hvordan det lag vises, forsvinder eller opfører sig i løbet af sin levetid.
{
"type": "text",
"text": "Animeret Titel",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Felt | Type | Standard | Beskrivelse |
|---|---|---|---|
type | string | – | Animationskategori: entrance, exit, emphasis, keyframe |
effect | string | – | Forudindstillingsnavn (f.eks. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Varighed i frames |
delay | number | 0 | Forsinkelse før animation starter, i frames |
easing | string | "ease" | Easing funktionsnavn |
loop | number | 0 | Antal loops (0 = ingen loop, -1 = uendelig) |
alternate | boolean | false | Vend retning ved alternative loops |
Indgangsanimationer styrer, hvordan et lag vises på skærmen. De kører én gang, når lagets starttidspunkt nås.
| Forudindstilling | Beskrivelse |
|---|---|
fadeIn | Simpel uigennemsigtigheds fade fra 0 til 1 |
fadeInUp | Fader ind mens den glider opad |
fadeInDown | Fader ind mens den glider nedad |
fadeInLeft | Fader ind mens den glider fra venstre |
fadeInRight | Fader ind mens den glider fra højre |
slideInUp | Glider ind fra under rammen |
slideInDown | Glider ind fra oven på rammen |
slideInLeft | Glider ind fra venstre kant |
slideInRight | Glider ind fra højre kant |
scaleIn | Skalerer op fra 0 til fuld størrelse |
zoomIn | Zoomer ind fra en mindre skala med let overskridelse |
rotateIn | Roterer ind i position fra en forskudt vinkel |
bounceIn | Hopper ind i position med elastisk overskridelse |
flipInX | 3D flip på X-aksen (horisontal flip) |
flipInY | 3D flip på Y-aksen (vertikal flip) |
typewriter | Tegn vises et ad gangen (tekstlag) |
revealLeft | Maskeavsløring glider fra venstre |
revealRight | Maskeavsløring glider fra højre |
revealUp | Maskeavsløring glider opad |
revealDown | Maskeavsløring glider nedad |
Udgangsanimationer styrer, hvordan et lag forsvinder. De kører ved slutningen af lagets varighed.
| Forudindstilling | Beskrivelse |
|---|---|
fadeOut | Simpel uigennemsigtigheds fade fra 1 til 0 |
slideOutUp | Glider ud gennem toppen af rammen |
slideOutDown | Glider ud gennem bunden af rammen |
scaleOut | Skalerer ned fra fuld størrelse til 0 |
zoomOut | Zoomer ud til en mindre skala og fader |
rotateOut | Roterer ud af position til en forskudt vinkel |
bounceOut | Hopper udad med elastisk overskridelse før forsvinden |
flipOutX | 3D flip ud på X-aksen |
flipOutY | 3D flip ud på Y-aksen |
Fremhævelsesanimationer tiltrækker opmærksomhed til et lag, mens det forbliver synligt. De fungerer godt med looping.
| Forudindstilling | Beskrivelse |
|---|---|
pulse | Rytmisk skalapuls (vokser og skrumper) |
shake | Hurtig horisontal rysten |
bounce | Vertikal hoppebevægelse |
swing | Pendul-lignende svingende rotation |
wobble | Off-akse vaklen kombinerer rotation og translation |
flash | Hurtige uigennemsigtigheds blink |
rubberBand | Elastisk stræk og snap effekt |
heartbeat | Dobbelt-puls hjertebanke rytme |
float | Blid flydende op-og-ned bevægelse |
spin | Kontinuerlig 360-graders rotation |
For fuld kreativ kontrol lader keyframe-animationer dig definere brugerdefinerede frame-for-frame egenskabsændringer:
{
"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-animationer kan animere enhver numerisk egenskab: opacity, x, y, rotation, scaleX, scaleY og mere. Hver keyframe angiver et framenummer og egenskabsværdierne ved det frame. Rendereren interpolerer mellem keyframes ved hjælp af den angivne easing funktion.
Et enkelt lag kan have flere animationer. For eksempel en indgangsanimation efterfulgt af en fremhævelsesloop og derefter en udgangsanimation:
{
"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 funktioner styrer ændringshastigheden under en animation og bestemmer, om bevægelsen føles lineær, glat, hoppende eller elastisk. Rendervid inkluderer over 30 indbyggede easing funktioner.
| Funktion | Beskrivelse |
|---|---|
linear | Konstant hastighed fra start til slut, ingen acceleration |
ease | Standard CSS-lignende easing med blid acceleration og deceleration |
easeIn | Starter langsomt, accelererer mod slutningen |
easeOut | Starter hurtigt, decelererer mod slutningen |
easeInOut | Accelererer i første halvdel, decelererer i anden |
| Funktion | Beskrivelse |
|---|---|
easeInQuad | Kvadratisk acceleration (t^2) |
easeOutQuad | Kvadratisk deceleration |
easeInOutQuad | Kvadratisk acceleration derefter deceleration |
| Funktion | Beskrivelse |
|---|---|
easeInCubic | Kubisk acceleration (t^3) – mere udtalt end kvadratisk |
easeOutCubic | Kubisk deceleration – glat og naturlig-følende stop |
easeInOutCubic | Kubisk ease ind og ud – den mest almindeligt anvendte easing |
| Funktion | Beskrivelse |
|---|---|
easeInQuart | Kvartisk acceleration (t^4) |
easeOutQuart | Kvartisk deceleration |
easeInOutQuart | Kvartisk ease ind og ud |
| Funktion | Beskrivelse |
|---|---|
easeInQuint | Kvintisk acceleration (t^5) – meget skarp start |
easeOutQuint | Kvintisk deceleration – meget skarp stop |
easeInOutQuint | Kvintisk ease ind og ud |
| Funktion | Beskrivelse |
|---|---|
easeInSine | Sinus-baseret acceleration – den blødeste easing kurve |
easeOutSine | Sinus-baseret deceleration |
easeInOutSine | Sinus-baseret ease ind og ud |
| Funktion | Beskrivelse |
|---|---|
easeInExpo | Eksponentiel acceleration – næsten flad derefter skarp |
easeOutExpo | Eksponentiel deceleration – skarp derefter næsten flad |
easeInOutExpo | Eksponentiel ease ind og ud |
| Funktion | Beskrivelse |
|---|---|
easeInCirc | Cirkulær accelerationskurve |
easeOutCirc | Cirkulær decelerationskurve |
easeInOutCirc | Cirkulær ease ind og ud |
| Funktion | Beskrivelse |
|---|---|
easeInBack | Trækker lidt tilbage før acceleration fremad (forventning) |
easeOutBack | Overskrider målet og sætter sig derefter tilbage (overskridelse) |
easeInOutBack | Forventning ved indgang, overskridelse ved udgang |
| Funktion | Beskrivelse |
|---|---|
easeInElastic | Elastisk vaklen ved acceleration – fjerlignende opvinding |
easeOutElastic | Elastisk vaklen ved deceleration – fjerlignende snap |
easeInOutElastic | Elastisk i begge ender |
| Funktion | Beskrivelse |
|---|---|
easeInBounce | Hoppende effekt ved indgang – som en bold tabt i omvendt |
easeOutBounce | Hoppende effekt ved udgang – som en bold, der rammer jorden |
easeInOutBounce | Hoppende i begge ender |
easeOutCubic eller easeOutQuart til naturlig-følende indgangeeaseOutElastic eller easeOutBack til legende overskridelseeaseInOutSine til blid, kontinuerlig bevægelseeaseInExpo til opbygninger, easeOutExpo til snappy stopeaseOutBounce til tyngdekraft-lignende effekterOvergange styrer, hvordan en scene flyder ind i den næste. Rendervid tilbyder 17 overgangstyper, der spænder fra simple cuts til cinematiske 3D-effekter.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
transition objektet placeres på den indkommende scene (scenen, der overgås til). direction egenskaben gælder kun for retningsbestemte overgange som slide, wipe og push.
| Overgang | Beskrivelse |
|---|---|
cut | Øjeblikkelig skift uden visuel effekt (standard) |
fade | Crossfade mellem scener – den udgående scene fader ud, mens den indkommende scene fader ind |
zoom | Zoomer ind i den udgående scene, mens den indkommende scene vises |
slide | Den indkommende scene glider over den udgående scene fra en konfigurerbar retning (venstre, højre, op, ned) |
wipe | En hård-kant wipe afslører den indkommende scene og bevæger sig på tværs af rammen i den givne retning |
push | Den indkommende scene skubber den udgående scene ud af skærmen i den angivne retning |
rotate | Den udgående scene roterer væk, mens den indkommende scene roterer ind |
flip | 3D flip overgang – rammen flipper som et kort for at afsløre næste scene |
blur | Den udgående scene sløres ud, mens den indkommende scene skærpes i fokus |
circle | En cirkulær maske udvider fra midten (eller et angivet punkt) for at afsløre næste scene |
glitch | Digital glitch forvrængningseffekt med kromatisk aberration og forskydning |
dissolve | Pixel-niveau opløsning, hvor individuelle pixels overgår tilfældigt mellem scener |
cube | 3D terning rotation – scenerne er på tilstødende flader af en roterende terning |
swirl | Spiral forvrængning, der hvirvler den udgående scene ind i den indkommende scene |
diagonal-wipe | En diagonal hård-kant wipe bevæger sig fra et hjørne til det modsatte |
iris | Cirkulær iris, der åbner eller lukker som en kamerablænde |
crosszoom | Begge scener zoomer samtidigt – den udgående zoomer ind, den indkommende zoomer ud |
Cinematisk fade med en lang crossfade:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Glid fra højre (almindelig til sekventielt indhold):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D terning rotation (dynamisk, moderne følelse):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Glitch effekt (energisk, tech-fremadrettet):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid lag understøtter en række visuelle effekter gennem filtre, blend modes, skygger og transformationer.
Filtre anvendes via filters arrayet på ethvert lag. Hvert filter er et objekt med en type og 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 | Værdiområde | Beskrivelse |
|---|---|---|
blur | 0+ (pixels) | Gaussisk sløring – højere værdier producerer mere sløring |
brightness | 0+ (multiplikator) | 0 = sort, 1 = normal, 2 = dobbelt lysstyrke |
contrast | 0+ (multiplikator) | 0 = grå, 1 = normal, 2 = dobbelt kontrast |
grayscale | 0-1 | 0 = fuld farve, 1 = fuldt umættet |
hue-rotate | 0-360 (grader) | Roterer farver rundt om farvehjulet |
invert | 0-1 | 0 = normal, 1 = fuldt inverterede farver |
saturate | 0+ (multiplikator) | 0 = umættet, 1 = normal, 2 = dobbelt mætning |
sepia | 0-1 | 0 = normal, 1 = fuld sepia tone |
blendMode egenskaben styrer, hvordan et lag composites med lagene under det:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Understøttede blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Tekst- og formlag understøtter skyggeeffekter gennem style egenskaben:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtre, blend modes, uigennemsigtighed og skygger kan alle kombineres på et enkelt lag til sofistikerede visuelle behandlinger:
{
"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 understøtter både Google Fonts (100+ familier indbygget) og brugerdefinerede skrifttyper indlæst fra eksterne URL’er.
Deklarer Google Fonts i fonts.google arrayet:
{
"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] }
]
}
}
Hvert skrifttypeobjekt kræver:
| Felt | Type | Beskrivelse |
|---|---|---|
family | string | Google Font familienavn (nøjagtig match påkrævet) |
weights | array | Array af numeriske vægte at indlæse (100-900) |
Almindelige skrifttypevægte: 100 (Tynd), 200 (Ekstra Let), 300 (Let), 400 (Regular), 500 (Medium), 600 (Semi Fed), 700 (Fed), 800 (Ekstra Fed), 900 (Sort).
Indlæs skrifttyper fra eksterne URL’er ved hjælp af fonts.custom arrayet:
{
"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"
}
]
}
}
Understøttede skrifttypeformater: WOFF2 (anbefalet til mindste filstørrelse), WOFF, TTF og OTF.
Referer deklarerede skrifttyper efter familienavn i tekstlag stilarter:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid inkluderer platformspecifikke skrifttype fallback-kæder for at sikre konsistent rendering på tværs af forskellige miljøer. Hvis en angivet skrifttype er utilgængelig, falder rendereren tilbage til systemskrifttyper, der matcher samme klassifikation (serif, sans-serif, monospace).
Rendervid understøtter en bred vifte af outputformater og codecs til både video- og billedrendering.
| Format | Codec | Filendelse | Bedst Til |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maksimal kompatibilitet – web, mobil, sociale medier |
| WebM | VP8 / VP9 | .webm | Web-indlejring med mindre filstørrelser |
| MOV | ProRes | .mov | Professionelle redigeringsworkflows, tabsfri kvalitet |
| GIF | – | .gif | Korte animationer, social deling, e-mail |
| MP4 | H.265 / HEVC | .mp4 | Nyere enheder, 50% mindre filer end H.264 ved samme kvalitet |
| WebM | AV1 | .webm | Næste generations codec, bedste komprimeringseffektivitet |
| Format | Filendelse | Bedst Til |
|---|---|---|
| PNG | .png | Tabsfri kvalitet, gennemsigtighedsunderstøttelse |
| JPEG | .jpg | Fotografier, mindre filstørrelser |
| WebP | .webp | Moderne web, bedste balance mellem kvalitet og størrelse |
| Forudindstilling | Beskrivelse |
|---|---|
draft | Hurtig rendering med reduceret kvalitet – ideel til forhåndsvisning |
standard | Afbalanceret kvalitet og filstørrelse – god til de fleste use cases |
high | Højere bitrate og kvalitet – til endelige leverancer |
lossless | Maksimal kvalitet uden komprimeringsartefakter |
Rendervid understøtter opløsninger fra små thumbnails op til 8K:
| Opløsning | Dimensioner | Almindelig Brug |
|---|---|---|
| SD | 640 x 480 | Thumbnails, forhåndsvisninger |
| HD | 1280 x 720 | Web video, e-mail |
| Full HD | 1920 x 1080 | YouTube, præsentationer |
| 2K | 2560 x 1440 | Høj-kvalitets displays |
| 4K UHD | 3840 x 2160 | Professionel, broadcast |
| 8K | 7680 x 4320 | Maksimal opløsning, fremtidssikret |
Billedhastigheder fra 1 fps (slideshows) til 120 fps (slow motion, gaming indhold) understøttes. Almindelige valg er 24 fps (cinematisk), 30 fps (web/social) og 60 fps (glat bevægelse).
Her er en fuld Rendervid skabelon, der demonstrerer skabelonsystemets nøglefunktioner, der arbejder sammen: dynamiske inputs, flere scener med overgange, lagdelte kompositioner, animationer med easing, skrifttyper og visuelle effekter.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Produktnavn",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "Fremtiden er her."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Billede",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primær Farve",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Lær Mere"
}
],
"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": "Introducerer",
"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"
}
]
}
]
}
]
}
}
Denne skabelon opretter en 20-sekunders produktlanceringsvideo med tre scener: en typografisk intro med forskudte tekstanimationer, en produktpræsentation med et flydende billede og skrivemaskineeffekt samt en afsluttende call-to-action scene med en pulserende knap. Al tekst, farver og billeder drives af skabelonvariabler, hvilket gør den fuldt genanvendelig.
Rendervid skabeloner er JSON-filer, der definerer strukturen, indholdet, animationerne og outputindstillingerne for en video eller et billede. Hver skabelon inkluderer en outputkonfiguration (dimensioner, fps, varighed), inputdefinitioner for dynamiske variabler, en komposition med scener og lag samt valgfri skrifttype- og tilpassede komponentkonfigurationer.
Skabelonvariabler bruger {{variableName}} syntaksen. Du definerer inputs i skabelonens inputs array med en nøgle, type (string, number, boolean, color, url, array), label, beskrivelse og standardværdi. Ved renderingstidspunktet erstattes disse variabler med faktiske værdier, hvilket gør skabeloner genanvendelige og dynamiske.
Rendervid inkluderer 40+ indbyggede animationsforudindstillinger organiseret i fire kategorier: indgangsanimationer (fadeIn, slideIn, scaleIn, bounceIn, osv.), udgangsanimationer (fadeOut, slideOut, zoomOut, osv.), fremhævelsesanimationer (pulse, shake, bounce, swing, heartbeat, osv.) og fuldt tilpasselige keyframe-animationer med 30+ easing funktioner.
Rendervid tilbyder 17 sceneovergangstyper: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris og crosszoom. Hver overgang kan konfigureres med varighed og retningsparametre.
Rendervid understøtter flere outputformater, herunder MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF til video og PNG, JPEG, WebP til billeder. Avancerede codecs som H.265/HEVC og AV1 understøttes også. Opløsningen går op til 8K (7680x4320) med billedhastigheder fra 1 til 120 fps.
Ja, Rendervid understøtter 100+ indbyggede Google Fonts og brugerdefineret skrifttypeindlæsning fra URL'er i WOFF2, WOFF, TTF og OTF formater. Du kan angive skrifttypevægte fra 100-900 og konfigurere platformspecifikke fallbacks for kompatibilitet på tværs af miljøer.
Vi hjælper virksomheder som din med at udvikle smarte chatbots, MCP-servere, AI-værktøjer eller andre typer AI-automatisering til at erstatte mennesker i gentagne opgaver i din organisation.
Udforsk alle Rendervid komponenter: 8 indbyggede lagtyper (tekst, billede, video, form, lyd, gruppe, lottie, tilpasset), færdigbyggede React komponenter, den vi...
Deploy Rendervid hvor som helst: browserbaseret rendering til forhåndsvisninger, Node.js til serverside batch-behandling, eller cloud rendering på AWS Lambda, A...
Opdag Rendervid, det gratis open-source alternativ til Remotion til programmatisk videogenerering. AI-først design med MCP-integration, JSON-skabeloner, cloud r...