Frontends com Vibecoding · Capítulo 12 de 30 · 9 min
Construir profundidade e dirigir a montagem de vídeo
Você sai com uma entrega que integra planos, distância, sequência e alternativa estática.
Este capítulo faz parte do curso gratuito Frontends com Vibecoding. Para marcar como concluído e salvar o progresso, abra este capítulo na página do curso.
Profundidade em camadas é o que separa uma página gerada por máquina de uma que parece feita por gente, e vídeo agora se resolve por montagem. Quem produz peça visual em volume ganha nas duas frentes. Você sai com o pedido escrito e o limite de cada uma.
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 material de catálogo.
A página em camadas separa os elementos em planos: paisagem ao fundo, objetos no meio, o produto à frente, o texto por cima. Cada plano corre em velocidade própria na rolagem, e a tela ganha 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 com um modelo para chegar ao tom da marca. No primeiro passe do GPT-6 Astra, lançado em 3 de setembro de 2026, ele obteve clima equivalente.
O resultado final iterado continuou melhor no outro modelo. O que encolheu foi a distância até o rascunho apresentável, e é aí que o seu prazo mora.
O teto de qualidade segue disputado. Se a sua dor é o acabamento das últimas rodadas, o ganho é pequeno. Se a dor é sair do zero, ele aparece já na primeira entrega.
Referência real vale mais que ajuste de texto no pedido. Anexe componentes e páginas de bibliotecas públicas de design e de premiações do setor, e o resultado sai na marca.
Pedir apenas um site produz página genérica em qualquer modelo. Sem direção de arte declarada, o padrão observado puxa para verde escuro, tons pastel e superfícies chapadas, repetido em projetos sem relação entre si.
Em vídeo o verbo mudou. O modelo monta, e não gera. Ele opera o editor: percorre o material bruto, escolhe as tomadas, puxa a marca já existente e devolve o corte.
Um teste publicado em 5 de setembro de 2026 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. É exatamente o tipo de erro que o corte esconde e o cliente encontra, e por isso a revisão humana continua obrigatória nos campos de contato.
A troca 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 vídeo não é modalidade dele nem na entrada nem na saída. Ele enxerga vídeo só quando o uso de computador captura quadros da tela. Quem depende de geração automática precisa escolher outro fornecedor antes da data.
Declare uma cor de destaque e no máximo duas famílias tipográficas 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 diversidade 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, sem 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.
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.
Todos os capítulos de Frontends com Vibecoding
- 01Projetar o briefing, o repertório da marca e o custo de manter
- 02Dirigir o prompt e avaliar a entrega do agente
- 03Escolher a stack e projetar suas dependências
- 04Investigar uma stack e priorizar atualizações
- 05Construir a identidade com tokens, CSS moderno e DESIGN.md
- 06Construir componentes, usar o registro e publicar o catálogo
- 07Projetar uma linguagem de ícones e ilustração
- 08Projetar menus, popovers e modais acessíveis
- 09Adaptar o layout ao celular e ao contêiner
- 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
- 15Projetar gráficos e painéis pela decisão
- 16Dimensionar tabelas e organizar o cálculo das métricas
- 17Escolher mapas, diagramas e cenas espaciais
- 18Comparar direção visual em Stripe e Apple
- 19Avaliar busca, conversão e padrões de comércio
- 20Auditar acessibilidade e contraste nos dois temas
- 21Validar desempenho, autenticação e segurança
- 22Planejar a modernização e publicar com reversão
- 23Construir o projeto final, medir a cara de IA e revisar
- 24Comparar modelos e interpretar benchmarks
- 25Calcular custo por tarefa e definir governança
- 26Supervisionar o modelo que opera o computador
- 27Configurar ambiente, skills e o contêiner de contexto
- 28Aplicar direção de arte, UX writing e padrões de código
- 29Construir um aplicativo instalável e resiliente
- 30Produzir apresentações e PDF com critérios de entrega