Implantação do Rendervid - Renderização em Navegador, Node.js, Cloud e Docker

Introdução

O Rendervid foi projetado para renderizar em qualquer lugar que seu fluxo de trabalho exija. Se você precisa de pré-visualizações instantâneas no navegador, codificação de vídeo de qualidade de produção em um servidor, ou renderização massivamente paralela em infraestrutura de nuvem, o Rendervid fornece um pacote dedicado para cada ambiente. Cada destino de implantação compartilha o mesmo sistema de modelos e biblioteca de componentes , então um modelo que funciona no navegador funciona de forma idêntica no AWS Lambda ou em um contêiner Docker.

Este guia cobre todos os quatro ambientes de implantação, as opções de renderização disponíveis em cada um, e recursos avançados como motion blur, exportação de GIF e otimização de desempenho. Ao final, você saberá exatamente qual caminho de implantação se adequa ao seu projeto e como configurá-lo.

                        +---------------------+
                        |   Modelo JSON       |
                        +----------+----------+
                                   |
              +--------------------+--------------------+
              |                    |                    |
     +--------v--------+  +-------v--------+  +-------v---------+
     |   Navegador      |  |    Node.js     |  |     Nuvem       |
     | @rendervid/      |  | @rendervid/    |  | @rendervid/     |
     | renderer-browser |  | renderer-node  |  | cloud-rendering |
     +---------+--------+  +-------+--------+  +-------+---------+
               |                   |                    |
        Canvas / WebM         FFmpeg / Playwright   Trabalhadores Paralelos
               |                   |                    |
     +---------v--------+  +------v---------+  +-------v---------+
     | MP4, WebM, PNG,  |  | MP4, WebM, MOV,|  | AWS Lambda      |
     | JPEG, WebP       |  | GIF, H.265     |  | Azure Functions |
     +------------------+  +----------------+  | GCP Functions   |
                                               | Docker          |
                                               +-----------------+

Renderização no Navegador

O pacote @rendervid/renderer-browser lida com renderização do lado do cliente inteiramente dentro do navegador do usuário. Nenhuma infraestrutura de servidor é necessária. Isso torna o caminho mais rápido do modelo para a pré-visualização.

Quando Usar Renderização no Navegador

• Pré-visualizações em tempo real durante a edição de modelos no editor visual
• Aplicações web que precisam gerar vídeo ou recursos de imagem dinamicamente
• Prototipagem de novos modelos antes de comprometer-se com renderização no servidor
• Exportações leves onde saída em MP4, WebM, PNG, JPEG ou WebP é suficiente

Instalação

npm install @rendervid/renderer-browser

Como Funciona

A renderização no navegador usa a API HTML Canvas para desenhar cada quadro do modelo. O renderizador percorre cada cena e camada, aplica animações e funções de suavização, compõe o resultado em um elemento canvas e captura cada quadro. Para saída de vídeo, os quadros são codificados usando a API MediaRecorder integrada do navegador (WebM) ou um codificador MP4 baseado em WebAssembly.

Formatos de Saída Suportados

Exemplo de Código

import { BrowserRenderer } from "@rendervid/renderer-browser";

const renderer = new BrowserRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 30,
  scenes: [
    {
      duration: 5,
      layers: [
        {
          type: "text",
          text: "Olá do Navegador",
          fontSize: 72,
          color: "#ffffff",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "fadeIn", duration: 1 },
          },
        },
      ],
    },
  ],
};

// Renderizar para um elemento canvas para pré-visualização
const canvas = document.getElementById("preview") as HTMLCanvasElement;
await renderer.preview(template, canvas);

// Exportar como MP4
const mp4Blob = await renderer.render(template, {
  format: "mp4",
  quality: "standard",
});

// Exportar um único quadro como PNG
const pngBlob = await renderer.renderFrame(template, {
  format: "png",
  frameNumber: 0,
});

Limitações da Renderização no Navegador

• Sem acesso ao FFmpeg, então H.265/HEVC e MOV não estão disponíveis
• Exportação de GIF requer o renderizador Node.js para otimização de paleta
• Resolução máxima depende dos limites de tamanho do Canvas do navegador (tipicamente 4096x4096 ou 8192x8192)
• A velocidade de renderização depende da CPU e GPU do dispositivo do cliente

