Kattava opas Rendervid-mallijärjestelmään. Opi luomaan JSON-videomalleja, käyttämään dynaamisia muuttujia {{muuttuja}}-syntaksilla, konfiguroimaan yli 40 animaatioesiasetusta, 17 kohtaussiirtymää ja yli 30 easing-funktiota.
Rendervid on ohjelmoitava videorendering-moottori, joka on rakennettu deklaratiivisen, JSON-pohjaisen mallijärjestelmän ympärille. Sen sijaan, että muokkaisit videota manuaalisesti aikajanalla, määrität jokaisen videosi osa-alueen – kohtaukset, kerrokset, animaatiot, siirtymät ja tulostusasetukset – yhdessä JSON-dokumentissa. Tämä lähestymistapa tekee malleista tilattomia, versionhallittavia ja koneellisesti generoitavia, mikä avaa oven tekoälypohjaiseen videotuotantoon, eräkäsittelyputkiin ja täysin automatisoiduille sisältötyönkuluille.
Tämä opas kattaa täydellisen Rendervid-mallijärjestelmän ylhäältä alas: juuritason konfiguraation, tulostusasetukset, muuttuja- ja syöttöjärjestelmän, kohtaukset ja koostumuksen, kaikki kahdeksan kerroslajia, yli 40 animaatioesiasetusta, yli 30 easing-funktiota, 17 kohtaussiirtymää, visuaaliset efektit, fonttikonfiguraation ja tulosteformaatit.
Jokainen Rendervid-malli on JSON-objekti, jossa on hyvin määritelty joukko juuritason kenttiä. Tässä on täydellisen mallin runko:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Kenttä | Tyyppi | Pakollinen | Kuvaus |
|---|---|---|---|
name | string | Kyllä | Ihmisluettava mallin tunniste |
output | object | Kyllä | Video- tai kuvatulosteen konfiguraatio (mitat, fps, kesto, formaatti) |
inputs | array | Ei | Dynaamiset syötemääritykset mallimuuttujille |
composition | object | Kyllä | Sisältää scenes-taulukon, joka määrittelee kaiken visuaalisen sisällön |
fonts | object | Ei | Google Fontit ja mukautetut fonttimääritykset |
customComponents | object | Ei | Rekisteröidyt mukautetut kerroskomponentit |
defaults | object | Ei | Oletusarvot, joita sovelletaan kaikkiin kerroksiin, ellei niitä ohiteta |
name-kenttä on organisatorisiin tarkoituksiin – se ei vaikuta renderöintiin. output- ja composition-kentät ovat kaksi pilaria, jotka jokaisessa mallissa on oltava. Kaikki muu on valinnaista, mutta avaa tehokkaita ominaisuuksia.
output-objekti ohjaa lopullista renderöityä tiedostoa: sen formaattia, mittoja, ruutunopeutta, kestoa ja taustaväriä.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Kenttä | Tyyppi | Oletus | Kuvaus |
|---|---|---|---|
type | string | "video" | Tulostetyyppi: "video" tai "image" |
width | number | 1920 | Leveys pikseleinä (jopa 7680 8K:lle) |
height | number | 1080 | Korkeus pikseleinä (jopa 4320 8K:lle) |
fps | number | 30 | Ruutua sekunnissa (1-120) |
duration | number | – | Kokonaiskesto sekunteina |
backgroundColor | string | "#000000" | Taustaväri heksana, RGB:nä tai nimetty väri |
Tässä on tulostuskonfiguraatioita suosituille formaateille:
1080p Full HD (YouTube, yleiskäyttö):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 pysty):
{
"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 / sosiaalisen median jakokuva:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Kuvatulosteelle fps ja duration jätetään huomiotta – renderöijä kaappaa yhden ruudun.
Syöte- ja muuttujajärjestelmä tekee Rendervid-malleista uudelleenkäytettäviä. Sen sijaan, että kovakoodaisit tekstiä, värejä tai URL-osoitteita malliisi, määrität syötteet ja viittaat niihin käyttämällä {{muuttujanNimi}}-syntaksia missä tahansa mallissa.
Syötteet määritellään ylätason inputs-taulukossa. Jokainen syöte-objekti kuvaa yhtä muuttujaa:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Otsikko",
"description": "Pääotsikkoteksti, joka näytetään intro-kohtauksessa",
"required": true,
"default": "Hei maailma"
},
{
"key": "brandColor",
"type": "color",
"label": "Brändiväri",
"description": "Ensisijainen brändiväri, jota käytetään taustoissa ja korostuksissa",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Näytä alaotsikko",
"description": "Alaotsikon näkyvyyden vaihto",
"required": false,
"default": true
}
]
}
| Kenttä | Tyyppi | Pakollinen | Kuvaus |
|---|---|---|---|
key | string | Kyllä | Yksilöllinen tunniste, jota käytetään {{key}}-viitteissä |
type | string | Kyllä | Datatyyppi: string, number, boolean, color, url, array |
label | string | Ei | Ihmisluettava otsikko käyttöliittymän renderöintiin |
description | string | Ei | Selitys siitä, mitä tämä syöte ohjaa |
required | boolean | Ei | Onko syöte annettava renderöinnin aikana |
default | any | Ei | Varatoimi-arvo, jos syötettä ei anneta |
string – Vapaamuotoinen teksti. Käytä otsikoille, kuvauksille, kuvateksteille tai millä tahansa tekstisisällölle.number – Numeeriset arvot. Käytä kestoille, kooille, sijainnille, läpinäkyvyystasoille tai määrille.boolean – Tosi/epätosi-kytkimet. Käytä ehdolliseen näkyvyyteen, ominaisuuslippuihin tai päälle/pois-kytkimiin.color – Väriarvot heksana (#FF5733), RGB:nä (rgb(255,87,51)) tai nimetyssä formaatissa. Käytä taustoille, tekstiväreille ja korostuksille.url – Kelvolliset URL-merkkijonot. Käytä kuvalähteitä, videolähteitä, linkkejä ja fontti-URL-osoitteita varten.array – Arvoluettelot. Käytä kuvagallerioille, tekstiluetteloille, diasäällölle tai millä tahansa toistuvalle datalle.Kun syötteet on määritelty, viittaa niihin missä tahansa mallissa käyttämällä kaksoisaaltosulkeita:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Muuttujat ratkaistaan renderöinnin aikana. Kun kutsut Rendervid API:a tai CLI:tä, välität todelliset arvot:
{
"title": "Kesäale 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Tässä on täydellinen malli, jossa useita syötetyyppejä toimii yhdessä:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Tuotteen nimi",
"description": "Mainostettavan tuotteen nimi",
"required": true,
"default": "Tuote"
},
{
"key": "price",
"type": "number",
"label": "Hinta",
"description": "Videossa näytettävä tuotteen hinta",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "Tuotekuvan URL",
"description": "URL tuotekuvaan",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Korostusväri",
"description": "Väri, jota käytetään CTA-painikkeissa ja korostuksissa",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Näytä alennusmerkki",
"description": "Näytetäänkö alennusmerkin peitto",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Tuotteen ominaisuudet",
"description": "Luettelo ominaisuuskohdista",
"required": false,
"default": ["Ominaisuus 1", "Ominaisuus 2", "Ominaisuus 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 }
}
]
}
]
}
}
Tämä yksittäinen malli voi generoida tuhansia ainutlaatuisia tuotevideoita yksinkertaisesti muuttamalla syötearvoja renderöinnin aikana – malliin ei tarvitse tehdä muutoksia.
composition-objekti on paikka, jossa videosi sisältö sijaitsee. Se sisältää scenes-taulukon, ja jokainen kohtaus edustaa videon erillistä segmenttiä omalla kestollaan, kerroksillaan ja siirtymällään.
{
"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": [ ... ]
}
]
}
}
| Kenttä | Tyyppi | Pakollinen | Kuvaus |
|---|---|---|---|
name | string | Ei | Kohtauksen tunniste (luettavuutta ja debuggausta varten) |
duration | number | Kyllä | Kohtauksen pituus sekunteina |
transition | object | Ei | Siirtymäefekti tähän kohtaukseen siirryttäessä edellisestä |
layers | array | Kyllä | Järjestetty taulukko kerrosobjekteista, jotka renderöidään alhaalta ylös |
Kohtaukset toistuvat järjestyksessä. Videon kokonaiskesto on kaikkien kohtausten kestojen summa (miinus mahdolliset siirtymien päällekkäisyydet). Kohtauksen kerrokset renderöidään taulukkojärjestyksessä – ensimmäinen kerros on visuaalisen pinon alareunassa ja viimeinen kerros päällimmäisenä.
Jos siirtymää ei ole määritetty, kohtaus käyttää oletuksena kovaa cut-siirtymää.
Rendervid tukee kahdeksaa erillistä kerroslajia. Jokainen kerrostyyppi palvelee tiettyä tarkoitusta ja hyväksyy oman joukon ominaisuuksia jaetun peruskonfiguraation lisäksi.
Jokainen kerros tyypistä riippumatta tukee näitä perusominaisuuksia:
{
"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": ""
}
| Ominaisuus | Tyyppi | Oletus | Kuvaus |
|---|---|---|---|
position | object | {x: 0, y: 0} | X/Y-koordinaatit pikseleinä |
size | object | – | Leveys ja korkeus pikseleinä |
rotation | number | 0 | Kiertokulma asteina |
scale | object | {x: 1, y: 1} | Skaalauskertoin X- ja Y-akseleille |
anchor | object | {x: 0.5, y: 0.5} | Ankkuripiste muunnoksille (0-1 alue, 0.5 = keskellä) |
opacity | number | 1 | Kerroksen läpinäkyvyys (0 = läpinäkyvä, 1 = läpinäkymätön) |
blendMode | string | "normal" | CSS-sekoitustila koostamiseen |
from | number | 0 | Aloitusaika sekunteina (suhteessa kohtauksen alkuun) |
duration | number | -1 | Kerroksen kesto sekunteina (-1 = koko kohtauksen kesto) |
filters | array | [] | Taulukko visuaalisia suodatinobjekteja |
style | object | {} | Lisä CSS-tyyppiset tyyli-ominaisuudet |
className | string | "" | CSS-luokkanimi mukautetulle tyylille |
text – Renderöi tyyliteltyä tekstiä täydellä hallinnalla fonttiin, kokoon, väriin, tasaukseen, rivikorkeuteen, kirjainväliin, tekstivarjoihin ja muuhun. Tukee {{muuttuja}}-syntaksia dynaamiselle sisällölle.
image – Näyttää staattisia kuvia URL-osoitteista tai paikallisista poluista. Tukee rajausta, object-fit-tiloja, reunan sädettä ja kuvasuodattimia.
video – Upottaa videoklippejä kohtaukseen. Tukee trimmaamista (alku/loppu), äänenvoimakkuuden säätöä, toistonnopeutta, silmukoita ja mykistämistä.
shape – Renderöi geometrisiä primitiivejä: suorakulmioita, ympyröitä, ellipsejä, viivoja ja monikulmioita. Tukee täyttöä, reunaviivaa, reunan sädettä, liukuvärejä ja varjoja.
audio – Lisää ääniraitoja kohtaukseen. Tukee äänenvoimakkuutta, sisään-/uloshäivytystä, trimmausta ja silmukoita. Äänikerroksilla ei ole visuaalista esitystä.
group – Säiliökerros, joka sisältää alikerroksia. Ryhmät mahdollistavat muunnosten, animaatioiden ja efektien soveltamisen useisiin kerroksiin kerralla.
lottie – Renderöi Lottie/Bodymovin JSON-animaatioita. Tukee toistonopeutta, silmukoita ja segmenttien hallintaa tiettyjen ruutuvälivärien toistamiseen.
custom – Lataa rekisteröityjä mukautettuja komponentteja, jotka on määritelty customComponents-kentässä. Käytä tätä uudelleenkäytettäville, parametrisoiduille kerrosmalleille.
Yksityiskohtaisesta konfiguraatiosta jokaiselle kerrostyypille, mukaan lukien kaikki saatavilla olevat ominaisuudet ja koodiesimerkit, katso Rendervid Components Reference .
Rendervid sisältää yli 40 sisäänrakennettua animaatioesiasetusta, jotka on järjestetty neljään kategoriaan: entrance (sisääntulo), exit (poistuminen), emphasis (korostus) ja keyframe (avainkehys). Animaatiot liitetään mihin tahansa kerrokseen ja ohjaavat, miten kerros ilmestyy, katoaa tai käyttäytyy sen elinkaaren aikana.
{
"type": "text",
"text": "Animoitu otsikko",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Kenttä | Tyyppi | Oletus | Kuvaus |
|---|---|---|---|
type | string | – | Animaatiokategoria: entrance, exit, emphasis, keyframe |
effect | string | – | Esiasetuksen nimi (esim. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Kesto ruutuina |
delay | number | 0 | Viive ennen animaation alkua, ruutuina |
easing | string | "ease" | Easing-funktion nimi |
loop | number | 0 | Silmukoiden määrä (0 = ei silmukkaa, -1 = ääretön) |
alternate | boolean | false | Käännä suunta vuorottelevissa silmukoissa |
Sisääntulo-animaatiot ohjaavat, miten kerros ilmestyy ruudulle. Ne suoritetaan kerran, kun kerroksen aloitusaika saavutetaan.
| Esiasetus | Kuvaus |
|---|---|
fadeIn | Yksinkertainen läpinäkyvyyden häivytys 0:sta 1:een |
fadeInUp | Häivyttyy sisään liukuessaan ylöspäin |
fadeInDown | Häivyttyy sisään liukuessaan alaspäin |
fadeInLeft | Häivyttyy sisään liukuessaan vasemmalta |
fadeInRight | Häivyttyy sisään liukuessaan oikealta |
slideInUp | Liukuu sisään kehyksen alta |
slideInDown | Liukuu sisään kehyksen yläpuolelta |
slideInLeft | Liukuu sisään vasemmasta reunasta |
slideInRight | Liukuu sisään oikeasta reunasta |
scaleIn | Skaalautuu 0:sta täyteen kokoon |
zoomIn | Zoomaa sisään pienemmästä skaalauksesta lievällä ylityksellä |
rotateIn | Kiertää paikalleen siirtymäkulmasta |
bounceIn | Pomppii paikalleen elastisella ylityksellä |
flipInX | 3D-käännös X-akselilla (vaakasuora käännös) |
flipInY | 3D-käännös Y-akselilla (pystysuora käännös) |
typewriter | Merkit ilmestyvät yksi kerrallaan (tekstikerrokset) |
revealLeft | Peitteen paljastus liukuu vasemmalta |
revealRight | Peitteen paljastus liukuu oikealta |
revealUp | Peitteen paljastus liukuu ylöspäin |
revealDown | Peitteen paljastus liukuu alaspäin |
Poistumisanimaatiot ohjaavat, miten kerros katoaa. Ne suoritetaan kerroksen keston lopussa.
| Esiasetus | Kuvaus |
|---|---|
fadeOut | Yksinkertainen läpinäkyvyyden häivytys 1:stä 0:aan |
slideOutUp | Liukuu ulos kehyksen yläreunasta |
slideOutDown | Liukuu ulos kehyksen alareunasta |
scaleOut | Skaalautuu täydestä koosta 0:aan |
zoomOut | Zoomaa ulos pienempään skaalaukseen ja häivyttyy |
rotateOut | Kiertää ulos paikalta siirtymäkulmaan |
bounceOut | Pomppii ulospäin elastisella ylityksellä ennen katoamista |
flipOutX | 3D-käännös ulos X-akselilla |
flipOutY | 3D-käännös ulos Y-akselilla |
Korostusanimaatiot kiinnittävät huomion kerrokseen sen pysyessä näkyvissä. Ne toimivat hyvin silmukoinnin kanssa.
| Esiasetus | Kuvaus |
|---|---|
pulse | Rytminen skaalauspulssi (kasvaa ja kutistuu) |
shake | Nopea vaakasuora ravistelu |
bounce | Pystysuora pomppiminen |
swing | Heilurimainen heilahtava kierto |
wobble | Epäkeskinen huojunta yhdistäen kierron ja siirtymän |
flash | Nopeat läpinäkyvyyden välähdykset |
rubberBand | Elastinen venytys ja napsautusefekti |
heartbeat | Kaksois-pulssi sydämenlyöntirytmi |
float | Lempeä kelluminen ylös-ja-alas-liike |
spin | Jatkuva 360-asteen kierto |
Täydelliseen luovaan hallintaan keyframe-animaatiot antavat sinun määritellä mukautettuja ruutu-ruudulta-ominaisuusmuutoksia:
{
"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-animaatiot voivat animoida mitä tahansa numeerista ominaisuutta: opacity, x, y, rotation, scaleX, scaleY ja muuta. Jokainen keyframe määrittää ruudun numeron ja ominaisuusarvot kyseisessä ruudussa. Renderöijä interpoloi keyframejen välillä käyttäen määritettyä easing-funktiota.
Yhdellä kerroksella voi olla useita animaatioita. Esimerkiksi sisääntulo-animaatio, jota seuraa korostussilmukka ja sitten poistumisanimaatio:
{
"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-funktiot ohjaavat muutosnopeutta animaation aikana määrittäen, tuntuuko liike lineaariselta, pehmeältä, pomppivalta vai elastiselta. Rendervid sisältää yli 30 sisäänrakennettua easing-funktiota.
| Funktio | Kuvaus |
|---|---|
linear | Vakionopeus alusta loppuun, ei kiihtyvyyttä |
ease | Oletus CSS-tyyppinen easing lempeällä kiihtyvyydellä ja hidastuvuudella |
easeIn | Alkaa hitaasti, kiihtyy loppua kohti |
easeOut | Alkaa nopeasti, hidastuu loppua kohti |
easeInOut | Kiihtyy ensimmäisellä puoliskolla, hidastuu toisella |
| Funktio | Kuvaus |
|---|---|
easeInQuad | Kvadraattinen kiihtyvyys (t^2) |
easeOutQuad | Kvadraattinen hidastuvuus |
easeInOutQuad | Kvadraattinen kiihtyvyys ja sitten hidastuvuus |
| Funktio | Kuvaus |
|---|---|
easeInCubic | Kuutiollinen kiihtyvyys (t^3) – korostuneempi kuin kvadraattinen |
easeOutCubic | Kuutiollinen hidastuvuus – pehmeä ja luonnollisen tuntuinen pysähdys |
easeInOutCubic | Kuutiollinen ease in ja out – yleisimmin käytetty easing |
| Funktio | Kuvaus |
|---|---|
easeInQuart | Kvarttinen kiihtyvyys (t^4) |
easeOutQuart | Kvarttinen hidastuvuus |
easeInOutQuart | Kvarttinen ease in ja out |
| Funktio | Kuvaus |
|---|---|
easeInQuint | Kvintillinen kiihtyvyys (t^5) – erittäin terävä alku |
easeOutQuint | Kvintillinen hidastuvuus – erittäin terävä pysähdys |
easeInOutQuint | Kvintillinen ease in ja out |
| Funktio | Kuvaus |
|---|---|
easeInSine | Sinipohjainen kiihtyvyys – lempeimmät easing-käyrät |
easeOutSine | Sinipohjainen hidastuvuus |
easeInOutSine | Sinipohjainen ease in ja out |
| Funktio | Kuvaus |
|---|---|
easeInExpo | Eksponentiaalinen kiihtyvyys – lähes tasainen ja sitten terävä |
easeOutExpo | Eksponentiaalinen hidastuvuus – terävä ja sitten lähes tasainen |
easeInOutExpo | Eksponentiaalinen ease in ja out |
| Funktio | Kuvaus |
|---|---|
easeInCirc | Ympyräpohjainen kiihtyvyyskäyrä |
easeOutCirc | Ympyräpohjainen hidastuvuuskäyrä |
easeInOutCirc | Ympyräpohjainen ease in ja out |
| Funktio | Kuvaus |
|---|---|
easeInBack | Vetää hieman taaksepäin ennen eteenpäin kiihtymistä (ennakkointi) |
easeOutBack | Ylittää kohteen ja sitten asettuu takaisin (ylitys) |
easeInOutBack | Ennakkointi sisääntulossa, ylitys ulosmenossa |
| Funktio | Kuvaus |
|---|---|
easeInElastic | Elastinen huojunta kiihtyvyydessä – jousen kaltainen kiertyminen |
easeOutElastic | Elastinen huojunta hidastuvuudessa – jousen kaltainen napsahdus |
easeInOutElastic | Elastinen molemmissa päissä |
| Funktio | Kuvaus |
|---|---|
easeInBounce | Pomppiva efekti sisääntulossa – kuin pallo pudotettu käänteisesti |
easeOutBounce | Pomppiva efekti ulostulossa – kuin pallo osuu maahan |
easeInOutBounce | Pomppiva molemmissa päissä |
easeOutCubic tai easeOutQuart luonnollisen tuntuisille sisääntuloilleeaseOutElastic tai easeOutBack leikkisään ylitykseeneaseInOutSine lempeään, jatkuvaan liikkeeseeneaseInExpo rakentamiseen, easeOutExpo napakkaisiin pysähdyksiineaseOutBounce painovoiman kaltaisiin efekteihinSiirtymät ohjaavat, miten yksi kohtaus virtaa seuraavaan. Rendervid tarjoaa 17 siirtymatyyppiä yksinkertaisista leikkauksista elokuvallisiin 3D-efekteihin.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
transition-objekti sijoitetaan saapuvaan kohtaukseen (kohtaus, johon siirrytään). direction-ominaisuus koskee vain suunnallisia siirtymiä, kuten slide, wipe ja push.
| Siirtymä | Kuvaus |
|---|---|
cut | Välitön vaihto ilman visuaalista efektiä (oletus) |
fade | Ristihäivytys kohtausten välillä – poistuva kohtaus häivyttyy ulos samalla kun saapuva kohtaus häivyttyy sisään |
zoom | Zoomaa poistuvaan kohtaukseen samalla kun saapuva kohtaus ilmestyy |
slide | Saapuva kohtaus liukuu poistuvan kohtauksen päälle konfiguroitavasta suunnasta (vasen, oikea, ylös, alas) |
wipe | Kova reunainen pyyhkäisy paljastaa saapuvan kohtauksen liikkuen kehyksen poikki annetussa suunnassa |
push | Saapuva kohtaus työntää poistuvan kohtauksen pois ruudulta määritettyyn suuntaan |
rotate | Poistuva kohtaus kiertää pois samalla kun saapuva kohtaus kiertää sisään |
flip | 3D-käännössiirtymä – kehys kääntyy kuin kortti paljastaakseen seuraavan kohtauksen |
blur | Poistuva kohtaus sumenee samalla kun saapuva kohtaus terävöityy tarkennukseen |
circle | Ympyrämainen peite laajenee keskustasta (tai määritetystä pisteestä) paljastaakseen seuraavan kohtauksen |
glitch | Digitaalinen häiriöefekti kromaattisella aberraatiolla ja siirtymällä |
dissolve | Pikselitason liukeneminen, jossa yksittäiset pikselit siirtyvät satunnaisesti kohtausten välillä |
cube | 3D-kuution kierto – kohtaukset ovat kuution vierekkäisillä pinnoilla |
swirl | Spiraalivääristymä, joka pyörittää poistuvan kohtauksen saapuvaan kohtaukseen |
diagonal-wipe | Diagonaalinen kova reunainen pyyhkäisy liikkuen yhdestä kulmasta vastakkaiseen |
iris | Ympyrämainen iiris, joka avautuu tai sulkeutuu kuin kameran aukko |
crosszoom | Molemmat kohtaukset zoomaavat samanaikaisesti – poistuva zoomaa sisään, saapuva zoomaa ulos |
Elokuvallinen häivytys pitkällä ristihäivytyksellä:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Liuku oikealta (yleinen peräkkäiselle sisällölle):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
3D-kuution kierto (dynaaminen, moderni tuntuma):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Häiriöefekti (energinen, teknologiasuuntautunut):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Rendervid-kerrokset tukevat erilaisia visuaalisia efektejä suodattimien, sekoitustilojen, varjojen ja muunnosten kautta.
Suodattimet sovelletaan minkä tahansa kerroksen filters-taulukon kautta. Jokainen suodatin on objekti, jossa on type ja 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 }
]
}
| Suodatin | Arvoalue | Kuvaus |
|---|---|---|
blur | 0+ (pikseliä) | Gaussinen sumennus – korkeammat arvot tuottavat enemmän sumennusta |
brightness | 0+ (kerroin) | 0 = musta, 1 = normaali, 2 = kaksinkertainen kirkkaus |
contrast | 0+ (kerroin) | 0 = harmaa, 1 = normaali, 2 = kaksinkertainen kontrasti |
grayscale | 0-1 | 0 = täysi väri, 1 = täysin harmaasävyinen |
hue-rotate | 0-360 (astetta) | Kiertää värejä väripyörän ympäri |
invert | 0-1 | 0 = normaali, 1 = täysin käännetyt värit |
saturate | 0+ (kerroin) | 0 = harmaasävyinen, 1 = normaali, 2 = kaksinkertainen kylläisyys |
sepia | 0-1 | 0 = normaali, 1 = täysi seepiaväri |
blendMode-ominaisuus ohjaa, miten kerros koostuu alla olevien kerrosten kanssa:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Tuetut sekoitustilat: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Teksti- ja muotokerrokset tukevat varjoefektejä style-ominaisuuden kautta:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Suodattimet, sekoitustilat, läpinäkyvyys ja varjot voidaan kaikki yhdistää yhdessä kerroksessa hienostuneisiin visuaalisiin käsittelyihin:
{
"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 tukee sekä Google Fontteja (yli 100 perhettä sisäänrakennettuina) että mukautettuja fontteja, jotka ladataan ulkoisista URL-osoitteista.
Määrittele Google Fontit fonts.google-taulukossa:
{
"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] }
]
}
}
Jokainen fonttiobjekti vaatii:
| Kenttä | Tyyppi | Kuvaus |
|---|---|---|
family | string | Google Font -perheen nimi (tarkka vastaavuus vaaditaan) |
weights | array | Taulukko numeerisista painoista ladattavaksi (100-900) |
Yleiset fonttipainot: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Lataa fontteja ulkoisista URL-osoitteista käyttämällä fonts.custom-taulukkoa:
{
"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"
}
]
}
}
Tuetut fonttiformaatit: WOFF2 (suositeltu pienimmän tiedostokoon vuoksi), WOFF, TTF ja OTF.
Viittaa määritettyihin fontteihin perheen nimellä tekstikerroksen tyyleissä:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid sisältää alustaspesifisiä fonttien varaketjuja varmistaakseen yhdenmukaisen renderöinnin eri ympäristöissä. Jos määritetty fontti ei ole saatavilla, renderöijä käyttää järjestelmäfontteja, jotka vastaavat samaa luokitusta (serif, sans-serif, monospace).
Rendervid tukee laajaa valikoimaa tulosteformaatteja ja koodekkeja sekä video- että kuvarenderöintiin.
| Formaatti | Koodekkeja | Tiedostopääte | Paras käyttökohde |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Maksimaalinen yhteensopivuus – verkko, mobiili, sosiaalinen media |
| WebM | VP8 / VP9 | .webm | Verkkouppotus pienemmillä tiedostokoilla |
| MOV | ProRes | .mov | Ammattimaiset editointityönkulut, häviötön laatu |
| GIF | – | .gif | Lyhyet animaatiot, sosiaalinen jakaminen, sähköposti |
| MP4 | H.265 / HEVC | .mp4 | Uudemmat laitteet, 50% pienemmät tiedostot kuin H.264 samalla laadulla |
| WebM | AV1 | .webm | Seuraavan sukupolven koodekkeja, paras pakkaustehokkuus |
| Formaatti | Tiedostopääte | Paras käyttökohde |
|---|---|---|
| PNG | .png | Häviötön laatu, läpinäkyvyyden tuki |
| JPEG | .jpg | Valokuvat, pienemmät tiedostokoot |
| WebP | .webp | Moderni verkko, paras tasapaino laadun ja koon välillä |
| Esiasetus | Kuvaus |
|---|---|
draft | Nopea renderöinti vähennetyllä laadulla – ihanteellinen esikatseluun |
standard | Tasapainoinen laatu ja tiedostokoko – hyvä useimmille käyttötapauksille |
high | Korkeampi bitrate ja laatu – lopullisille toimituksille |
lossless | Maksimaalinen laatu ilman pakkausartefakteja |
Rendervid tukee resoluutioita pienistä pienoiskuvista 8K:hon:
| Resoluutio | Mitat | Yleinen käyttö |
|---|---|---|
| SD | 640 x 480 | Pienoiskuvat, esikatselut |
| HD | 1280 x 720 | Verkkovideo, sähköposti |
| Full HD | 1920 x 1080 | YouTube, esitykset |
| 2K | 2560 x 1440 | Korkealaatuiset näytöt |
| 4K UHD | 3840 x 2160 | Ammattilainen, lähetys |
| 8K | 7680 x 4320 | Maksimaalinen resoluutio, tulevaisuuden varma |
Ruutunopeudet 1 fps:stä (diaesitykset) 120 fps:ään (hidastettu liike, pelisisältö) tuetaan. Yleiset valinnat ovat 24 fps (elokuvallinen), 30 fps (verkko/sosiaalinen) ja 60 fps (pehmeä liike).
Tässä on täydellinen Rendervid-malli, joka demonstroi mallijärjestelmän keskeisiä ominaisuuksia toimien yhdessä: dynaamiset syötteet, useita kohtauksia siirtymineen, kerrostetut koostumukset, animaatiot easingilla, fontit ja visuaaliset efektit.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Tuotteen nimi",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Iskulause",
"required": true,
"default": "Tulevaisuus on täällä."
},
{
"key": "heroImage",
"type": "url",
"label": "Pääkuva",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Ensisijainen väri",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Toimintakehotus",
"default": "Lue lisää"
}
],
"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": "Esittelyssä",
"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"
}
]
}
]
}
]
}
}
Tämä malli luo 20-sekuntisen tuotelanseerausvideon kolmella kohtauksella: typografinen intro porrastetuilla tekstianimaatioilla, tuote-esittely kelluvalla kuvalla ja kirjoituskoneefektillä sekä päättävä toimintakehotuskohtaus pulsoivalla painikkeella. Kaikki teksti, värit ja kuvat ohjataan mallimuuttujilla, mikä tekee siitä täysin uudelleenkäytettävän.
Rendervid-mallit ovat JSON-tiedostoja, jotka määrittelevät videon tai kuvan rakenteen, sisällön, animaatiot ja tulostusasetukset. Jokainen malli sisältää tulosteen konfiguraation (mitat, fps, kesto), syötemääritykset dynaamisille muuttujille, koostumuksen kohtauksilla ja kerroksilla sekä valinnaiset fontti- ja mukautettujen komponenttien konfiguraatiot.
Mallimuuttujat käyttävät {{muuttujanNimi}}-syntaksia. Määrittelet syötteet mallin inputs-taulukossa avaimella, tyypillä (string, number, boolean, color, url, array), otsikolla, kuvauksella ja oletusarvolla. Renderöinnin aikana nämä muuttujat korvataan todellisilla arvoilla, mikä tekee malleista uudelleenkäytettäviä ja dynaamisia.
Rendervid sisältää yli 40 sisäänrakennettua animaatioesiasetusta, jotka on järjestetty neljään kategoriaan: sisääntulo-animaatiot (fadeIn, slideIn, scaleIn, bounceIn jne.), poistumisanimaatiot (fadeOut, slideOut, zoomOut jne.), korostusanimaatiot (pulse, shake, bounce, swing, heartbeat jne.) ja täysin mukautettavat keyframe-animaatiot yli 30 easing-funktiolla.
Rendervid tarjoaa 17 kohtaussiirtymatyyppiä: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris ja crosszoom. Jokainen siirtymä voidaan konfiguroida keston ja suunnan parametreilla.
Rendervid tukee useita tulosteformaatteja, mukaan lukien MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF videolle ja PNG, JPEG, WebP kuville. Edistyneitä koodekkeja kuten H.265/HEVC ja AV1 tuetaan myös. Resoluutio menee jopa 8K:hon (7680x4320) ja ruutunopeudet 1:stä 120 fps:ään.
Kyllä, Rendervid tukee yli 100 sisäänrakennettua Google Fontia ja mukautettujen fonttien lataamista URL-osoitteista WOFF2-, WOFF-, TTF- ja OTF-formaateissa. Voit määrittää fonttipainot 100-900 ja konfiguroida alustaspesifisiä varalla olevia fontteja ympäristöjen väliseen yhteensopivuuteen.
Autamme kaltaisiasi yrityksiä kehittämään älykkäitä chatbotteja, MCP-palvelimia, AI-työkaluja tai muuntyyppisiä AI-automaatioratkaisuja korvaamaan ihmisiä toistuvissa tehtävissä organisaatiossasi.
Tutustu kaikkiin Rendervid-komponentteihin: 8 sisäänrakennettua kerrostyyppiä (teksti, kuva, video, muoto, ääni, ryhmä, lottie, mukautettu), valmiit React-kompo...
Ota Rendervid käyttöön missä tahansa: selainpohjainen renderöinti esikatseluja varten, Node.js palvelinpuolen eräajoa varten tai pilvirenderöinti AWS Lambdassa,...
Tutustu Rendervid-työkaluun, ilmaiseen avoimen lähdekoodin vaihtoehtoon Remotionille ohjelmoitavaan videon luomiseen. Tekoälyä ensisijaisesti tukeva suunnittelu...