Guía completa del sistema de plantillas de Rendervid. Aprende cómo crear plantillas de video JSON, usar variables dinámicas con sintaxis {{variable}}, configurar más de 40 preajustes de animación, 17 transiciones de escena y más de 30 funciones de suavizado.
Rendervid es un motor de renderizado de video programático construido alrededor de un sistema de plantillas declarativo basado en JSON. En lugar de editar manualmente video en una línea de tiempo, defines cada aspecto de tu video – escenas, capas, animaciones, transiciones y configuración de salida – en un único documento JSON. Este enfoque hace que las plantillas sean sin estado, controlables por versión y generables por máquina, abriendo la puerta a la producción de video impulsada por IA, pipelines de renderizado por lotes y flujos de trabajo de contenido completamente automatizados.
Esta guía cubre el sistema completo de plantillas de Rendervid de arriba a abajo: configuración a nivel raíz, configuración de salida, el sistema de variables y entrada, escenas y composición, los ocho tipos de capas, más de 40 preajustes de animación, más de 30 funciones de suavizado, 17 transiciones de escena, efectos visuales, configuración de fuentes y formatos de salida.
Cada plantilla de Rendervid es un objeto JSON con un conjunto bien definido de campos a nivel raíz. Aquí está el esqueleto de una plantilla completa:
{
"name": "my-template",
"output": { ... },
"inputs": [ ... ],
"composition": {
"scenes": [ ... ]
},
"fonts": { ... },
"customComponents": { ... },
"defaults": { ... }
}
| Campo | Tipo | Requerido | Descripción |
|---|---|---|---|
name | string | Sí | Identificador de plantilla legible por humanos |
output | object | Sí | Configuración de salida de video o imagen (dimensiones, fps, duración, formato) |
inputs | array | No | Definiciones de entrada dinámicas para variables de plantilla |
composition | object | Sí | Contiene el array scenes que define todo el contenido visual |
fonts | object | No | Declaraciones de Google Fonts y fuentes personalizadas |
customComponents | object | No | Componentes de capa personalizados registrados |
defaults | object | No | Valores predeterminados aplicados a todas las capas a menos que se anulen |
El campo name es para propósitos organizacionales – no afecta el renderizado. Los campos output y composition son los dos pilares que toda plantilla debe tener. Todo lo demás es opcional pero desbloquea capacidades poderosas.
El objeto output controla el archivo renderizado final: su formato, dimensiones, velocidad de fotogramas, duración y color de fondo.
{
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"backgroundColor": "#000000"
}
}
| Campo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
type | string | "video" | Tipo de salida: "video" o "image" |
width | number | 1920 | Ancho en píxeles (hasta 7680 para 8K) |
height | number | 1080 | Alto en píxeles (hasta 4320 para 8K) |
fps | number | 30 | Fotogramas por segundo (1-120) |
duration | number | – | Duración total en segundos |
backgroundColor | string | "#000000" | Color de fondo como hex, RGB o color con nombre |
Aquí están las configuraciones de salida para formatos populares:
1080p Full HD (YouTube, propósito general):
{
"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 / Imagen para Compartir en Redes Sociales:
{
"type": "image",
"width": 1200,
"height": 630,
"backgroundColor": "#1a1a2e"
}
Para salida de imagen, fps y duration se ignoran – el renderizador captura un solo fotograma.
El sistema de entrada y variables es lo que hace que las plantillas de Rendervid sean reutilizables. En lugar de codificar texto, colores o URLs en tu plantilla, defines entradas y las referencias usando la sintaxis {{nombreVariable}} en cualquier lugar de la plantilla.
Las entradas se declaran en el array inputs de nivel superior. Cada objeto de entrada describe una única variable:
{
"inputs": [
{
"key": "title",
"type": "string",
"label": "Título",
"description": "Texto del título principal mostrado en la escena de introducción",
"required": true,
"default": "Hola Mundo"
},
{
"key": "brandColor",
"type": "color",
"label": "Color de Marca",
"description": "Color de marca principal usado para fondos y acentos",
"required": false,
"default": "#FF5733"
},
{
"key": "showSubtitle",
"type": "boolean",
"label": "Mostrar Subtítulo",
"description": "Alternar visibilidad del subtítulo",
"required": false,
"default": true
}
]
}
| Campo | Tipo | Requerido | Descripción |
|---|---|---|---|
key | string | Sí | Identificador único usado en referencias {{key}} |
type | string | Sí | Tipo de datos: string, number, boolean, color, url, array |
label | string | No | Etiqueta legible por humanos para renderizado de UI |
description | string | No | Explicación de qué controla esta entrada |
required | boolean | No | Si la entrada debe proporcionarse en tiempo de renderizado |
default | any | No | Valor de respaldo si no se proporciona entrada |
string – Texto de forma libre. Usar para títulos, descripciones, subtítulos o cualquier contenido de texto.number – Valores numéricos. Usar para duraciones, tamaños, posiciones, niveles de opacidad o conteos.boolean – Alternancias verdadero/falso. Usar para visibilidad condicional, banderas de características o interruptores de encendido/apagado.color – Valores de color en hex (#FF5733), RGB (rgb(255,87,51)) o formato con nombre. Usar para fondos, colores de texto y acentos.url – Cadenas de URL válidas. Usar para fuentes de imagen, fuentes de video, enlaces y URLs de fuentes.array – Listas de valores. Usar para galerías de imágenes, listas de texto, contenido de diapositivas o cualquier dato repetido.Una vez que las entradas están definidas, refiérelas en cualquier lugar de la plantilla usando llaves dobles:
{
"type": "text",
"text": "{{title}}",
"style": {
"color": "{{brandColor}}",
"fontSize": "{{titleSize}}"
}
}
Las variables se resuelven en tiempo de renderizado. Cuando llamas a la API o CLI de Rendervid, pasas los valores reales:
{
"title": "Venta de Verano 2026",
"brandColor": "#E63946",
"titleSize": 72
}
Aquí está una plantilla completa con múltiples tipos de entrada trabajando juntos:
{
"name": "product-promo",
"output": {
"type": "video",
"width": 1080,
"height": 1080,
"fps": 30,
"duration": 15
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nombre del Producto",
"description": "Nombre del producto que se está promocionando",
"required": true,
"default": "Producto"
},
{
"key": "price",
"type": "number",
"label": "Precio",
"description": "Precio del producto mostrado en el video",
"required": true,
"default": 29.99
},
{
"key": "productImage",
"type": "url",
"label": "URL de Imagen del Producto",
"description": "URL de la imagen del producto",
"required": true
},
{
"key": "accentColor",
"type": "color",
"label": "Color de Acento",
"description": "Color usado para botones CTA y resaltados",
"required": false,
"default": "#FF6B35"
},
{
"key": "showBadge",
"type": "boolean",
"label": "Mostrar Insignia de Venta",
"description": "Si mostrar la superposición de insignia de venta",
"required": false,
"default": false
},
{
"key": "features",
"type": "array",
"label": "Características del Producto",
"description": "Lista de puntos de características",
"required": false,
"default": ["Característica 1", "Característica 2", "Característica 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 }
}
]
}
]
}
}
Esta única plantilla puede generar miles de videos de productos únicos simplemente cambiando los valores de entrada en tiempo de renderizado – no se necesitan modificaciones de plantilla.
El objeto composition es donde vive el contenido de tu video. Contiene un array scenes, y cada escena representa un segmento distinto del video con su propia duración, capas y transició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": [ ... ]
}
]
}
}
| Campo | Tipo | Requerido | Descripción |
|---|---|---|---|
name | string | No | Identificador para la escena (para legibilidad y depuración) |
duration | number | Sí | Duración de la escena en segundos |
transition | object | No | Efecto de transición al entrar a esta escena desde la anterior |
layers | array | Sí | Array ordenado de objetos de capa renderizados de abajo hacia arriba |
Las escenas se reproducen en secuencia. La duración total del video es la suma de todas las duraciones de escena (menos cualquier superposición de transición). Las capas dentro de una escena se renderizan en orden de array – la primera capa se encuentra en la parte inferior de la pila visual, y la última capa se encuentra en la parte superior.
Si no se especifica transición, la escena usa un cut duro por defecto.
Rendervid admite ocho tipos distintos de capas. Cada tipo de capa sirve un propósito específico y acepta su propio conjunto de propiedades además de la configuración base compartida.
Cada capa, independientemente del tipo, admite estas propiedades 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": ""
}
| Propiedad | Tipo | Predeterminado | Descripción |
|---|---|---|---|
position | object | {x: 0, y: 0} | Coordenadas X/Y en píxeles |
size | object | – | Ancho y alto en píxeles |
rotation | number | 0 | Ángulo de rotación en grados |
scale | object | {x: 1, y: 1} | Multiplicador de escala para ejes X e Y |
anchor | object | {x: 0.5, y: 0.5} | Punto de anclaje para transformaciones (rango 0-1, 0.5 = centro) |
opacity | number | 1 | Opacidad de la capa (0 = transparente, 1 = opaco) |
blendMode | string | "normal" | Modo de mezcla CSS para composición |
from | number | 0 | Tiempo de inicio en segundos (relativo al inicio de la escena) |
duration | number | -1 | Duración de la capa en segundos (-1 = duración completa de la escena) |
filters | array | [] | Array de objetos de filtro visual |
style | object | {} | Propiedades de estilo adicionales tipo CSS |
className | string | "" | Nombre de clase CSS para estilo personalizado |
text – Renderiza texto estilizado con control completo sobre fuente, tamaño, color, alineación, altura de línea, espaciado de letras, sombras de texto y más. Admite la sintaxis {{variable}} para contenido dinámico.
image – Muestra imágenes estáticas desde URLs o rutas locales. Admite recorte, modos de ajuste de objeto, radio de borde y filtros de imagen.
video – Incrusta clips de video dentro de una escena. Admite recorte (inicio/fin), control de volumen, velocidad de reproducción, bucle y silencio.
shape – Renderiza primitivas geométricas: rectángulos, círculos, elipses, líneas y polígonos. Admite relleno, trazo, radio de borde, gradientes y sombras.
audio – Agrega pistas de audio a una escena. Admite volumen, fundido de entrada/salida, recorte y bucle. Las capas de audio no tienen representación visual.
group – Una capa contenedora que contiene capas hijas. Los grupos te permiten aplicar transformaciones, animaciones y efectos a múltiples capas a la vez.
lottie – Renderiza animaciones JSON de Lottie/Bodymovin. Admite velocidad de reproducción, bucle y control de segmento para reproducir rangos específicos de fotogramas.
custom – Carga componentes personalizados registrados definidos en el campo customComponents. Úsalo para plantillas de capas reutilizables y parametrizadas.
Para configuración detallada de cada tipo de capa, incluyendo todas las propiedades disponibles y ejemplos de código, consulta la Referencia de Componentes de Rendervid .
Rendervid incluye más de 40 preajustes de animación integrados organizados en cuatro categorías: entrada, salida, énfasis y fotograma clave. Las animaciones se adjuntan a cualquier capa y controlan cómo esa capa aparece, desaparece o se comporta durante su tiempo de vida.
{
"type": "text",
"text": "Título Animado",
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 10,
"easing": "easeOutCubic",
"loop": 0,
"alternate": false
}
]
}
| Campo | Tipo | Predeterminado | Descripción |
|---|---|---|---|
type | string | – | Categoría de animación: entrance, exit, emphasis, keyframe |
effect | string | – | Nombre del preajuste (ej., fadeInUp, pulse, bounceOut) |
duration | number | 30 | Duración en fotogramas |
delay | number | 0 | Retardo antes de que comience la animación, en fotogramas |
easing | string | "ease" | Nombre de función de suavizado |
loop | number | 0 | Número de bucles (0 = sin bucle, -1 = infinito) |
alternate | boolean | false | Invertir dirección en bucles alternos |
Las animaciones de entrada controlan cómo aparece una capa en pantalla. Se ejecutan una vez cuando se alcanza el tiempo de inicio de la capa.
| Preajuste | Descripción |
|---|---|
fadeIn | Fundido de opacidad simple de 0 a 1 |
fadeInUp | Se desvanece mientras se desliza hacia arriba |
fadeInDown | Se desvanece mientras se desliza hacia abajo |
fadeInLeft | Se desvanece mientras se desliza desde la izquierda |
fadeInRight | Se desvanece mientras se desliza desde la derecha |
slideInUp | Se desliza desde debajo del marco |
slideInDown | Se desliza desde arriba del marco |
slideInLeft | Se desliza desde el borde izquierdo |
slideInRight | Se desliza desde el borde derecho |
scaleIn | Escala desde 0 hasta el tamaño completo |
zoomIn | Hace zoom desde una escala más pequeña con ligero exceso |
rotateIn | Rota a la posición desde un ángulo desplazado |
bounceIn | Rebota a la posición con exceso elástico |
flipInX | Volteo 3D en el eje X (volteo horizontal) |
flipInY | Volteo 3D en el eje Y (volteo vertical) |
typewriter | Los caracteres aparecen uno a la vez (capas de texto) |
revealLeft | Revelación de máscara deslizándose desde la izquierda |
revealRight | Revelación de máscara deslizándose desde la derecha |
revealUp | Revelación de máscara deslizándose hacia arriba |
revealDown | Revelación de máscara deslizándose hacia abajo |
Las animaciones de salida controlan cómo desaparece una capa. Se ejecutan al final de la duración de la capa.
| Preajuste | Descripción |
|---|---|
fadeOut | Fundido de opacidad simple de 1 a 0 |
slideOutUp | Se desliza hacia afuera por la parte superior del marco |
slideOutDown | Se desliza hacia afuera por la parte inferior del marco |
scaleOut | Escala hacia abajo desde el tamaño completo a 0 |
zoomOut | Hace zoom hacia afuera a una escala más pequeña y se desvanece |
rotateOut | Rota fuera de posición a un ángulo desplazado |
bounceOut | Rebota hacia afuera con exceso elástico antes de desaparecer |
flipOutX | Volteo 3D hacia afuera en el eje X |
flipOutY | Volteo 3D hacia afuera en el eje Y |
Las animaciones de énfasis llaman la atención sobre una capa mientras permanece visible. Funcionan bien con bucles.
| Preajuste | Descripción |
|---|---|
pulse | Pulso de escala rítmico (crece y se encoge) |
shake | Sacudida horizontal rápida |
bounce | Movimiento de rebote vertical |
swing | Rotación de balanceo tipo péndulo |
wobble | Bamboleo fuera de eje combinando rotación y traslación |
flash | Destellos de opacidad rápidos |
rubberBand | Efecto elástico de estiramiento y ajuste |
heartbeat | Ritmo de latido de doble pulso |
float | Movimiento suave de flotación arriba y abajo |
spin | Rotación continua de 360 grados |
Para control creativo completo, las animaciones de fotogramas clave te permiten definir cambios de propiedades personalizados fotograma por fotograma:
{
"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"
}
Las animaciones de fotogramas clave pueden animar cualquier propiedad numérica: opacity, x, y, rotation, scaleX, scaleY, y más. Cada fotograma clave especifica un número de fotograma y los valores de propiedad en ese fotograma. El renderizador interpola entre fotogramas clave usando la función de suavizado especificada.
Una sola capa puede tener múltiples animaciones. Por ejemplo, una animación de entrada seguida de un bucle de énfasis, luego una animación de salida:
{
"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"
}
]
}
Las funciones de suavizado controlan la velocidad de cambio durante una animación, determinando si el movimiento se siente lineal, suave, rebotante o elástico. Rendervid incluye más de 30 funciones de suavizado integradas.
| Función | Descripción |
|---|---|
linear | Velocidad constante de principio a fin, sin aceleración |
ease | Suavizado tipo CSS predeterminado con aceleración y desaceleración suaves |
easeIn | Comienza lento, acelera hacia el final |
easeOut | Comienza rápido, desacelera hacia el final |
easeInOut | Acelera en la primera mitad, desacelera en la segunda |
| Función | Descripción |
|---|---|
easeInQuad | Aceleración cuadrática (t^2) |
easeOutQuad | Desaceleración cuadrática |
easeInOutQuad | Aceleración cuadrática luego desaceleración |
| Función | Descripción |
|---|---|
easeInCubic | Aceleración cúbica (t^3) – más pronunciada que cuadrática |
easeOutCubic | Desaceleración cúbica – parada suave y de sensación natural |
easeInOutCubic | Suavizado cúbico de entrada y salida – el suavizado más comúnmente usado |
| Función | Descripción |
|---|---|
easeInQuart | Aceleración cuártica (t^4) |
easeOutQuart | Desaceleración cuártica |
easeInOutQuart | Suavizado cuártico de entrada y salida |
| Función | Descripción |
|---|---|
easeInQuint | Aceleración quíntica (t^5) – inicio muy pronunciado |
easeOutQuint | Desaceleración quíntica – parada muy pronunciada |
easeInOutQuint | Suavizado quíntico de entrada y salida |
| Función | Descripción |
|---|---|
easeInSine | Aceleración basada en seno – la curva de suavizado más suave |
easeOutSine | Desaceleración basada en seno |
easeInOutSine | Suavizado basado en seno de entrada y salida |
| Función | Descripción |
|---|---|
easeInExpo | Aceleración exponencial – casi plano luego pronunciado |
easeOutExpo | Desaceleración exponencial – pronunciado luego casi plano |
easeInOutExpo | Suavizado exponencial de entrada y salida |
| Función | Descripción |
|---|---|
easeInCirc | Curva de aceleración circular |
easeOutCirc | Curva de desaceleración circular |
easeInOutCirc | Suavizado circular de entrada y salida |
| Función | Descripción |
|---|---|
easeInBack | Retrocede ligeramente antes de acelerar hacia adelante (anticipación) |
easeOutBack | Se excede del objetivo luego se asienta de nuevo (exceso) |
easeInOutBack | Anticipación en entrada, exceso en salida |
| Función | Descripción |
|---|---|
easeInElastic | Bamboleo elástico en aceleración – enrollamiento tipo resorte |
easeOutElastic | Bamboleo elástico en desaceleración – ajuste tipo resorte |
easeInOutElastic | Elástico en ambos extremos |
| Función | Descripción |
|---|---|
easeInBounce | Efecto de rebote en entrada – como una pelota caída en reversa |
easeOutBounce | Efecto de rebote en salida – como una pelota golpeando el suelo |
easeInOutBounce | Rebote en ambos extremos |
easeOutCubic o easeOutQuart para entradas de sensación naturaleaseOutElastic o easeOutBack para exceso juguetóneaseInOutSine para movimiento continuo y suaveeaseInExpo para construcciones, easeOutExpo para paradas rápidaseaseOutBounce para efectos tipo gravedadLas transiciones controlan cómo fluye una escena a la siguiente. Rendervid proporciona 17 tipos de transición que van desde cortes simples hasta efectos 3D cinematográficos.
{
"name": "scene-two",
"duration": 10,
"transition": {
"type": "fade",
"duration": 1,
"direction": "left"
},
"layers": [ ... ]
}
El objeto transition se coloca en la escena entrante (la escena a la que se está haciendo la transición). La propiedad direction se aplica solo a transiciones direccionales como slide, wipe y push.
| Transición | Descripción |
|---|---|
cut | Cambio instantáneo sin efecto visual (predeterminado) |
fade | Fundido cruzado entre escenas – la escena saliente se desvanece mientras la escena entrante aparece |
zoom | Hace zoom en la escena saliente mientras aparece la escena entrante |
slide | La escena entrante se desliza sobre la escena saliente desde una dirección configurable (izquierda, derecha, arriba, abajo) |
wipe | Una limpieza de borde duro revela la escena entrante, moviéndose a través del marco en la dirección dada |
push | La escena entrante empuja la escena saliente fuera de la pantalla en la dirección especificada |
rotate | La escena saliente rota alejándose mientras la escena entrante rota entrando |
flip | Transición de volteo 3D – el marco se voltea como una carta para revelar la siguiente escena |
blur | La escena saliente se difumina mientras la escena entrante se enfoca |
circle | Una máscara circular se expande desde el centro (o un punto especificado) para revelar la siguiente escena |
glitch | Efecto de distorsión de falla digital con aberración cromática y desplazamiento |
dissolve | Disolución a nivel de píxel donde píxeles individuales hacen transición aleatoriamente entre escenas |
cube | Rotación de cubo 3D – las escenas están en caras adyacentes de un cubo giratorio |
swirl | Distorsión espiral que hace girar la escena saliente hacia la escena entrante |
diagonal-wipe | Una limpieza diagonal de borde duro moviéndose desde una esquina a la opuesta |
iris | Iris circular que se abre o cierra como una apertura de cámara |
crosszoom | Ambas escenas hacen zoom simultáneamente – la saliente hace zoom hacia adentro, la entrante hace zoom hacia afuera |
Fundido cinematográfico con fundido cruzado largo:
{
"transition": {
"type": "fade",
"duration": 2
}
}
Deslizamiento desde la derecha (común para contenido secuencial):
{
"transition": {
"type": "slide",
"duration": 0.5,
"direction": "right"
}
}
Rotación de cubo 3D (sensación dinámica y moderna):
{
"transition": {
"type": "cube",
"duration": 1
}
}
Efecto de falla (energético, orientado a tecnología):
{
"transition": {
"type": "glitch",
"duration": 0.3
}
}
Las capas de Rendervid admiten una gama de efectos visuales a través de filtros, modos de mezcla, sombras y transformaciones.
Los filtros se aplican mediante el array filters en cualquier capa. Cada filtro es un objeto con un type y 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 | Rango de Valor | Descripción |
|---|---|---|
blur | 0+ (píxeles) | Desenfoque gaussiano – valores más altos producen más desenfoque |
brightness | 0+ (multiplicador) | 0 = negro, 1 = normal, 2 = brillo doble |
contrast | 0+ (multiplicador) | 0 = gris, 1 = normal, 2 = contraste doble |
grayscale | 0-1 | 0 = color completo, 1 = completamente desaturado |
hue-rotate | 0-360 (grados) | Rota colores alrededor de la rueda de colores |
invert | 0-1 | 0 = normal, 1 = colores completamente invertidos |
saturate | 0+ (multiplicador) | 0 = desaturado, 1 = normal, 2 = saturación doble |
sepia | 0-1 | 0 = normal, 1 = tono sepia completo |
La propiedad blendMode controla cómo se compone una capa con las capas debajo de ella:
{
"type": "shape",
"blendMode": "multiply",
"opacity": 0.8
}
Modos de mezcla admitidos: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
Las capas de texto y forma admiten efectos de sombra a través de la propiedad style:
{
"style": {
"shadow": {
"color": "rgba(0, 0, 0, 0.5)",
"offsetX": 4,
"offsetY": 4,
"blur": 10
}
}
}
Los filtros, modos de mezcla, opacidad y sombras pueden combinarse en una sola capa para tratamientos visuales 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
}
}
}
Rendervid admite tanto Google Fonts (más de 100 familias integradas) como fuentes personalizadas cargadas desde URLs externas.
Declara Google Fonts en el 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 fuente requiere:
| Campo | Tipo | Descripción |
|---|---|---|
family | string | Nombre de familia de Google Font (coincidencia exacta requerida) |
weights | array | Array de pesos numéricos a cargar (100-900) |
Pesos de fuente comunes: 100 (Thin), 200 (Extra Light), 300 (Light), 400 (Regular), 500 (Medium), 600 (Semi Bold), 700 (Bold), 800 (Extra Bold), 900 (Black).
Carga fuentes desde URLs externas usando el 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 fuente admitidos: WOFF2 (recomendado para el tamaño de archivo más pequeño), WOFF, TTF y OTF.
Referencia fuentes declaradas por nombre de familia en estilos de capa de texto:
{
"type": "text",
"text": "{{headline}}",
"style": {
"fontFamily": "Montserrat",
"fontWeight": 700,
"fontSize": 64,
"color": "#FFFFFF"
}
}
Rendervid incluye cadenas de respaldo de fuentes específicas de plataforma para garantizar un renderizado consistente en diferentes entornos. Si una fuente especificada no está disponible, el renderizador recurre a fuentes del sistema que coinciden con la misma clasificación (serif, sans-serif, monospace).
Rendervid admite una amplia gama de formatos de salida y códecs para renderizado de video e imagen.
| Formato | Códec | Extensión de Archivo | Mejor Para |
|---|---|---|---|
| MP4 | H.264 | .mp4 | Máxima compatibilidad – web, móvil, redes sociales |
| WebM | VP8 / VP9 | .webm | Incrustación web con tamaños de archivo más pequeños |
| MOV | ProRes | .mov | Flujos de trabajo de edición profesional, calidad sin pérdida |
| GIF | – | .gif | Animaciones cortas, compartir en redes sociales, correo electrónico |
| MP4 | H.265 / HEVC | .mp4 | Dispositivos más nuevos, archivos 50% más pequeños que H.264 con la misma calidad |
| WebM | AV1 | .webm | Códec de próxima generación, mejor eficiencia de compresión |
| Formato | Extensión de Archivo | Mejor Para |
|---|---|---|
| PNG | .png | Calidad sin pérdida, soporte de transparencia |
| JPEG | .jpg | Fotografías, tamaños de archivo más pequeños |
| WebP | .webp | Web moderna, mejor equilibrio de calidad y tamaño |
| Preajuste | Descripción |
|---|---|
draft | Renderizado rápido con calidad reducida – ideal para previsualización |
standard | Calidad y tamaño de archivo equilibrados – bueno para la mayoría de los casos de uso |
high | Mayor tasa de bits y calidad – para entregables finales |
lossless | Máxima calidad sin artefactos de compresión |
Rendervid admite resoluciones desde miniaturas pequeñas hasta 8K:
| Resolución | Dimensiones | Uso Común |
|---|---|---|
| SD | 640 x 480 | Miniaturas, vistas previas |
| HD | 1280 x 720 | Video web, correo electrónico |
| Full HD | 1920 x 1080 | YouTube, presentaciones |
| 2K | 2560 x 1440 | Pantallas de alta calidad |
| 4K UHD | 3840 x 2160 | Profesional, transmisión |
| 8K | 7680 x 4320 | Resolución máxima, a prueba de futuro |
Se admiten velocidades de fotogramas desde 1 fps (presentaciones de diapositivas) hasta 120 fps (cámara lenta, contenido de juegos). Las opciones comunes son 24 fps (cinematográfico), 30 fps (web/redes sociales) y 60 fps (movimiento suave).
Aquí está una plantilla completa de Rendervid que demuestra las características clave del sistema de plantillas trabajando juntas: entradas dinámicas, múltiples escenas con transiciones, composiciones en capas, animaciones con suavizado, fuentes y efectos visuales.
{
"name": "tech-product-launch",
"output": {
"type": "video",
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 20,
"backgroundColor": "#0A0A0A"
},
"inputs": [
{
"key": "productName",
"type": "string",
"label": "Nombre del Producto",
"required": true,
"default": "ProductX"
},
{
"key": "tagline",
"type": "string",
"label": "Lema",
"required": true,
"default": "El futuro está aquí."
},
{
"key": "heroImage",
"type": "url",
"label": "Imagen Hero",
"required": true
},
{
"key": "primaryColor",
"type": "color",
"label": "Color Primario",
"default": "#6C63FF"
},
{
"key": "ctaText",
"type": "string",
"label": "Llamado a la Acción",
"default": "Saber Más"
}
],
"fonts": {
"google": [
{ "family": "Inter", "weights": [400, 600, 800] },
{ "family": "JetBrains Mono", "weights": [400] }
]
},
"composition": {
"scenes": [
{
"name": "intro",
"duration": 6,
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.1
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 400 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 96,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 30,
"delay": 15,
"easing": "easeOutCubic"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 960, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 36,
"color": "{{primaryColor}}",
"textAlign": "center",
"letterSpacing": 4
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 25,
"delay": 40,
"easing": "easeOutSine"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 600 },
"size": { "width": 80, "height": 3 },
"style": {
"fill": "{{primaryColor}}"
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 20,
"delay": 60,
"easing": "easeOutQuart"
}
]
}
]
},
{
"name": "product-showcase",
"duration": 8,
"transition": {
"type": "slide",
"duration": 0.8,
"direction": "left"
},
"layers": [
{
"type": "image",
"src": "{{heroImage}}",
"position": { "x": 1200, "y": 540 },
"size": { "width": 800, "height": 800 },
"anchor": { "x": 0.5, "y": 0.5 },
"filters": [
{ "type": "brightness", "value": 1.1 },
{ "type": "contrast", "value": 1.05 }
],
"animations": [
{
"type": "entrance",
"effect": "zoomIn",
"duration": 40,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "float",
"duration": 120,
"delay": 40,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "Introducing",
"position": { "x": 400, "y": 350 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "JetBrains Mono",
"fontSize": 18,
"color": "{{primaryColor}}",
"textTransform": "uppercase",
"letterSpacing": 6
},
"animations": [
{
"type": "entrance",
"effect": "typewriter",
"duration": 30,
"delay": 10,
"easing": "linear"
}
]
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 400, "y": 430 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 72,
"color": "#FFFFFF"
},
"animations": [
{
"type": "entrance",
"effect": "revealLeft",
"duration": 25,
"delay": 20,
"easing": "easeOutQuart"
}
]
},
{
"type": "text",
"text": "{{tagline}}",
"position": { "x": 400, "y": 520 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 400,
"fontSize": 24,
"color": "#CCCCCC",
"lineHeight": 1.6
},
"animations": [
{
"type": "entrance",
"effect": "fadeInUp",
"duration": 20,
"delay": 40,
"easing": "easeOutCubic"
}
]
}
]
},
{
"name": "cta",
"duration": 6,
"transition": {
"type": "fade",
"duration": 1.2
},
"layers": [
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 540 },
"size": { "width": 1920, "height": 1080 },
"style": {
"fill": "{{primaryColor}}",
"opacity": 0.15
}
},
{
"type": "text",
"text": "{{productName}}",
"position": { "x": 960, "y": 380 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 800,
"fontSize": 80,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "bounceIn",
"duration": 35,
"easing": "easeOutElastic"
}
]
},
{
"type": "shape",
"shape": "rectangle",
"position": { "x": 960, "y": 550 },
"size": { "width": 280, "height": 60 },
"style": {
"fill": "{{primaryColor}}",
"borderRadius": 30
},
"animations": [
{
"type": "entrance",
"effect": "scaleIn",
"duration": 25,
"delay": 30,
"easing": "easeOutBack"
},
{
"type": "emphasis",
"effect": "pulse",
"duration": 60,
"delay": 60,
"loop": -1,
"alternate": true
}
]
},
{
"type": "text",
"text": "{{ctaText}}",
"position": { "x": 960, "y": 550 },
"anchor": { "x": 0.5, "y": 0.5 },
"style": {
"fontFamily": "Inter",
"fontWeight": 600,
"fontSize": 22,
"color": "#FFFFFF",
"textAlign": "center"
},
"animations": [
{
"type": "entrance",
"effect": "fadeIn",
"duration": 20,
"delay": 40,
"easing": "easeOutSine"
}
]
}
]
}
]
}
}
Esta plantilla crea un video de lanzamiento de producto de 20 segundos con tres escenas: una introducción tipográfica con animaciones de texto escalonadas, una exhibición de producto con una imagen flotante y efecto de máquina de escribir, y una escena de llamado a la acción de cierre con un botón pulsante. Todo el texto, colores e imágenes son impulsados por variables de plantilla, haciéndola completamente reutilizable.
Las plantillas de Rendervid son archivos JSON que definen la estructura, contenido, animaciones y configuración de salida de un video o imagen. Cada plantilla incluye una configuración de salida (dimensiones, fps, duración), definiciones de entrada para variables dinámicas, una composición con escenas y capas, y configuraciones opcionales de fuentes y componentes personalizados.
Las variables de plantilla usan la sintaxis {{nombreVariable}}. Defines las entradas en el array de inputs de la plantilla con una clave, tipo (string, number, boolean, color, url, array), etiqueta, descripción y valor predeterminado. En el momento del renderizado, estas variables se reemplazan con valores reales, haciendo las plantillas reutilizables y dinámicas.
Rendervid incluye más de 40 preajustes de animación integrados organizados en cuatro categorías: animaciones de entrada (fadeIn, slideIn, scaleIn, bounceIn, etc.), animaciones de salida (fadeOut, slideOut, zoomOut, etc.), animaciones de énfasis (pulse, shake, bounce, swing, heartbeat, etc.), y animaciones de fotogramas clave totalmente personalizables con más de 30 funciones de suavizado.
Rendervid ofrece 17 tipos de transiciones de escena: cut, fade, zoom, slide, wipe, push, rotate, flip (3D), blur, circle, glitch, dissolve, cube (3D), swirl, diagonal-wipe, iris y crosszoom. Cada transición puede configurarse con parámetros de duración y dirección.
Rendervid admite múltiples formatos de salida incluyendo MP4 (H.264), WebM (VP8/VP9), MOV (ProRes), GIF para video, y PNG, JPEG, WebP para imágenes. También se admiten códecs avanzados como H.265/HEVC y AV1. La resolución llega hasta 8K (7680x4320) con velocidades de fotogramas de 1 a 120 fps.
Sí, Rendervid admite más de 100 fuentes de Google Fonts integradas y carga de fuentes personalizadas desde URLs en formatos WOFF2, WOFF, TTF y OTF. Puedes especificar pesos de fuente de 100 a 900 y configurar respaldos específicos de plataforma para compatibilidad entre entornos.
Ayudamos a empresas como la suya a desarrollar chatbots inteligentes, servidores MCP, herramientas de IA u otros tipos de automatización con IA para reemplazar a humanos en tareas repetitivas de su organización.
Explora todos los componentes de Rendervid: 8 tipos de capas integradas (texto, imagen, video, forma, audio, grupo, lottie, personalizada), componentes React pr...
Despliega Rendervid en cualquier lugar: renderizado basado en navegador para vistas previas, Node.js para procesamiento por lotes en el servidor, o renderizado ...
Integra FlowHunt con el servidor json2video-mcp para automatizar la generación programática de videos, gestionar plantillas personalizadas y conectar flujos de ...