Renderização Node.js

O pacote @rendervid/renderer-node fornece renderização do lado do servidor com integração completa do FFmpeg. Ele usa Playwright ou Puppeteer para renderizar cada quadro em um navegador headless, então canaliza os quadros para o FFmpeg para codificação de vídeo de nível profissional.

Quando Usar Renderização Node.js

• Codificação de vídeo de produção com suporte completo a codec (H.264, H.265, VP9)
• Processamento em lote de centenas ou milhares de modelos em pipelines automatizados
• APIs REST que aceitam JSON de modelo e retornam vídeo renderizado
• Pipelines de CI/CD para geração automatizada de conteúdo
• Exportação de GIF com otimização de paleta e controle de pontilhamento

Instalação

# Instalar o renderizador
npm install @rendervid/renderer-node

# Instalar Playwright (inclui binários do navegador)
npx playwright install chromium

# Instalar FFmpeg (necessário para codificação de vídeo)
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt-get install ffmpeg

# Windows (via Chocolatey)
choco install ffmpeg

Formatos de Saída Suportados

Predefinições de Qualidade de Renderização

O Rendervid fornece quatro predefinições de qualidade que controlam parâmetros de codificação:

Aceleração por GPU

O renderizador Node.js suporta aceleração de hardware para descarregar a codificação para a GPU. Isso reduz significativamente o tempo de renderização para modelos complexos com muitas camadas, altas resoluções e efeitos.

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/video.mp4",
  hardwareAcceleration: true,
});

A aceleração por GPU está disponível em sistemas com hardware compatível NVIDIA (NVENC), AMD (AMF) ou Intel (Quick Sync). O FFmpeg deve ser compilado com o suporte ao codificador correspondente.

Exemplo de Código

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const template = {
  width: 1920,
  height: 1080,
  fps: 60,
  scenes: [
    {
      duration: 10,
      layers: [
        {
          type: "video",
          src: "/assets/background.mp4",
          fit: "cover",
        },
        {
          type: "text",
          text: "{{headline}}",
          fontSize: 64,
          color: "#ffffff",
          fontFamily: "Inter",
          position: { x: 960, y: 540 },
          animation: {
            entrance: { type: "slideInUp", duration: 0.8 },
            exit: { type: "fadeOut", duration: 0.5 },
          },
        },
      ],
    },
  ],
  inputs: {
    headline: {
      type: "text",
      label: "Título",
      default: "Seu Produto, Elevado",
    },
  },
};

// Renderizar com entradas personalizadas
const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/promo.mp4",
  renderWaitTime: 2000, // Aguardar 2s para carregar mídia
  inputs: {
    headline: "Promoção de Verão — 50% de Desconto em Tudo",
  },
});

console.log(`Renderizado: ${result.outputPath}`);
console.log(`Duração: ${result.duration}s`);
console.log(`Tamanho do arquivo: ${(result.fileSize / 1024 / 1024).toFixed(2)} MB`);

Processamento em Lote

Para processar muitos modelos em sequência, use a API de lote:

import { NodeRenderer } from "@rendervid/renderer-node";

const renderer = new NodeRenderer();

const templates = [
  { template: socialTemplate, inputs: { name: "Alice" }, output: "alice.mp4" },
  { template: socialTemplate, inputs: { name: "Bob" }, output: "bob.mp4" },
  { template: socialTemplate, inputs: { name: "Carol" }, output: "carol.mp4" },
];

for (const job of templates) {
  await renderer.render(job.template, {
    format: "mp4",
    quality: "standard",
    outputPath: `/output/${job.output}`,
    inputs: job.inputs,
  });
}

Para renderização verdadeiramente paralela em uma única máquina, consulte a seção Renderização Local Docker abaixo.

Renderização na Nuvem

O pacote @rendervid/cloud-rendering permite renderização distribuída e paralela em infraestrutura de nuvem. Em vez de renderizar quadros sequencialmente em uma máquina, a renderização na nuvem divide o trabalho entre muitas funções trabalhadoras que renderizam quadros simultaneamente, depois os mescla na saída final.

Quando Usar Renderização na Nuvem

• Pipelines de alto rendimento processando centenas de vídeos por hora
• Conteúdo de longa duração onde a renderização sequencial é muito lenta
• Cargas de trabalho sensíveis ao tempo onde uma aceleração de 10-50x importa
• Escalonamento automático para lidar com picos de demanda imprevisíveis

