Componentes Rendervid - Tipos de Camadas, Componentes React e Editor Visual

O Rendervid é construído sobre uma arquitetura baseada em componentes que torna a criação de vídeos modular, extensível e amigável para desenvolvedores. Cada elemento em um template Rendervid é uma camada, e cada camada tem um tipo específico que determina como ela é renderizada. Com 8 tipos de camadas integradas, uma biblioteca crescente de componentes React pré-construídos, um editor visual de templates e um player independente, o Rendervid oferece tudo o que você precisa para produzir conteúdo de vídeo profissional programaticamente.

Esta página cobre o ecossistema completo de componentes: desde tipos de camadas primitivos como texto e forma, passando por reprodução de áudio e vídeo, até componentes React totalmente personalizados que desbloqueiam possibilidades criativas ilimitadas. Seja você construindo um simples cartão de título ou uma animação complexa orientada por dados, entender esses componentes é a base.

Tipos de Camadas Integradas

Cada camada em um template Rendervid é definida como um objeto JSON com um campo type. O tipo determina as propriedades disponíveis e o comportamento de renderização. Abaixo está uma referência detalhada para cada um dos 8 tipos de camadas integradas.

Camada de Texto

A camada text é a primitiva mais rica em recursos no Rendervid. Ela renderiza texto estilizado com controle completo sobre tipografia, alinhamento, cor, efeitos e animação.

Propriedades de tipografia:

O Rendervid vem com mais de 100 Google Fonts integradas. Você pode usar qualquer uma delas especificando a propriedade fontFamily sem precisar carregar folhas de estilo externas.

Propriedades de alinhamento:

Estilização e efeitos:

• color e backgroundColor para coloração básica
• textShadow para sombras projetadas
• textStroke para texto contornado
• textDecoration para sublinhado, tachado
• textTransform para maiúsculas, minúsculas, capitalizar
• maxLines com truncamento automático de reticências
• Efeito de máquina de escrever integrado para revelação de texto caractere por caractere

{
  "type": "text",
  "text": "Bem-vindo ao 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 animações de texto avançadas como o efeito de máquina de escrever, combine a camada de texto com animações de keyframe ou use o componente TypewriterEffect dedicado.

Camada de Imagem

A camada image exibe imagens raster e vetoriais com opções flexíveis de dimensionamento e recorte.

Propriedades principais:

Formatos suportados: 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"
}

A propriedade fit funciona como o CSS object-fit:

• cover – dimensiona a imagem para preencher a camada, recortando o excesso
• contain – dimensiona para caber inteiramente dentro da camada, com possível letterboxing
• fill – estica a imagem para corresponder exatamente às dimensões da camada
• none – renderiza a imagem em sua resolução nativa

Camada de Vídeo

A camada video incorpora clipes de vídeo em sua composição com controle completo de reprodução.

Propriedades principais:

{
  "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
}

Use startTime para pular introduções ou ir para um ponto específico na filmagem de origem. Combine com playbackRate para efeitos de câmera lenta (0.5) ou time-lapse (2.0).

Camada de Forma

A camada shape desenha formas vetoriais com preenchimentos, contornos, gradientes e cantos arredondados.

Tipos de forma:

Propriedades de estilização:

• fill – cor sólida ou gradiente
• stroke – cor da borda
• strokeWidth – espessura da borda
• borderRadius – cantos arredondados para retângulos
• Gradientes: preenchimentos de gradiente linear e 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, use o tipo path com dados de caminho SVG padrão:

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

Camada de Áudio

A camada audio adiciona faixas de áudio à sua composição com controle de volume, fade e uma cadeia completa de efeitos.

Propriedades principais:

Cadeia de efeitos de áudio:

O Rendervid inclui um pipeline de processamento de efeitos integrado. Efeitos disponíveis:

• EQ – equalização para modelagem de tom
• Compressor – compressão de faixa dinâmica
• Reverb – reverberação espacial
• Delay – efeito de eco/delay
• Gain – aumento ou atenuação de volume
• Filtro passa-alta – remove frequências baixas
• Filtro passa-baixa – remove frequências altas
• Panning – posicionamento estéreo (esquerda/direita)

{
  "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
}

Os efeitos são processados em ordem, permitindo que você construa cadeias sofisticadas de processamento de áudio. Use valores de pan de -1 (totalmente à esquerda) a 1 (totalmente à direita) para posicionamento estéreo.

Camada de Grupo

A camada group é um contêiner que contém camadas filhas. Transformações aplicadas ao grupo afetam todos os filhos, facilitando mover, dimensionar, rotacionar ou animar composições complexas de múltiplas camadas como uma única unidade.

Propriedades principais:

{
  "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 do Cartão",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Texto de descrição de suporte vai aqui.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Grupos são inestimáveis para organizar templates complexos. Use-os para criar layouts de cartões reutilizáveis, lower-thirds, sobreposições e outros elementos compostos. As coordenadas dos filhos são relativas à posição do grupo.

Camada Lottie

A camada lottie renderiza animações Lottie exportadas do After Effects, Figma ou outras ferramentas de animação.

Propriedades principais:

{
  "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
}

Camadas Lottie são ideais para adicionar gráficos em movimento polidos, ícones, indicadores de carregamento e animações de marca sem escrever código quadro a quadro. As propriedades startFrame e endFrame permitem aparar a animação para reproduzir apenas um segmento específico.

Camada Personalizada

A camada custom é o tipo de camada mais poderoso no Rendervid. Ela permite que você escreva componentes React arbitrários que renderizam quadro a quadro, dando-lhe controle completo sobre a saída visual.

Existem três tipos de implantação para componentes personalizados:

Implantação Inline

Incorpore código JavaScript diretamente em seu template JSON. Melhor para componentes pequenos e autocontidos.

{
  "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"
  }
}

Implantação por URL

Carregue um componente de uma URL externa, como um CDN. Melhor para componentes reutilizáveis compartilhados entre templates.

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

Implantação por Referência

Use um componente pré-registrado por nome. Melhor para componentes do pacote @rendervid/components ou 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 recebe um conjunto padrão de propriedades:

Componentes personalizados também suportam validação de esquema para propriedades, garantindo que os templates passem os tipos de dados corretos e campos obrigatórios para cada componente.

Componentes React Pré-construídos

O pacote @rendervid/components vem com um conjunto de componentes prontos para produção que você pode usar imediatamente em seus templates.

AnimatedLineChart

Renderiza gráficos de linhas animados com preenchimentos de gradiente suaves, pontos de dados configuráveis, rótulos de eixos e efeitos de desenho animado. Ideal para conteúdo de vídeo orientado por dados, como relatórios, dashboards e apresentações.

Propriedades principais: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Cria um efeito hipnotizante de aurora boreal (aurora borealis) usando gradientes em camadas e movimento fluido. Perfeito para fundos atmosféricos, sequências de introdução e visuais ambientes.

Propriedades principais: colors, speed, intensity, blur

WaveBackground

Gera animações de ondas fluidas com cores, amplitudes e frequências configuráveis. Use para fundos elegantes, visualizadores de música ou conteúdo com tema oceânico.

Propriedades principais: waveCount, colors, amplitude, frequency, speed

SceneTransition

Fornece 17 tipos de transições profissionais para mover entre cenas. Inclui wipes, fades, zooms, slides e muito mais. Cada transição é precisa ao quadro e configurável.

Propriedades principais: transitionType, duration, direction, easing

TypewriterEffect

Renderiza revelação de texto caractere por caractere com um cursor piscante. Suporta velocidade de digitação configurável, estilo de cursor e atraso entre palavras. Ótimo para demos de código, simulações de chat e revelações de texto dramáticas.

Propriedades principais: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Desenvolvimento de Componentes Personalizados

Construir seus próprios componentes personalizados é onde o Rendervid realmente brilha. Qualquer efeito visual que você possa criar com JavaScript e CSS pode se tornar um componente Rendervid.

Estrutura do Componente

Um componente personalizado Rendervid é uma função JavaScript padrão que recebe propriedades e retorna um elemento React. A principal diferença dos componentes React típicos é que a renderização é orientada por quadros em vez de orientada por eventos.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Calcular progresso da animação (0 a 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Usar progresso para conduzir animações
  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 || "Olá, Rendervid!");
}

Propriedades Disponíveis

Cada componente personalizado recebe estas propriedades padrão:

• frame – O número do quadro atual, começando em 0. Este é o seu principal condutor de animação.
• fps – Quadros por segundo (comumente 30 ou 60). Use-o para converter quadros em segundos.
• sceneDuration – Duração da cena atual em segundos. Multiplique por fps para obter a contagem total de quadros.
• layerSize – Um objeto com width e height em pixels, correspondendo às dimensões da camada definidas no template.
• props – Um objeto contendo quaisquer propriedades personalizadas definidas no JSON do template.

O Padrão React.createElement()

Como os componentes Rendervid são executados em um ambiente de renderização, eles usam React.createElement() em vez de JSX. O padrão é direto:

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

Validação de Esquema de Propriedades

Você pode definir um esquema para as propriedades do seu componente para validar dados no momento do carregamento do template:

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 },
};

Exemplo: Sistema de Partículas

Um componente de sistema de partículas que simula mais de 150 partículas com 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);
}

Exemplo: Contador Animado

