Componentes de Rendervid - Tipos de Capas, Componentes React y Editor Visual

Rendervid está construido sobre una arquitectura basada en componentes que hace que la creación de videos sea modular, extensible y amigable para desarrolladores. Cada elemento en una plantilla de Rendervid es una capa, y cada capa tiene un tipo específico que determina cómo se renderiza. Con 8 tipos de capas integradas, una biblioteca creciente de componentes React predefinidos, un editor visual de plantillas y un reproductor independiente, Rendervid te proporciona todo lo que necesitas para producir contenido de video profesional de forma programática.

Esta página cubre el ecosistema completo de componentes: desde tipos de capas primitivas como texto y forma, pasando por reproducción de audio y video, hasta componentes React completamente personalizados que desbloquean posibilidades creativas ilimitadas. Ya sea que estés construyendo una simple tarjeta de título o una animación compleja basada en datos, entender estos componentes es la base.

Tipos de Capas Integradas

Cada capa en una plantilla de Rendervid se define como un objeto JSON con un campo type. El tipo determina las propiedades disponibles y el comportamiento de renderizado. A continuación se presenta una referencia detallada para cada uno de los 8 tipos de capas integradas.

Capa de Texto

La capa text es la primitiva más rica en funciones de Rendervid. Renderiza texto estilizado con control completo sobre tipografía, alineación, color, efectos y animación.

Propiedades de tipografía:

Rendervid viene con más de 100 fuentes de Google integradas. Puedes usar cualquiera de ellas especificando la propiedad fontFamily sin necesidad de cargar hojas de estilo externas.

Propiedades de alineación:

Estilo y efectos:

• color y backgroundColor para coloración básica
• textShadow para sombras paralelas
• textStroke para texto con contorno
• textDecoration para subrayado, tachado
• textTransform para mayúsculas, minúsculas, capitalizar
• maxLines con truncamiento automático de puntos suspensivos
• Efecto de máquina de escribir integrado para revelación de texto carácter por carácter