Arquitetura

+------------------+
|   Sua App        |
|  (Coordenador)   |
+--------+---------+
         |
         | 1. Dividir vídeo em blocos de quadros
         v
+--------+---------+
| Divisor de Blocos|
+--------+---------+
         |
         |  2. Distribuir blocos para trabalhadores
         v
+--------+---+---+---+---+--------+
| Trabalhador 1 | Trabalhador 2 | Trabalhador N |
|  (Lambda/  | (Lambda/  | (Lambda/ |
|   Azure/   |  Azure/   |  Azure/  |
|   GCP)     |  GCP)     |  GCP)    |
+-----+------+----+------+----+----+
      |            |           |
      | 3. Cada trabalhador renderiza seus quadros
      v            v           v
+-----+------+----+------+----+----+
|  Quadros   |  Quadros  |  Quadros|
|  001-030   |  031-060  |  061-090|
+-----+------+----+------+----+----+
      |            |           |
      +------+-----+-----+----+
             |
             v
     +-------+--------+
     |   Mesclador     |
     | (FFmpeg concat) |
     +-------+---------+
             |
             | 4. Combinar em vídeo final
             v
     +-------+---------+
     |Armazenamento de Objetos|
     |  S3 / Blob / GCS |
     +------------------+
             |
             | 5. Baixar ou servir
             v
     +-------+---------+
     |  Saída Final    |
     |   video.mp4     |
     +------------------+

Como funciona passo a passo:

1. O coordenador analisa o modelo e determina quantos quadros precisam ser renderizados com base na duração total e FPS.
2. O divisor de blocos divide a contagem total de quadros em blocos (por exemplo, 30 quadros por bloco para um vídeo de 30fps = 1 segundo por bloco).
3. Cada função trabalhadora recebe uma atribuição de bloco (quadro inicial, quadro final), renderiza esses quadros usando o renderizador Node.js, e faz upload do segmento renderizado para armazenamento de objetos.
4. O mesclador baixa todos os segmentos e os concatena no vídeo final usando FFmpeg.
5. A saída final é armazenada no armazenamento de objetos do provedor de nuvem (S3, Azure Blob ou GCS) e opcionalmente baixada para o sistema de arquivos local.

Configuração de Nuvem

import { CloudRenderer } from "@rendervid/cloud-rendering";

const cloudRenderer = new CloudRenderer({
  provider: "aws", // "aws" | "azure" | "gcp" | "docker"
  quality: "standard", // "draft" | "standard" | "high"
  downloadToLocal: true,
  outputPath: "/output/final.mp4",
});

A interface de configuração completa:

interface CloudRenderConfig {
  provider: "aws" | "azure" | "gcp" | "docker";
  quality: "draft" | "standard" | "high";
  downloadToLocal: boolean;
  outputPath: string;

  awsConfig?: {
    region: string;
    s3Bucket: string;
    s3Prefix: string;
  };

  azureConfig?: {
    resourceGroup: string;
    storageAccount: string;
    containerName: string;
  };

  gcpConfig?: {
    projectId: string;
    bucketName: string;
    region: string;
  };

  dockerConfig?: {
    volumePath: string;
    workersCount: number;
  };
}

Configuração do AWS Lambda

AWS Lambda é o destino de implantação em nuvem mais comum. Cada função trabalhadora é executada em uma invocação Lambda separada, permitindo paralelismo massivo.

Pré-requisitos:

• Conta AWS com acesso ao Lambda e S3
• AWS CLI configurada
• Runtime Lambda Node.js 18+

Configuração:

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "aws",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  awsConfig: {
    region: "us-east-1",
    s3Bucket: "my-rendervid-output",
    s3Prefix: "renders/",
  },
});

const result = await renderer.render(template);
console.log(`Renderizado em ${result.renderTime}ms`);
console.log(`Trabalhadores usados: ${result.workersUsed}`);
console.log(`Saída: ${result.outputUrl}`);

Configuração típica do AWS Lambda:

• Memória: 1024-3008 MB (mais memória = mais CPU = renderização mais rápida)
• Timeout: 300 segundos (5 minutos)
• Armazenamento efêmero: 512 MB - 10 GB
• Concorrência: 100-1000 (ajustar com base na carga de trabalho)