Uma animação de contagem de números que interpola entre valores inicial e final:

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 cúbico
  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 mais sobre como componentes personalizados se encaixam na estrutura mais ampla do template, consulte a documentação do Sistema de Templates .

Editor de Templates

O pacote @rendervid/editor fornece um editor visual de templates completo, permitindo que não desenvolvedores e desenvolvedores construam templates Rendervid sem escrever JSON manualmente.

Edição Baseada em Linha do Tempo

O editor apresenta uma linha do tempo de múltiplas faixas onde cada camada é representada como um bloco que pode ser arrastado, redimensionado e reposicionado. Ajuste os tempos de início, durações e ordenação de camadas visualmente. Dê zoom para precisão no nível de quadro ou reduza o zoom para uma visão geral de alto nível.

Painel de Gerenciamento de Camadas

Um painel dedicado lista todas as camadas na composição com reordenação por arrastar e soltar, alternâncias de visibilidade, controles de bloqueio e agrupamento. Adicione novas camadas de uma paleta de componentes que inclui todos os 8 tipos integrados e quaisquer componentes personalizados registrados.

Painel de Propriedades

Selecione qualquer camada para visualizar e editar suas propriedades em um formulário estruturado. O painel de propriedades se adapta ao tipo de camada, mostrando apenas os campos relevantes. Seletores de cores, controles deslizantes, menus suspensos e campos de texto facilitam o ajuste de cada detalhe. As alterações são refletidas imediatamente na visualização.

Histórico de Desfazer/Refazer

Cada alteração é registrada em uma pilha de histórico com suporte completo para desfazer e refazer. Navegue pelo seu histórico de edição com confiança, sabendo que você sempre pode reverter para um estado anterior.

Visualização em Tempo Real

O editor inclui um componente Player incorporado que renderiza o template em tempo real conforme você faz alterações. Visualize a composição completa em qualquer ponto durante a edição sem precisar exportar ou renderizar.

Componente Player

O pacote @rendervid/player fornece um componente React independente para visualizar templates Rendervid no navegador.

Integração com React

Instale e incorpore o player em qualquer aplicação React:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Reprodução finalizada")}
    />
  );
}

Atalhos de Teclado

O player suporta controles de teclado integrados para visualização eficiente:

Controle de Velocidade

Ajuste a velocidade de reprodução de 0.25x (um quarto da velocidade) a 4x (quatro vezes a velocidade). A reprodução em câmera lenta é útil para revisar animações quadro a quadro, enquanto o avanço rápido ajuda a escanear composições mais longas.

Callbacks e Eventos

O player expõe callbacks para controle programático:

Use esses callbacks para sincronizar o player com elementos de UI externos, análises ou experiências interativas.

Galeria de Componentes

Estes exemplos de componentes personalizados demonstram a gama do que é possível com o tipo de camada personalizada do Rendervid. Cada um é construído usando o mesmo padrão React.createElement() descrito acima.

Explosão de Partículas

Um sistema de partículas baseado em física com mais de 150 partículas, gravidade configurável, cor e raio de explosão. As partículas surgem de um ponto central e se arqueiam para fora com movimento realista.

Visualização de Ondas

Padrões de ondas reativos a áudio que respondem a dados de frequência. Múltiplas camadas de ondas com amplitude, frequência e cor configuráveis criam um visual dinâmico e orgânico.

Efeitos de Texto Neon

Texto brilhante com efeitos de luz neon animados, incluindo cintilação, pulsação e ciclagem de cores. Raio de brilho, cores e velocidade de animação personalizáveis.

Interface Holográfica

Uma UI holográfica inspirada em ficção científica com linhas de varredura, leituras de dados, sobreposições de grade e elementos de UI animados. Ideal para vídeos com tema tecnológico e introduções futuristas.

Rotação de Cubo 3D

Um cubo 3D CSS acelerado por hardware com faces texturizadas e rotação suave. Usa CSS perspective e transform3d para renderização 3D performática sem WebGL.

Dashboard de Visualização de Dados

Um componente de dashboard com múltiplos gráficos apresentando gráficos de barras animados, gráficos de linhas e contadores de estatísticas. Orientado por dados e configurável para relatórios, apresentações e narrativa de dados.

Exemplos adicionais de componentes personalizados incluem:

• Contador Animado – animação de contagem de números com funções de easing
• Anel de Progresso – indicador de progresso circular com arco e cores configuráveis
• Máquina de Escrever – animação de digitação de texto com cursor e velocidade variável

Próximos Passos

• Aprenda sobre o Sistema de Templates Rendervid para estruturar cenas e composições
• Explore a Integração com IA para gerar templates com linguagem natural
• Veja o guia de Implantação para renderizar e exportar vídeos finais
• Retorne à visão geral do Rendervid para uma introdução de alto nível