Guida completa al sistema di template Rendervid. Impara a creare template video JSON, utilizzare variabili dinamiche con la sintassi {{variabile}}, configurare oltre 40 preset di animazione, 17 transizioni di scena e oltre 30 funzioni di easing.
Rendervid è un motore di rendering video programmatico costruito attorno a un sistema di template dichiarativo basato su JSON. Invece di modificare manualmente il video in una timeline, definisci ogni aspetto del tuo video – scene, layer, animazioni, transizioni e impostazioni di output – in un singolo documento JSON. Questo approccio rende i template stateless, controllabili tramite versioning e generabili automaticamente, aprendo la strada alla produzione video guidata dall’IA, pipeline di rendering batch e flussi di lavoro di contenuti completamente automatizzati.
Questa guida copre il sistema di template Rendervid completo dall’inizio alla fine: configurazione a livello root, impostazioni di output, il sistema di variabili e input, scene e composizione, tutti gli otto tipi di layer, oltre 40 preset di animazione, oltre 30 funzioni di easing, 17 transizioni di scena, effetti visivi, configurazione dei font e formati di output.
Ogni template Rendervid è un oggetto JSON con un insieme ben definito di campi a livello root. Ecco lo scheletro di un template completo:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Campo | Tipo | Richiesto | Descrizione |
|---|---|---|---|
name | string | Sì | Identificatore del template leggibile dall’utente |
output | object | Sì | Configurazione di output video o immagine (dimensioni, fps, durata, formato) |
inputs | array | No | Definizioni di input dinamici per variabili del template |
composition | object | Sì | Contiene l’array scenes che definisce tutto il contenuto visivo |
fonts | object | No | Dichiarazioni di Google Fonts e font personalizzati |
customComponents | object | No | Componenti layer personalizzati registrati |
defaults | object | No | Valori predefiniti applicati a tutti i layer a meno che non vengano sovrascritti |
Il campo name è per scopi organizzativi – non influisce sul rendering. I campi output e composition sono i due pilastri che ogni template deve avere. Tutto il resto è opzionale ma sblocca potenti capacità.
L’oggetto output controlla il file renderizzato finale: formato, dimensioni, frame rate, durata e colore di sfondo.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Campo | Tipo | Predefinito | Descrizione |
|---|---|---|---|
type | string | "video" | Tipo di output: "video" o "image" |
width | number | 1920 | Larghezza in pixel (fino a 7680 per 8K) |
height | number | 1080 | Altezza in pixel (fino a 4320 per 8K) |
fps | number | 30 | Fotogrammi al secondo (1-120) |
duration | number | – | Durata totale in secondi |
backgroundColor | string | "#000000" | Colore di sfondo come hex, RGB o colore nominato |
Ecco le configurazioni di output per formati popolari:
Full HD 1080p (YouTube, uso generico):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 verticale):
{
"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"
}
Immagine Open Graph / Social Share:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Per l’output immagine, fps e duration vengono ignorati – il renderer cattura un singolo frame.
Il sistema di input e variabili è ciò che rende i template Rendervid riutilizzabili. Invece di codificare rigidamente testo, colori o URL nel template, definisci input e li riferisci usando la sintassi {{nomeVariabile}} ovunque nel template.
Gli input sono dichiarati nell’array inputs di livello superiore. Ogni oggetto input descrive una singola variabile:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Titolo",
"description": "Testo del titolo principale visualizzato nella scena intro",
"required": true,
"default": "Ciao Mondo"
},
{
"key": "brandColor",
"type": "color",
"label": "Colore del Brand",
"description": "Colore principale del brand utilizzato per sfondi e accenti",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Mostra Sottotitolo",
"description": "Attiva/disattiva la visibilità del sottotitolo",
"required": false,
"default": true
}
]
}
| Campo | Tipo | Richiesto | Descrizione |
|---|---|---|---|
key | string | Sì | Identificatore univoco utilizzato nei riferimenti {{key}} |
type | string | Sì | Tipo di dato: string, number, boolean, color, url, array |
label | string | No | Etichetta leggibile per il rendering UI |
description | string | No | Spiegazione di cosa controlla questo input |
required | boolean | No | Se l’input deve essere fornito al momento del rendering |
default | any | No | Valore di fallback se non viene fornito alcun input |
string – Testo libero. Utilizzare per titoli, descrizioni, didascalie o qualsiasi contenuto testuale.number – Valori numerici. Utilizzare per durate, dimensioni, posizioni, livelli di opacità o conteggi.boolean – Interruttori vero/falso. Utilizzare per visibilità condizionale, flag di funzionalità o interruttori on/off.color – Valori di colore in formato hex (#FF5733), RGB (rgb(255,87,51)) o nominato. Utilizzare per sfondi, colori del testo e accenti.url – Stringhe URL valide. Utilizzare per sorgenti di immagini, sorgenti video, link e URL di font.array – Liste di valori. Utilizzare per gallerie di immagini, liste di testo, contenuto di slide o qualsiasi dato ripetuto.Una volta definiti gli input, riferiscili ovunque nel template usando le doppie parentesi graffe:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Le variabili vengono risolte al momento del rendering. Quando chiami l’API o CLI di Rendervid, passi i valori effettivi:
{
"title": "Saldi Estivi 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Ecco un template completo con più tipi di input che lavorano insieme:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nome Prodotto",
"description": "Nome del prodotto promosso",
"required": true,
"default": "Prodotto"
},
{
"key": "price",
"type": "number",
"label": "Prezzo",
"description": "Prezzo del prodotto visualizzato nel video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL Immagine Prodotto",
"description": "URL dell'immagine del prodotto",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Colore Accento",
"description": "Colore utilizzato per pulsanti CTA ed evidenziazioni",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Mostra Badge Saldi",
"description": "Se visualizzare l'overlay del badge saldi",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Caratteristiche Prodotto",
"description": "Elenco di punti elenco delle caratteristiche",
"required": false,
"default": ["Caratteristica 1", "Caratteristica 2", "Caratteristica 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 }
}
]
}
]
}
}
Questo singolo template può generare migliaia di video prodotto unici semplicemente cambiando i valori di input al momento del rendering – nessuna modifica del template necessaria.
L’oggetto composition è dove risiede il contenuto del tuo video. Contiene un array scenes, e ogni scena rappresenta un segmento distinto del video con la propria durata, layer e transizione.
{
"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": [ ... ]
}
]
}
}
| Campo | Tipo | Richiesto | Descrizione |
|---|---|---|---|
name | string | No | Identificatore per la scena (per leggibilità e debugging) |
duration | number | Sì | Lunghezza della scena in secondi |
transition | object | No | Effetto di transizione quando si entra in questa scena dalla precedente |
layers | array | Sì | Array ordinato di oggetti layer renderizzati dal basso verso l’alto |
Le scene vengono riprodotte in sequenza. La durata totale del video è la somma di tutte le durate delle scene (meno eventuali sovrapposizioni di transizione). I layer all’interno di una scena vengono renderizzati nell’ordine dell’array – il primo layer si trova in basso nello stack visivo e l’ultimo layer si trova in alto.
Se non viene specificata alcuna transizione, la scena utilizza un cut netto per impostazione predefinita.
Rendervid supporta otto tipi di layer distinti. Ogni tipo di layer serve uno scopo specifico e accetta il proprio insieme di proprietà oltre alla configurazione di base condivisa.
Ogni layer, indipendentemente dal tipo, supporta queste proprietà di base:
{
"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": ""
}
| Proprietà | Tipo | Predefinito | Descrizione |
|---|---|---|---|
position | object | {x: 0, y: 0} | Coordinate X/Y in pixel |
size | object | – | Larghezza e altezza in pixel |
rotation | number | 0 | Angolo di rotazione in gradi |
scale | object | {x: 1, y: 1} | Moltiplicatore di scala per assi X e Y |
anchor | object | {x: 0.5, y: 0.5} | Punto di ancoraggio per le trasformazioni (intervallo 0-1, 0.5 = centro) |
opacity | number | 1 | Opacità del layer (0 = trasparente, 1 = opaco) |
blendMode | string | "normal" | Modalità di fusione CSS per la composizione |
from | number | 0 | Tempo di inizio in secondi (relativo all’inizio della scena) |
duration | number | -1 | Durata del layer in secondi (-1 = durata completa della scena) |
filters | array | [] | Array di oggetti filtro visivi |
style | object | {} | Proprietà di stile aggiuntive simili a CSS |
className | string | "" | Nome della classe CSS per lo stile personalizzato |
text – Renderizza testo stilizzato con controllo completo su font, dimensione, colore, allineamento, altezza riga, spaziatura lettere, ombre del testo e altro. Supporta la sintassi {{variabile}} per contenuto dinamico.
image – Visualizza immagini statiche da URL o percorsi locali. Supporta ritaglio, modalità object-fit, raggio del bordo e filtri immagine.
video – Incorpora clip video all’interno di una scena. Supporta trimming (inizio/fine), controllo del volume, velocità di riproduzione, loop e muting.
shape – Renderizza primitive geometriche: rettangoli, cerchi, ellissi, linee e poligoni. Supporta riempimento, traccia, raggio del bordo, gradienti e ombre.
audio – Aggiunge tracce audio a una scena. Supporta volume, fade in/out, trimming e loop. I layer audio non hanno rappresentazione visiva.
group – Un layer contenitore che contiene layer figlio. I gruppi consentono di applicare trasformazioni, animazioni ed effetti a più layer contemporaneamente.
lottie – Renderizza animazioni JSON Lottie/Bodymovin. Supporta velocità di riproduzione, loop e controllo dei segmenti per riprodurre intervalli di frame specifici.
custom – Carica componenti personalizzati registrati definiti nel campo customComponents. Utilizzare questo per template di layer riutilizzabili e parametrizzati.
Per la configurazione dettagliata di ogni tipo di layer, incluse tutte le proprietà disponibili ed esempi di codice, vedi il Riferimento Componenti Rendervid .
Rendervid include oltre 40 preset di animazione integrati organizzati in quattro categorie: entrance, exit, emphasis e keyframe. Le animazioni sono collegate a qualsiasi layer e controllano come quel layer appare, scompare o si comporta durante la sua vita.
{
"type": "text",
"text": "Titolo Animato",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Campo | Tipo | Predefinito | Descrizione |
|---|---|---|---|
type | string | – | Categoria animazione: entrance, exit, emphasis, keyframe |
effect | string | – | Nome preset (es. fadeInUp, pulse, bounceOut) |
duration | number | 30 | Durata in frame |
delay | number | 0 | Ritardo prima dell’inizio dell’animazione, in frame |
easing | string | "ease" | Nome della funzione di easing |
loop | number | 0 | Numero di loop (0 = nessun loop, -1 = infinito) |
alternate | boolean | false | Inverte la direzione nei loop alternati |
Le animazioni di entrata controllano come un layer appare sullo schermo. Vengono eseguite una volta quando viene raggiunto il tempo di inizio del layer.
| Preset | Descrizione |
|---|---|
fadeIn | Semplice dissolvenza dell’opacità da 0 a 1 |
fadeInUp | Dissolvenza in entrata mentre scorre verso l’alto |
fadeInDown | Dissolvenza in entrata mentre scorre verso il basso |
fadeInLeft | Dissolvenza in entrata mentre scorre da sinistra |
fadeInRight | Dissolvenza in entrata mentre scorre da destra |
slideInUp | Scorre in entrata dal basso del frame |
slideInDown | Scorre in entrata dall’alto del frame |
slideInLeft | Scorre in entrata dal bordo sinistro |
slideInRight | Scorre in entrata dal bordo destro |
scaleIn | Si ingrandisce da 0 alla dimensione completa |
zoomIn | Zoom in entrata da una scala più piccola con leggero superamento |
rotateIn | Ruota in posizione da un angolo sfalsato |
bounceIn | Rimbalza in posizione con superamento elastico |
flipInX | Rotazione 3D sull’asse X (capovolgimento orizzontale) |
flipInY | Rotazione 3D sull’asse Y (capovolgimento verticale) |
typewriter | I caratteri appaiono uno alla volta (layer di testo) |
revealLeft | Rivelazione mascherata che scorre da sinistra |
revealRight | Rivelazione mascherata che scorre da destra |
revealUp | Rivelazione mascherata che scorre verso l’alto |
revealDown | Rivelazione mascherata che scorre verso il basso |
Le animazioni di uscita controllano come un layer scompare. Vengono eseguite alla fine della durata del layer.
| Preset | Descrizione |
|---|---|
fadeOut | Semplice dissolvenza dell’opacità da 1 a 0 |
slideOutUp | Scorre in uscita attraverso la parte superiore del frame |
slideOutDown | Scorre in uscita attraverso la parte inferiore del frame |
scaleOut | Si riduce dalla dimensione completa a 0 |
zoomOut | Zoom in uscita a una scala più piccola e dissolvenza |
rotateOut | Ruota fuori posizione verso un angolo sfalsato |
bounceOut | Rimbalza verso l’esterno con superamento elastico prima di scomparire |
flipOutX | Rotazione 3D in uscita sull’asse X |
flipOutY | Rotazione 3D in uscita sull’asse Y |
Le animazioni di enfasi attirano l’attenzione su un layer mentre rimane visibile. Funzionano bene con il loop.
| Preset | Descrizione |
|---|---|
pulse | Pulsazione ritmica della scala (cresce e si riduce) |
shake | Scuotimento orizzontale rapido |
bounce | Movimento di rimbalzo verticale |
swing | Rotazione oscillante simile a un pendolo |
wobble | Oscillazione fuori asse che combina rotazione e traslazione |
flash | Lampeggi rapidi dell’opacità |
rubberBand | Effetto di stiramento elastico e scatto |
heartbeat | Ritmo di battito cardiaco a doppia pulsazione |
float | Movimento delicato di fluttuazione su e giù |
spin | Rotazione continua a 360 gradi |
Per un controllo creativo completo, le animazioni keyframe ti permettono di definire cambiamenti di proprietà personalizzati frame per frame:
{
"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"
}
Le animazioni keyframe possono animare qualsiasi proprietà numerica: opacity, x, y, rotation, scaleX, scaleY e altro. Ogni keyframe specifica un numero di frame e i valori delle proprietà in quel frame. Il renderer interpola tra i keyframe utilizzando la funzione di easing specificata.
Un singolo layer può avere più animazioni. Ad esempio, un’animazione di entrata seguita da un loop di enfasi, quindi un’animazione di uscita:
{
"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"
}
]
}
Le funzioni di easing controllano la velocità di cambiamento durante un’animazione, determinando se il movimento sembra lineare, fluido, rimbalzante o elastico. Rendervid include oltre 30 funzioni di easing integrate.
| Funzione | Descrizione |
|---|---|
linear | Velocità costante dall’inizio alla fine, nessuna accelerazione |
ease | Easing predefinito simile a CSS con accelerazione e decelerazione delicate |
easeIn | Inizia lento, accelera verso la fine |
easeOut | Inizia veloce, decelera verso la fine |
easeInOut | Accelera nella prima metà, decelera nella seconda |
| Funzione | Descrizione |
|---|---|
easeInQuad | Accelerazione quadratica (t^2) |
easeOutQuad | Decelerazione quadratica |
easeInOutQuad | Accelerazione quadratica poi decelerazione |
| Funzione | Descrizione |
|---|---|
easeInCubic | Accelerazione cubica (t^3) – più pronunciata del quadratico |
easeOutCubic | Decelerazione cubica – arresto fluido e naturale |
easeInOutCubic | Easing cubico in entrata e uscita – l’easing più comunemente utilizzato |
| Funzione | Descrizione |
|---|---|
easeInQuart | Accelerazione quartica (t^4) |
easeOutQuart | Decelerazione quartica |
easeInOutQuart | Easing quartico in entrata e uscita |
| Funzione | Descrizione |
|---|---|
easeInQuint | Accelerazione quintica (t^5) – inizio molto brusco |
easeOutQuint | Decelerazione quintica – arresto molto brusco |
easeInOutQuint | Easing quintico in entrata e uscita |
| Funzione | Descrizione |
|---|---|
easeInSine | Accelerazione basata sul seno – la curva di easing più delicata |
easeOutSine | Decelerazione basata sul seno |
easeInOutSine | Easing basato sul seno in entrata e uscita |
| Funzione | Descrizione |
|---|---|
easeInExpo | Accelerazione esponenziale – quasi piatto poi brusco |
easeOutExpo | Decelerazione esponenziale – brusco poi quasi piatto |
easeInOutExpo | Easing esponenziale in entrata e uscita |
| Funzione | Descrizione |
|---|---|
easeInCirc | Curva di accelerazione circolare |
easeOutCirc | Curva di decelerazione circolare |
easeInOutCirc | Easing circolare in entrata e uscita |
| Funzione | Descrizione |
|---|---|
easeInBack | Si ritrae leggermente prima di accelerare in avanti (anticipazione) |
easeOutBack | Supera il target poi si riassesta (superamento) |
easeInOutBack | Anticipazione in entrata, superamento in uscita |
| Funzione | Descrizione |
|---|---|
easeInElastic | Oscillazione elastica in accelerazione – caricamento simile a una molla |
easeOutElastic | Oscillazione elastica in decelerazione – scatto simile a una molla |
easeInOutElastic | Elastico su entrambe le estremità |
| Funzione | Descrizione |
|---|---|
easeInBounce | Effetto rimbalzo in entrata – come una palla lasciata cadere al contrario |
easeOutBounce | Effetto rimbalzo in uscita – come una palla che colpisce il suolo |
easeInOutBounce | Rimbalzo su entrambe le estremità |
easeOutCubic o easeOutQuart per entrate dall’aspetto naturaleeaseOutElastic o easeOutBack per superamento giocosoeaseInOutSine per movimento delicato e continuoeaseInExpo per costruzioni, easeOutExpo per arresti scattantieaseOutBounce per effetti simili alla gravitàLe transizioni controllano come una scena fluisce nella successiva. Rendervid fornisce 17 tipi di transizione che vanno da semplici tagli a effetti cinematografici 3D.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
L’oggetto transition è posizionato sulla scena in entrata (la scena verso cui si sta effettuando la transizione). La proprietà direction si applica solo alle transizioni direzionali come slide, wipe e push.
| Transizione | Descrizione |
|---|---|
cut | Cambio istantaneo senza effetto visivo (predefinito) |
fade | Dissolvenza incrociata tra scene – la scena in uscita si dissolve mentre la scena in entrata appare |
zoom | Zoom nella scena in uscita mentre appare la scena in entrata |
slide | La scena in entrata scorre sopra la scena in uscita da una direzione configurabile (sinistra, destra, su, giù) |
wipe | Una pulitura a bordo netto rivela la scena in entrata, muovendosi attraverso il frame nella direzione data |
push | La scena in entrata spinge la scena in uscita fuori schermo nella direzione specificata |
rotate | La scena in uscita ruota via mentre la scena in entrata ruota in posizione |
flip | Transizione a rotazione 3D – il frame si capovolge come una carta per rivelare la scena successiva |
blur | La scena in uscita si sfoca mentre la scena in entrata si mette a fuoco |
circle | Una maschera circolare si espande dal centro (o da un punto specificato) per rivelare la scena successiva |
glitch | Effetto di distorsione glitch digitale con aberrazione cromatica e spostamento |
dissolve | Dissoluzione a livello di pixel dove i singoli pixel passano casualmente tra le scene |
cube | Rotazione cubo 3D – le scene sono su facce adiacenti di un cubo rotante |
swirl | Distorsione a spirale che vortica la scena in uscita nella scena in entrata |
diagonal-wipe | Una pulitura a bordo netto diagonale che si muove da un angolo all’opposto |
iris | Iride circolare che si apre o si chiude come un’apertura della fotocamera |
crosszoom | Entrambe le scene fanno zoom simultaneamente – quella in uscita si ingrandisce, quella in entrata si riduce |
Dissolvenza cinematografica con lunga dissolvenza incrociata:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Scorrimento da destra (comune per contenuto sequenziale):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Rotazione cubo 3D (sensazione dinamica e moderna):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Effetto glitch (energetico, orientato alla tecnologia):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
I layer Rendervid supportano una gamma di effetti visivi attraverso filtri, modalità di fusione, ombre e trasformazioni.
I filtri vengono applicati tramite l’array filters su qualsiasi layer. Ogni filtro è un oggetto con un type e un 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 }
]
}
| Filtro | Intervallo Valori | Descrizione |
|---|---|---|
blur | 0+ (pixel) | Sfocatura gaussiana – valori più alti producono più sfocatura |
brightness | 0+ (moltiplicatore) | 0 = nero, 1 = normale, 2 = luminosità doppia |
contrast | 0+ (moltiplicatore) | 0 = grigio, 1 = normale, 2 = contrasto doppio |
grayscale | 0-1 | 0 = colore pieno, 1 = completamente desaturato |
hue-rotate | 0-360 (gradi) | Ruota i colori intorno alla ruota dei colori |
invert | 0-1 | 0 = normale, 1 = colori completamente invertiti |
saturate | 0+ (moltiplicatore) | 0 = desaturato, 1 = normale, 2 = saturazione doppia |
sepia | 0-1 | 0 = normale, 1 = tono seppia completo |
La proprietà blendMode controlla come un layer si compone con i layer sottostanti:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Modalità di fusione supportate: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
I layer di testo e forma supportano effetti ombra attraverso la proprietà style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtri, modalità di fusione, opacità e ombre possono essere tutti combinati su un singolo layer per trattamenti visivi sofisticati:
{
"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 supporta sia Google Fonts (oltre 100 famiglie integrate) che font personalizzati caricati da URL esterni.
Dichiara i Google Fonts nell’array fonts.google:
{
"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] }
]
}
}
Ogni oggetto font richiede:
| Campo | Tipo | Descrizione |
|---|---|---|
family | string | Nome famiglia Google Font (corrispondenza esatta richiesta) |
weights | array | Array di pesi numerici da caricare (100-900) |
Pesi font comuni: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Carica font da URL esterni utilizzando l’array fonts.custom:
{
"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"
}
]
}
}
Formati font supportati: WOFF2 (raccomandato per dimensione file più piccola), WOFF, TTF e OTF.
Riferisci i font dichiarati per nome famiglia negli stili dei layer di testo:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid include catene di fallback dei font specifiche per piattaforma per garantire un rendering coerente in diversi ambienti. Se un font specificato non è disponibile, il renderer ricorre a font di sistema che corrispondono alla stessa classificazione (serif, sans-serif, monospace).
Rendervid supporta un’ampia gamma di formati di output e codec sia per il rendering video che immagine.
| Formato | Codec | Estensione File | Migliore Per |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Massima compatibilità – web, mobile, social media |
| WebM | VP8 / VP9 | .webm | Incorporamento web con dimensioni file più piccole |
| MOV | ProRes | .mov | Flussi di lavoro di editing professionale, qualità lossless |
| GIF | – | .gif | Animazioni brevi, condivisione social, email |
| MP4 | H.265 / HEVC | .mp4 | Dispositivi più recenti, file 50% più piccoli di H.264 a stessa qualità |
| WebM | AV1 | .webm | Codec di nuova generazione, migliore efficienza di compressione |
| Formato | Estensione File | Migliore Per |
|---|---|---|
| PNG | .png | Qualità lossless, supporto trasparenza |
| JPEG | .jpg | Fotografie, dimensioni file più piccole |
| WebP | .webp | Web moderno, miglior equilibrio tra qualità e dimensione |
| Preset | Descrizione |
|---|---|
draft | Rendering veloce con qualità ridotta – ideale per anteprime |
standard | Qualità e dimensione file bilanciati – buono per la maggior parte dei casi d’uso |
high | Bitrate e qualità più elevati – per deliverable finali |
lossless | Qualità massima senza artefatti di compressione |
Rendervid supporta risoluzioni da piccole miniature fino a 8K:
| Risoluzione | Dimensioni | Uso Comune |
|---|---|---|
| SD | 640 x 480 | Miniature, anteprime |
| HD | 1280 x 720 | Video web, email |
| Full HD | 1920 x 1080 | YouTube, presentazioni |
| 2K | 2560 x 1440 | Display di alta qualità |
| 4K UHD | 3840 x 2160 | Professionale, broadcast |
| 8K | 7680 x 4320 | Risoluzione massima, a prova di futuro |
Sono supportati frame rate da 1 fps (slideshow) a 120 fps (slow motion, contenuto gaming). Le scelte comuni sono 24 fps (cinematografico), 30 fps (web/social) e 60 fps (movimento fluido).
Ecco un template Rendervid completo che dimostra le caratteristiche chiave del sistema di template che lavorano insieme: input dinamici, scene multiple con transizioni, composizioni stratificate, animazioni con easing, font ed effetti visivi.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nome Prodotto",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Tagline",
"required": true,
"default": "Il futuro è qui."
},
{
"key": "heroImage",
"type": "url",
"label": "Immagine Hero",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Colore Primario",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Call to Action",
"default": "Scopri di Più"
}
],
"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": "Presentiamo",
"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"
}
]
}
]
}
]
}
}
Questo template crea un video di lancio prodotto di 20 secondi con tre scene: un’intro tipografica con animazioni di testo scaglionate, una vetrina del prodotto con un’immagine fluttuante ed effetto macchina da scrivere, e una scena finale di call-to-action con un pulsante pulsante. Tutto il testo, i colori e le immagini sono guidati da variabili del template, rendendolo completamente riutilizzabile.
I template Rendervid sono file JSON che definiscono la struttura, il contenuto, le animazioni e le impostazioni di output di un video o di un'immagine. Ogni template include una configurazione di output (dimensioni, fps, durata), definizioni di input per variabili dinamiche, una composizione con scene e layer, e configurazioni opzionali di font e componenti personalizzati.
Le variabili dei template utilizzano la sintassi {{nomeVariabile}}. Si definiscono gli input nell'array inputs del template con una chiave, tipo (string, number, boolean, color, url, array), etichetta, descrizione e valore predefinito. Al momento del rendering, queste variabili vengono sostituite con valori effettivi, rendendo i template riutilizzabili e dinamici.
Rendervid include oltre 40 preset di animazione integrati organizzati in quattro categorie: animazioni di entrata (fadeIn, slideIn, scaleIn, bounceIn, ecc.), animazioni di uscita (fadeOut, slideOut, zoomOut, ecc.), animazioni di enfasi (pulse, shake, bounce, swing, heartbeat, ecc.) e animazioni keyframe completamente personalizzabili con oltre 30 funzioni di easing.
Rendervid offre 17 tipi di transizioni di scena: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris e crosszoom. Ogni transizione può essere configurata con parametri di durata e direzione.
Rendervid supporta diversi formati di output tra cui MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF per video, e PNG, JPEG, WebP per immagini. Sono supportati anche codec avanzati come H.265/HEVC e AV1. La risoluzione arriva fino a 8K (7680x4320) con frame rate da 1 a 120 fps.
Sì, Rendervid supporta oltre 100 Google Fonts integrati e il caricamento di font personalizzati da URL nei formati WOFF2, WOFF, TTF e OTF. È possibile specificare pesi del font da 100 a 900 e configurare fallback specifici per piattaforma per la compatibilità tra diversi ambienti.
Aiutiamo aziende come la tua a sviluppare chatbot intelligenti, server MCP, strumenti AI o altri tipi di automazione AI per sostituire l'uomo in compiti ripetitivi nella tua organizzazione.
Esplora tutti i componenti Rendervid: 8 tipi di layer integrati (testo, immagine, video, forma, audio, gruppo, lottie, personalizzato), componenti React predefi...
Distribuisci Rendervid ovunque: rendering basato su browser per anteprime, Node.js per elaborazione batch lato server, o rendering cloud su AWS Lambda, Azure Fu...
Scopri come integrare Rendervid con agenti AI utilizzando MCP (Model Context Protocol). Genera video da prompt in linguaggio naturale con Claude Code, Cursor, W...