Configuração do Azure Functions

const renderer = new CloudRenderer({
  provider: "azure",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  azureConfig: {
    resourceGroup: "rendervid-rg",
    storageAccount: "rendervidstore",
    containerName: "renders",
  },
});

const result = await renderer.render(template);

Configuração do Google Cloud Functions

const renderer = new CloudRenderer({
  provider: "gcp",
  quality: "standard",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  gcpConfig: {
    projectId: "my-project-id",
    bucketName: "rendervid-output",
    region: "us-central1",
  },
});

const result = await renderer.render(template);

Comparação de Custos

Todos os provedores de nuvem oferecem camadas gratuitas que cobrem cargas de trabalho significativas de renderização durante o desenvolvimento e produção de baixo volume.

Benchmarks de Desempenho

A renderização na nuvem alcança uma aceleração de 10-50x comparada à renderização sequencial em uma única máquina. A aceleração exata depende do número de trabalhadores, complexidade do modelo e duração do vídeo.

Vídeos mais longos se beneficiam mais do paralelismo porque a sobrecarga de inicialização do trabalhador e mesclagem de quadros é amortizada em mais quadros.

Renderização Local Docker

A renderização baseada em Docker oferece a mesma arquitetura de renderização paralela que a renderização na nuvem, mas executando inteiramente em sua máquina local. É completamente gratuita, não usa contas de nuvem, e é ideal para configurações auto-hospedadas, desenvolvimento e equipes que desejam renderização paralela sem custos de nuvem.

Quando Usar Renderização Docker

• Renderização paralela gratuita sem contas de provedor de nuvem
• Infraestrutura auto-hospedada atrás de um firewall
• Desenvolvimento e teste de fluxos de trabalho de renderização na nuvem localmente
• Cargas de trabalho pequenas a médias que se beneficiam do paralelismo mas não precisam de escalonamento automático

Instalação

# Garantir que o Docker está instalado e em execução
docker --version

# Instalar o pacote de renderização na nuvem
npm install @rendervid/cloud-rendering

Configuração

import { CloudRenderer } from "@rendervid/cloud-rendering";

const renderer = new CloudRenderer({
  provider: "docker",
  quality: "high",
  downloadToLocal: true,
  outputPath: "/output/video.mp4",
  dockerConfig: {
    volumePath: "/tmp/rendervid-work",
    workersCount: 8, // Número de contêineres Docker para executar em paralelo
  },
});

const result = await renderer.render(template);
console.log(`Renderizado em ${result.renderTime}ms usando ${result.workersUsed} trabalhadores`);

Escolhendo workersCount: Defina isso para o número de núcleos de CPU disponíveis em sua máquina. Por exemplo, uma máquina de 8 núcleos funciona bem com 8 trabalhadores. Ir além da contagem de núcleos adiciona sobrecarga de troca de contexto sem melhorar o rendimento.

Arquitetura Docker

+------------------+
|   Coordenador    |
|  (seu processo)  |
+--------+---------+
         |
   +-----+-----+-----+-----+
   |     |     |     |     |
+--v--+ +--v-+ +-v--+ +-v--+
| C1  | | C2 | | C3 | | C4 |  ... Contêineres Docker
+--+--+ +--+-+ +-+--+ +-+--+
   |      |     |      |
   v      v     v      v
+--+------+-----+------+--+
|    Volume Compartilhado   |
|    /tmp/rendervid-work    |
+-------------+-------------+
              |
              v
      +-------+--------+
      |   Mesclador     |
      +-------+---------+
              |
              v
      +-------+---------+
      |  /output/video  |
      +-----------------+

Cada contêiner Docker é um trabalhador auto-contido com Node.js, Playwright e FFmpeg pré-instalados. Os trabalhadores leem suas atribuições de quadros do volume compartilhado, renderizam os quadros e escrevem os resultados de volta. O coordenador então mescla todos os segmentos na saída final.

Motion Blur

O Rendervid suporta motion blur através de superamostragem temporal. Em vez de renderizar um único instante por quadro, o renderizador captura múltiplos sub-quadros em pontos ligeiramente diferentes no tempo e os mescla juntos. Isso produz o desfoque natural que as câmeras criam quando objetos se movem durante uma exposição.

