Especificar, medir e produzir as cenas da máquina

Uma cena que ensina nasce de uma ficha de dez campos preenchida antes do primeiro pedido ao agente, e uma cena que só impressiona nasce de uma frase solta. A ficha é o contrato entre quem pede e quem constrói. Ela cabe numa página, leva vinte minutos e é o que separa a demonstração do enfeite.

O que separa as duas é o número de rodadas de crítica que a cena atravessa. Um modelo mediano dentro de um laço com print, lista de conferência e correção entrega mais que um modelo de topo respondendo uma vez. Por isso a ficha termina num campo de crítica, e é justamente esse campo que o dono do negócio costuma cortar primeiro.

A metáfora que funciona é a ordem de serviço da oficina, e a que atrapalha é o briefing criativo. A ordem de serviço diz o que medir para dar a peça por pronta; o briefing diz o que sentir. O agente executa bem a primeira e improvisa na segunda.

Os dez campos vêm em ordem de decisão. O objetivo didático diz, em uma frase, o que a pessoa leiga percebe em dez segundos. A metáfora nomeia a imagem de negócio e a imagem a evitar, porque o maestro, o cérebro brilhante e o robô genérico entram sozinhos quando ninguém os proíbe. O roteiro divide os 10 a 20 s em quadros com o que aparece e o que a pessoa percebe.

O dado real carrega valor, fonte, data e rótulo, e o rótulo é a parte que viaja com o número: medido, anunciado ou cenário ilustrativo. A biblioteca entra pelo degrau mais barato que resolve, com a razão de não ficar no degrau de baixo escrita em uma frase.

Os quatro estados obrigatórios são a metade que os pedidos esquecem. Sem JavaScript, a figura estática conta a mesma história. Com movimento reduzido, nada anda sozinho e a pessoa avança por botão. Sem WebGL ou sem a API, o aviso aparece e a alternativa fica. No celular fraco, o teto de partículas, corpos e quadros já está decidido.

O orçamento traz o peso antes e depois do clique e o quadro de 16,7 ms a 60 Hz, com zero quadros longos durante a interação. A acessibilidade fixa o rótulo do palco, a região de status única, o teclado e o contraste AA. O critério de aceite é a lista do que se mede, e o prompt-contêiner é o pedido pronto, montado com tudo isso.

As sete cenas do bônus já têm a ficha rascunhada, e a tabela abaixo traz o essencial de cada uma: o objetivo, a metáfora e o degrau. O dado real de cada linha está na aula que a constrói, com fonte e data, e a ficha completa da primeira cena está no arquivo para download no fim desta aula.

Escrita em YAML, um formato de texto com campos e recuos que o agente lê sem esforço, a ficha vira parte do pedido. O trecho abaixo é a ficha da primeira cena, encurtada para caber; a versão inteira e o modelo em branco estão no download. O pedido em si, com assunto, restrições pelo nome, componentes, cenário fixo e a crítica com print, está em prompt-conteiner-cena.txt.

Antes de mandar o pedido, releia os campos 4 e 9. Se o dado real não tem fonte e data, ele vira cenário ilustrativo e o rótulo entra colado ao número. Se o critério de aceite não pode ser medido por alguém que não construiu a cena, ele ainda é desejo. Com os dois em ordem, o agente recebe um contrato, e a cena volta explicando em vez de decorando.

Mostrar vários agentes trabalhando e trocando mensagens

A ficha já diz o que cada cena precisa provar, e a primeira cena que ela encomenda é a dos agentes em paralelo, em raias que vêm do rastro e não da memória.

Vários agentes trabalhando ao mesmo tempo se mostram em raias, uma por agente, com as mensagens cruzando de raia em raia e o relógio parando quando o mais lento termina. Raia é a faixa horizontal que os painéis de rastro usam para dizer quem fez o quê e quando. Um desenho de fila, um agente depois do outro, ensina o contrário do que aconteceu.

A cena precisa distinguir seis coisas: agente, tarefa, tentativa, ferramenta, mensagem e estado. Sem isso, duas tarefas lado a lado no desenho podem ter acontecido em sequência, e o visitante não tem como saber. Por isso a raia nasce de eventos com hora de início e fim, e não de uma ilustração feita de memória.

Esses eventos já têm nome padronizado. As convenções da OpenTelemetry para IA generativa nomeiam três trechos de um rastro: a chamada ao modelo, a execução de ferramenta e a invocação de um agente. Langfuse, Arize Phoenix e outros rastreadores as adotaram em 2026, e cada trecho traz entradas, saídas, tokens e tempo. A cena didática é a leitura desse rastro em forma de raias.

As ferramentas de 2026 mostram o mesmo padrão em versões próprias. O Claude Code passou, em junho e julho de 2026, a exibir a árvore de subagentes crescendo e estados coloridos por linha, com os subagentes rodando em segundo plano por padrão. O Codex ganhou, em 9 de setembro de 2026, pastas de trabalho isoladas por sessão, e a visão geral de agentes mostra quem é dono de cada uma.