{
  "type": "text",
  "text": "Bienvenido a Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

Para animaciones de texto avanzadas como el efecto de máquina de escribir, combina la capa de texto con animaciones de fotogramas clave o usa el componente TypewriterEffect dedicado.

Capa de Imagen

La capa image muestra imágenes rasterizadas y vectoriales con opciones flexibles de tamaño y recorte.

Propiedades clave:

Formatos compatibles: PNG, JPEG, WebP, SVG, GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

La propiedad fit funciona como el CSS object-fit:

• cover – escala la imagen para llenar la capa, recortando el exceso
• contain – escala para ajustarse completamente dentro de la capa, con posible letterboxing
• fill – estira la imagen para que coincida exactamente con las dimensiones de la capa
• none – renderiza la imagen en su resolución nativa

Capa de Video

La capa video incrusta clips de video en tu composición con control completo de reproducción.

Propiedades clave:

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

Usa startTime para omitir introducciones o saltar a un punto específico en el metraje fuente. Combina con playbackRate para efectos de cámara lenta (0.5) o time-lapse (2.0).

Capa de Forma

La capa shape dibuja formas vectoriales con rellenos, trazos, degradados y esquinas redondeadas.

Tipos de forma:

Propiedades de estilo:

• fill – color sólido o degradado
• stroke – color del borde
• strokeWidth – grosor del borde
• borderRadius – esquinas redondeadas para rectángulos
• Degradados: rellenos de degradado tanto linear como radial

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

Para formas personalizadas, usa el tipo path con datos de ruta SVG estándar:

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

Capa de Audio

La capa audio agrega pistas de audio a tu composición con control de volumen, desvanecimiento y una cadena completa de efectos.

Propiedades clave:

Cadena de efectos de audio:

Rendervid incluye una tubería de procesamiento de efectos integrada. Efectos disponibles:

• EQ – ecualización para modelado de tono
• Compresor – compresión de rango dinámico
• Reverb – reverberación espacial
• Delay – efecto de eco/retardo
• Gain – aumento o atenuación de volumen
• Filtro paso alto – elimina frecuencias bajas
• Filtro paso bajo – elimina frecuencias altas
• Paneo – posicionamiento estéreo (izquierda/derecha)

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

Los efectos se procesan en orden, permitiéndote construir cadenas sofisticadas de procesamiento de audio. Usa valores de pan desde -1 (totalmente a la izquierda) hasta 1 (totalmente a la derecha) para posicionamiento estéreo.

Capa de Grupo

La capa group es un contenedor que contiene capas hijas. Las transformaciones aplicadas al grupo afectan a todos los hijos, facilitando mover, escalar, rotar o animar composiciones complejas de múltiples capas como una sola unidad.

Propiedades clave:

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "Título de Tarjeta",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "El texto de descripción de apoyo va aquí.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Los grupos son invaluables para organizar plantillas complejas. Úsalos para crear diseños de tarjetas reutilizables, tercios inferiores, superposiciones y otros elementos compuestos. Las coordenadas de los hijos son relativas a la posición del grupo.

Capa Lottie

La capa lottie renderiza animaciones Lottie exportadas desde After Effects, Figma u otras herramientas de animación.

Propiedades clave:

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

Las capas Lottie son ideales para agregar gráficos en movimiento pulidos, iconos, indicadores de carga y animaciones de marca sin escribir código fotograma por fotograma. Las propiedades startFrame y endFrame te permiten recortar la animación para reproducir solo un segmento específico.

Capa Personalizada

La capa custom es el tipo de capa más poderoso en Rendervid. Te permite escribir componentes React arbitrarios que se renderizan fotograma por fotograma, dándote control completo sobre la salida visual.

Hay tres tipos de implementación para componentes personalizados:

Implementación en Línea

Incrusta código JavaScript directamente en tu plantilla JSON. Mejor para componentes pequeños y autocontenidos.

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

Implementación por URL

Carga un componente desde una URL externa como un CDN. Mejor para componentes reutilizables compartidos entre plantillas.

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

Implementación por Referencia

Usa un componente pre-registrado por nombre. Mejor para componentes del paquete @rendervid/components o registros personalizados.

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

Cada componente personalizado recibe un conjunto estándar de props:

Los componentes personalizados también admiten validación de esquema para props, asegurando que las plantillas pasen los tipos de datos correctos y los campos requeridos a cada componente.

Componentes React Predefinidos

El paquete @rendervid/components viene con un conjunto de componentes listos para producción que puedes usar inmediatamente en tus plantillas.

AnimatedLineChart

Renderiza gráficos de líneas animados con rellenos de degradado suaves, puntos de datos configurables, etiquetas de ejes y efectos de dibujo animado. Ideal para contenido de video basado en datos como informes, paneles y presentaciones.

Props clave: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Crea un efecto hipnotizante de auroras boreales usando degradados en capas y movimiento fluido. Perfecto para fondos atmosféricos, secuencias de introducción y visuales ambientales.

Props clave: colors, speed, intensity, blur

WaveBackground

Genera animaciones de olas fluidas con colores, amplitudes y frecuencias configurables. Úsalo para fondos elegantes, visualizadores de música o contenido con temática oceánica.

Props clave: waveCount, colors, amplitude, frequency, speed

SceneTransition

Proporciona 17 tipos de transiciones profesionales para moverse entre escenas. Incluye barridos, fundidos, zooms, deslizamientos y más. Cada transición es precisa a nivel de fotograma y configurable.

Props clave: transitionType, duration, direction, easing

TypewriterEffect

Renderiza revelación de texto carácter por carácter con un cursor parpadeante. Admite velocidad de escritura configurable, estilo de cursor y retraso entre palabras. Excelente para demostraciones de código, simulaciones de chat y revelaciones de texto dramáticas.

Props clave: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Desarrollo de Componentes Personalizados

Construir tus propios componentes personalizados es donde Rendervid realmente brilla. Cualquier efecto visual que puedas crear con JavaScript y CSS puede convertirse en un componente de Rendervid.

Estructura del Componente

Un componente personalizado de Rendervid es una función JavaScript estándar que recibe props y devuelve un elemento React. La diferencia clave con los componentes React típicos es que el renderizado está impulsado por fotogramas en lugar de impulsado por eventos.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calcular progreso de animación (0 a 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Usar progreso para impulsar animaciones
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "¡Hola, Rendervid!");
}

Props Disponibles

Cada componente personalizado recibe estas props estándar:

• frame – El número de fotograma actual, comenzando en 0. Este es tu controlador de animación principal.
• fps – Fotogramas por segundo (comúnmente 30 o 60). Úsalo para convertir fotogramas a segundos.
• sceneDuration – Duración de la escena actual en segundos. Multiplica por fps para el conteo total de fotogramas.
• layerSize – Un objeto con width y height en píxeles, coincidiendo con las dimensiones de la capa definidas en la plantilla.
• props – Un objeto que contiene cualquier propiedad personalizada definida en el JSON de la plantilla.

El Patrón React.createElement()

Dado que los componentes de Rendervid se ejecutan en un entorno de renderizado, usan React.createElement() en lugar de JSX. El patrón es sencillo:

// Equivalente JSX: <div className="container"><span>Hola</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hola")
);

Validación de Esquema de Props

Puedes definir un esquema para las props de tu componente para validar datos en el momento de carga de la plantilla:

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

Ejemplo: Sistema de Partículas

Un componente de sistema de partículas que simula más de 150 partículas con física:

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

Ejemplo: Contador Animado

Una animación de conteo de números que interpola entre valores de inicio y fin:

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