Predefinições de Qualidade

Configuração

const result = await renderer.render(template, {
  format: "mp4",
  quality: "high",
  outputPath: "/output/cinematic.mp4",
  motionBlur: {
    enabled: true,
    quality: "high", // 16 amostras por quadro
  },
});

Como Funciona a Superamostragem Temporal

Quadro N (sem motion blur):          Quadro N (com motion blur, 5 amostras):

  Instante único:                      5 sub-quadros mesclados:

  +--------+                         +--------+   +--------+   +--------+
  |    O   |                         |   O    | + |    O   | + |     O  |  ...
  +--------+                         +--------+   +--------+   +--------+
                                              |
                                              v
                                     +--------+
                                     |  ~O~   |  <- Resultado mesclado
                                     +--------+

Cada sub-quadro avança a linha do tempo da animação por um incremento minúsculo (1/fps dividido pela contagem de amostras). Os sub-quadros são então mesclados com alfa para produzir o quadro final. Objetos que se moveram entre sub-quadros aparecem desfocados ao longo de seu caminho de movimento, enquanto elementos estacionários permanecem nítidos.

Considerações de Desempenho

Motion blur multiplica o tempo de renderização proporcionalmente à contagem de amostras. Um vídeo de 10 segundos a 30fps tem 300 quadros. Com qualidade high (16 amostras), o renderizador deve gerar 4.800 sub-quadros em vez de 300. Use qualidade draft durante o desenvolvimento e mude para high ou ultra apenas para exportações finais.

A renderização na nuvem e a renderização paralela Docker funcionam bem com motion blur porque o custo por quadro é distribuído entre os trabalhadores. Um aumento de 16x por quadro dividido entre 16 trabalhadores resulta aproximadamente no mesmo tempo total de renderização que uma renderização sem desfoque em uma máquina.

Exportação de GIF

A exportação de GIF do Rendervid vai muito além de uma simples conversão de quadro para GIF. Ela usa o pipeline de geração de paleta do FFmpeg para produzir GIFs animados otimizados e de alta qualidade com pontilhamento configurável, contagens de cores e restrições de tamanho de arquivo.

Como Funciona a Otimização de GIF

A codificação GIF padrão usa uma única paleta global de 256 cores, o que frequentemente resulta em bandas e reprodução de cores ruim. O Rendervid usa uma abordagem de duas passagens:

1. Passagem 1 (palettegen): Analisar todos os quadros para gerar uma paleta otimizada de 256 cores que melhor representa a faixa completa de cores do vídeo.
2. Passagem 2 (paletteuse): Re-codificar cada quadro usando a paleta otimizada com pontilhamento opcional para gradientes suaves.

Predefinições de Otimização

Opções de Pontilhamento

Configuração

const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/animation.gif",
  gif: {
    preset: "social",       // resolução 480x480
    colors: 256,            // paleta de 2-256 cores
    dithering: "floyd_steinberg",
    targetSizeKB: 5000,     // Auto-otimizar para ficar abaixo de 5MB
    fps: 15,                // FPS menor = arquivo menor
  },
});

console.log(`Tamanho do GIF: ${(result.fileSize / 1024).toFixed(0)} KB`);
console.log(`Tamanho estimado era: ${result.estimatedSizeKB} KB`);

Estimativa de Tamanho de Arquivo e Auto-Otimização

Quando você define um targetSizeKB, o Rendervid estima o tamanho do arquivo de saída antes de renderizar e ajusta automaticamente os parâmetros (contagem de cores, resolução, FPS) para atender ao alvo. Isso é particularmente útil para plataformas com limites de tamanho de arquivo (por exemplo, limite de 50 MB do Slack, restrição típica de 10 MB de email).

// Auto-otimizar para caber dentro de uma restrição de email de 2MB
const result = await renderer.render(template, {
  format: "gif",
  outputPath: "/output/email-banner.gif",
  gif: {
    preset: "email",
    targetSizeKB: 2000,
  },
});

Arquitetura de Pacotes

O Rendervid é organizado como um monorepo com 13 pacotes. Cada pacote tem uma responsabilidade focada, e eles se compõem juntos para suportar cada cenário de implantação.

