Capi Café é uma cafeteria fictícia criada para este estudo. Cardápio e valores são ilustrativos; não há vendas.
CAPTURA DO SITE REAL · PRÉVIA MUDA
Um personagem, um vídeo e a pergunta: como fazer alguém ficar?
O Jorge pediu um site de cafeteria fofinho e muito interativo, com a capivara Capi no centro. A marca inteira nasceu no projeto: nome, cardápio de 12 itens, ilustrações, logo e tom de voz. O hero usa os frames do vídeo original para a cabeça e o corpo acompanharem o cursor sem cortes; o cookie é um objeto 3D procedural; o cantinho é uma maquete em camadas com achados escondidos.
192frames reais do vídeo no herodocs/REVIEW-R4F.md · trilha 36→8 | 89→120
≤350 mspara a cabeça assentar no cursor.qa/claude-r4f-fluidez.json · 287/286 ms nas pontas
14.336triângulos no cookie proceduraldocs/REVIEW-R3-ETAPA2.md · data-triangles
Olhar que segue o mouseScrub contínuo pelos frames reais do vídeo, com caminho mais curto entre poses e retorno ao vídeo em loop quando o cursor para.
Cookie Patinha em 3DMalha procedural em Three.js com relevo derivado da textura; salta no hover, gira ao arrastar e solta migalhas ao clicar.
Cantinho interativoMaquete isométrica em camadas: luminária, planta e xícara reagem ao toque e guardam três achados.
NÃO É UM BOTÃO MÁGICO.
É UMA SEQUÊNCIA DE DECISÕES.
O raio-X mostra inclusive o que foi reprovado. Porque saber o que corrigir também é construir.
01
Pesquisar a marca
Referências, linguagem e fidelidade do produto antes da ferramenta.
02
Escrever a experiência
Um roteiro de cenas, transições e intenção de cada momento.
03
Dirigir a arte
Gerar, compor, comparar e corrigir as imagens no contexto.
04
Dar movimento às imagens
Frames aprovados, prompts de UGC e seleção das saídas do Flow.
05
Construir com código
Astro, 3D, movimento de scroll e alternativas por capacidade do dispositivo.
06
Revisar de verdade
Rótulo, recortes, teclado, contraste, carga e comportamento.
07
Preparar a publicação
SEO, segurança, artefatos estáticos e entrega para integração.
RAIO-X
O resultado tem bastidores.
12 recortes de um único projeto: o vídeo, os testes de fluidez, as imagens aprovadas e as reprovadas. Artefatos reais, instruções documentadas e limites explícitos.
RAIO-X / Capi Café · hero
Um vídeo de 8 segundos virou o hero.
O Jorge entregou uma imagem obrigatória e um vídeo de 8 s (1280×720, 24 fps, 192 frames). Em vez de gerar poses, o hero usa o próprio vídeo: em repouso ele toca em loop; ao mover o mouse, um playhead percorre os frames reais até a pose que olha para o cursor. Nenhum corte: a transição é o movimento gravado.
Imagem obrigatória entregue pelo JorgeHero em tela cheia, vídeo em loop
Ferramenta / modelo · conforme registro
FFmpeg (ffmpeg-static) para extrair e validar 192 frames; Codex · gpt-6-astra escreveu o controlador em JavaScript vanilla.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · Rodada 4f
Extrair todos os frames decodificados sem filtro de fps; master horizontal com os 192 frames; runtime em atlas WebP; playhead contínuo com amortecimento exponencial (tau 130 ms), caminho mais curto no grafo de frames com junção 8↔89, retorno ao vídeo pelo frame atual após 2,5 s parado.
Documento de origem: docs/REVIEW-R4F.md · Rodada 4f
O vídeo não tem uma varredura limpa esquerda→direita: ela olha para vários lados e bebe no fim. Foram escolhidos os trechos 36→8 (esquerda→frente) e 89→120 (frente→direita), unidos por dois frames frontais quase idênticos. Frames com piscada só podem ser atravessados, nunca servem de pose de descanso.
Contact sheet dos frames do vídeo13 poses de descanso, esquerda → direita
Ferramenta / modelo · conforme registro
Contact sheets por FFmpeg; comparação pixel a pixel (MAE 2,66/255 na junção); Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · análise do vídeo
Mapear os 192 frames por direção do olhar; medir abertura dos olhos por frame e marcar como não descansáveis os que ficam abaixo de 65% da abertura máxima; calibrar x do cursor → ângulo → frame descansável mais próximo.
Documento de origem: docs/REVIEW-ETAPA1.md · docs/REVIEW-R4D.md · análise do vídeo
Para o olhar acompanhar o cursor em duas direções, 24 edições do frame 89 alteraram só os olhos; o corpo e o cenário vieram do original por máscara. Cada saída foi validada contra a base (diferença fora da cabeça ≤ 8/255). A grade foi usada na primeira versão imersiva e depois recuou para refinamento, quando o corpo inteiro passou a acompanhar.
Frame frontal de referênciaGrade 5×5 aprovada (diferença 1,95–2,80/255)
Ferramenta / modelo · conforme registro
ImageGen integrado ao Codex, uma edição por chamada; auditoria de diferença por script.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · Rodada 3 · entrega 1
Mesma imagem; a capivara olha para [cima-esquerda | cima | cima-direita | esquerda | frente | direita | baixo-esquerda | baixo | baixo-direita], em intensidade leve ou forte. Não alterar luz, fundo, copo, patas ou pelo do corpo.
Documento de origem: docs/REVIEW-R3-ETAPA1.md · Rodada 3 · entrega 1
Depois que o Jorge disse “não ficou fluida”, um teste em Chromium real passou a ser o critério: nenhum salto maior que 3 arestas por quadro, latência até assentar ≤ 350 ms, 60 fps, zero tremor com o mouse parado. Quatro rodadas (4b a 4f) corrigiram mapeamento por ângulo, zona morta no centro e distribuição das poses.
Ponta esquerda antes (rodada 4b)Poses equidistantes aprovadas (rodada 4f)
Ferramenta / modelo · conforme registro
Playwright (Chromium 151) · .qa/claude-fluidez.cjs e .qa/claude-tracking-diag.cjs, escritos pelo Claude.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · medições 4d–4f
Aceite: latencia_ate_assentar_ms ≤ 350 nas pontas; frames finais esquerda ≤ 34 e direita ≥ 116; jitterCentro.trocasDeFrame ≤ 2 e cruzamentosJuncao = 0; só modo gaze durante os movimentos; poses visualmente equidistantes nos dois lados.
Documento de origem: docs/REVIEW-R4D.md · docs/REVIEW-R4F.md · medições 4d–4f
O Jorge notou perda de qualidade ao mexer o mouse: o atlas de 512 px por frame era esticado para a tela inteira. Solução: 50 frames descansáveis em 1280×720 carregados sob demanda e desenhados quando a cabeça assenta, e atlas de movimento em 640 px. PSNR na cabeça subiu de 34 para 45 dB.
Repouso desenhado do atlas de 512 pxRepouso com frame integral 1280×720
Ferramenta / modelo · conforme registro
sharp/FFmpeg para derivados; cache LRU de ImageBitmap no controlador; Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · Rodada 5 · item 0
Pose de descanso em resolução total: um WebP 1280×720 por frame descansável, prefetch dos vizinhos do alvo; trocar para o frame integral após ~80 ms no mesmo frame, sem transição. Atlas de movimento 640×360. Canvas em devicePixelRatio até 2.
Documento de origem: docs/REVIEW-R5-FASE1.md · Rodada 5 · item 0
O vídeo não tem cabeça erguida de frente nem olhar para baixo. Doze poses geradas ficaram convincentes, mas o pelo regenerado “fervilha” entre vizinhos: 3 de 12 transições passaram do limite de continuidade (≤ 2,5× a diferença média entre frames reais), mesmo após separação de frequências. Nada foi integrado; a solução completa é um novo vídeo.
Candidatos gerados (cima e baixo)Estado publicado: só o frame real 89 no eixo vertical
Manter as baixas frequências do frame gerado (forma, sombra, olhos) e reinjetar as altas frequências do pelo do frame real 89 dentro da máscara da cabeça; recalcular a continuidade; aprovar só se todas as arestas ficarem ≤ 13,91.
Documento de origem: docs/QA-RODADA5B.md · Rodada 5 · fase 1b
A regra “sem olhos nem patas nos produtos” existia para a comida não virar personagem. A pegada em chocolate é o adorno que dá nome ao Cookie Patinha e estava na descrição aprovada, então a imagem foi editada uma vez, preservando prato, luz e composição.
Cookie Patinha v1 (sem patinha)Cookie Patinha v2 aprovado
Ferramenta / modelo · conforme registro
ImageGen integrado (edição do v1); Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · refinamento 1
Mesmo cookie e composição do v1, com uma pegada de capivara (4 dedinhos + almofada) carimbada em chocolate no topo, pequena, centralizada, discreta e apetitosa.
Documento de origem: docs/REVIEW-ETAPA3.md · refinamento 1
A conta de image-to-3D estava sem créditos. O cookie foi construído em Three.js como um disco espesso de borda irregular, com relevo derivado da luminância da textura, lateral e base texturizadas. Hover aproxima da câmera com mola, arrastar gira, clique solta migalhas; fallback em sprite de 12 ângulos para quem não tem WebGL.
Textura do topo recortadaCapítulo do cookie em WebGL
Ferramenta / modelo · conforme registro
Three.js 0.186 em chunk carregado sob demanda; 14.336 triângulos; Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · Rodada 3 · entrega 2
Cookie procedural: geometria de disco espesso com bordas irregulares (ruído no perímetro), displacement da luminância da textura do topo, textura lateral dourada com craquelado; material com roughness alta; giro lento em idle interrompido no hover.
Documento de origem: docs/REVIEW-R3-ETAPA2.md · Rodada 3 · entrega 2
O primeiro símbolo lia como urso ou hamster. A revisão pediu focinho retangular e comprido, orelhas pequenas no alto, olhos menores e mais separados. O ajuste foi feito direto nos contornos do SVG, mantendo o copo verde-lagoa e o lettering; favicons regenerados.
Logo v1Logo v2 publicado
Ferramenta / modelo · conforme registro
scripts/build-brand.ps1 (contornos SVG); sharp para PNG 32/180; Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · refinamento 2
Aproximar da capivara: cabeça em “tijolinho” arredondado, orelhinhas pequenas bem no alto/atrás, olhos menores e mais separados, nariz largo. Manter copo verde-lagoa e lettering. Uma revisão; se não melhorar, manter a atual.
Documento de origem: docs/REVIEW-ETAPA3.md · refinamento 2
O Capiccino foi gerado primeiro e virou referência de louça marfim, fundo caramelo, luz da esquerda-alta e perspectiva ¾. Cada produto foi uma chamada separada, inspecionada individualmente; os 12 itens do cardápio ganharam imagem e a galeria horizontal usa todas.
Piloto: CapiccinoGaleria com os 12 itens
Ferramenta / modelo · conforme registro
ImageGen integrado, um asset por chamada (8 + 6 + 1 revisão); prompts em assets/generated/PROMPTS.md.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · piloto Capiccino
A single rounded warm ivory glazed ceramic cappuccino cup on a matching saucer, edible microfoam, seamless warm caramel studio background, soft light from upper left, three-quarter slightly above, ~50 mm; no typography, no animal, opaque background.
Documento de origem: assets/generated/PROMPTS.md · piloto Capiccino
O pedido era “fumaça de café saindo”. A primeira implementação tinha alfa máximo 0,13 e quase não aparecia (0,8% dos pixels). Dobrou-se a presença (60 partículas, alfa 0,28, vida mais longa, vento do cursor) e a versão B foi escolhida comparando quadros iguais, sem tapar os olhos.
Versão A (0,80% dos pixels)Versão B escolhida (2,21% dos pixels)
Ferramenta / modelo · conforme registro
Canvas 2D, campo de ruído e vento do ponteiro; emissor segue a tampa do copo frame a frame; Codex.
Tempo de produção
Não documentado. Não estimado.
Prompt ou instrução real · retoque 1
Alfa de pico ~0,28, raio 10→40 px, vida mais longa subindo até ~35% da altura do palco, 60 partículas, deriva pelo vento do cursor, cor creme quente; A/B em screenshot e escolher o que fica bonito sem tapar o rosto.
Documento de origem: docs/REVIEW-R3-ETAPA1.md · retoque 1
A cena isométrica gerada foi separada em fundo, mobília, planta e luminária (peças geradas em fundo ciano para chave cromática). Parallax com o ponteiro; a luminária acende e apaga, a planta balança, a xícara solta vapor; os três “achados” do site moram aqui.
Cena gerada originalCena interativa com a luz apagada
Separar a maquete em 3–4 camadas (fundo, banco+mesa, planta, luminária) e criar hotspots: clicar na luminária acende/apaga (mudar a iluminação com overlay), clicar na planta balança, clicar na xícara solta vapor.
Documento de origem: docs/REVIEW-R3-ETAPA4.md · Rodada 3 · entrega 4
