Frontends com Vibecoding · Capítulo 12 de 33 · 13 min
Construir profundidade e dirigir a montagem de vídeo
A tela ganha profundidade em vez de fundo chapado, e o vídeo passa a ser montado pelo modelo a partir de planos, com alternativa estática pronta.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding.
Profundidade em camadas é o que separa uma página gerada por máquina de uma que parece feita por gente. Camada aqui funciona como no teatro: cenário ao fundo, objetos no meio e o ator à frente, cada plano num lugar diferente. Vídeo, por outro lado, agora se resolve por montagem.
A página chapada empilha uma imagem de fundo e joga o texto por cima. Tudo se move junto quando a pessoa rola, e o olho registra isso como folheto de supermercado.
Já a página em camadas separa os elementos em planos: paisagem ao fundo, objetos no meio, o produto à frente e o texto por cima. Cada plano corre em velocidade própria na rolagem, e essa diferença é o que cria relevo sem virar bagunça.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
O ganho recente está no primeiro rascunho. Um avaliador levava cerca de 15 rodadas de conversa com um modelo para chegar ao tom da marca. No primeiro passe do GPT-6 Astra, ele obteve clima equivalente.
No outro modelo, o resultado final continuou melhor depois de muitas rodadas. O que encolheu foi a distância até o rascunho apresentável, e é aí que o seu prazo mora.
Se a sua dor é o acabamento das últimas rodadas, o ganho é pequeno. Se a dor é sair do zero numa segunda-feira, ele aparece já na primeira entrega.
Referência real vale mais que ajuste de palavras no pedido. Anexe páginas e peças de bibliotecas públicas de design e de premiações do setor, porque a imagem diz ao modelo o que a frase não consegue dizer.
Pedir apenas um site produz página genérica em qualquer modelo. Sem direção de arte declarada, o padrão puxa para verde escuro, tons pastel e superfícies chapadas, repetido em projetos sem relação entre si.

Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Em vídeo o verbo mudou: o modelo monta em vez de inventar imagem. Ele opera o editor como um estagiário rápido, porque percorre o material bruto, escolhe as tomadas, puxa a marca já existente e devolve o corte pronto.
Um teste publicado mediu isso. Mais de 150 GB de material de um evento viraram um corte de um minuto, sincronizado com a música, em cerca de 35 minutos.
A falha registrada foi um endereço escrito errado na tela. É o tipo de erro que o corte esconde e o cliente encontra, por isso a revisão humana continua obrigatória nos campos de contato.
Trocar de plataforma importa para quem já montou fluxo. A OpenAI descontinuou o Sora 2 e a interface de vídeo, com desligamento marcado para 24 de setembro de 2026.
O GPT-6 Astra não substitui esse serviço, porque ele não recebe nem produz vídeo. Quem depende de geração automática precisa escolher outro fornecedor antes dessa data.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Declare uma cor de destaque e no máximo duas famílias de letra no pedido. Sem essa declaração, o modelo escolhe por você e repete o mesmo gosto em clientes sem relação entre si.
A repetição tem explicação medida. Modelos ajustados por preferência humana reduzem a variedade do conteúdo produzido com eles, enquanto o modelo base sem esse ajuste não reduz (Padmakumar e He, ICLR, 2024).
Separe as tomadas boas antes de pedir o corte e escreva a ordem que você quer ver na tela.
Antes de aprovar, reúna três referências reais do ramo do cliente e anexe as imagens ao pedido, em vez de descrever com palavras. Peça quatro planos e dois ou três movimentos com propósito, sem enfeite solto sobre a imagem principal.
Abra o resultado em celular e em tela larga, e confira se o texto cabe no espaço e se nenhum elemento flutuante cobre botão. Revise nome, endereço, telefone, preço e data no vídeo montado, porque é aí que o erro passa despercebido no corte.
Guia prático: o vídeo como página HTML renderizada quadro a quadro
O jeito novo de montar vídeo com agente não passa por editor de timeline: o vídeo é uma página HTML. O HyperFrames, projeto aberto da HeyGen sob licença Apache 2.0, abre essa página num Chrome sem janela, posiciona a animação em cada quadro e codifica o resultado com FFmpeg. O curso de edição estudado em 07/10/2026 usa esse caminho do bruto ao MP4.
A composição tem as mesmas camadas que este capítulo ensina para a página. Embaixo, a base de câmera: os trechos do bruto, já cortados. Por cima, camadas sobrepostas em trilhas numeradas, cada bloco com início e duração: gráfico, tela gravada, número, título. No topo, a legenda como componente, com regras fixas de agrupamento: quebra na pontuação e no corte, no máximo 5 palavras e 30 caracteres por grupo, e some quando um número grande entra em cena. Dois ajustes de acabamento entram como regra: o bruto em HDR do celular é convertido para BT.709, o padrão de vídeo comum, porque sem isso os gráficos saem lavados no celular e o render fica lento; e o volume final fica em -14 LUFS, já que o YouTube abaixa vídeo alto e não aumenta vídeo baixo.
Os números do caso real: um bruto de 21 min 30 s virou 11 min 04 s em 4K, com 191 cortes. O render 4K de 11 minutos levou 13 minutos num notebook de 16 GB, com a captura em fluxo ligada; sem ela, o mesmo render pediria 66 GB de disco para guardar quadros. Requisitos: Node 22 ou superior, FFmpeg e Python.
Monte a composição deste vídeo como página HTML para o HyperFrames.
Bruto: [arquivo do bruto] Transcrição com tempo por palavra: [arquivo]
Formato: [16:9 em 4K | 9:16 em 1080x1920]
Camadas, de baixo para cima:
1. Base de câmera: só os trechos aprovados na lista de cortes [arquivo].
2. Sobreposições em trilhas numeradas, cada bloco com início e duração
em segundos: [lista de gráficos, telas e números, com o tempo da fala].
3. Legenda: grupos de no máximo 5 palavras e 30 caracteres, quebra na
pontuação; some enquanto um número grande estiver na tela.
Antes de renderizar:
- Se o bruto for HDR, converta para BT.709 e me diga como conferiu.
- Volume final em -14 LUFS, pico abaixo de -1 dBFS.
- Renderize primeiro os 60 segundos iniciais em resolução menor.Do bruto ao vídeo montado em camadas
Seis passos para o primeiro vídeo feito como página. Instale uma vez e confira o ambiente antes de começar.
Passo 1: Confira o ambiente
Node 22 ou superior, FFmpeg e Python instalados, e espaço em disco livre de sobra. Peça ao agente para rodar a verificação do HyperFrames e mostrar as versões.
Deu certo quando: As três ferramentas respondem com versão e a verificação passa.
Erro comum: Começar com Node 20 e descobrir a incompatibilidade no meio do render.
Passo 2: Separe a base de câmera das camadas
Primeiro aprove a lista de cortes do bruto. Só depois peça gráficos e telas por cima, cada um com início e duração amarrados à fala.
Deu certo quando: A base de câmera roda sozinha, sem nenhuma sobreposição, e você aprova o ritmo.
Erro comum: Pedir cortes e efeitos juntos e ter de refazer os efeitos quando um corte muda.
Passo 3: Trate a legenda como componente
Escreva as regras no pedido: quantas palavras por grupo, onde ela fica em cada formato e quando some. Assim todas as cenas seguem a mesma regra sem ajuste caso a caso.
Deu certo quando: Nenhum grupo de legenda passa de 5 palavras e nenhum cobre um número em destaque.
Erro comum: Legenda de frase inteira, em duas linhas longas, que ninguém termina de ler.
Passo 4: Acerte cor e volume antes do render final
Confira se o bruto é HDR; se for, a conversão para BT.709 entra antes de tudo. Normalize o volume em -14 LUFS e ouça o resultado no celular.
Deu certo quando: Os gráficos aparecem com a cor do DESIGN.md no celular e o volume fica no nível dos outros vídeos do canal.
Erro comum: Ver tudo certo no monitor do computador e publicar um vídeo lavado e baixo no celular.
Passo 5: Faça o piloto de 60 segundos
Renderize só o primeiro minuto em resolução menor e assista inteiro. Corrigir aqui custa minutos; no render 4K completo, custa horas de máquina.
Deu certo quando: O minuto piloto foi aprovado sem nota pendente.
Erro comum: Mandar o 4K completo direto e encontrar o erro de cor no décimo minuto.
Passo 6: Renderize com a captura em fluxo
No render longo, ligue a captura em fluxo para não gravar todos os quadros em disco. Rode um render por vez e confira duração e número de quadros do arquivo final.
Deu certo quando: O MP4 tem a duração esperada e o disco não encheu durante o render.
Erro comum: Abrir vários renders 4K em paralelo e esgotar memória e disco da máquina.
No fim você tem: Um vídeo montado como página: base de câmera aprovada, camadas com tempo, legenda com regra, cor e volume corretos e um render que cabe na máquina.
Sócia de uma agência de marketing em Goiânia que grava um vídeo semanal de bastidores para o YouTube da agência
Serviços de marketing, conteúdo próprio
Dor
Cada vídeo levava dois dias num editor de timeline, e os gráficos com números de campanha saíam com cores diferentes das da marca no celular.
Solução
Ela passou a montar o vídeo como página: aprovava os cortes, pedia as camadas com tempo pela transcrição e deixava a conversão do HDR e o volume como regra fixa. Os gráficos liam as cores do mesmo arquivo de tokens do site.
Resultado
Os gráficos passaram a sair com as cores da marca no celular, e a revisão virou uma lista de notas com tempo, em vez de horas no editor.
Cenário construído para fins didáticos. Números não correspondem a cliente específico.
Laboratório visual: construir profundidade e dirigir a montagem de vídeo
Planos, distância, sequência e alternativa estática
O fundo se desloca menos que o primeiro plano. Percorra devagar e compare a sensação de distância. Em produção, mantenha uma composição estática quando a pessoa preferir movimento reduzido.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoClaude Code CLI: Programação com IA
- Montar vídeo em HTML com HyperFrames e escolher entre ele e o Remotionsugerido pelo grafoApresenta o conceito “HTML”, usado em “Construir profundidade e dirigir a montagem de vídeo”.
- CursoVídeo com IA: Claude Code, Codex e ElevenLabssugerido pelo grafo20 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Vídeo com IA: Claude Code, Codex e ElevenLabs”.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo20 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Depois, siga para
- CursoPrompt Engineering para Executivossugerido pelo grafo7 capítulos de “Prompt Engineering para Executivos” usam conceitos apresentados em “Frontends com Vibecoding”.
- CursoLLM FinOps: o custo da IA para quem assina o orçamentosugerido pelo grafo3 capítulos de “LLM FinOps: o custo da IA para quem assina o orçamento” usam conceitos apresentados em “Frontends com Vibecoding”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Vídeo com IA: Claude Code, Codex e ElevenLabsMontar vídeo em HTML com HyperFrames e escolher entre ele e o RemotionExaminar conexões de Montar vídeo em HTML com HyperFrames e escolher entre ele e o Remotion
- Meta Ads 2027Produzir Reels e Stories que seguram a atenção nos primeiros segundosExaminar conexões de Produzir Reels e Stories que seguram a atenção nos primeiros segundos
- Astra profundoMontar um filme a partir do material disponívelExaminar conexões de Montar um filme a partir do material disponível
- TikTok Ads e Live Commerce 2027Montar estúdio, áudio, internet e ensaio técnico da transmissãoExaminar conexões de Montar estúdio, áudio, internet e ensaio técnico da transmissão
Voltar ao capítulo anterior: Preparar imagens, ícones e vídeo para a web
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Laboratórios ao vivo deste curso
Cada laboratório monta a biblioteca real dentro da aula, com controles para você mexer e o código do exemplo para copiar. O texto de reserva descreve a demonstração para quem lê sem JavaScript. O link abre o capítulo já no ponto do laboratório.
Base UI
Prenda o foco num diálogo sem escrever o comportamento
Abra a janela Agendar visita, percorra os campos com Tab, feche com Esc e acompanhe no painel onde o foco está e para onde ele volta.
Pacote
Abrir no capítuloConstruir componentes, usar o registro e publicar o catálogo@base-ui/reactLucide e Iconify
Mantenha uma família de ícones coerente e nomeie cada botão
Mude tamanho, traço e cor da barra, veja o símbolo do Iconify acompanhar o Lucide e rode a auditoria de nomes acessíveis.
Pacote
Abrir no capítuloProjetar uma linguagem de ícones e ilustraçãolucide-react, @iconify/reactMotion
Testar os três sinais que autorizam o terceiro degrau
Reproduza a entrada em sequência, aperte o botão com mola e arraste o cartão; ajuste rigidez e amortecimento e veja o que muda.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagemmotionVidstack
Ver o que separa um player de um vídeo cru
Dê o play, troque a velocidade e ligue a legenda; o painel ao lado mostra o estado que o player publica e que a etiqueta crua esconde.
Pacote
Abrir no capítuloProjetar movimento, assinatura e narrativas por rolagem@vidstack/reactcmdk
Achar um destino entre quarenta digitando três letras
Abra a paleta, digite fat e escolha um item só pelo teclado; o painel embaixo conta o que o filtro deixou passar e quanto tempo levou.
Pacote
Abrir no capítuloConstruir formulários e estados de interaçãocmdknumber-flow
Animar indicadores que mudam ao vivo com formato pt-BR
Veja três indicadores fictícios rolarem a cada troca e compare com o número em texto puro. Pause, reinicie e observe o separador de milhar.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisão@number-flow/reactApache ECharts
Medir o custo de desenhar 200 mil pontos com o ECharts
Troque o tipo de gráfico e o volume de pontos, leia o tempo de desenho e alterne o eixo em zero. Mude o tema do site e veja as cores refazerem.
Pacote
Abrir no capítuloProjetar gráficos e painéis pela decisãoechartssharp e svgo
Escolher a variante certa da imagem e conferir o teto de 150 KB
Arraste a largura da tela simulada, troque a densidade entre 1x e 2x e veja qual arquivo o navegador escolhe, quanto ele pesa e se cabe no orçamento.
Pacote
Abrir no capítuloValidar desempenho, autenticação e segurançasharp, svgoReact Flow (xyflow)
Disparar um pedido e ver o orquestrador distribuir, conferir e responder
Alterne paralelo e sequencial, ligue e desligue a verificação e use a medição real; observe o tempo de parede em cada combinação.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robô@xyflow/reactGSAP, Web Workers e number-flow
Dividir mil tarefas entre trabalhadores reais e correr três ritmos de geração
Execute com um trabalhador, depois com quatro e oito, e compare o tempo; em seguida percorra a corrida e separe a espera inicial do ritmo.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôgsap, @number-flow/reactThree.js com React Three Fiber, drei, Rapier e XR
Carregar o braço robótico, ver a física trabalhar e entrar na cena com o visor
Carregue a cena pelo botão, inicie o ciclo, mostre os ângulos das juntas, troque a câmera e a velocidade; com visor, entre em realidade virtual.
Pacote
Abrir no capítuloConstruir as cenas do orquestrador, do paralelismo e do robôthree, @react-three/fiber, @react-three/drei, @react-three/rapier, @react-three/xrMotion
Ver quatro agentes em raias trocando mensagens e a revisão devolvendo um trecho
Reproduza os 60 s de modelo, percorra o tempo pelo controle e esconda as mensagens para comparar a leitura; repare no tempo de parede contra a soma.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinamotionMediaRecorder, Canvas 2D e Long Animation Frames (plataforma)
Medir o quadro da cena e gravar seis segundos dela em vídeo
Suba as partículas, force um bloqueio de 300 ms e leia o medidor; depois grave seis segundos, veja o codec escolhido e baixe o arquivo.
Pacote
Abrir no capítuloEspecificar, medir e produzir as cenas da máquinasem pacotesigma.js, graphology com ForceAtlas2 e cosmos.gl
Ver o grafo real do curso e um grafo de milhares de nós se organizarem em aglomerados
Rode o layout no grafo real, passe o mouse pelos nós e busque uma entidade; troque para 20 mil nós e leia o medidor; depois carregue o modo massivo na placa de vídeo.
Pacote
Abrir no capítuloAnimar um grafo de conhecimento amplo em movimentosigma, graphology, graphology-layout-forceatlas2, graphology-generators, @cosmos.gl/graph
Capítulos vizinhos em Frontends com Vibecoding
- 10Projetar movimento, assinatura e narrativas por rolagem
- 11Preparar imagens, ícones e vídeo para a web
- 12Construir profundidade e dirigir a montagem de vídeo
- 13Construir formulários e estados de interação
- 14Publicar conteúdo encontrável em vários idiomas