@rendervid/
├── core                    Motor, tipos, validação, sistema de animação
│   ├── Analisador e validador de modelo (AJV + JSON Schema)
│   ├── Motor de animação (40+ predefinições, 30+ funções de suavização)
│   ├── Sistema de camadas (texto, imagem, vídeo, forma, áudio, grupo, lottie, personalizado)
│   └── Gerenciamento de cenas e transições (17 tipos)
│
├── renderer-browser        Renderização do lado do cliente
│   ├── Renderização de quadros baseada em Canvas
│   ├── MediaRecorder para exportação WebM
│   └── Codificador MP4 WebAssembly
│
├── renderer-node           Renderização do lado do servidor
│   ├── Navegador headless Playwright/Puppeteer
│   ├── Integração FFmpeg (fluent-ffmpeg)
│   ├── Aceleração por GPU
│   └── Pipeline de otimização de GIF
│
├── cloud-rendering         Orquestração multi-nuvem
│   ├── Provedor AWS Lambda
│   ├── Provedor Azure Functions
│   ├── Provedor Google Cloud Functions
│   ├── Provedor Docker local
│   ├── Divisor de blocos e mesclador
│   └── Adaptadores de armazenamento de objetos (S3, Blob, GCS)
│
├── player                  Componente de reprodução de vídeo/modelo
├── editor                  Editor visual de modelo (estado Zustand)
├── components              Componentes React pré-construídos
│   ├── AnimatedLineChart
│   ├── AuroraBackground
│   ├── WaveBackground
│   ├── SceneTransition
│   └── TypewriterEffect
│
├── templates               Definições e exemplos de modelos (100+)
├── testing                 Utilitários de teste
│   ├── Matchers personalizados Vitest
│   ├── Auxiliares de teste de snapshot
│   └── Utilitários de regressão visual
│
├── editor-playground       Ambiente de desenvolvimento do editor
├── player-playground       Ambiente de desenvolvimento do player
├── mcp                     Servidor Model Context Protocol
└── docs                    Site de documentação VitePress

Como os Pacotes se Conectam

• @rendervid/core é a fundação. Todos os outros pacotes dependem dele para tipos de modelo, validação e o sistema de animação.
• @rendervid/renderer-browser e @rendervid/renderer-node ambos consomem modelos core mas produzem saída através de pipelines diferentes (Canvas vs. FFmpeg).
• @rendervid/cloud-rendering envolve renderer-node e distribui seu trabalho entre funções de nuvem ou contêineres Docker.
• @rendervid/player e @rendervid/editor são pacotes de UI baseados em React para reprodução e edição visual. O editor usa Zustand para gerenciamento de estado.
• @rendervid/components fornece os componentes React pré-construídos (AnimatedLineChart, AuroraBackground, etc.) que podem ser usados em modelos.
• @rendervid/testing fornece matchers Vitest e auxiliares de teste de snapshot para validar modelos.
• mcp é a camada de integração com IA que expõe as capacidades do Rendervid para agentes de IA via Model Context Protocol.

Stack Tecnológica

O Rendervid é construído em uma stack TypeScript moderna escolhida por confiabilidade, desempenho e experiência do desenvolvedor.

Teste

O Rendervid inclui um pacote de teste dedicado (@rendervid/testing) que fornece matchers Vitest personalizados, auxiliares de teste de snapshot e utilitários de regressão visual para validar modelos.

Matchers Personalizados Vitest

import { describe, it, expect } from "vitest";
import "@rendervid/testing/matchers";

describe("Modelo de Apresentação de Produto", () => {
  it("deve ser um modelo válido", () => {
    expect(template).toBeValidTemplate();
  });

  it("deve ter as dimensões corretas", () => {
    expect(template).toHaveResolution(1920, 1080);
  });

  it("deve conter pelo menos uma camada de texto", () => {
    expect(template).toContainLayerOfType("text");
  });

  it("deve ter animações no título", () => {
    expect(template.scenes[0].layers[0]).toHaveAnimation("entrance");
  });
});

Teste de Snapshot

O teste de snapshot renderiza um modelo para uma imagem e compara com uma referência armazenada. Qualquer mudança visual faz o teste falhar, facilitando a detecção de regressões não intencionais.

import { describe, it } from "vitest";
import { renderSnapshot } from "@rendervid/testing";