Para más información sobre cómo los componentes personalizados encajan en la estructura más amplia de la plantilla, consulta la documentación del Sistema de Plantillas .

Editor de Plantillas

El paquete @rendervid/editor proporciona un editor visual de plantillas con todas las funciones, permitiendo tanto a no desarrolladores como a desarrolladores construir plantillas de Rendervid sin escribir JSON a mano.

Edición Basada en Línea de Tiempo

El editor presenta una línea de tiempo multipista donde cada capa se representa como un bloque que se puede arrastrar, redimensionar y reposicionar. Ajusta tiempos de inicio, duraciones y orden de capas visualmente. Acerca para precisión a nivel de fotograma o aleja para una vista general de alto nivel.

Panel de Gestión de Capas

Un panel dedicado lista todas las capas en la composición con reordenamiento de arrastrar y soltar, alternadores de visibilidad, controles de bloqueo y agrupación. Agrega nuevas capas desde una paleta de componentes que incluye los 8 tipos integrados y cualquier componente personalizado registrado.

Panel de Propiedades

Selecciona cualquier capa para ver y editar sus propiedades en un formulario estructurado. El panel de propiedades se adapta al tipo de capa, mostrando solo los campos relevantes. Selectores de color, deslizadores, menús desplegables y entradas de texto facilitan ajustar cada detalle. Los cambios se reflejan inmediatamente en la vista previa.

Historial de Deshacer/Rehacer

Cada cambio se registra en una pila de historial con soporte completo de deshacer y rehacer. Navega por tu historial de edición con confianza, sabiendo que siempre puedes volver a un estado anterior.

Vista Previa en Tiempo Real

El editor incluye un componente Player incrustado que renderiza la plantilla en tiempo real mientras realizas cambios. Previsualiza la composición completa en cualquier punto durante la edición sin necesidad de exportar o renderizar.

Componente Player

El paquete @rendervid/player proporciona un componente React independiente para previsualizar plantillas de Rendervid en el navegador.

Integración con React

Instala e incrusta el reproductor en cualquier aplicación React:

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Reproducción finalizada")}
    />
  );
}

Atajos de Teclado

El reproductor admite controles de teclado integrados para una previsualización eficiente:

Control de Velocidad

Ajusta la velocidad de reproducción desde 0.25x (cuarto de velocidad) hasta 4x (cuádruple velocidad). La reproducción en cámara lenta es útil para revisar animaciones fotograma por fotograma, mientras que el avance rápido ayuda a escanear composiciones más largas.

Callbacks y Eventos

El reproductor expone callbacks para control programático:

Usa estos callbacks para sincronizar el reproductor con elementos de UI externos, analíticas o experiencias interactivas.

Galería de Componentes

Estos ejemplos de componentes personalizados demuestran el rango de lo que es posible con el tipo de capa personalizada de Rendervid. Cada uno está construido usando el mismo patrón React.createElement() descrito anteriormente.

Explosión de Partículas

Un sistema de partículas basado en física con más de 150 partículas, gravedad configurable, color y radio de explosión. Las partículas se generan desde un punto central y se arquean hacia afuera con movimiento realista.

Visualización de Olas

Patrones de olas reactivos al audio que responden a datos de frecuencia. Múltiples capas de olas con amplitud, frecuencia y color configurables crean un visual dinámico y orgánico.

Efectos de Texto Neón

Texto brillante con efectos de luz neón animados, incluyendo parpadeo, pulso y ciclo de colores. Radio de brillo, colores y velocidad de animación personalizables.

Interfaz Holográfica

Una interfaz holográfica inspirada en ciencia ficción con líneas de escaneo, lecturas de datos, superposiciones de cuadrícula y elementos de UI animados. Ideal para videos con temática tecnológica e introducciones futuristas.

Rotación de Cubo 3D

Un cubo 3D acelerado por hardware con caras texturizadas y rotación suave. Usa CSS perspective y transform3d para renderizado 3D eficiente sin WebGL.

Panel de Visualización de Datos

Un componente de panel multi-gráfico que presenta gráficos de barras animados, gráficos de líneas y contadores de estadísticas. Impulsado por datos y configurable para informes, presentaciones y narrativa de datos.

Ejemplos adicionales de componentes personalizados incluyen:

• Contador Animado – animación de conteo de números con funciones de easing
• Anillo de Progreso – indicador de progreso circular con arco y colores configurables
• Máquina de Escribir – animación de escritura de texto con cursor y velocidad variable

Próximos Pasos

• Aprende sobre el Sistema de Plantillas de Rendervid para estructurar escenas y composiciones
• Explora la Integración con IA para generar plantillas con lenguaje natural
• Consulta la guía de Despliegue para renderizar y exportar videos finales
• Regresa a la descripción general de Rendervid para una introducción de alto nivel