A pasta isolada é o detalhe que a cena precisa carregar. Cada agente edita a própria cópia dos arquivos, e o principal junta tudo no fim; sem isso, dois agentes gravam no mesmo lugar e um apaga o outro. Na raia, um rótulo pequeno diz pasta isolada, e a fusão aparece como a última barra do principal.

O laboratório abaixo monta essa cena com o Motion, o pacote de animação declarativa para React que a trilha de movimento ensina. Quatro raias, sete barras e nove mensagens seguem um roteiro fixo de 60 s de modelo, e cada mensagem é um cartão que voa da raia de origem à de destino por mola. Reproduza, pause e percorra o tempo pelo controle deslizante; depois esconda as mensagens e repare como a leitura piora.

Quatro erros didáticos aparecem em quase todo pedido. A fila reta, que apaga o paralelismo. A mensagem escondida, que deixa a raia parecer trabalho solitário. A ausência de reprovação, que ensina que agente é sinônimo de acerto. E a fusão sem pasta isolada, que faz o visitante pensar que dois agentes editam o mesmo arquivo ao mesmo tempo sem conflito.

O trecho abaixo mostra a peça que o Motion acrescenta ao desenho. O cartão de mensagem sai de uma raia e chega à outra por mola, e a mesma configuração respeita quem pediu menos movimento. O componente inteiro está no download.

Antes de aprovar a cena de agentes, peça o rastro que a alimenta. Se as barras não vêm de eventos com hora, a cena é ilustração e precisa do rótulo.

Se vêm, confira três coisas na tela: a mensagem de volta da revisão existe, a raia mais lenta manda no relógio, e a pasta isolada aparece onde dois agentes escrevem. Com as três, a cena explica o paralelismo de verdade, e não a versão bonita dele.

Medir a velocidade da cena e gravá-la em vídeo

Com as raias desenhadas, a cena precisa provar a própria velocidade e chegar a quem não pode rodá-la: entram o medidor de quadros e a gravação em vídeo.

Uma cena que demonstra velocidade precisa provar a própria velocidade, e a prova cabe em dois instrumentos: um medidor de quadros ao lado do palco e uma gravação em vídeo da cena rodando. O medidor mostra se a cena cabe no orçamento do quadro. O vídeo leva a cena a quem não pode rodá-la: a página de venda, o e-mail e o celular fraco.

O orçamento do quadro é uma conta simples. A tela comum redesenha 60 vezes por segundo, então cada quadro tem 16,7 ms para script, estilo, layout e pintura. Telas de 120 Hz cortam isso para 8,3 ms. Quadro que passa de 50 ms é quadro longo, o limiar que a API Long Animation Frames do Chrome registra desde a versão 123, com o quanto do tempo foi bloqueio.

A métrica que o Google usa para responsividade se chama INP, o tempo entre o toque e o próximo quadro pintado, e boa é até 200 ms. A cena que trava 300 ms ao disparar perde 18 quadros e estoura essa métrica sozinha. O medidor existe para a pessoa ver esse estouro antes do visitante.

Medir é ler três coisas, e cada uma tem um instrumento. Os quadros por segundo e o pior tempo de quadro saem de requestAnimationFrame, o relógio que o navegador oferece a cada redesenho. Os quadros longos saem da API Long Animation Frames, com o observador de desempenho. E a interação real sai do INP medido em campo, pela biblioteca web-vitals, porque o laboratório mostra o pior caso e o campo mostra o caso comum.

O painel Performance do Chrome fecha a conta quando o número acusa mas não explica. Ele separa tempo de script, de layout e de pintura por quadro, e diz em qual dos três a cena estourou. Safari e Firefox não expõem a API de quadros longos em setembro de 2026, então o medidor cai para requestAnimationFrame e avisa.

Gravar a cena no próprio navegador pede duas APIs da plataforma. O canvas oferece um fluxo de vídeo por captureStream, e o MediaRecorder grava esse fluxo em pedaços até virar um arquivo. O codec, que é o formato de compressão do vídeo, muda por navegador. O Chrome grava VP8, VP9 e H.264, com AV1 onde o aparelho acelera. O Safari só passou a gravar WebM, VP9, HEVC e AV1 na versão 18.4.

Por isso a cena pergunta antes de gravar, com isTypeSupported, e pede os formatos em ordem: AV1, VP9, VP8 e H.264. Vídeo gerado assim pesa e não responde ao toque. Ele substitui a cena ao vivo na página de venda, no e-mail e no celular fraco, e nunca onde a pessoa precisa mexer, pausar estados ou ler mensagens.

O laboratório abaixo faz as duas provas na mesma tela. O primeiro painel roda partículas entre três estações com o medidor ao lado: mude a quantidade, aperte o botão que sobrecarrega 300 ms e veja o quadro longo aparecer. O segundo grava seis segundos da cena, mostra o codec escolhido, toca a gravação e oferece o arquivo para baixar.

Quando a cena é 3D pesada ou precisa repetir a mesma sequência sem variação, a gravação sai do navegador do visitante e vai para o servidor. O Remotion transforma componentes React em vídeo quadro a quadro, com renderização em servidor ou em esteira de integração. O Playwright e o Puppeteer gravam a tela de um navegador controlado, com versão de navegador, fontes e parâmetros fixados.