describe("Regressão Visual do Modelo", () => {
  it("deve corresponder ao snapshot de referência no quadro 0", async () => {
    const snapshot = await renderSnapshot(template, { frame: 0 });
    expect(snapshot).toMatchImageSnapshot();
  });

  it("deve corresponder ao snapshot de referência no ponto médio", async () => {
    const totalFrames = template.fps * template.scenes[0].duration;
    const snapshot = await renderSnapshot(template, {
      frame: Math.floor(totalFrames / 2),
    });
    expect(snapshot).toMatchImageSnapshot();
  });
});

Teste de Regressão Visual em CI

Integre testes de regressão visual em seu pipeline de CI/CD para detectar mudanças de renderização antes que cheguem à produção:

# .github/workflows/visual-regression.yml
name: Testes de Regressão Visual
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npx playwright install chromium
      - run: npm ci
      - run: npm run test:visual

Otimização de Desempenho

Obter os tempos de renderização mais rápidos possíveis requer entender onde o tempo é gasto e quais alavancas você pode puxar. Aqui estão as estratégias de otimização mais impactantes.

1. Escolha o Destino de Implantação Correto

2. Otimize a Complexidade do Modelo

• Reduza a contagem de camadas. Cada camada é renderizada independentemente. Menos camadas significa menos operações de desenho por quadro.
• Use qualidade draft durante desenvolvimento e teste. Mude para high ou lossless apenas para exportações finais.
• Simplifique animações durante pré-visualização. Sequências complexas de keyframes com muitas funções de suavização adicionam computação por quadro.

3. Use renderWaitTime com Sabedoria

A opção renderWaitTime pausa a renderização para permitir que mídia externa (imagens, vídeos, fontes) carregue. Defina isso para o valor mínimo que garante que todos os recursos sejam carregados. Um valor de 500-2000ms é típico. Definir muito alto desperdiça tempo em cada quadro.

await renderer.render(template, {
  renderWaitTime: 1000, // 1 segundo geralmente é suficiente
});

4. Aproveite a Renderização Paralela

Para qualquer vídeo mais longo que 10 segundos, a renderização paralela (Docker ou nuvem) será mais rápida que a renderização sequencial. O ponto de equilíbrio depende do seu hardware e configuração de nuvem, mas como regra geral:

• < 10 segundos: Renderizador Node.js único está bem
• 10-60 segundos: Docker com 4-8 trabalhadores
• 1-10 minutos: Docker com 8-16 trabalhadores ou nuvem
• > 10 minutos: Renderização na nuvem com 50+ trabalhadores

5. Otimize a Saída de GIF

GIFs são inerentemente grandes. Para manter tamanhos de arquivo gerenciáveis:

• Reduza o FPS para 10-15. A maioria dos GIFs fica bem com taxas de quadros reduzidas.
• Reduza a resolução usando predefinições (social, web, email).
• Limite as cores para 128 ou menos para animações simples.
• Use targetSizeKB para deixar o Rendervid auto-otimizar parâmetros.
• Evite pontilhamento (none) se o tamanho do arquivo importa mais que a qualidade do gradiente.

6. Habilite Aceleração por GPU

Em máquinas com GPUs compatíveis, a codificação acelerada por hardware pode reduzir os tempos de renderização em 2-5x para a etapa de codificação. Isso é mais impactante para saídas de alta resolução (4K+) e alta taxa de bits.

7. Pré-carregue Recursos

Se seu modelo referencia imagens ou vídeos externos, pré-baixe-os para armazenamento local antes de renderizar. Latência de rede durante a renderização é a causa mais comum de renderizações lentas ou com falha.

Próximos Passos

• Comece com o Rendervid: Visite a visão geral do Rendervid para instalação e primeira renderização
• Aprenda o sistema de modelos: Leia a documentação do Sistema de Modelos para estrutura de modelo JSON, variáveis, cenas, camadas e animações
• Explore componentes: Navegue pela Biblioteca de Componentes para componentes React pré-construídos como AnimatedLineChart e AuroraBackground
• Configure a integração com IA: Veja o guia de Integração com IA para conectar Claude Code, Cursor ou Windsurf ao Rendervid via MCP
• Veja o código-fonte: Visite o repositório GitHub do Rendervid para o código-fonte completo e 100+ modelos de exemplo