Komplett guide till Rendervid-mallsystemet. Lär dig hur du skapar JSON-videomallar, använder dynamiska variabler med {{variable}}-syntax, konfigurerar 40+ animationsförinställningar, 17 scenövergångar och 30+ easing-funktioner.
Rendervid är en programmatisk videorenderingsmotor byggd kring ett deklarativt, JSON-baserat mallsystem. Istället för att manuellt redigera video i en tidslinje definierar du varje aspekt av din video – scener, lager, animationer, övergångar och utmatningsinställningar – i ett enda JSON-dokument. Detta tillvägagångssätt gör mallar tillståndslösa, versionskontrollerbara och maskingenererbara, vilket öppnar dörren för AI-driven videoproduktion, batch-renderingspipelines och helt automatiserade innehållsarbetsflöden.
Denna guide täcker det kompletta Rendervid-mallsystemet från topp till botten: rotnivåkonfiguration, utmatningsinställningar, variabel- och inmatningssystemet, scener och komposition, alla åtta lagertyper, 40+ animationsförinställningar, 30+ easing-funktioner, 17 scenövergångar, visuella effekter, typsnittskonfiguration och utmatningsformat.
Varje Rendervid-mall är ett JSON-objekt med en väldefinierad uppsättning fält på rotnivå. Här är skelettet av en komplett mall:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Fält | Typ | Obligatoriskt | Beskrivning |
|---|---|---|---|
name | string | Ja | Läsbar mallidentifierare |
output | object | Ja | Video- eller bildutmatningskonfiguration (dimensioner, fps, varaktighet, format) |
inputs | array | Nej | Dynamiska inmatningsdefinitioner för mallvariabler |
composition | object | Ja | Innehåller scenes-arrayen som definierar allt visuellt innehåll |
fonts | object | Nej | Google Fonts och anpassade typsnittsdeklarationer |
customComponents | object | Nej | Registrerade anpassade lagerkomponenter |
defaults | object | Nej | Standardvärden som tillämpas på alla lager om de inte åsidosätts |
Fältet name är för organisatoriska ändamål – det påverkar inte renderingen. Fälten output och composition är de två pelarna som varje mall måste ha. Allt annat är valfritt men låser upp kraftfulla funktioner.
Objektet output styr den slutliga renderade filen: dess format, dimensioner, bildfrekvens, varaktighet och bakgrundsfärg.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Fält | Typ | Standard | Beskrivning |
|---|---|---|---|
type | string | "video" | Utmatningstyp: "video" eller "image" |
width | number | 1920 | Bredd i pixlar (upp till 7680 för 8K) |
height | number | 1080 | Höjd i pixlar (upp till 4320 för 8K) |
fps | number | 30 | Bilder per sekund (1-120) |
duration | number | – | Total varaktighet i sekunder |
backgroundColor | string | "#000000" | Bakgrundsfärg som hex, RGB eller namngiven färg |
Här är utmatningskonfigurationer för populära format:
1080p Full HD (YouTube, allmänt syfte):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertikalt):
{
"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-bild:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
För bildutmatning ignoreras fps och duration – renderaren fångar en enda bildruta.
Inmatnings- och variabelsystemet är det som gör Rendervid-mallar återanvändbara. Istället för att hårdkoda text, färger eller URL:er i din mall definierar du inmatningar och refererar till dem med syntaxen {{variableName}} var som helst i mallen.
Inmatningar deklareras i inputs-arrayen på toppnivå. Varje inmatningsobjekt beskriver en enskild variabel:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Title",
"description": "Main title text displayed in the intro scene",
"required": true,
"default": "Hello World"
},
{
"key": "brandColor",
"type": "color",
"label": "Brand Color",
"description": "Primary brand color used for backgrounds and accents",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Show Subtitle",
"description": "Toggle subtitle visibility",
"required": false,
"default": true
}
]
}
| Fält | Typ | Obligatoriskt | Beskrivning |
|---|---|---|---|
key | string | Ja | Unik identifierare som används i {{key}}-referenser |
type | string | Ja | Datatyp: string, number, boolean, color, url, array |
label | string | Nej | Läsbar etikett för UI-rendering |
description | string | Nej | Förklaring av vad denna inmatning styr |
required | boolean | Nej | Om inmatningen måste tillhandahållas vid renderingstillfället |
default | any | Nej | Reservvärde om ingen inmatning tillhandahålls |
string – Fri text. Använd för titlar, beskrivningar, bildtexter eller allt textinnehåll.number – Numeriska värden. Använd för varaktigheter, storlekar, positioner, opacitetsnivåer eller antal.boolean – Sant/falskt-växlar. Använd för villkorlig synlighet, funktionsflaggor eller på/av-brytare.color – Färgvärden i hex (#FF5733), RGB (rgb(255,87,51)) eller namngivet format. Använd för bakgrunder, textfärger och accenter.url – Giltiga URL-strängar. Använd för bildkällor, videokällor, länkar och typsnitt-URL:er.array – Listor med värden. Använd för bildgallerier, textlistor, bildinnehåll eller upprepad data.När inmatningar är definierade refererar du till dem var som helst i mallen med dubbla klammerparenteser:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Variabler löses vid renderingstillfället. När du anropar Rendervid API eller CLI skickar du de faktiska värdena:
{
"title": "Summer Sale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Här är en komplett mall med flera inmatningstyper som arbetar tillsammans:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"description": "Name of the product being promoted",
"required": true,
"default": "Product"
},
{
"key": "price",
"type": "number",
"label": "Price",
"description": "Product price displayed in the video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Product Image URL",
"description": "URL to the product image",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Accent Color",
"description": "Color used for CTA buttons and highlights",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Show Sale Badge",
"description": "Whether to display the sale badge overlay",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Product Features",
"description": "List of feature bullet points",
"required": false,
"default": ["Feature 1", "Feature 2", "Feature 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 }
}
]
}
]
}
}
Denna enda mall kan generera tusentals unika produktvideor genom att helt enkelt ändra inmatningsvärdena vid renderingstillfället – inga mallmodifieringar behövs.
Objektet composition är där ditt videoinnehåll finns. Det innehåller en scenes-array, och varje scen representerar ett distinkt segment av videon med sin egen varaktighet, lager och övergång.
{
"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": [ ... ]
}
]
}
}
| Fält | Typ | Obligatoriskt | Beskrivning |
|---|---|---|---|
name | string | Nej | Identifierare för scenen (för läsbarhet och felsökning) |
duration | number | Ja | Scenlängd i sekunder |
transition | object | Nej | Övergångseffekt när man går in i denna scen från den föregående |
layers | array | Ja | Ordnad array av lagerobjekt renderade nerifrån och upp |
Scener spelas i sekvens. Den totala videovaraktigheten är summan av alla scenvaraktigheter (minus eventuell övergångsöverlappning). Lager inom en scen renderas i arrayordning – det första lagret sitter längst ner i den visuella stacken, och det sista lagret sitter överst.
Om ingen övergång specificeras använder scenen ett hårt cut som standard.
Rendervid stöder åtta distinkta lagertyper. Varje lagertyp tjänar ett specifikt syfte och accepterar sin egen uppsättning egenskaper utöver den delade baskonfigurationen.
Varje lager, oavsett typ, stöder dessa basegenskaper:
{
"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 | Typ | Standard | Beskrivning |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y-koordinater i pixlar |
size | object | – | Bredd och höjd i pixlar |
rotation | number | 0 | Rotationsvinkel i grader |
scale | object | {x: 1, y: 1} | Skalmultiplikator för X- och Y-axlar |
anchor | object | {x: 0.5, y: 0.5} | Ankarpunkt för transformationer (0-1 intervall, 0.5 = centrum) |
opacity | number | 1 | Lageropacitet (0 = transparent, 1 = ogenomskinlig) |
blendMode | string | "normal" | CSS-blandningsläge för komposit |
from | number | 0 | Starttid i sekunder (relativt scenstart) |
duration | number | -1 | Lagervaraktighet i sekunder (-1 = full scenvaraktighet) |
filters | array | [] | Array av visuella filterobjekt |
style | object | {} | Ytterligare CSS-liknande stilegenskaper |
className | string | "" | CSS-klassnamn för anpassad styling |
text – Renderar stiliserad text med full kontroll över typsnitt, storlek, färg, justering, radhöjd, teckenavstånd, textskuggor och mer. Stöder {{variable}}-syntaxen för dynamiskt innehåll.
image – Visar statiska bilder från URL:er eller lokala sökvägar. Stöder beskärning, object-fit-lägen, kantradie och bildfilter.
video – Bäddar in videoklipp inom en scen. Stöder trimning (start/slut), volymkontroll, uppspelningshastighet, looping och ljuddämpning.
shape – Renderar geometriska primitiver: rektanglar, cirklar, ellipser, linjer och polygoner. Stöder fyllning, kontur, kantradie, gradienter och skuggor.
audio – Lägger till ljudspår till en scen. Stöder volym, fade in/ut, trimning och looping. Ljudlager har ingen visuell representation.
group – Ett containerlager som innehåller underlager. Grupper låter dig tillämpa transformationer, animationer och effekter på flera lager samtidigt.
lottie – Renderar Lottie/Bodymovin JSON-animationer. Stöder uppspelningshastighet, looping och segmentkontroll för att spela specifika bildruteintervall.
custom – Laddar registrerade anpassade komponenter definierade i fältet customComponents. Använd detta för återanvändbara, parametriserade lagermallar.
För detaljerad konfiguration av varje lagertyp, inklusive alla tillgängliga egenskaper och kodexempel, se Rendervid Components Reference .
Rendervid inkluderar över 40 inbyggda animationsförinställningar organiserade i fyra kategorier: entrance, exit, emphasis och keyframe. Animationer är kopplade till vilket lager som helst och styr hur det lagret visas, försvinner eller beter sig under sin livstid.
{
"type": "text",
"text": "Animated Title",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Fält | Typ | Standard | Beskrivning |
|---|---|---|---|
type | string | – | Animationskategori: entrance, exit, emphasis, keyframe |
effect | string | – | Förinställningsnamn (t.ex. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Varaktighet i bildrutor |
delay | number | 0 | Fördröjning innan animationen startar, i bildrutor |
easing | string | "ease" | Easing-funktionsnamn |
loop | number | 0 | Antal loopar (0 = ingen loop, -1 = oändlig) |
alternate | boolean | false | Vänd riktning på alternativa loopar |
Entréanimationer styr hur ett lager visas på skärmen. De körs en gång när lagrets starttid nås.
| Förinställning | Beskrivning |
|---|---|
fadeIn | Enkel opacitetsövergång från 0 till 1 |
fadeInUp | Tonar in medan den glider uppåt |
fadeInDown | Tonar in medan den glider nedåt |
fadeInLeft | Tonar in medan den glider från vänster |
fadeInRight | Tonar in medan den glider från höger |
slideInUp | Glider in från under ramen |
slideInDown | Glider in från ovanför ramen |
slideInLeft | Glider in från vänster kant |
slideInRight | Glider in från höger kant |
scaleIn | Skalar upp från 0 till full storlek |
zoomIn | Zoomar in från en mindre skala med lätt överskjutning |
rotateIn | Roterar in i position från en förskjuten vinkel |
bounceIn | Studsar in i position med elastisk överskjutning |
flipInX | 3D-flip på X-axeln (horisontell flip) |
flipInY | 3D-flip på Y-axeln (vertikal flip) |
typewriter | Tecken visas ett i taget (textlager) |
revealLeft | Maskavslöjande som glider från vänster |
revealRight | Maskavslöjande som glider från höger |
revealUp | Maskavslöjande som glider uppåt |
revealDown | Maskavslöjande som glider nedåt |
Exitanimationer styr hur ett lager försvinner. De körs i slutet av lagrets varaktighet.
| Förinställning | Beskrivning |
|---|---|
fadeOut | Enkel opacitetsövergång från 1 till 0 |
slideOutUp | Glider ut genom ramens topp |
slideOutDown | Glider ut genom ramens botten |
scaleOut | Skalar ner från full storlek till 0 |
zoomOut | Zoomar ut till en mindre skala och tonar |
rotateOut | Roterar ut ur position till en förskjuten vinkel |
bounceOut | Studsar utåt med elastisk överskjutning innan den försvinner |
flipOutX | 3D-flip ut på X-axeln |
flipOutY | 3D-flip ut på Y-axeln |
Betoningsanimationer drar uppmärksamhet till ett lager medan det förblir synligt. De fungerar bra med looping.
| Förinställning | Beskrivning |
|---|---|
pulse | Rytmisk skalpuls (växer och krymper) |
shake | Snabb horisontell skakning |
bounce | Vertikal studsrörelse |
swing | Pendelliknande svängande rotation |
wobble | Vacklig rörelse utanför axeln som kombinerar rotation och translation |
flash | Snabba opacitetsblinkningar |
rubberBand | Elastisk sträcknings- och snäppeffekt |
heartbeat | Dubbel-puls hjärtslagsrytm |
float | Mjuk flytande upp-och-ner-rörelse |
spin | Kontinuerlig 360-graders rotation |
För full kreativ kontroll låter keyframe-animationer dig definiera anpassade bildruta-för-bildruta-egenskapsändringar:
{
"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 animera vilken numerisk egenskap som helst: opacity, x, y, rotation, scaleX, scaleY och mer. Varje keyframe specificerar ett bildrutenummer och egenskapsvärdena vid den bildrutan. Renderaren interpolerar mellan keyframes med hjälp av den specificerade easing-funktionen.
Ett enda lager kan ha flera animationer. Till exempel en entréanimation följt av en betoningsloop, sedan en exitanimation:
{
"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 styr förändringstakten under en animation och bestämmer om rörelsen känns linjär, mjuk, studsig eller elastisk. Rendervid inkluderar över 30 inbyggda easing-funktioner.
| Funktion | Beskrivning |
|---|---|
linear | Konstant hastighet från start till slut, ingen acceleration |
ease | Standard CSS-liknande easing med mild acceleration och deceleration |
easeIn | Börjar långsamt, accelererar mot slutet |
easeOut | Börjar snabbt, decelererar mot slutet |
easeInOut | Accelererar i första halvan, decelererar i andra |
| Funktion | Beskrivning |
|---|---|
easeInQuad | Kvadratisk acceleration (t^2) |
easeOutQuad | Kvadratisk deceleration |
easeInOutQuad | Kvadratisk acceleration sedan deceleration |
| Funktion | Beskrivning |
|---|---|
easeInCubic | Kubisk acceleration (t^3) – mer uttalad än kvadratisk |
easeOutCubic | Kubisk deceleration – mjukt och naturligt känsla av stopp |
easeInOutCubic | Kubisk ease in och ut – den mest använda easingen |
| Funktion | Beskrivning |
|---|---|
easeInQuart | Kvartisk acceleration (t^4) |
easeOutQuart | Kvartisk deceleration |
easeInOutQuart | Kvartisk ease in och ut |
| Funktion | Beskrivning |
|---|---|
easeInQuint | Kvintisk acceleration (t^5) – mycket skarp start |
easeOutQuint | Kvintisk deceleration – mycket skarpt stopp |
easeInOutQuint | Kvintisk ease in och ut |
| Funktion | Beskrivning |
|---|---|
easeInSine | Sinusbaserad acceleration – den mildaste easing-kurvan |
easeOutSine | Sinusbaserad deceleration |
easeInOutSine | Sinusbaserad ease in och ut |
| Funktion | Beskrivning |
|---|---|
easeInExpo | Exponentiell acceleration – nästan platt sedan skarp |
easeOutExpo | Exponentiell deceleration – skarp sedan nästan platt |
easeInOutExpo | Exponentiell ease in och ut |
| Funktion | Beskrivning |
|---|---|
easeInCirc | Cirkulär accelerationskurva |
easeOutCirc | Cirkulär decelerationskurva |
easeInOutCirc | Cirkulär ease in och ut |
| Funktion | Beskrivning |
|---|---|
easeInBack | Drar sig tillbaka något innan den accelererar framåt (anticipation) |
easeOutBack | Överskjuter målet sedan sätter sig tillbaka (overshoot) |
easeInOutBack | Anticipation vid inträde, överskjutning vid utträde |
| Funktion | Beskrivning |
|---|---|
easeInElastic | Elastisk vackling vid acceleration – fjäderliknande uppdragning |
easeOutElastic | Elastisk vackling vid deceleration – fjäderliknande snäpp |
easeInOutElastic | Elastisk i båda ändar |
| Funktion | Beskrivning |
|---|---|
easeInBounce | Studseffekt vid inträde – som en boll släppt omvänt |
easeOutBounce | Studseffekt vid utträde – som en boll som träffar marken |
easeInOutBounce | Studsande i båda ändar |
easeOutCubic eller easeOutQuart för naturligt känsla av entréereaseOutElastic eller easeOutBack för lekfull överskjutningeaseInOutSine för mild, kontinuerlig rörelseeaseInExpo för uppbyggnader, easeOutExpo för snabba stoppeaseOutBounce för gravitationsliknande effekterÖvergångar styr hur en scen flödar in i nästa. Rendervid tillhandahåller 17 övergångstyper som sträcker sig från enkla klipp till filmiska 3D-effekter.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
Objektet transition placeras på den inkommande scenen (scenen som övergången går till). Egenskapen direction gäller endast för riktade övergångar som slide, wipe och push.
| Övergång | Beskrivning |
|---|---|
cut | Omedelbar växling utan visuell effekt (standard) |
fade | Korstonar mellan scener – den utgående scenen tonar ut medan den inkommande scenen tonar in |
zoom | Zoomar in i den utgående scenen medan den inkommande scenen visas |
slide | Den inkommande scenen glider över den utgående scenen från en konfigurerbar riktning (vänster, höger, upp, ner) |
wipe | En hård kant-svepning avslöjar den inkommande scenen, rör sig över ramen i given riktning |
push | Den inkommande scenen trycker den utgående scenen utanför skärmen i specificerad riktning |
rotate | Den utgående scenen roterar bort medan den inkommande scenen roterar in |
flip | 3D-flipövergång – ramen vänds som ett kort för att avslöja nästa scen |
blur | Den utgående scenen suddar ut medan den inkommande scenen skärps in i fokus |
circle | En cirkulär mask expanderar från centrum (eller en specificerad punkt) för att avslöja nästa scen |
glitch | Digital glitch-distorsionseffekt med kromatisk aberration och förskjutning |
dissolve | Upplösning på pixelnivå där enskilda pixlar övergår slumpmässigt mellan scener |
cube | 3D-kubrotation – scenerna är på intilliggande sidor av en roterande kub |
swirl | Spiraldistorsion som virvlar den utgående scenen in i den inkommande scenen |
diagonal-wipe | En diagonal hård kant-svepning som rör sig från ett hörn till motsatt |
iris | Cirkulär iris som öppnas eller stängs som en kamerabländare |
crosszoom | Båda scenerna zoomar samtidigt – den utgående zoomar in, den inkommande zoomar ut |
Filmisk fade med en lång korstonning:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Glid från höger (vanligt för sekventiellt innehåll):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D-kubrotation (dynamisk, modern känsla):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Glitch-effekt (energisk, teknikframåt):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid-lager stöder en rad visuella effekter genom filter, blandningslägen, skuggor och transformationer.
Filter tillämpas via filters-arrayen på vilket lager som helst. Varje filter är ett objekt med en type och 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ärdeintervall | Beskrivning |
|---|---|---|
blur | 0+ (pixlar) | Gaussisk oskärpa – högre värden ger mer oskärpa |
brightness | 0+ (multiplikator) | 0 = svart, 1 = normal, 2 = dubbel ljusstyrka |
contrast | 0+ (multiplikator) | 0 = grå, 1 = normal, 2 = dubbel kontrast |
grayscale | 0-1 | 0 = full färg, 1 = helt omättad |
hue-rotate | 0-360 (grader) | Roterar färger runt färghjulet |
invert | 0-1 | 0 = normal, 1 = helt inverterade färger |
saturate | 0+ (multiplikator) | 0 = omättad, 1 = normal, 2 = dubbel mättnad |
sepia | 0-1 | 0 = normal, 1 = full sepiaton |
Egenskapen blendMode styr hur ett lager kompositar med lagren under det:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Stödda blandningslägen: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Text- och formlager stöder skuggeffekter genom egenskapen style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filter, blandningslägen, opacitet och skuggor kan alla kombineras på ett enda lager för sofistikerade visuella behandlingar:
{
"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öder både Google Fonts (100+ familjer inbyggda) och anpassade typsnitt laddade från externa URL:er.
Deklarera 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] }
]
}
}
Varje typsnittsobjekt kräver:
| Fält | Typ | Beskrivning |
|---|---|---|
family | string | Google Font-familjenamn (exakt matchning krävs) |
weights | array | Array av numeriska tjocklekar att ladda (100-900) |
Vanliga typsnittstjocklekar: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Ladda typsnitt från externa URL:er med hjälp av 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ödda typsnittsformat: WOFF2 (rekommenderas för minsta filstorlek), WOFF, TTF och OTF.
Referera deklarerade typsnitt med familjenamn i textlagerstilar:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid inkluderar plattformsspecifika typsnitt-reservkedjor för att säkerställa konsekvent rendering över olika miljöer. Om ett specificerat typsnitt är otillgängligt faller renderaren tillbaka till systemtypsnitt som matchar samma klassificering (serif, sans-serif, monospace).
Rendervid stöder ett brett utbud av utmatningsformat och codecs för både video- och bildrendering.
| Format | Codec | Filändelse | Bäst För |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maximal kompatibilitet – webb, mobil, sociala medier |
| WebM | VP8 / VP9 | .webm | Webbinbäddning med mindre filstorlekar |
| MOV | ProRes | .mov | Professionella redigeringsarbetsflöden, förlustfri kvalitet |
| GIF | – | .gif | Korta animationer, social delning, e-post |
| MP4 | H.265 / HEVC | .mp4 | Nyare enheter, 50% mindre filer än H.264 vid samma kvalitet |
| WebM | AV1 | .webm | Nästa generations codec, bästa kompressionseffektivitet |
| Format | Filändelse | Bäst För |
|---|---|---|
| PNG | .png | Förlustfri kvalitet, stöd för transparens |
| JPEG | .jpg | Fotografier, mindre filstorlekar |
| WebP | .webp | Modern webb, bästa balansen av kvalitet och storlek |
| Förinställning | Beskrivning |
|---|---|
draft | Snabb rendering med reducerad kvalitet – idealisk för förhandsgranskning |
standard | Balanserad kvalitet och filstorlek – bra för de flesta användningsfall |
high | Högre bithastighet och kvalitet – för slutliga leveranser |
lossless | Maximal kvalitet utan kompressionsartefakter |
Rendervid stöder upplösningar från små miniatyrer upp till 8K:
| Upplösning | Dimensioner | Vanlig Användning |
|---|---|---|
| SD | 640 x 480 | Miniatyrer, förhandsgranskningar |
| HD | 1280 x 720 | Webbvideo, e-post |
| Full HD | 1920 x 1080 | YouTube, presentationer |
| 2K | 2560 x 1440 | Högkvalitativa skärmar |
| 4K UHD | 3840 x 2160 | Professionell, broadcast |
| 8K | 7680 x 4320 | Maximal upplösning, framtidssäker |
Bildfrekvenser från 1 fps (bildspel) till 120 fps (slow motion, spelinnehåll) stöds. Vanliga val är 24 fps (filmisk), 30 fps (webb/socialt) och 60 fps (mjuk rörelse).
Här är en fullständig Rendervid-mall som demonstrerar mallsystemets nyckelfunktioner som arbetar tillsammans: dynamiska inmatningar, flera scener med övergångar, lagerkompositioner, animationer med easing, typsnitt och visuella effekter.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Product Name",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "The future is here."
},
{
"key": "heroImage",
"type": "url",
"label": "Hero Image",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Primary Color",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Learn More"
}
],
"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": "Introducing",
"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"
}
]
}
]
}
]
}
}
Denna mall skapar en 20-sekunders produktlansering-video med tre scener: en typografisk intro med förskjutna textanimationer, en produktvisning med en flytande bild och skrivmaskineffekt, och en avslutande call-to-action-scen med en pulserande knapp. All text, färger och bilder drivs av mallvariabler, vilket gör den helt återanvändbar.
Rendervid-mallar är JSON-filer som definierar strukturen, innehållet, animationerna och utmatningsinställningarna för en video eller bild. Varje mall inkluderar en utmatningskonfiguration (dimensioner, fps, varaktighet), inmatningsdefinitioner för dynamiska variabler, en komposition med scener och lager, samt valfria typsnitt och anpassade komponentkonfigurationer.
Mallvariabler använder {{variableName}}-syntaxen. Du definierar inmatningar i mallens inputs-array med en nyckel, typ (string, number, boolean, color, url, array), etikett, beskrivning och standardvärde. Vid renderingstillfället ersätts dessa variabler med faktiska värden, vilket gör mallarna återanvändbara och dynamiska.
Rendervid inkluderar 40+ inbyggda animationsförinställningar organiserade i fyra kategorier: entréanimationer (fadeIn, slideIn, scaleIn, bounceIn, etc.), exitanimationer (fadeOut, slideOut, zoomOut, etc.), betoningsanimationer (pulse, shake, bounce, swing, heartbeat, etc.) och helt anpassningsbara keyframe-animationer med 30+ easing-funktioner.
Rendervid erbjuder 17 scenövergångstyper: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris och crosszoom. Varje övergång kan konfigureras med varaktighets- och riktningsparametrar.
Rendervid stöder flera utmatningsformat inklusive MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF för video, och PNG, JPEG, WebP för bilder. Avancerade codec som H.265/HEVC och AV1 stöds också. Upplösningen går upp till 8K (7680x4320) med bildfrekvenser från 1 till 120 fps.
Ja, Rendervid stöder 100+ inbyggda Google Fonts och anpassad typsnittsinläsning från URL:er i WOFF2-, WOFF-, TTF- och OTF-format. Du kan specificera typsnittstjocklekar från 100-900 och konfigurera plattformsspecifika reservalternativ för kompatibilitet mellan olika miljöer.
Vi hjälper företag som ditt att utveckla smarta chatbotar, MCP-servrar, AI-verktyg eller andra typer av AI-automatisering för att ersätta människor i repetitiva uppgifter i din organisation.
Utforska alla Rendervid-komponenter: 8 inbyggda lagertyper (text, bild, video, form, ljud, grupp, lottie, anpassad), färdiga React-komponenter, den visuella mal...
Distribuera Rendervid var som helst: webbläsarbaserad rendering för förhandsvisningar, Node.js för batchbearbetning på serversidan, eller molnrendering på AWS L...
Lär dig hur du integrerar Rendervid med AI-agenter med hjälp av MCP (Model Context Protocol). Generera videor från naturliga språkkommandon med Claude Code, Cur...