O trecho abaixo é a espinha do laboratório: a escolha do codec em ordem, o gravador com os pedaços e o observador de quadros longos. O componente inteiro está no download.

Antes de aprovar uma cena de velocidade, exija as duas provas juntas. A primeira é o print do medidor sem quadro longo ao disparar a cena no celular de referência. A segunda é o arquivo de vídeo gravado dela, com o codec e o peso anotados. Quem entrega só a cena está pedindo que você acredite. Quem entrega as provas está mostrando, e mostrar é o assunto deste capítulo.

Gerar imagem e vídeo por IA e oferecer a imersão certa

Medida e gravada, a cena ainda pede as ilustrações e o clipe gerados com o estilo da casa, e a decisão sobre qual caminho de imersão oferecer.

Imagem e vídeo gerados por IA entram na cena da máquina com três regras: estilo fixo escrito uma vez, nenhum texto dentro da imagem e o dado sempre na legenda. As ilustrações deste capítulo e o clipe desta aula saíram dessa esteira, e o pedido inteiro está no download. A imersão fecha a aula, porque é a decisão que mais gente erra ao confundir vídeo em 360 graus com cena.

A esteira de imagem tem quatro peças. O estilo fixo é um parágrafo que vai na frente de todo pedido: isometria suave, paleta da casa, pessoas brasileiras estilizadas, nada de robô genérico nem cérebro brilhante.

A encomenda é um arquivo com cena, texto alternativo e legenda por imagem. O script gera pelo modelo gemini-3-pro-image, o Nano Banana Pro, e converte para WebP de 1280 px com teto de 90 kB. O manifesto guarda largura, altura e bytes de cada saída.

A proibição de texto na imagem é a regra que mais economiza. Número, marca e legenda ficam no HTML, onde têm fonte, data e podem ser corrigidos sem gerar a imagem de novo. Imagem com número vira print, e o print viaja sem a fonte.

O vídeo segue a mesma lógica, com um custo a mais. O clipe abaixo foi pedido ao Veo 3.1 Fast em 25 de setembro de 2026: oito segundos, 1280 por 720, 24 quadros por segundo. O preço publicado da Gemini API é de US$ 0,10 por segundo em 720p, ou seja, US$ 0,80 pelo clipe. A espera foi de cerca de três minutos e o arquivo chegou com 3,49 MB, em H.264 com áudio.

A conversão para a web tirou o áudio, porque a peça é decorativa e toca muda. Saíram duas versões, WebM em VP9 com 1,78 MB e MP4 em H.264 com 1,34 MB, mais um pôster em WebP de 93 kB. Com movimento reduzido ativo, o pôster aparece no lugar do vídeo. Vídeo com fala ou com dado pediria o player completo, legenda e transcrição; este não tem nem um nem outro.

Duas linhas do pedido explicam o resultado. A paleta e o estilo isométrico vieram do mesmo parágrafo das imagens, o que faz o clipe parecer irmão das ilustrações. E a lista do que não pode aparecer, pessoas, texto, números, logotipos e legendas, evita a marca de terceiro no meio da sua página.

Toda saída do Veo e do Nano Banana Pro carrega a marca d'água invisível SynthID e credenciais de conteúdo C2PA assinadas pela Google. Elas dizem que a peça foi gerada, e só isso. Licença de uso é outra coisa: os termos comerciais são os do plano da API, conferidos na data.

O trecho abaixo é o pedido real ao modelo de vídeo, como foi enviado. O download traz o estilo fixo, a encomenda das imagens, o pedido e os comandos de conversão.

A imersão tem três caminhos em setembro de 2026, e a escolha depende do que a pessoa vai fazer. Para mostrar um objeto pronto, o model-viewer do Google, na versão 4.3.1 de junho de 2026, exibe um arquivo GLB na página. A realidade aumentada abre pelo WebXR ou pelo Scene Viewer no Android e pelo Quick Look no iPhone.

Para a pessoa mexer numa cena própria, com física e visor, o caminho é o WebXR com Three.js, como no robô do capítulo anterior.

O terceiro caminho é novo. No Safari 27 do visionOS 27, o elemento model exibe um arquivo USDZ em escala real, e a Immersive API, parecida com a de tela cheia, abre um ambiente em volta da página inteira. Com o elemento escondido até o pedido, o arquivo só desce para quem entra.

Um vídeo em 360 graus não é nenhum dos três: a perspectiva precisa responder à cabeça e a mão precisa tocar o objeto.

Antes de aprovar imagem, vídeo ou imersão gerados, cobre três coisas de quem entregou. A primeira é o arquivo da encomenda, com o estilo fixo e a proibição de texto. A segunda é o manifesto com peso e dimensões de cada saída. A terceira é a legenda com o dado, a fonte e a data.

Se o número estiver dentro da imagem ou do vídeo, peça de novo: a peça envelhece na primeira correção, e a legenda não.