Frontends com Vibecoding · Capítulo 14 de 35 · 17 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.
Camadas podem ajudar a mostrar a relação entre elementos de uma página. Pense no cenário, nos objetos e na pessoa em primeiro plano: cada parte cumpre uma função na composição. Esse recurso é uma escolha de design, não uma prova de que a página foi feita por uma pessoa ou por IA. Uma interface plana também pode ser clara, expressiva e adequada à marca.
Você sai sabendo conferir se o vídeo da página carrega sem som, tem imagem de capa e uma alternativa estática, e se o efeito de vidro ou de camadas não esconde o texto. Tempo de leitura: cerca de 17 minutos, e a conferência de um vídeo do site da empresa, mais dez.
Uma composição plana mantém os elementos no mesmo plano visual. Ela pode funcionar bem quando a prioridade é ler, comparar ou preencher informações. A composição em camadas acrescenta profundidade; quando há movimento, planos em velocidades diferentes criam o efeito chamado paralaxe.
Escolha pelo que o efeito ajuda a entender. Se a animação só desvia a atenção, retire-a. Quando ela for útil, preserve a mesma informação sem movimento e confira contraste, legibilidade e desempenho no celular.
Ver como texto
Comparação entre uma página chapada e uma página construída em camadas de profundidade. Do lado esquerdo, a página chapada: uma única imagem de fundo com o texto por cima, e tudo se move junto quando a pessoa rola a tela, o que produz aparência de catálogo. Do lado direito, a página em camadas: quatro planos separados, sendo o plano um a paisagem ao fundo, o plano dois os objetos do meio, o plano três o produto em primeiro plano e o plano quatro o texto, e cada plano corre em velocidade própria durante a rolagem. Essa diferença de velocidade entre planos é o que cria a sensação de relevo sem poluir a tela.
Compare o primeiro rascunho e a entrega aprovada como dois resultados diferentes. Use o mesmo pedido, as mesmas referências e os mesmos critérios em cada modelo. Registre o tempo até obter uma versão que possa ser discutida e o trabalho necessário para aprová-la.
Um modelo pode chegar rápido a uma composição promissora e exigir mais correções depois. Outro pode começar devagar e precisar de menos ajustes. Escolha pelo custo e pelo prazo da entrega que você precisa, com base no seu teste.
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.

Ver como texto
Diretora de arte prende numa parede de cortiça páginas impressas de referências reais do ramo de hotelaria, com fotos de quartos e piscinas e amostras de cor, enquanto o caderno de rascunho na mesa mostra um layout em blocos com as mesmas cores das referências.
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.
A API de vídeos da OpenAI e os modelos Sora 2 foram encerrados em 24 de setembro de 2026, conforme o aviso oficial de descontinuação. Quem mantinha uma integração com esses serviços precisa conferir e substituir essa dependência.
O GPT-6 Astra não substitui um gerador de vídeo. Ele pode ajudar a dirigir ferramentas de edição disponíveis no ambiente, mas a entrada e a saída de vídeo não constam como modalidades suportadas na página do modelo consultada nesta revisão. Verifique separadamente o modelo, o editor e o serviço de geração usados no seu fluxo.
Ver como texto
Fluxo de montagem de vídeo com o modelo, em quatro etapas ligadas por setas. Primeira: o material bruto de um evento, com mais de 150 GB. Segunda: o modelo opera o editor, percorre o material, escolhe as tomadas e puxa a marca já existente. Terceira: o corte de um minuto sai sincronizado com a música, em cerca de 35 minutos. Quarta, em destaque de alerta: a revisão humana confere nome, endereço, telefone, preço e data na tela, porque a falha registrada no teste foi um endereço escrito errado.
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 você usa na 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 do exemplo
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.
O navegador decide quando o vídeo toca com som
Os navegadores bloqueiam vídeo que começa sozinho com som; o MDN documenta essa política no guia de reprodução automática. Na prática, o vídeo de fundo precisa começar mudo, e o som só depois de um toque da pessoa. Pedir o contrário ao fornecedor é pedir um vídeo que não toca.

Ver como texto
Guia Autoplay guide for media and Web Audio APIs do MDN Web Docs. O texto diz que áudio ou vídeo com som que começa sozinho pode ser uma surpresa indesejada, que os navegadores bloqueiam essa reprodução automática e que o bloqueio não se aplica a vídeo sem trilha de áudio ou com o som desligado.

