Komplett guide til Rendervid template system. Lær hvordan du lager JSON-videomaler, bruker dynamiske variabler med {{variable}} syntaks, konfigurerer 40+ animasjonsforhåndsinnstillinger, 17 sceneoverganger og 30+ easing-funksjoner.
Rendervid er en programmatisk videorenderingsmotor bygget rundt et deklarativt, JSON-basert malsystem. I stedet for å manuelt redigere video i en tidslinje, definerer du hvert aspekt av videoen din – scener, lag, animasjoner, overganger og utdatainnstillinger – i et enkelt JSON-dokument. Denne tilnærmingen gjør maler tilstandsløse, versjonskontrollerbare og maskingenerbare, noe som åpner døren for AI-drevet videoproduksjon, batch-renderingspipelines og fullautomatiserte innholdsarbeidsflyter.
Denne guiden dekker det komplette Rendervid-malsystemet fra topp til bunn: konfigurasjon på rotnivå, utdatainnstillinger, variabel- og inndatasystemet, scener og komposisjon, alle åtte lagtyper, 40+ animasjonsforhåndsinnstillinger, 30+ easing-funksjoner, 17 sceneoverganger, visuelle effekter, skrifttypekonfigurasjon og utdataformater.
Hver Rendervid-mal er et JSON-objekt med et veldefinert sett av felt på rotnivå. Her er skjelettet til en komplett mal:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Felt | Type | Påkrevd | Beskrivelse |
|---|---|---|---|
name | string | Ja | Menneskelesbar malidentifikator |
output | object | Ja | Video- eller bildeutdatakonfigurasjon (dimensjoner, fps, varighet, format) |
inputs | array | Nei | Dynamiske inndatadefinisjoner for malvariabler |
composition | object | Ja | Inneholder scenes-arrayen som definerer alt visuelt innhold |
fonts | object | Nei | Google Fonts og tilpassede skrifttypedeklarasjoner |
customComponents | object | Nei | Registrerte tilpassede lagkomponenter |
defaults | object | Nei | Standardverdier som gjelder for alle lag med mindre overstyrt |
name-feltet er for organisatoriske formål – det påvirker ikke renderingen. output- og composition-feltene er de to pilarene hver mal må ha. Alt annet er valgfritt, men låser opp kraftige funksjoner.
output-objektet kontrollerer den endelige rendrede filen: dens format, dimensjoner, bildefrekvens, varighet og bakgrunnsfarge.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Felt | Type | Standard | Beskrivelse |
|---|---|---|---|
type | string | "video" | Utdatatype: "video" eller "image" |
width | number | 1920 | Bredde i piksler (opptil 7680 for 8K) |
height | number | 1080 | Høyde i piksler (opptil 4320 for 8K) |
fps | number | 30 | Bilder per sekund (1-120) |
duration | number | – | Total varighet i sekunder |
backgroundColor | string | "#000000" | Bakgrunnsfarge som hex, RGB eller navngitt farge |
Her er utdatakonfigurasjoner for populære formater:
1080p Full HD (YouTube, generelt bruk):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertikal):
{
"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 / Bilde for Sosial Deling:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
For bildeutdata ignoreres fps og duration – rendereren fanger en enkelt ramme.
Inndata- og variabelsystemet er det som gjør Rendervid-maler gjenbrukbare. I stedet for å hardkode tekst, farger eller URL-er inn i malen din, definerer du inndata og refererer til dem ved å bruke {{variableName}}-syntaksen hvor som helst i malen.
Inndata deklareres i inputs-arrayen på toppnivå. Hvert inndataobjekt beskriver en enkelt variabel:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Tittel",
"description": "Hovedtitteltekst vist i intro-scenen",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Merkevarefarge",
"description": "Primær merkevarefarge brukt til bakgrunner og aksenter",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Vis Undertekst",
"description": "Slå av/på synlighet for undertekst",
"required": false,
"default": true
}
]
}
| Felt | Type | Påkrevd | Beskrivelse |
|---|---|---|---|
key | string | Ja | Unik identifikator brukt i {{key}}-referanser |
type | string | Ja | Datatype: string, number, boolean, color, url, array |
label | string | Nei | Menneskelesbar etikett for UI-rendering |
description | string | Nei | Forklaring av hva denne inndataen kontrollerer |
required | boolean | Nei | Om inndataen må oppgis ved renderingstidspunktet |
default | any | Nei | Fallback-verdi hvis ingen inndata oppgis |
string – Friformtekst. Bruk for titler, beskrivelser, bildetekster eller ethvert tekstinnhold.number – Numeriske verdier. Bruk for varigheter, størrelser, posisjoner, opasitetsnivåer eller antall.boolean – Sann/usann-brytere. Bruk for betinget synlighet, funksjonsflagger eller av/på-brytere.color – Fargeverdier i hex (#FF5733), RGB (rgb(255,87,51)) eller navngitt format. Bruk for bakgrunner, tekstfarger og aksenter.url – Gyldige URL-strenger. Bruk for bildekilder, videokilder, lenker og skrifttype-URL-er.array – Lister med verdier. Bruk for bildegallerier, tekstlister, lysbildeinnhold eller andre gjentatte data.Når inndata er definert, referer du til dem hvor som helst i malen ved å bruke doble krøllparenteser:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variabler løses ved renderingstidspunktet. Når du kaller Rendervid API eller CLI, sender du de faktiske verdiene:
{
"title": "Sommersalg 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Her er en komplett mal med flere inndatatyper som fungerer 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 som markedsføres",
"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": "URL til Produktbilde",
"description": "URL til produktbildet",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Aksentfarge",
"description": "Farge brukt til CTA-knapper og høydepunkter",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Vis Salgsmerke",
"description": "Om salgsmerket skal vises som overlegg",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Produktfunksjoner",
"description": "Liste over funksjonspunkter",
"required": false,
"default": ["Funksjon 1", "Funksjon 2", "Funksjon 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 enkle malen kan generere tusenvis av unike produktvideoer ved ganske enkelt å endre inndataverdiene ved renderingstidspunktet – ingen malmodifikasjoner nødvendig.
composition-objektet er der videoens innhold befinner seg. Det inneholder en scenes-array, og hver scene representerer et distinkt segment av videoen med sin egen varighet, 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åkrevd | Beskrivelse |
|---|---|---|---|
name | string | Nei | Identifikator for scenen (for lesbarhet og feilsøking) |
duration | number | Ja | Scenelengde i sekunder |
transition | object | Nei | Overgangseffekt ved inngang til denne scenen fra den forrige |
layers | array | Ja | Ordnet array av lagobjekter rendret fra bunn til topp |
Scener spilles i sekvens. Den totale videovarigheten er summen av alle scenevarigheter (minus eventuell overgangsoverlapping). Lag innenfor en scene rendres i array-rekkefølge – det første laget sitter nederst i den visuelle stakken, og det siste laget sitter øverst.
Hvis ingen overgang er spesifisert, bruker scenen et hardt cut som standard.
Rendervid støtter åtte distinkte lagtyper. Hver lagtype tjener et spesifikt formål og aksepterer sitt eget sett med egenskaper på toppen av den delte basiskonfigurasjonen.
Hvert lag, uavhengig av type, støtter disse basisegenskapene:
{
"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": ""
}
| Egenskap | Type | Standard | Beskrivelse |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y-koordinater i piksler |
size | object | – | Bredde og høyde i piksler |
rotation | number | 0 | Rotasjonsvinkel i grader |
scale | object | {x: 1, y: 1} | Skaleringsmultiplikator for X- og Y-akser |
anchor | object | {x: 0.5, y: 0.5} | Ankerpunkt for transformasjoner (0-1 område, 0.5 = senter) |
opacity | number | 1 | Lagopasitet (0 = gjennomsiktig, 1 = ugjennomsiktig) |
blendMode | string | "normal" | CSS blandingsmodus for komposisjon |
from | number | 0 | Starttid i sekunder (relativt til scenestart) |
duration | number | -1 | Lagvarighet i sekunder (-1 = full scenevarighet) |
filters | array | [] | Array av visuelle filterobjekter |
style | object | {} | Ekstra CSS-lignende stilegenskaper |
className | string | "" | CSS-klassenavn for tilpasset styling |
text – Rendrer stilisert tekst med full kontroll over skrifttype, størrelse, farge, justering, linjehøyde, bokstavavstand, tekstskygger og mer. Støtter {{variable}}-syntaksen for dynamisk innhold.
image – Viser statiske bilder fra URL-er eller lokale stier. Støtter beskjæring, objekttilpasningsmodi, kantradius og bildefiltre.
video – Bygger inn videoklipp i en scene. Støtter trimming (start/slutt), volumkontroll, avspillingshastighet, looping og demping.
shape – Rendrer geometriske primitiver: rektangler, sirkler, ellipser, linjer og polygoner. Støtter fyll, strøk, kantradius, gradienter og skygger.
audio – Legger til lydspor i en scene. Støtter volum, fade inn/ut, trimming og looping. Lydlag har ingen visuell representasjon.
group – Et containerlag som holder underordnede lag. Grupper lar deg anvende transformasjoner, animasjoner og effekter på flere lag samtidig.
lottie – Rendrer Lottie/Bodymovin JSON-animasjoner. Støtter avspillingshastighet, looping og segmentkontroll for avspilling av spesifikke rammeområder.
custom – Laster registrerte tilpassede komponenter definert i customComponents-feltet. Bruk dette for gjenbrukbare, parametriserte lagmaler.
For detaljert konfigurasjon av hver lagtype, inkludert alle tilgjengelige egenskaper og kodeeksempler, se Rendervid Components Reference .
Rendervid inkluderer over 40 innebygde animasjonsforhåndsinnstillinger organisert i fire kategorier: inngang, utgang, vektlegging og keyframe. Animasjoner festes til ethvert lag og kontrollerer hvordan det laget vises, forsvinner eller oppfører seg i løpet av sin levetid.
{
"type": "text",
"text": "Animert Tittel",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Felt | Type | Standard | Beskrivelse |
|---|---|---|---|
type | string | – | Animasjonskategori: entrance, exit, emphasis, keyframe |
effect | string | – | Forhåndsinnstillingsnavn (f.eks. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Varighet i rammer |
delay | number | 0 | Forsinkelse før animasjonen starter, i rammer |
easing | string | "ease" | Easing-funksjonsnavn |
loop | number | 0 | Antall løkker (0 = ingen løkke, -1 = uendelig) |
alternate | boolean | false | Reverser retning på alternative løkker |
Inngangsanimasjoner kontrollerer hvordan et lag vises på skjermen. De kjører én gang når lagets starttid nås.
| Forhåndsinnstilling | Beskrivelse |
|---|---|
fadeIn | Enkel opasitetsfade fra 0 til 1 |
fadeInUp | Fader inn mens den glir oppover |
fadeInDown | Fader inn mens den glir nedover |
fadeInLeft | Fader inn mens den glir fra venstre |
fadeInRight | Fader inn mens den glir fra høyre |
slideInUp | Glir inn fra under rammen |
slideInDown | Glir inn fra over rammen |
slideInLeft | Glir inn fra venstre kant |
slideInRight | Glir inn fra høyre kant |
scaleIn | Skalerer opp fra 0 til full størrelse |
zoomIn | Zoomer inn fra mindre skala med lett overskudd |
rotateIn | Roterer inn i posisjon fra en forskjøvet vinkel |
bounceIn | Spretter inn i posisjon med elastisk overskudd |
flipInX | 3D-flip på X-aksen (horisontal flip) |
flipInY | 3D-flip på Y-aksen (vertikal flip) |
typewriter | Tegn vises ett om gangen (tekstlag) |
revealLeft | Maskeavsløring som glir fra venstre |
revealRight | Maskeavsløring som glir fra høyre |
revealUp | Maskeavsløring som glir oppover |
revealDown | Maskeavsløring som glir nedover |
Utgangsanimasjoner kontrollerer hvordan et lag forsvinner. De kjører på slutten av lagets varighet.
| Forhåndsinnstilling | Beskrivelse |
|---|---|
fadeOut | Enkel opasitetsfade fra 1 til 0 |
slideOutUp | Glir ut gjennom toppen av rammen |
slideOutDown | Glir ut gjennom bunnen av rammen |
scaleOut | Skalerer ned fra full størrelse til 0 |
zoomOut | Zoomer ut til mindre skala og fader |
rotateOut | Roterer ut av posisjon til en forskjøvet vinkel |
bounceOut | Spretter utover med elastisk overskudd før den forsvinner |
flipOutX | 3D-flip ut på X-aksen |
flipOutY | 3D-flip ut på Y-aksen |
Vektleggingsanimasjoner trekker oppmerksomhet til et lag mens det forblir synlig. De fungerer godt med looping.
| Forhåndsinnstilling | Beskrivelse |
|---|---|
pulse | Rytmisk skalapuls (vokser og krymper) |
shake | Rask horisontal risting |
bounce | Vertikal sprettbevegelse |
swing | Pendellignende svingende rotasjon |
wobble | Off-axis vakle som kombinerer rotasjon og translasjon |
flash | Raske opasitetsglimt |
rubberBand | Elastisk strekk- og kneppeffekt |
heartbeat | Dobbel-puls hjerteslag-rytme |
float | Forsiktig flytende opp-og-ned-bevegelse |
spin | Kontinuerlig 360-graders rotasjon |
For full kreativ kontroll lar keyframe-animasjoner deg definere tilpassede ramme-for-ramme egenskapsendringer:
{
"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-animasjoner kan animere enhver numerisk egenskap: opacity, x, y, rotation, scaleX, scaleY og mer. Hver keyframe spesifiserer et rammenummer og egenskapsverdiene ved den rammen. Rendereren interpolerer mellom keyframes ved å bruke den spesifiserte easing-funksjonen.
Et enkelt lag kan ha flere animasjoner. For eksempel en inngangsanimasjon etterfulgt av en vektleggingsløkke, deretter en utgangsanimasjon:
{
"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-funksjoner kontrollerer endringshastigheten under en animasjon, og bestemmer om bevegelsen føles lineær, jevn, hoppende eller elastisk. Rendervid inkluderer over 30 innebygde easing-funksjoner.
| Funksjon | Beskrivelse |
|---|---|
linear | Konstant hastighet fra start til slutt, ingen akselerasjon |
ease | Standard CSS-lignende easing med forsiktig akselerasjon og retardasjon |
easeIn | Starter sakte, akselererer mot slutten |
easeOut | Starter raskt, retarderer mot slutten |
easeInOut | Akselererer i første halvdel, retarderer i andre |
| Funksjon | Beskrivelse |
|---|---|
easeInQuad | Kvadratisk akselerasjon (t^2) |
easeOutQuad | Kvadratisk retardasjon |
easeInOutQuad | Kvadratisk akselerasjon deretter retardasjon |
| Funksjon | Beskrivelse |
|---|---|
easeInCubic | Kubisk akselerasjon (t^3) – mer uttalt enn kvadratisk |
easeOutCubic | Kubisk retardasjon – jevn og naturligfølende stopp |
easeInOutCubic | Kubisk ease inn og ut – den mest brukte easing |
| Funksjon | Beskrivelse |
|---|---|
easeInQuart | Kvartisk akselerasjon (t^4) |
easeOutQuart | Kvartisk retardasjon |
easeInOutQuart | Kvartisk ease inn og ut |
| Funksjon | Beskrivelse |
|---|---|
easeInQuint | Kvintisk akselerasjon (t^5) – veldig skarp start |
easeOutQuint | Kvintisk retardasjon – veldig skarp stopp |
easeInOutQuint | Kvintisk ease inn og ut |
| Funksjon | Beskrivelse |
|---|---|
easeInSine | Sinusbasert akselerasjon – den mildeste easing-kurven |
easeOutSine | Sinusbasert retardasjon |
easeInOutSine | Sinusbasert ease inn og ut |
| Funksjon | Beskrivelse |
|---|---|
easeInExpo | Eksponentiell akselerasjon – nesten flat deretter skarp |
easeOutExpo | Eksponentiell retardasjon – skarp deretter nesten flat |
easeInOutExpo | Eksponentiell ease inn og ut |
| Funksjon | Beskrivelse |
|---|---|
easeInCirc | Sirkulær akselerasjonskurve |
easeOutCirc | Sirkulær retardasjonskurve |
easeInOutCirc | Sirkulær ease inn og ut |
| Funksjon | Beskrivelse |
|---|---|
easeInBack | Trekker seg litt tilbake før den akselererer fremover (antesitering) |
easeOutBack | Overskrider målet og setter seg deretter tilbake (overskudd) |
easeInOutBack | Antesitering ved inngang, overskudd ved utgang |
| Funksjon | Beskrivelse |
|---|---|
easeInElastic | Elastisk vakle ved akselerasjon – fjærlignende oppvikling |
easeOutElastic | Elastisk vakle ved retardasjon – fjærlignende knips |
easeInOutElastic | Elastisk på begge ender |
| Funksjon | Beskrivelse |
|---|---|
easeInBounce | Spretteffekt ved inngang – som en ball sluppet i revers |
easeOutBounce | Spretteffekt ved utgang – som en ball som treffer bakken |
easeInOutBounce | Spretting på begge ender |
easeOutCubic eller easeOutQuart for naturligfølende inngangereaseOutElastic eller easeOutBack for leken overskuddeaseInOutSine for forsiktig, kontinuerlig bevegelseeaseInExpo for oppbygging, easeOutExpo for raske stoppeaseOutBounce for tyngdekraftlignende effekterOverganger kontrollerer hvordan en scene flyter inn i den neste. Rendervid tilbyr 17 overgangstyper fra enkle kutt til kinematiske 3D-effekter.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
transition-objektet plasseres på den innkommende scenen (scenen det overganges til). direction-egenskapen gjelder kun for retningsbestemte overganger som slide, wipe og push.
| Overgang | Beskrivelse |
|---|---|
cut | Øyeblikkelig bytte uten visuell effekt (standard) |
fade | Kryssfading mellom scener – den utgående scenen fader ut mens den innkommende scenen fader inn |
zoom | Zoomer inn i den utgående scenen mens den innkommende scenen vises |
slide | Den innkommende scenen glir over den utgående scenen fra en konfigurerbar retning (venstre, høyre, opp, ned) |
wipe | En hard kant-wipe avslører den innkommende scenen, beveger seg over rammen i gitt retning |
push | Den innkommende scenen skyver den utgående scenen ut av skjermen i spesifisert retning |
rotate | Den utgående scenen roterer bort mens den innkommende scenen roterer inn |
flip | 3D-flip-overgang – rammen flipper som et kort for å avsløre neste scene |
blur | Den utgående scenen blir uskarp mens den innkommende scenen skjerpes inn i fokus |
circle | En sirkulær maske utvides fra sentrum (eller et spesifisert punkt) for å avsløre neste scene |
glitch | Digital glitch-forvrengningseffekt med kromatisk aberrasjon og forskyvning |
dissolve | Piksel-nivå oppløsning der individuelle piksler overgår tilfeldig mellom scener |
cube | 3D-kuberotasjon – scenene er på tilstøtende flater av en roterende kube |
swirl | Spiralforvrengning som virvler den utgående scenen inn i den innkommende scenen |
diagonal-wipe | En diagonal hard kant-wipe som beveger seg fra ett hjørne til det motsatte |
iris | Sirkulær iris som åpner eller lukker seg som en kamerablender |
crosszoom | Begge scener zoomer samtidig – den utgående zoomer inn, den innkommende zoomer ut |
Kinematisk fade med lang kryssfading:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Gli fra høyre (vanlig for sekvensielt innhold):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D-kuberotasjon (dynamisk, moderne følelse):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Glitch-effekt (energisk, teknologisk fremoverlent):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid-lag støtter en rekke visuelle effekter gjennom filtre, blandingsmoduser, skygger og transformasjoner.
Filtre anvendes via filters-arrayen 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 | Verdiområde | Beskrivelse |
|---|---|---|
blur | 0+ (piksler) | Gaussisk uskarphet – høyere verdier produserer mer uskarphet |
brightness | 0+ (multiplikator) | 0 = svart, 1 = normal, 2 = dobbel lysstyrke |
contrast | 0+ (multiplikator) | 0 = grå, 1 = normal, 2 = dobbel kontrast |
grayscale | 0-1 | 0 = full farge, 1 = fullstendig desaturert |
hue-rotate | 0-360 (grader) | Roterer farger rundt fargehjulet |
invert | 0-1 | 0 = normal, 1 = fullstendig inverterte farger |
saturate | 0+ (multiplikator) | 0 = desaturert, 1 = normal, 2 = dobbel metning |
sepia | 0-1 | 0 = normal, 1 = full sepia-tone |
blendMode-egenskapen kontrollerer hvordan et lag komponeres med lagene under det:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Støttede blandingsmoduser: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Tekst- og formlag støtter skyggeeffekter gjennom style-egenskapen:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtre, blandingsmoduser, opasitet og skygger kan alle kombineres på et enkelt lag for sofistikerte 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 støtter både Google Fonts (100+ familier innebygd) og tilpassede skrifttyper lastet fra eksterne URL-er.
Deklarer Google Fonts i fonts.google-arrayen:
{
"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 krever:
| Felt | Type | Beskrivelse |
|---|---|---|
family | string | Google Font-familienavn (eksakt match påkrevd) |
weights | array | Array av numeriske vekter å laste (100-900) |
Vanlige skriftvekter: 100 (Tynn), 200 (Ekstra Lett), 300 (Lett), 400 (Vanlig), 500 (Medium), 600 (Halvfet), 700 (Fet), 800 (Ekstra Fet), 900 (Svart).
Last skrifttyper fra eksterne URL-er ved å bruke fonts.custom-arrayen:
{
"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"
}
]
}
}
Støttede skrifttypeformater: WOFF2 (anbefalt for minste filstørrelse), WOFF, TTF og OTF.
Referer til deklarerte skrifttyper etter familienavn i tekstlagstiler:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid inkluderer plattformspesifikke skrifttype-fallback-kjeder for å sikre konsistent rendering på tvers av forskjellige miljøer. Hvis en spesifisert skrifttype er utilgjengelig, faller rendereren tilbake til systemskrifttyper som matcher samme klassifisering (serif, sans-serif, monospace).
Rendervid støtter et bredt spekter av utdataformater og kodeker for både video- og bilderendering.
| Format | Kodek | Filtype | Best For |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maksimal kompatibilitet – web, mobil, sosiale medier |
| WebM | VP8 / VP9 | .webm | Webinnbygging med mindre filstørrelser |
| MOV | ProRes | .mov | Profesjonelle redigeringsarbeidsflyter, tapsfri kvalitet |
| GIF | – | .gif | Korte animasjoner, sosial deling, e-post |
| MP4 | H.265 / HEVC | .mp4 | Nyere enheter, 50% mindre filer enn H.264 ved samme kvalitet |
| WebM | AV1 | .webm | Neste generasjons kodek, beste komprimeringseffektivitet |
| Format | Filtype | Best For |
|---|---|---|
| PNG | .png | Tapsfri kvalitet, gjennomsiktighetsstøtte |
| JPEG | .jpg | Fotografier, mindre filstørrelser |
| WebP | .webp | Moderne web, beste balanse mellom kvalitet og størrelse |
| Forhåndsinnstilling | Beskrivelse |
|---|---|
draft | Rask rendering med redusert kvalitet – ideell for forhåndsvisning |
standard | Balansert kvalitet og filstørrelse – bra for de fleste brukstilfeller |
high | Høyere bitrate og kvalitet – for endelige leveranser |
lossless | Maksimal kvalitet uten komprimeringsartefakter |
Rendervid støtter oppløsninger fra små miniatyrbilder opp til 8K:
| Oppløsning | Dimensjoner | Vanlig Bruk |
|---|---|---|
| SD | 640 x 480 | Miniatyrbilder, forhåndsvisninger |
| HD | 1280 x 720 | Webvideo, e-post |
| Full HD | 1920 x 1080 | YouTube, presentasjoner |
| 2K | 2560 x 1440 | Høykvalitetsskjermer |
| 4K UHD | 3840 x 2160 | Profesjonell, kringkasting |
| 8K | 7680 x 4320 | Maksimal oppløsning, fremtidssikker |
Bildefrekvenser fra 1 fps (lysbildefremvisninger) til 120 fps (sakte film, spillinnhold) støttes. Vanlige valg er 24 fps (kinematisk), 30 fps (web/sosial) og 60 fps (jevn bevegelse).
Her er en full Rendervid-mal som demonstrerer malsystemets nøkkelfunksjoner som fungerer sammen: dynamiske inndata, flere scener med overganger, lagdelte komposisjoner, animasjoner 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": "Slagord",
"required": true,
"default": "Fremtiden er her."
},
{
"key": "heroImage",
"type": "url",
"label": "Hovedbilde",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primærfarge",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Handlingsoppfordring",
"default": "Lær Mer"
}
],
"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": "Introduserer",
"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 malen lager en 20-sekunders produktlanseringsvideo med tre scener: en typografisk intro med forskjøvede tekstanimasjoner, en produktvisning med et flytende bilde og skrivemaskineffekt, og en avsluttende handlingsoppfordringsscene med en pulserende knapp. All tekst, farger og bilder drives av malvariabler, noe som gjør den fullstendig gjenbrukbar.
Rendervid-maler er JSON-filer som definerer strukturen, innholdet, animasjonene og utdatainnstillingene for en video eller et bilde. Hver mal inkluderer en utdatakonfigurasjon (dimensjoner, fps, varighet), inndatadefinisjoner for dynamiske variabler, en komposisjon med scener og lag, og valgfri skrifttype- og tilpassede komponentkonfigurasjoner.
Malvariabler bruker {{variableName}} syntaksen. Du definerer inndata i malens inputs-array med en nøkkel, type (string, number, boolean, color, url, array), etikett, beskrivelse og standardverdi. Ved renderingstidspunktet erstattes disse variablene med faktiske verdier, noe som gjør maler gjenbrukbare og dynamiske.
Rendervid inkluderer 40+ innebygde animasjonsforhåndsinnstillinger organisert i fire kategorier: inngangsanimasjoner (fadeIn, slideIn, scaleIn, bounceIn, etc.), utgangsanimasjoner (fadeOut, slideOut, zoomOut, etc.), vektleggingsanimasjoner (pulse, shake, bounce, swing, heartbeat, etc.), og fullstendig tilpassbare keyframe-animasjoner med 30+ easing-funksjoner.
Rendervid tilbyr 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 varighet og retningsparametere.
Rendervid støtter flere utdataformater inkludert MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF for video, og PNG, JPEG, WebP for bilder. Avanserte kodeker som H.265/HEVC og AV1 støttes også. Oppløsning går opp til 8K (7680x4320) med bildefrekvenser fra 1 til 120 fps.
Ja, Rendervid støtter 100+ innebygde Google Fonts og tilpasset skrifttypeinnlasting fra URL-er i WOFF2, WOFF, TTF og OTF-formater. Du kan spesifisere skriftvekter fra 100-900 og konfigurere plattformspesifikke fallbacks for kompatibilitet på tvers av miljøer.
Vi hjelper bedrifter som din med å utvikle smarte chatboter, MCP-servere, AI-verktøy eller andre typer AI-automatisering for å erstatte mennesker i repeterende oppgaver i organisasjonen din.
Utforsk alle Rendervid-komponenter: 8 innebygde lagtyper (tekst, bilde, video, form, lyd, gruppe, lottie, tilpasset), ferdigbygde React-komponenter, den visuell...
Distribuer Rendervid hvor som helst: nettleserbasert rendering for forhåndsvisninger, Node.js for server-side batch-prosessering, eller sky-rendering på AWS Lam...
Oppdag Rendervid, det gratis åpen kildekode-alternativet til Remotion for programmatisk videogenerering. AI-først design med MCP-integrasjon, JSON-maler, skygje...