Automação de IA
Guia completo do sistema de templates Rendervid. Aprenda a criar templates de vídeo JSON, usar variáveis dinâmicas com sintaxe {{variável}}, configurar mais de 40 presets de animação, 17 transições de cena e mais de 30 funções de easing.
O Rendervid é um motor de renderização de vídeo programático construído em torno de um sistema de templates declarativo baseado em JSON. Em vez de editar vídeo manualmente em uma linha do tempo, você define todos os aspectos do seu vídeo – cenas, camadas, animações, transições e configurações de saída – em um único documento JSON. Essa abordagem torna os templates sem estado, controláveis por versão e geráveis por máquina, abrindo portas para produção de vídeo orientada por IA, pipelines de renderização em lote e fluxos de trabalho de conteúdo totalmente automatizados.
Este guia cobre o sistema completo de templates Rendervid de cima a baixo: configuração de nível raiz, configurações de saída, o sistema de variáveis e entradas, cenas e composição, todos os oito tipos de camada, mais de 40 presets de animação, mais de 30 funções de easing, 17 transições de cena, efeitos visuais, configuração de fontes e formatos de saída.
Todo template Rendervid é um objeto JSON com um conjunto bem definido de campos de nível raiz. Aqui está o esqueleto de um template completo:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Campo | Tipo | Obrigatório | Descrição |
|---|---|---|---|
name | string | Sim | Identificador de template legível por humanos |
output | object | Sim | Configuração de saída de vídeo ou imagem (dimensões, fps, duração, formato) |
inputs | array | Não | Definições de entrada dinâmica para variáveis de template |
composition | object | Sim | Contém o array scenes que define todo o conteúdo visual |
fonts | object | Não | Declarações de Google Fonts e fontes personalizadas |
customComponents | object | Não | Componentes de camada personalizados registrados |
defaults | object | Não | Valores padrão aplicados a todas as camadas, a menos que substituídos |
O campo name é para fins organizacionais – não afeta a renderização. Os campos output e composition são os dois pilares que todo template deve ter. Todo o resto é opcional, mas desbloqueia capacidades poderosas.
O objeto output controla o arquivo renderizado final: seu formato, dimensões, taxa de quadros, duração e cor de fundo.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Campo | Tipo | Padrão | Descrição |
|---|---|---|---|
type | string | "video" | Tipo de saída: "video" ou "image" |
width | number | 1920 | Largura em pixels (até 7680 para 8K) |
height | number | 1080 | Altura em pixels (até 4320 para 8K) |
fps | number | 30 | Quadros por segundo (1-120) |
duration | number | – | Duração total em segundos |
backgroundColor | string | "#000000" | Cor de fundo como hex, RGB ou cor nomeada |
Aqui estão configurações de saída para formatos populares:
1080p Full HD (YouTube, uso geral):
{
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 60,
"backgroundColor": "#000000"
}
Instagram Reels / TikTok (9:16 vertical):
{
"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 / Imagem de Compartilhamento Social:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Para saída de imagem, fps e duration são ignorados – o renderizador captura um único quadro.
O sistema de entrada e variáveis é o que torna os templates Rendervid reutilizáveis. Em vez de codificar texto, cores ou URLs diretamente no seu template, você define entradas e as referencia usando a sintaxe {{nomeVariável}} em qualquer lugar do template.
Entradas são declaradas no array inputs de nível superior. Cada objeto de entrada descreve uma única variável:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Título",
"description": "Texto do título principal exibido na cena de introdução",
"required": true,
"default": "Olá Mundo"
},
{
"key": "brandColor",
"type": "color",
"label": "Cor da Marca",
"description": "Cor primária da marca usada para fundos e destaques",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Mostrar Legenda",
"description": "Alternar visibilidade da legenda",
"required": false,
"default": true
}
]
}
| Campo | Tipo | Obrigatório | Descrição |
|---|---|---|---|
key | string | Sim | Identificador único usado em referências {{key}} |
type | string | Sim | Tipo de dados: string, number, boolean, color, url, array |
label | string | Não | Rótulo legível por humanos para renderização de UI |
description | string | Não | Explicação do que esta entrada controla |
required | boolean | Não | Se a entrada deve ser fornecida no momento da renderização |
default | any | Não | Valor de fallback se nenhuma entrada for fornecida |
string – Texto de formato livre. Use para títulos, descrições, legendas ou qualquer conteúdo de texto.number – Valores numéricos. Use para durações, tamanhos, posições, níveis de opacidade ou contagens.boolean – Alternâncias verdadeiro/falso. Use para visibilidade condicional, sinalizadores de recursos ou interruptores liga/desliga.color – Valores de cor em hex (#FF5733), RGB (rgb(255,87,51)) ou formato nomeado. Use para fundos, cores de texto e destaques.url – Strings de URL válidas. Use para fontes de imagem, fontes de vídeo, links e URLs de fonte.array – Listas de valores. Use para galerias de imagens, listas de texto, conteúdo de slides ou quaisquer dados repetidos.Uma vez que as entradas são definidas, referencie-as em qualquer lugar do template usando chaves duplas:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
As variáveis são resolvidas no momento da renderização. Quando você chama a API ou CLI do Rendervid, você passa os valores reais:
{
"title": "Promoção de Verão 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Aqui está um template completo com múltiplos tipos de entrada trabalhando juntos:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nome do Produto",
"description": "Nome do produto sendo promovido",
"required": true,
"default": "Produto"
},
{
"key": "price",
"type": "number",
"label": "Preço",
"description": "Preço do produto exibido no vídeo",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL da Imagem do Produto",
"description": "URL para a imagem do produto",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Cor de Destaque",
"description": "Cor usada para botões de CTA e destaques",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Mostrar Selo de Promoção",
"description": "Se deve exibir o selo de promoção sobreposto",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Recursos do Produto",
"description": "Lista de recursos em tópicos",
"required": false,
"default": ["Recurso 1", "Recurso 2", "Recurso 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 }
}
]
}
]
}
}
Este único template pode gerar milhares de vídeos de produtos únicos simplesmente alterando os valores de entrada no momento da renderização – sem necessidade de modificações no template.
O objeto composition é onde o conteúdo do seu vídeo reside. Ele contém um array scenes, e cada cena representa um segmento distinto do vídeo com sua própria duração, camadas e transição.
{
"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 | Obrigatório | Descrição |
|---|---|---|---|
name | string | Não | Identificador para a cena (para legibilidade e depuração) |
duration | number | Sim | Duração da cena em segundos |
transition | object | Não | Efeito de transição ao entrar nesta cena a partir da anterior |
layers | array | Sim | Array ordenado de objetos de camada renderizados de baixo para cima |
As cenas são reproduzidas em sequência. A duração total do vídeo é a soma de todas as durações de cena (menos qualquer sobreposição de transição). As camadas dentro de uma cena são renderizadas na ordem do array – a primeira camada fica na parte inferior da pilha visual, e a última camada fica no topo.
Se nenhuma transição for especificada, a cena usa um cut (corte) duro por padrão.
O Rendervid suporta oito tipos distintos de camadas. Cada tipo de camada serve a um propósito específico e aceita seu próprio conjunto de propriedades além da configuração base compartilhada.
Toda camada, independentemente do tipo, suporta estas propriedades 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": ""
}
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
position | object | {x: 0, y: 0} | Coordenadas X/Y em pixels |
size | object | – | Largura e altura em pixels |
rotation | number | 0 | Ângulo de rotação em graus |
scale | object | {x: 1, y: 1} | Multiplicador de escala para eixos X e Y |
anchor | object | {x: 0.5, y: 0.5} | Ponto de ancoragem para transformações (faixa 0-1, 0.5 = centro) |
opacity | number | 1 | Opacidade da camada (0 = transparente, 1 = opaco) |
blendMode | string | "normal" | Modo de mesclagem CSS para composição |
from | number | 0 | Tempo de início em segundos (relativo ao início da cena) |
duration | number | -1 | Duração da camada em segundos (-1 = duração completa da cena) |
filters | array | [] | Array de objetos de filtro visual |
style | object | {} | Propriedades de estilo adicionais semelhantes a CSS |
className | string | "" | Nome de classe CSS para estilo personalizado |
text – Renderiza texto estilizado com controle total sobre fonte, tamanho, cor, alinhamento, altura de linha, espaçamento de letras, sombras de texto e muito mais. Suporta a sintaxe {{variável}} para conteúdo dinâmico.
image – Exibe imagens estáticas de URLs ou caminhos locais. Suporta recorte, modos de ajuste de objeto, raio de borda e filtros de imagem.
video – Incorpora clipes de vídeo dentro de uma cena. Suporta corte (início/fim), controle de volume, taxa de reprodução, loop e silenciamento.
shape – Renderiza primitivas geométricas: retângulos, círculos, elipses, linhas e polígonos. Suporta preenchimento, traço, raio de borda, gradientes e sombras.
audio – Adiciona faixas de áudio a uma cena. Suporta volume, fade in/out, corte e loop. Camadas de áudio não têm representação visual.
group – Uma camada de contêiner que contém camadas filhas. Grupos permitem aplicar transformações, animações e efeitos a múltiplas camadas de uma vez.
lottie – Renderiza animações JSON Lottie/Bodymovin. Suporta velocidade de reprodução, loop e controle de segmento para reproduzir intervalos específicos de quadros.
custom – Carrega componentes personalizados registrados definidos no campo customComponents. Use isso para templates de camada reutilizáveis e parametrizados.
Para configuração detalhada de cada tipo de camada, incluindo todas as propriedades disponíveis e exemplos de código, consulte a Referência de Componentes Rendervid .
O Rendervid inclui mais de 40 presets de animação integrados organizados em quatro categorias: entrada, saída, ênfase e keyframe. Animações são anexadas a qualquer camada e controlam como essa camada aparece, desaparece ou se comporta durante sua vida útil.
{
"type": "text",
"text": "Título Animado",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Campo | Tipo | Padrão | Descrição |
|---|---|---|---|
type | string | – | Categoria de animação: entrance, exit, emphasis, keyframe |
effect | string | – | Nome do preset (ex.: fadeInUp, pulse, bounceOut) |
duration | number | 30 | Duração em quadros |
delay | number | 0 | Atraso antes do início da animação, em quadros |
easing | string | "ease" | Nome da função de easing |
loop | number | 0 | Número de loops (0 = sem loop, -1 = infinito) |
alternate | boolean | false | Reverter direção em loops alternados |
Animações de entrada controlam como uma camada aparece na tela. Elas são executadas uma vez quando o tempo de início da camada é atingido.
| Preset | Descrição |
|---|---|
fadeIn | Fade simples de opacidade de 0 a 1 |
fadeInUp | Fade in enquanto desliza para cima |
fadeInDown | Fade in enquanto desliza para baixo |
fadeInLeft | Fade in enquanto desliza da esquerda |
fadeInRight | Fade in enquanto desliza da direita |
slideInUp | Desliza para dentro de baixo do quadro |
slideInDown | Desliza para dentro de cima do quadro |
slideInLeft | Desliza para dentro da borda esquerda |
slideInRight | Desliza para dentro da borda direita |
scaleIn | Escala de 0 ao tamanho completo |
zoomIn | Zoom de uma escala menor com leve overshoot |
rotateIn | Rotaciona para a posição a partir de um ângulo deslocado |
bounceIn | Pula para a posição com overshoot elástico |
flipInX | Flip 3D no eixo X (flip horizontal) |
flipInY | Flip 3D no eixo Y (flip vertical) |
typewriter | Caracteres aparecem um de cada vez (camadas de texto) |
revealLeft | Revelação de máscara deslizando da esquerda |
revealRight | Revelação de máscara deslizando da direita |
revealUp | Revelação de máscara deslizando para cima |
revealDown | Revelação de máscara deslizando para baixo |
Animações de saída controlam como uma camada desaparece. Elas são executadas no final da duração da camada.
| Preset | Descrição |
|---|---|
fadeOut | Fade simples de opacidade de 1 a 0 |
slideOutUp | Desliza para fora pelo topo do quadro |
slideOutDown | Desliza para fora pela parte inferior do quadro |
scaleOut | Reduz a escala do tamanho completo para 0 |
zoomOut | Zoom para uma escala menor e fade |
rotateOut | Rotaciona para fora da posição para um ângulo deslocado |
bounceOut | Pula para fora com overshoot elástico antes de desaparecer |
flipOutX | Flip 3D para fora no eixo X |
flipOutY | Flip 3D para fora no eixo Y |
Animações de ênfase chamam atenção para uma camada enquanto ela permanece visível. Funcionam bem com loop.
| Preset | Descrição |
|---|---|
pulse | Pulso de escala rítmico (cresce e encolhe) |
shake | Tremor horizontal rápido |
bounce | Movimento de salto vertical |
swing | Rotação oscilante tipo pêndulo |
wobble | Oscilação fora do eixo combinando rotação e translação |
flash | Flashes rápidos de opacidade |
rubberBand | Efeito elástico de esticar e estalar |
heartbeat | Ritmo de batimento cardíaco duplo |
float | Movimento suave de flutuação para cima e para baixo |
spin | Rotação contínua de 360 graus |
Para controle criativo total, animações keyframe permitem definir mudanças de propriedade personalizadas quadro a quadro:
{
"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"
}
Animações keyframe podem animar qualquer propriedade numérica: opacity, x, y, rotation, scaleX, scaleY e muito mais. Cada keyframe especifica um número de quadro e os valores de propriedade naquele quadro. O renderizador interpola entre keyframes usando a função de easing especificada.
Uma única camada pode ter múltiplas animações. Por exemplo, uma animação de entrada seguida por um loop de ênfase, depois uma animação de saída:
{
"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"
}
]
}
Funções de easing controlam a taxa de mudança durante uma animação, determinando se o movimento parece linear, suave, saltitante ou elástico. O Rendervid inclui mais de 30 funções de easing integradas.
| Função | Descrição |
|---|---|
linear | Velocidade constante do início ao fim, sem aceleração |
ease | Easing padrão semelhante a CSS com aceleração e desaceleração suaves |
easeIn | Começa devagar, acelera em direção ao fim |
easeOut | Começa rápido, desacelera em direção ao fim |
easeInOut | Acelera na primeira metade, desacelera na segunda |
| Função | Descrição |
|---|---|
easeInQuad | Aceleração quadrática (t^2) |
easeOutQuad | Desaceleração quadrática |
easeInOutQuad | Aceleração quadrática seguida de desaceleração |
| Função | Descrição |
|---|---|
easeInCubic | Aceleração cúbica (t^3) – mais pronunciada que quadrática |
easeOutCubic | Desaceleração cúbica – parada suave e natural |
easeInOutCubic | Ease in e out cúbico – o easing mais comumente usado |
| Função | Descrição |
|---|---|
easeInQuart | Aceleração quártica (t^4) |
easeOutQuart | Desaceleração quártica |
easeInOutQuart | Ease in e out quártico |
| Função | Descrição |
|---|---|
easeInQuint | Aceleração quíntica (t^5) – início muito acentuado |
easeOutQuint | Desaceleração quíntica – parada muito acentuada |
easeInOutQuint | Ease in e out quíntico |
| Função | Descrição |
|---|---|
easeInSine | Aceleração baseada em seno – a curva de easing mais suave |
easeOutSine | Desaceleração baseada em seno |
easeInOutSine | Ease in e out baseado em seno |
| Função | Descrição |
|---|---|
easeInExpo | Aceleração exponencial – quase plana e depois acentuada |
easeOutExpo | Desaceleração exponencial – acentuada e depois quase plana |
easeInOutExpo | Ease in e out exponencial |
| Função | Descrição |
|---|---|
easeInCirc | Curva de aceleração circular |
easeOutCirc | Curva de desaceleração circular |
easeInOutCirc | Ease in e out circular |
| Função | Descrição |
|---|---|
easeInBack | Recua ligeiramente antes de acelerar para frente (antecipação) |
easeOutBack | Ultrapassa o alvo e depois volta (overshoot) |
easeInOutBack | Antecipação na entrada, overshoot na saída |
| Função | Descrição |
|---|---|
easeInElastic | Oscilação elástica na aceleração – preparação tipo mola |
easeOutElastic | Oscilação elástica na desaceleração – estalo tipo mola |
easeInOutElastic | Elástico em ambas as extremidades |
| Função | Descrição |
|---|---|
easeInBounce | Efeito de salto na entrada – como uma bola caindo ao contrário |
easeOutBounce | Efeito de salto na saída – como uma bola batendo no chão |
easeInOutBounce | Salto em ambas as extremidades |
easeOutCubic ou easeOutQuart para entradas com sensação naturaleaseOutElastic ou easeOutBack para overshoot divertidoeaseInOutSine para movimento contínuo e suaveeaseInExpo para construções, easeOutExpo para paradas rápidaseaseOutBounce para efeitos tipo gravidadeTransições controlam como uma cena flui para a próxima. O Rendervid fornece 17 tipos de transição que vão de cortes simples a efeitos 3D cinematográficos.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
O objeto transition é colocado na cena de entrada (a cena para a qual está sendo feita a transição). A propriedade direction aplica-se apenas a transições direcionais como slide, wipe e push.
| Transição | Descrição |
|---|---|
cut | Mudança instantânea sem efeito visual (padrão) |
fade | Crossfade entre cenas – a cena de saída faz fade out enquanto a cena de entrada faz fade in |
zoom | Zoom na cena de saída enquanto a cena de entrada aparece |
slide | A cena de entrada desliza sobre a cena de saída de uma direção configurável (esquerda, direita, cima, baixo) |
wipe | Um wipe de borda dura revela a cena de entrada, movendo-se pelo quadro na direção dada |
push | A cena de entrada empurra a cena de saída para fora da tela na direção especificada |
rotate | A cena de saída rotaciona para fora enquanto a cena de entrada rotaciona para dentro |
flip | Transição de flip 3D – o quadro vira como uma carta para revelar a próxima cena |
blur | A cena de saída fica desfocada enquanto a cena de entrada fica nítida |
circle | Uma máscara circular expande do centro (ou um ponto especificado) para revelar a próxima cena |
glitch | Efeito de distorção de glitch digital com aberração cromática e deslocamento |
dissolve | Dissolução em nível de pixel onde pixels individuais transitam aleatoriamente entre cenas |
cube | Rotação de cubo 3D – as cenas estão em faces adjacentes de um cubo girando |
swirl | Distorção espiral que gira a cena de saída na cena de entrada |
diagonal-wipe | Um wipe diagonal de borda dura movendo-se de um canto ao oposto |
iris | Íris circular que abre ou fecha como uma abertura de câmera |
crosszoom | Ambas as cenas fazem zoom simultaneamente – a de saída aumenta, a de entrada diminui |
Fade cinematográfico com crossfade longo:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Deslizar da direita (comum para conteúdo sequencial):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Rotação de cubo 3D (sensação dinâmica e moderna):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Efeito glitch (energético, voltado para tecnologia):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
As camadas do Rendervid suportam uma variedade de efeitos visuais através de filtros, modos de mesclagem, sombras e transformações.
Filtros são aplicados através do array filters em qualquer camada. Cada filtro é um objeto com um type e 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 | Faixa de Valores | Descrição |
|---|---|---|
blur | 0+ (pixels) | Desfoque gaussiano – valores mais altos produzem mais desfoque |
brightness | 0+ (multiplicador) | 0 = preto, 1 = normal, 2 = brilho duplo |
contrast | 0+ (multiplicador) | 0 = cinza, 1 = normal, 2 = contraste duplo |
grayscale | 0-1 | 0 = cor total, 1 = totalmente dessaturado |
hue-rotate | 0-360 (graus) | Rotaciona cores ao redor da roda de cores |
invert | 0-1 | 0 = normal, 1 = cores totalmente invertidas |
saturate | 0+ (multiplicador) | 0 = dessaturado, 1 = normal, 2 = saturação dupla |
sepia | 0-1 | 0 = normal, 1 = tom sépia completo |
A propriedade blendMode controla como uma camada se compõe com as camadas abaixo dela:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Modos de mesclagem suportados: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Camadas de texto e forma suportam efeitos de sombra através da propriedade style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Filtros, modos de mesclagem, opacidade e sombras podem todos ser combinados em uma única camada para tratamentos visuais sofisticados:
{
"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
}
}
}
O Rendervid suporta tanto Google Fonts (mais de 100 famílias integradas) quanto fontes personalizadas carregadas de URLs externas.
Declare Google Fonts no 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] }
]
}
}
Cada objeto de fonte requer:
| Campo | Tipo | Descrição |
|---|---|---|
family | string | Nome da família Google Font (correspondência exata necessária) |
weights | array | Array de pesos numéricos a carregar (100-900) |
Pesos de fonte comuns: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Carregue fontes de URLs externas usando o 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"
}
]
}
}
Formatos de fonte suportados: WOFF2 (recomendado para menor tamanho de arquivo), WOFF, TTF e OTF.
Referencie fontes declaradas pelo nome da família nos estilos de camada de texto:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
O Rendervid inclui cadeias de fallback de fontes específicas da plataforma para garantir renderização consistente em diferentes ambientes. Se uma fonte especificada não estiver disponível, o renderizador recorre a fontes do sistema que correspondem à mesma classificação (serif, sans-serif, monospace).
O Rendervid suporta uma ampla gama de formatos de saída e codecs para renderização de vídeo e imagem.
| Formato | Codec | Extensão de Arquivo | Melhor Para |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Máxima compatibilidade – web, mobile, redes sociais |
| WebM | VP8 / VP9 | .webm | Incorporação web com tamanhos de arquivo menores |
| MOV | ProRes | .mov | Fluxos de trabalho de edição profissional, qualidade sem perdas |
| GIF | – | .gif | Animações curtas, compartilhamento social, email |
| MP4 | H.265 / HEVC | .mp4 | Dispositivos mais novos, arquivos 50% menores que H.264 com mesma qualidade |
| WebM | AV1 | .webm | Codec de próxima geração, melhor eficiência de compressão |
| Formato | Extensão de Arquivo | Melhor Para |
|---|---|---|
| PNG | .png | Qualidade sem perdas, suporte a transparência |
| JPEG | .jpg | Fotografias, tamanhos de arquivo menores |
| WebP | .webp | Web moderna, melhor equilíbrio entre qualidade e tamanho |
| Preset | Descrição |
|---|---|
draft | Renderização rápida com qualidade reduzida – ideal para visualização |
standard | Qualidade e tamanho de arquivo equilibrados – bom para a maioria dos casos de uso |
high | Maior taxa de bits e qualidade – para entregas finais |
lossless | Qualidade máxima sem artefatos de compressão |
O Rendervid suporta resoluções de pequenas miniaturas até 8K:
| Resolução | Dimensões | Uso Comum |
|---|---|---|
| SD | 640 x 480 | Miniaturas, visualizações |
| HD | 1280 x 720 | Vídeo web, email |
| Full HD | 1920 x 1080 | YouTube, apresentações |
| 2K | 2560 x 1440 | Displays de alta qualidade |
| 4K UHD | 3840 x 2160 | Profissional, transmissão |
| 8K | 7680 x 4320 | Resolução máxima, à prova de futuro |
Taxas de quadros de 1 fps (apresentações de slides) a 120 fps (câmera lenta, conteúdo de jogos) são suportadas. Escolhas comuns são 24 fps (cinematográfico), 30 fps (web/social) e 60 fps (movimento suave).
Aqui está um template Rendervid completo que demonstra os principais recursos do sistema de templates trabalhando juntos: entradas dinâmicas, múltiplas cenas com transições, composições em camadas, animações com easing, fontes e efeitos visuais.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nome do Produto",
"required": true,
"default": "ProdutoX"
},
{
"key": "tagline",
"type": "string",
"label": "Slogan",
"required": true,
"default": "O futuro está aqui."
},
{
"key": "heroImage",
"type": "url",
"label": "Imagem Principal",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Cor Primária",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Chamada para Ação",
"default": "Saiba Mais"
}
],
"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": "Apresentando",
"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"
}
]
}
]
}
]
}
}
Este template cria um vídeo de lançamento de produto de 20 segundos com três cenas: uma introdução tipográfica com animações de texto escalonadas, uma vitrine de produto com uma imagem flutuante e efeito de máquina de escrever, e uma cena de chamada para ação final com um botão pulsante. Todo o texto, cores e imagens são controlados por variáveis de template, tornando-o totalmente reutilizável.
Templates Rendervid são arquivos JSON que definem a estrutura, conteúdo, animações e configurações de saída de um vídeo ou imagem. Cada template inclui uma configuração de saída (dimensões, fps, duração), definições de entrada para variáveis dinâmicas, uma composição com cenas e camadas, e configurações opcionais de fontes e componentes personalizados.
Variáveis de template usam a sintaxe {{nomeVariável}}. Você define entradas no array de inputs do template com uma chave, tipo (string, number, boolean, color, url, array), rótulo, descrição e valor padrão. No momento da renderização, essas variáveis são substituídas por valores reais, tornando os templates reutilizáveis e dinâmicos.
O Rendervid inclui mais de 40 presets de animação integrados organizados em quatro categorias: animações de entrada (fadeIn, slideIn, scaleIn, bounceIn, etc.), animações de saída (fadeOut, slideOut, zoomOut, etc.), animações de ênfase (pulse, shake, bounce, swing, heartbeat, etc.) e animações de keyframe totalmente personalizáveis com mais de 30 funções de easing.
O Rendervid oferece 17 tipos de transição de cena: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris e crosszoom. Cada transição pode ser configurada com parâmetros de duração e direção.
O Rendervid suporta múltiplos formatos de saída incluindo MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF para vídeo, e PNG, JPEG, WebP para imagens. Codecs avançados como H.265/HEVC e AV1 também são suportados. A resolução vai até 8K (7680x4320) com taxas de quadros de 1 a 120 fps.
Sim, o Rendervid suporta mais de 100 Google Fonts integradas e carregamento de fontes personalizadas a partir de URLs nos formatos WOFF2, WOFF, TTF e OTF. Você pode especificar pesos de fonte de 100 a 900 e configurar fallbacks específicos da plataforma para compatibilidade entre ambientes.
Ajudamos empresas como a sua a desenvolver chatbots inteligentes, servidores MCP, ferramentas de IA ou outros tipos de automação de IA para substituir humanos em tarefas repetitivas em sua organização.
Explore todos os componentes Rendervid: 8 tipos de camadas integradas (texto, imagem, vídeo, forma, áudio, grupo, lottie, personalizado), componentes React pré-...
Implante o Rendervid em qualquer lugar: renderização baseada em navegador para pré-visualizações, Node.js para processamento em lote no servidor ou renderização...
Descubra o Rendervid, a alternativa gratuita e de código aberto ao Remotion para geração de vídeo programática. Design voltado para IA com integração MCP, templ...