Ver como texto
Página do MDN Web Docs sobre o elemento HTML video, com o selo Baseline Widely available, o texto que o define como um reprodutor de mídia embutido no documento e a demonstração Try it, com o código de um vídeo com controles e duas fontes, webm e mp4, ao lado da prévia de uma flor.

Ver como texto
Página do MDN Web Docs sobre a propriedade CSS backdrop-filter, com o selo Baseline 2024 Newly available, o texto que explica que ela aplica efeitos como desfoque à área atrás de um elemento e a demonstração Try it com backdrop-filter: blur(10px) sobre a foto de um balão com a palavra Example.
O que mudou. Em 20/10/2026 o Lovable passou a oferecer os modelos Seedream 5 Pro, de imagem, e Seedance 2.5, de vídeo, dentro da ferramenta, e em 16/10 o aplicativo do v0 para iPhone ganhou prévia de vídeo. Gerar o vídeo ficou a um pedido de distância; conferir peso, som e alternativa continua sendo trabalho de quem aprova.
| Item | Pedido | Por quê |
|---|---|---|
| Som | Começa mudo; som só com o toque da pessoa | Os navegadores bloqueiam vídeo com som automático |
| Capa | Imagem de capa leve enquanto o vídeo carrega | A página não fica com um retângulo vazio |
| Movimento reduzido | Imagem parada para quem pediu menos movimento | Respeita a preferência do aparelho |
| Legenda | Legenda ou transcrição quando houver fala | Atende quem não pode ouvir e quem está em lugar silencioso |
Faça agora: confira um vídeo do site em quatro passos
Passo 1: Abra no celular uma página do site com vídeo.
Deu certo quando: Você vê uma imagem de capa antes de o vídeo começar.
Erro comum: Testar no computador com internet rápida, onde tudo parece instantâneo.
Passo 2: Observe se o vídeo começa sozinho e se tem som.
Deu certo quando: Se começa sozinho, está mudo.
Passo 3: Ligue o "reduzir movimento" do celular e recarregue a página.
Deu certo quando: O vídeo de fundo vira imagem parada ou fica pausado.
Passo 4: Se o vídeo tiver fala, procure a legenda ou a transcrição.
Deu certo quando: Existe uma das duas, em português.
No fim você tem: Uma ficha de quatro linhas por vídeo, com o que está certo e o que pedir ao fornecedor.
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: do zero à prática
- O que aparece no HTML e o que surge depoissugerido pelo grafoApresenta o conceito “HTML”, usado em “Construir profundidade e dirigir a montagem de vídeo”.
- CursoSíntese e didática com IAsugerido pelo grafoDepois de escolher a informação essencial e desenhar hierarquia, gráficos e fluxos compreensíveis, o aluno pode aplicar esses critérios às interfaces do curso de frontend. A ponte conecta clareza da mensagem, acessibilidade e decisões de apresentação.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo9 capítulos de “Frontends com Vibecoding” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Vídeo com IA: do roteiro à publicaçãoPeça cada cena em cinco partes e mantenha a mesma identidadeExaminar conexões de Peça cada cena em cinco partes e mantenha a mesma identidade
- Síntese e didática com IAMonte storyboard e roteiro de vídeo concisoExaminar conexões de Monte storyboard e roteiro de vídeo conciso
- Astra profundoMontar um filme a partir do material disponívelExaminar conexões de Montar um filme a partir do material disponível
- NotebookLM para criar conteúdoDerive legendas, cortes e miniaturas do vídeoExaminar conexões de Derive legendas, cortes e miniaturas do vídeo
Terminou a leitura?
Você está aqui: capítulo 14 de 35
0 de 35 concluídos
- Próximo · Capítulo 15 de 35 · 33 minConstruir formulários e estados de interaçãoLer o capítulo 15 sem concluir
Marque como concluído para o capítulo contar no seu painel e no certificado.
- Anterior · Capítulo 13 de 35 · 27 minPreparar imagens, ícones e vídeo para a webVoltar para o capítulo 13
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ãoechartsApache ECharts
Painel grande com visões coordenadas
Clique num canal para filtrar todas as visões, troque a densidade entre 6, 9 e 12 visões, alterne tema e movimento e abra a tela cheia.
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
- 12Projetar movimento, assinatura e narrativas por rolagem
- 13Preparar imagens, ícones e vídeo para a web
- 14Construir profundidade e dirigir a montagem de vídeo
- 15Construir formulários e estados de interação
- 16Publicar conteúdo encontrável em vários idiomas