Dane-se · cena 03
SITES IMERSIVOS. PROCESSO ABERTO.
ISSO É
UM SITE.IMAGINA
FAZER.
Do primeiro prompt ao último pixel. Veja o resultado. Abra os bastidores. Descubra como se constrói.
Quero aprender a fazer issoEnquanto isso, pega os materiais gratuitos
Tudo isso foi feito por 1 pessoa e 2 IAs.Jorge + Claude (arquiteto) + Codex (executor)
01 / DANE-SE MELANCIA · 02 / CAPI CAFÉ · 03 / PIPOCA & CIA · 04 / SAPO4 PROJETOS · PROCESSO ABERTO
Capi Café · hero
Pipoca & Cia · hero
Sapo · hero
Frames + canvas
O Sapo aponta para onde o cursor está, sempre com um frame real do clipe: sem player de vídeo, sem biblioteca.
Dane-se · UGC 01
Capi Café · 3D
Pipoca & Cia · olhar
Sapo · motor
Mola + canvas
Pose em [-1, 1], mola amortecida (omega 24, zeta 0,92) e um drawImage por quadro: 60 fps medidos.
Dane-se · cena 02
Capi Café · olhos
Pipoca & Cia · sprite
Sapo · painéis
O que existe
por trás do resultado.
PROJETO 001 / ESTUDO DE MARCA
CONCEITO INDEPENDENTEDANE-SE
MELANCIA.
Uma dose de energia que começa no scroll.
Arte, produto 3D e vídeo unidos por uma narrativa de marca.
01 / Arte + interação
O site olha de volta.
O xadrez não era transparência. O QA encontrou.
02 / Arte + parallax
Dentro da lata.
Uma cor certa faz as camadas pertencerem à mesma marca.
03 / 3D + scroll
Uma lata. Outro mundo.
Preservar o rótulo real. Reconstruir só o que faltava.
PROJETO 002 / CAFETERIA IMAGINADA
MARCA FICTÍCIACAPI
CAFÉ.
Uma cafeteria imaginada onde a capivara acompanha o seu olhar.
Vídeo em tela cheia, olhar que segue o mouse, cookie em 3D e um cantinho interativo.
01 / Vídeo + canvas
Um vídeo de 8 segundos virou o hero.
Os 192 frames reais são a matéria-prima de toda a interação.
02 / Three.js procedural
Um cookie que salta da tela.
Sem serviço de 3D: a malha nasceu da própria textura.
03 / ImageGen reprovado
O que foi reprovado.
Poses geradas para cima e para baixo ficaram bonitas e não entraram.
PROJETO 003 / HERO INTERATIVA
MARCA FICTÍCIAPIPOCA
& CIA.
Um filhote que olha para onde você aponta.
Vídeo em loop, sprite com todos os frames e um mapa de olhar em JavaScript puro, com o passo a passo aberto.
01 / Vídeo + canvas
Um clipe de 10 segundos virou o hero.
Em repouso, o vídeo toca em loop; ao mover o mouse, a sprite assume no mesmo frame.
02 / Mapa de olhar
O cursor vira um instante do clipe.
Keypoints em ordem cronológica: esquerda → frente → direita atravessa poses reais.
03 / Correção
Frames sobrepostos tinham causa: 6 fps.
O Jorge viu dupla exposição ao virar a cabeça; a solução foi densidade, não truque.
PROJETO 004 / HERO INTERATIVO
MARCA FICTÍCIASAPO
TE SEGUE.
Um sapo que aponta para onde o seu cursor está.
Frames de um clipe de 4 segundos, interpolados a 96 fps e percorridos por uma mola em JavaScript puro; nunca descansa num frame borrado.
01 / Frames + canvas
Um clipe de 4 segundos virou o hero.
O Sapo aponta para onde o cursor está, sempre com um frame real do clipe: sem player de vídeo, sem biblioteca.
02 / Mola + canvas
O cursor vira pose; a pose vira frame.
Pose em [-1, 1], mola amortecida (omega 24, zeta 0,92) e um drawImage por quadro: 60 fps medidos.
03 / FFmpeg minterpolate
De 7 para 28 frames por gesto.
"O efeito não está suave": cada gesto tinha 7 frames a 24 fps. A 96 fps passa a ter 28, por compensação de movimento.
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.
O PRÓXIMO PROJETO PODE SER O SEU.
DE “COMO FIZERAM?”
PARA “EU FIZ”.
Aprenda a conectar direção de arte, IA e código. Comece pelo processo, não pela lista de ferramentas.
Quero aprender a fazer issoQuer um site assim
para a sua marca?
RAIO-X / Dane-se · cena 03
Uma lata. Outro mundo.
A frente vem da fotografia oficial. Franjas são reprojetadas da mesma foto; a impressão inventada pelo vídeo foi removida. O verso fica rosa. A versão aprovada usa Three.js e fallback Canvas2D.
Prompt ou instrução real · F9-R2
Frente V1 ±60° preservada; franjas da mesma foto oficial por reprojeção. Toda impressão inventada do vídeo removida; verso rosa; legal re-tipografado em Oswald 400.
Documento de origem: REVISAO-SITE.md · F9-R2
Entrada: assets/generated/site/can-front-v2.png
Saída: site/qa/f11-seg/before-dist/can-e/label.webp
RAIO-X / Dane-se · UGC 01
Do frame à fala.
A imagem V2 retirou um logo de terceiro e uma marca d’água. O Flow recebeu a imagem inicial com instrução de preservar o rótulo. A duração de 8 s é do original, não tempo de produção.
Prompt ou instrução real · Vídeo 01
Vertical 9:16 UGC selfie video, filmed on a smartphone front camera held at arm's length, handheld with natural slight shake, authentic TikTok look, soft dawn light in an urban park with São Paulo buildings behind her. The young Black Brazilian woman from the first frame has just finished a run, catching her breath and smiling at the camera. She lifts the pink can close to the lens, hooks her finger on the tab and cracks it open with a loud crisp fizz, takes a quick sip, then looks straight into the camera and says in Brazilian Portuguese, casual and slightly out of breath: "Dez quilômetros antes das sete... e zero açúcar. Dane-se a preguiça." Audio: her breathing, birds, distant city traffic, the can opening fizz, no music. No subtitles, no captions, no on-screen text, no watermark. The can label must stay exactly as in the first frame — pink aluminum can, white "DANE-SE" letters, black lightning band with an illustrated eye, green "MELANCIA" tag — do not morph, redraw or rotate the label away from camera. Correct hands with five fingers. No alcohol.
Documento de origem: GOOGLE-FLOW-PROMPTS.md · Vídeo 01
Entrada: assets/generated/ugc/ugc-01-treino-v2.png
Saída: site/public/video/ugc-01-treino.mp4
RAIO-X / Dane-se · cena 02
Dentro da lata.
A composição foi aprovada, mas a primeira cor puxava para framboesa. A revisão pediu apenas color grading, preservando a composição; o alvo era o magenta da lata.
Prompt ou instrução real · bg-dentro
| `site/bg-dentro-mobile.png` / `-desktop.png` | 1080×1920 / 2560×1440 | 02 | "Dentro da lata": líquido rosa-magenta translúcido, luz entrando de cima, bolhas de gás, profundidade. Sem objetos grandes (vêm nas camadas). |
Documento de origem: BRIEF-CODEX-IMAGENS.md · bg-dentro
Entrada: assets/generated/site/bg-dentro-desktop.png
Saída: assets/generated/site/bg-dentro-desktop-v2.png
RAIO-X / Dane-se · cena 01
O site olha de volta.
A primeira imagem tinha xadrez pintado nos pixels. A V2 removeu o cinza fora do olho e preservou o desenho. Íris e pupila são camadas separadas para responder ao cursor.
Prompt ou instrução real · eye-macro
| `site/eye-macro.png` | 2048×2048, fundo transparente | O olho da lata recriado em alta resolução no **mesmo estilo gravura** (hachuras pretas, esclera branca, íris rosa com raios, pupila preta grande). Pupila perfeitamente centralizada (o site anima a pupila). |
Documento de origem: BRIEF-CODEX-IMAGENS.md · eye-macro
Entrada: assets/generated/site/eye-macro.png
Saída: assets/generated/site/eye-macro-v2.png
RAIO-X / Dane-se · UGC 02
A cena começa antes do play.
O frame posiciona a mão junto ao anel da lata para iniciar a ação. O prompt pede câmera apoiada, voz baixa e ambiente de madrugada. A fidelidade da fala ainda exigia confirmação do usuário no registro.
Prompt ou instrução real · Vídeo 02
Vertical 9:16 UGC video from a smartphone propped on a desk, static with a very slow subtle push-in, late night bedroom lit by a warm desk lamp and the blue glow of a laptop, notebooks and sticky notes around. The young Brazilian man in a hoodie and glasses from the first frame looks tired, glances at his notes, then looks into the camera with a knowing half smile. He opens the pink can with a sharp fizz that echoes in the quiet room, takes a sip and says in Brazilian Portuguese, in a low voice as if not to wake anyone: "Prova amanhã. Café acabou. Melancia com guaraná... dá pra encarar." Audio: quiet room tone, laptop fan, the can opening fizz, a soft sip, no music. No subtitles, no captions, no on-screen text, no watermark. The can label must stay exactly as in the first frame — pink aluminum can, white "DANE-SE" letters, black lightning band with an illustrated eye, green "MELANCIA" tag — do not morph, redraw or rotate the label away from camera. Correct hands with five fingers. No alcohol.
Documento de origem: GOOGLE-FLOW-PROMPTS.md · Vídeo 02
Entrada: assets/generated/ugc/ugc-02-madrugada.png
Saída: site/public/video/ugc-02-madrugada.mp4
RAIO-X / Dane-se · UGC 03
Energia de fim de tarde.
O roteiro preserva o rótulo e pede adultos em um rooftop, sem álcool. A revisão visual conferiu o rótulo ao longo do vídeo. Não confundir esses critérios com prova automática de toda a fala.
Prompt ou instrução real · Vídeo 03
Vertical 9:16 UGC video filmed handheld on a smartphone, point-of-view style, rooftop terrace at golden hour with string lights and a Brazilian city skyline, warm sunset flare. The young Brazilian woman from the first frame holds the pink can close to the camera with her finger on the tab, looks into the lens and says in Brazilian Portuguese with a teasing smile: "Todo mundo querendo asa... eu só quero melancia gelada." She cracks the can open with a loud fizz; behind her two friends raise their own pink cans and shout together: "Dane-se!" and everyone laughs. Audio: city ambience at sunset, laughter, ice rattling in a cooler, a distant Brazilian funk beat very low in the background. No subtitles, no captions, no on-screen text, no watermark. The can label must stay exactly as in the first frame — pink aluminum can, white "DANE-SE" letters, black lightning band with an illustrated eye, green "MELANCIA" tag — do not morph, redraw or rotate the label away from camera. Correct hands with five fingers. No alcohol anywhere in the scene.
Documento de origem: GOOGLE-FLOW-PROMPTS.md · Vídeo 03
Entrada: assets/generated/ugc/ugc-03-role.png
Saída: site/public/video/ugc-03-role.mp4
RAIO-X / bastidor · textura da lata
O 3D começa no plano.
O relatório de F9 registra a textura híbrida e a preservação da faixa frontal. A textura plana é artefato técnico, não outro projeto.
Prompt ou instrução real · F9
Toda impressão inventada do vídeo removida; verso rosa; legal re-tipografado em Oswald 400 (texto completo).
Documento de origem: REVISAO-SITE.md · F9
Entrada: assets/generated/site/can-front-v2.png
Saída: site/qa/f11-seg/before-dist/can-e/label.webp
RAIO-X / bastidor · revisão do olho
Transparência de verdade.
A revisão documentou pixels cinza opacos fora do olho. A versão final precisa funcionar sobre o fundo escuro da cena.
Prompt ou instrução real · eye-macro-v2
| `site/eye-macro.png` | ❌ refazer (V2) | Estilo gravura excelente e fiel ao rótulo; pupila a (4, −12) px do centro (ok). **Xadrez de "transparência" pintado nos pixels** em volta do contorno: ex. (300,760) = ARGB(255,154,153,154); 12,8 % da faixa x 150–420 é cinza opaco. Remover o xadrez (alpha 0 fora do olho), manter traço, cílios e centragem. |
Documento de origem: REVISAO-IMAGENS.md · eye-macro-v2
Entrada: assets/generated/site/eye-macro.png
Saída: assets/generated/site/eye-macro-v2.png
RAIO-X / bastidor · direção de cor
Ajustar. Não refazer.
A revisão pediu só ajuste de matiz. A aprovação registrou 342° → 330° no desktop, sem refazer a composição.
Prompt ou instrução real · Rodada 2
bg-dentro-*: só color grading para o magenta #E6197E → -v2.
Documento de origem: REVISAO-IMAGENS.md · Rodada 2
Entrada: assets/generated/site/bg-dentro-desktop.png
Saída: assets/generated/site/bg-dentro-desktop-v2.png
RAIO-X / bastidor · cubos de melancia
Saber voltar também é método.
A remoção de halo na V2 cortou a borda e a base de um cubo. A decisão final foi manter a V1. Antes/depois aqui é correção de uma regressão, não ordem de geração.
Prompt ou instrução real · Camadas de parallax
| `site/layer-cubos.png` | 3–5 cubos de melancia soltos. |
Documento de origem: REVISAO-IMAGENS.md · Camadas de parallax
Entrada: assets/generated/site/layer-cubos-v2.png
Saída: assets/generated/site/layer-cubos.png
RAIO-X / Dane-se · cena 04
Da embalagem à história.
O brief pediu o fruto aberto no mesmo enquadramento do olho. A revisão destacou essa ligação como uma boa transição narrativa.
Prompt ou instrução real · guarana-aberto
| `site/guarana-aberto.png` | Fruto de guaraná aberto (casca vermelha, polpa branca, semente preta — parece um olho). Mesmo enquadramento do olho da lata, pupila no centro. Cena 04. |
Documento de origem: BRIEF-CODEX-IMAGENS.md · guarana-aberto
Entrada: assets/generated/site/eye-macro-v2.png
Saída: assets/generated/site/guarana-aberto.png
RAIO-X / Dane-se · cena 06
Um horário. Uma atmosfera.
A imagem de rooftop foi aprovada com adultos, lata fiel e céu sem marca d’água. A direção de arte parte de uma situação concreta.
Prompt ou instrução real · momento-1730
| `site/momento-1730.png` | Pôr do sol numa laje/rooftop urbano. Grupo de amigos ~24 anos, uma lata em primeiro plano. |
Documento de origem: BRIEF-CODEX-IMAGENS.md · momento-1730
Entrada: assets/generated/site/momento-1730.png
Saída: assets/generated/site/momento-1730.png
RAIO-X / bastidor · frame do Flow
O primeiro quadro é direção.
Os frames foram aprovados antes da geração de vídeo. A V2 do treino retirou logo de terceiro e marca d’água.
Prompt ou instrução real · Como usar
Novo projeto → modo Frames to Video (frame inicial). Frame inicial: faça upload da imagem UGC correspondente.
Documento de origem: GOOGLE-FLOW-PROMPTS.md · Como usar
Entrada: assets/generated/ugc/ugc-01-treino-v2.png
Saída: site/public/video/ugc-01-treino.mp4
RAIO-X / bastidor · foto → textura → 3D
Da foto ao volume.
Esta montagem didática combina três artefatos reais: fotografia oficial recortada, textura aprovada e captura do modelo no site. Não é um time-lapse da produção. A F9 preservou a frente da fotografia e removeu a impressão inventada nas laterais.
Prompt ou instrução real · Resultado do estudo F9
9 variantes prototipadas (A1, A2, B, C, D, E, E0, E1, D*) com comparador local e trípticos −40°/0°/+40°.
Documento de origem: REVISAO-IMAGENS.md · Resultado do estudo F9
Entrada: assets/generated/site/can-front-v2.png
Saída: site/qa/f11-seg/before-dist/can-e/label.webp
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.
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
Entrada: video/Character_looking_around_drinking….mp4
Saída: public/immersive/capi-loop.mp4
RAIO-X / Capi Café · frames
Nenhum frame inventado.
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.
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
Entrada: .qa/contact-1.jpg
Saída: .qa/r4f-settled-contact.png
RAIO-X / Capi Café · olhos
Vinte e cinco olhares.
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.
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
Entrada: assets/gaze/base-89.png
Saída: public/immersive/gaze-desktop.webp
RAIO-X / Capi Café · teste
Fluidez é número, não opinião.
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.
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
Entrada: .qa/claude-r4b-fluidez.json
Saída: .qa/claude-r4f-fluidez.json
RAIO-X / Capi Café · resolução
Nítida quando para.
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.
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
Entrada: public/immersive/r5/*.webp
Saída: public/immersive/full/*.webp
RAIO-X / Capi Café · descarte
O que foi reprovado.
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.
Prompt ou instrução real · Rodada 5 · fase 1b
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
Entrada: assets/gaze/r5b/
Saída: .qa/r5b-continuidade.json
RAIO-X / Capi Café · cookie
A patinha que dá nome.
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.
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
Entrada: assets/generated/cookie-patinha-v1.png
Saída: assets/generated/cookie-patinha-v2.png
RAIO-X / Capi Café · 3D
Um cookie que salta da tela.
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.
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
Entrada: assets/immersive/cookie-top-v1.png
Saída: public/products/cookie-patinha.glb
RAIO-X / Capi Café · marca
Menos urso, mais capivara.
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.
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
Entrada: assets/brand/v1/capi-logo.svg
Saída: public/brand/capi-logo.svg
RAIO-X / Capi Café · cardápio
Doze produtos, uma louça.
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.
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
Entrada: assets/generated/capiccino-v1.png
Saída: public/img/*-800.webp
RAIO-X / Capi Café · vapor
Fumaça com medida.
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.
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
Entrada: .qa/r3-smoke-A.png
Saída: .qa/r3-smoke-B.png
RAIO-X / Capi Café · cantinho
Uma maquete para mexer.
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.
Prompt ou instrução real · Rodada 3 · entrega 4
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
Entrada: assets/generated/cantinho-cafe-v1.png
Saída: assets/scene/
RAIO-X / Pipoca & Cia · hero
Um clipe de 10 segundos virou o hero.
O Jorge enviou um clipe gerado por IA (1280×720, 24 fps, 240 frames) e uma imagem de referência. Nenhuma pose foi gerada: o filhote que olha para o cursor é sempre um frame real do vídeo. Em repouso quem aparece é o vídeo original, mudo e em loop, na resolução completa; a sprite só entra quando o ponteiro se move.
Prompt ou instrução real · 1. Gerar o vídeo no Google Flow
Trate a imagem enviada como uma referência rígida. Mantenha o personagem, a expressão, as proporções, a iluminação, o ângulo da câmera, o enquadramento e o fundo exatamente como mostrado. A câmera deve permanecer totalmente travada: sem zoom, pan, rotação, reenquadramento ou qualquer mudança de cena em nenhum momento. Anime apenas o personagem. Nunca adicione cursor, ponteiro, ponto, inseto, brinquedo, mão, sombra, partícula ou qualquer outro elemento novo no quadro. O personagem deve reagir como se algo estivesse flutuando ao seu redor, percorrendo 360 graus completos da sua atenção. Os olhos iniciam o movimento, e a cabeça acompanha um instante depois. As orelhas giram sutilmente, o pescoço se move de forma natural, e os bigodes apresentam um leve movimento secundário. Faça com que ele olhe para a extrema esquerda, depois para a parte inferior esquerda, depois para a parte superior esquerda, retornando suavemente pelo centro; em seguida para a extrema direita, parte inferior direita, parte superior direita, e por fim volte exatamente para a pose inicial e coma um pedaço do biscoito (isso deve parecer real). Inclua pequenas pausas antes de cada mudança de direção, um leve excesso natural de movimento (overshoot) e transições suaves com desaceleração/aceleração fluida (easing) em todos os movimentos. O corpo, os ombros, o peito, as patas e a postura sentada devem permanecer quase totalmente imóveis. Não faça alongamento, deformação facial, giros, rotações exageradas, respiração visível ou movimento de bombeamento do tronco. O primeiro e o último frame devem ser idênticos, para que o clipe possa ser reproduzido em loop de forma limpa, quadro a quadro.
Documento de origem: E:\Dogs\PROMPT.md · 1. Gerar o vídeo no Google Flow
Entrada: Character_tracking_and_eating_co….mp4
Saída: public/media/puppy-loop.mp4
RAIO-X / Pipoca & Cia · análise
Primeiro olhar, depois código.
Um mapeamento linear do mouse para a linha do tempo faria o personagem passar por todas as poses em qualquer ordem. Antes de programar, grades de contato (1 miniatura a cada 0,6 s e a cada 0,33 s) e recortes de frames-chave registraram os instantes: esquerda em 1,0–2,3 s, frente em 4,0 s, direita em 5,0–5,7 s, olhar para cima em 6,0–6,7 s, mordida em 8,0–8,6 s.
Prompt ou instrução real · Etapa 3 — Analisar os frames antes de programar
ffmpeg -i clipe.mp4 -vf "fps=3,scale=400:-1,tile=6x5" -frames:v 1 grade-densa.jpg — depois recortar os frames 1, 25, 41, 57, 73, 97, 121, 137, 145, 161, 201 e 217 com o instante anotado.
Documento de origem: E:\Dogs\src\data\raio-x.js · Etapa 3 — Analisar os frames antes de programar
Entrada: frames/frame_001.jpg … frame_240.jpg
Saída: public/raio-x/frames-chave.webp
RAIO-X / Pipoca & Cia · sprite
Todos os 240 frames, em grade.
Navegadores não decodificam imagens com mais de cerca de 32.767 px de largura. Os 240 frames numa linha só caberiam com 136 px cada. A sprite final é uma grade de 60 colunas por 4 linhas (23.040×864 px, ~20 MP, 2,8 MB em JPEG), gerada com o filtro tile do FFmpeg. O frame i fica na coluna i mod 60 e na linha ⌊i / 60⌋.
Prompt ou instrução real · Como a sprite sheet foi gerada
ffmpeg -i clipe.mp4 -vf "scale=384:216:flags=lanczos,tile=60x4" -frames:v 1 -qscale:v 3 puppy-sprite.jpg
Documento de origem: E:\Dogs\README.md · Como a sprite sheet foi gerada
Entrada: frames/
Saída: public/media/puppy-sprite.jpg
RAIO-X / Pipoca & Cia · olhar
O cursor vira um instante do clipe.
O eixo horizontal do cursor é convertido em tempo do clipe por keypoints interpolados com smoothstep: 1,05 s na borda esquerda, 4,0 s no centro, 5,7 s na borda direita. Como a sequência está em ordem cronológica no vídeo, quando o alvo muda de uma ponta à outra o motor atravessa poses intermediárias reais e a transição parece movimento, não corte. Faixa superior da tela leva ao olhar para cima; a região do biscoito, à mordida.
Prompt ou instrução real · 2. Criar a hero com o Claude
Crie uma hero section interativa a partir da animação enviada. Use FFmpeg para extrair todos os frames do clipe e reuni-los em uma única sprite sheet em grade (todos os frames, na taxa original do vídeo, distribuídos em várias linhas para respeitar o limite de largura dos navegadores). Depois, crie um sistema de animação baseado em frames usando JavaScript puro (vanilla JavaScript), desenhando em canvas com cross-fade entre frames vizinhos. Coloque o vídeo original em loop no fundo. Quando o mouse se mover, pause o vídeo e faça a sprite assumir exatamente no mesmo frame, sem sobreposição; quando o mouse parar ou sair da área, o vídeo retoma a partir da pose em que o personagem ficou. Carregue o vídeo como Blob para o seek ser preciso. Faça o personagem olhar para o cursor de verdade: antes de programar, analise os frames e identifique em que instantes ele olha para a esquerda, direita, frente, cima e para o objeto que segura. Monte um mapa cursor → instante do clipe com esses pontos, e percorra a sprite com interpolação com easing (amortecimento dependente de dt, velocidade máxima limitada). Mantenha a composição original, preserve o personagem centralizado em paisagem e em retrato, e faça toda a interação transmitir uma sensação premium, fluida e responsiva. Teste no navegador antes de entregar.
Documento de origem: E:\Dogs\PROMPT.md · 2. Criar a hero com o Claude
Entrada: src/sprite-hero.js
Saída: .qa/pipoca-follow-right.png
RAIO-X / Pipoca & Cia · handoff
Vídeo e sprite, mesma linha do tempo.
Sprite e vídeo compartilham os mesmos 10 segundos. Ao mover o mouse, o vídeo pausa, o tempo é quantizado ao frame (round(t × 24) / 24), o canvas desenha esse frame e aparece em 70 ms já mostrando a mesma imagem. Parado 900 ms ou fora da área, o vídeo recebe currentTime igual ao tempo da sprite, espera o seeked e volta a tocar; o canvas some em 220 ms. Em desenvolvimento o seek caía em 0 porque o servidor Python não responde a HTTP Range; em produção o nginx devolve 206.
Prompt ou instrução real · Etapa 5 — Vídeo em loop e a troca sem emenda
Quando o ponteiro se move: pause o vídeo, quantize o currentTime ao frame exato, desenhe esse frame no canvas e mostre o canvas em ~70 ms; só então o alvo passa a seguir o cursor. Parado por ~900 ms: currentTime = tempo da sprite, seeked, play(), fade do canvas.
Documento de origem: E:\Dogs\src\data\raio-x.js · Etapa 5 — Vídeo em loop e a troca sem emenda
Entrada: src/sprite-hero.js
Saída: public/media/puppy-loop.mp4
RAIO-X / Pipoca & Cia · correção
Frames sobrepostos tinham causa: 6 fps.
A primeira sprite tinha 1 frame a cada 4 (60 frames, tira única de 30.720 px). O cross-fade entre vizinhos a 167 ms de distância virava dupla exposição nas viradas de cabeça, e no início do handoff a sprite já se movia enquanto o canvas aparecia sobre o vídeo parado. A correção: todos os 240 frames em grade (vizinhos a 42 ms) e alvo travado no frame exato do vídeo durante a entrada do canvas.
Prompt ou instrução real · "deixa a transição sprite/vídeo mais suave"
Deixa a transição sprite/vídeo mais suave: quando eu movo o mouse eu vejo ainda frames sobrepostos.
Documento de origem: Conversa de produção, 16/09/2026 · "deixa a transição sprite/vídeo mais suave"
Entrada: frames/frame_121.jpg + frame_125.jpg
Saída: frames/frame_121.jpg + frame_122.jpg
RAIO-X / Pipoca & Cia · retrato
Em retrato, o eixo x muda de régua.
O corte cover em retrato deixava o filhote gigante e cortado. A composição ficou ancorada no topo com 66% da altura e o texto desceu para o fundo escuro. Como só o centro do quadro 16:9 aparece, as poses laterais ficavam inalcançáveis: o eixo x do cursor passou a cobrir a largura visível, e não a largura da composição.
Prompt ou instrução real · Etapa 6 — Composição, retrato e o que fica em volta
const x = portrait ? px / w : (px - dest.x) / dest.w;
Documento de origem: E:\Dogs\src\data\raio-x.js · Etapa 6 — Composição, retrato e o que fica em volta
Entrada: src/sprite-hero.js
Saída: .qa/pipoca-mobile-follow.png
RAIO-X / Pipoca & Cia · raio-x
O passo a passo é parte do site.
O pedido do Jorge foi que quem acessar o raio-X consiga reproduzir o mesmo resultado. A página /pipoca-cia/raio-x/ tem nove etapas: entrada, FFmpeg, análise, motor, handoff, layout, QA, o prompt ajustado e o arquivo sprite-hero.js inteiro. Todo o texto vive em src/data/ e é renderizado em HTML estático no build, sem script inline.
Prompt ou instrução real · raioX.steps
Detalhe passo a passo para quem acessar o raio-X do projeto consiga reproduzir o mesmo resultado.
Documento de origem: E:\Dogs\src\data\raio-x.js · raioX.steps
Entrada: src/data/raio-x.js
Saída: dist/raio-x/index.html
RAIO-X / Sapo · hero
Um clipe de 4 segundos virou o hero.
O Jorge enviou um clipe gerado por IA de 4 segundos (2206×946, 24 fps, HEVC 10 bits, 97 frames): um sapo de moletom azul-petróleo e óculos laranja faz sinal de paz, aponta para a esquerda, volta, aponta para a direita e volta. Nenhuma pose foi desenhada: tudo o que o hero mostra é frame desse clipe, original ou interpolado entre dois originais. Não há vídeo em runtime; o clipe só existe dentro do kit para download. O pedido inicial foi em inglês e chamava o personagem de "gato".
Prompt ou instrução real · Etapa 1 · 1. O pedido inicial (em inglês, como foi enviado)
Create an interactive hero using the uploaded 4-second cat animation. Use FFmpeg to extract every frame, combine them into a single horizontal sprite sheet, and build a frame-based animation system in vanilla JavaScript. Make the character naturally track the mouse by smoothly scrubbing through the frames based on cursor position, with eased interpolation and a smooth return to the idle pose when the mouse leaves. Preserve the original composition, keep the character centered, and make the interaction feel premium and responsive.
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 1. O pedido inicial (em inglês, como foi enviado)
Entrada: hf_20260816_…mp4 (clipe de 4 s, 97 frames)
Saída: public/media/sapo-sheet-1x.webp + src/sprite-hero.js
RAIO-X / Sapo · análise
Medir antes de programar.
Os 97 frames foram extraídos em PNG sem perdas (ffmpeg -vsync 0). Como o fundo é um laranja uniforme, uma máscara de cor separa o sapo e o centroide horizontal dos pixels dele diz para onde ele se inclinou: parado (0–17), aponta para a esquerda (18–24), segura (25–42), volta (43–49), parado (50–60), aponta para a direita (61–67), segura (68–82), volta (83–89), parado (90–96). A descoberta que define o projeto: 42 → 55 → 68 é um caminho contínuo, em ordem cronológica, do pico esquerdo ao pico direito passando pelo repouso. Os outros 68 frames são holds pixel-idênticos aos extremos.
Prompt ou instrução real · Etapa 1 · tradução do pedido inicial; Etapa 2 · Extrair todos os frames e ler o movimento
Crie um hero interativo usando a animação de 4 segundos enviada (o "gato" do pedido era, na verdade, um sapo). Use o FFmpeg para extrair todos os frames, combine-os em uma única sprite sheet horizontal e construa um sistema de animação baseado em frames em JavaScript puro (vanilla). Faça o personagem acompanhar o mouse de forma natural, percorrendo os frames suavemente conforme a posição do cursor, com interpolação com easing e um retorno suave à pose de repouso quando o mouse sair. Preserve a composição original, mantenha o personagem centralizado e faça a interação transmitir uma sensação premium e responsiva.
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · tradução do pedido inicial; Etapa 2 · Extrair todos os frames e ler o movimento
Entrada: frames/frame_001.png … frame_097.png (2206×946)
Saída: public/raio-x/contato.webp + picos.webp
RAIO-X / Sapo · interpolação
De 7 para 28 frames por gesto.
Percorridos pelo cursor, 7 frames por gesto viram saltos; misturados por cross-fade, viram fantasmas. Além disso, mover background-position numa imagem de 23 mil px repintava a camada inteira a cada quadro. O filtro minterpolate do FFmpeg (modo mci, estimativa bidirecional) gera frames intermediários reais por compensação de movimento: o clipe inteiro foi interpolado a 96 fps, 381 frames em 1104×474, cerca de 1 minuto de processamento. Limite honesto: a interpolação cria frames entre dois originais e não remove o motion blur gravado neles.
Prompt ou instrução real · Etapa 1 · 2. "o efeito não está suave"
o efeito não está suave
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 2. "o efeito não está suave"
Entrada: frames/ (97 originais, 24 fps)
Saída: frames-96fps/f_0001.png … f_0381.png
RAIO-X / Sapo · sheet
67 frames em grade, não 97 em tira.
O Jorge perguntou por que nem todos os frames do vídeo tinham sido criados. Foram: os 97 originais estão em frames/ e os 381 interpolados em frames-96fps/, e os dois conjuntos vão no kit. O que não tem todos os frames é a sheet: 68 dos 97 originais são holds pixel-idênticos e os navegadores não decodificam WebP com mais de 16.383 px nem JPEG/PNG com mais de ~32.767 px de largura. A sheet fica com os interpolados 166–197 (esquerda até o repouso) e 240–274 (repouso até a direita): 67 frames, índices 0–30 à esquerda, 31 parado, 32–66 à direita, em grade de 12 colunas × 6 linhas. Duas resoluções: 1× em WebP (552×237 por frame, 0,5 MB) para a primeira pintura e 2× em JPEG (960×412, 2,1 MB) para telas grandes. O frame i fica na coluna i mod 12 e na linha ⌊i / 12⌋.
Prompt ou instrução real · Etapa 1 · 4. "pq vc não criou todos os frames do video ?"
pq vc não criou todos os frames do video ?
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 4. "pq vc não criou todos os frames do video ?"
Entrada: frames-96fps/f_0166 … f_0197 + f_0240 … f_0274
Saída: public/media/sapo-sheet-1x.webp + sapo-sheet-2x.jpg
RAIO-X / Sapo · motor
O cursor vira pose; a pose vira frame.
O X do ponteiro, relativo ao centro do hero, vira uma pose p em [-1, 1] por uma curva leve (1 − (1 − |x|)^1,15). A pose atual persegue a pedida por uma mola amortecida integrada em sub-passos de ~4 ms, e é convertida em frame invertendo a curva de deslocamento medida nos próprios frames (CONFIG.motion): metade do cursor é metade da inclinação, não metade dos frames. O desenho é um único drawImage da célula certa num canvas (DPR até 2). O Jorge viu "sombra" e "câmera lenta": a sombra era o cross-fade desenhando o braço duas vezes no meio do gesto (ficou desligado, CONFIG.blend); a câmera lenta era a mola de tracking macia demais (omega 11 → 24, zeta 0,92: em 120 ms o Sapo chega a ~90% da posição do cursor). Medido no navegador numa varredura completa: mediana 16,7 ms por quadro, p95 16,8 ms.
Prompt ou instrução real · Etapa 1 · 5. "quando eu mexo o mouse faz uma sombra, parece que está em camera lenta"
quando eu mexo o mouse faz uma sombra , parece que está em camera lenta
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 5. "quando eu mexo o mouse faz uma sombra, parece que está em camera lenta"
Entrada: src/sprite-hero.js (Spring, poseFromX, poseToFrame, blit)
Saída: .qa/local/report.json · 1440 e 2560 px
RAIO-X / Sapo · nitidez
Nunca descansar num frame borrado.
Nos frames do meio do gesto o braço é um borrão e a nitidez cai para um quinto da pose parada; nenhum filtro reconstrói isso, e a interpolação só cria frames entre dois originais borrados. A saída foi medir a nitidez de cada frame da sheet (variância do Laplaciano na região do tronco e dos braços, com OpenCV, normalizada pelo máximo) e usar a tabela no motor: em movimento, qualquer frame vale, porque o blur lê como movimento; parado, só frame nítido. Quando o ponteiro fica 140 ms sem se mover e o frame está abaixo de 0,62, a pose assenta no frame nítido mais próximo em espaço de pose, com viés para "apontando" (0,7) longe do centro. Bug real no caminho: o Chrome redispara pointermove com as mesmas coordenadas quando a interface muda sob um cursor parado, o que reiniciava o timer de descanso; eventos sem mudança de coordenada passaram a ser ignorados.
Prompt ou instrução real · Etapa 1 · 7. "o braço ainda fica borrado" e as frases ao lado do Sapo
o braço ainda fica borrado, dá pra melhorar? outro ponto eu gostaria que no computador as frases aparecessem do lado do sapo
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 7. "o braço ainda fica borrado" e as frases ao lado do Sapo
Entrada: frames/frame_047.png, frame_048.png, frame_057.png
Saída: public/raio-x/nitidez.webp + CONFIG.sharpness
RAIO-X / Sapo · painéis
Os textos aparecem conforme o lado.
O Jorge pediu que, com o cursor à esquerda, aparecesse "Frames reais · 96 fps / Mexa. Ele segue" e, à direita, o parágrafo com os botões. hero.dataset.side vira left, right ou vazio conforme a pose, com zona morta de ±0,12, e o CSS mostra cada bloco no seu lado. No desktop, headline e texto ficam ao lado do personagem, centralizados na altura dele, em colunas de até 23% da largura; o personagem nunca passa de 46% da largura do hero, para não colidir com o texto. Sem cursor (toque, telas estreitas, "reduzir movimento", sem JavaScript), os dois blocos ficam sempre visíveis.
Prompt ou instrução real · Etapa 1 · 6. Os textos aparecem conforme o lado
outro ponto quando eu mexe o curso para esquerda quero que apareca Frames reais · 96 fps Mexa. Ele segue e pára direita O Sapo segue o seu cursor percorrendo frames reais da animação: sem player de vídeo, sem biblioteca, só uma sheet de pixels e uma mola.
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 6. Os textos aparecem conforme o lado
Entrada: src/data/hero.js (eyebrow, h1Html, pitchHtml)
Saída: .qa/local/1440-direita.png
RAIO-X / Sapo · retrato
No celular, o Sapo inteiro.
O palco é sempre o quadro original 2206×946, nunca cortado na sheet. Ele cobre o hero, mas com dois tetos: no celular, nunca amplia além de mostrar 900 px da fonte na largura (o Sapo tem 780 px de largura, então fica inteiro); no desktop alto, o personagem nunca passa de 46% da largura do hero. No celular a headline vai para cima e o texto para baixo, e o palco sobe um pouco (47%) para os tênis não encostarem no parágrafo. Arrastar o dedo faz o tracking enquanto pressionado. O QA em 390 e 768 px confere que o palco não passa de 2,5× a largura da tela (medido: 2,45×) e que os dois painéis ficam visíveis.
Prompt ou instrução real · Etapa 7 · Composição, painéis laterais e retrato
const cover = Math.max(r.width, r.height * CONFIG.aspect); const spanCap = r.width * 2206 / CONFIG.minSpan; // celular: sapo inteiro const shareCap = r.width * CONFIG.maxCharacterShare * 2206 / 780; // desktop alto: longe do texto const w = Math.min(cover, spanCap, r.width > 860 ? shareCap : Infinity);
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 7 · Composição, painéis laterais e retrato
Entrada: src/sprite-hero.js (layout)
Saída: .qa/local/390-esquerda.png
RAIO-X / Sapo · raio-x
Os prompts, em português, dentro do site.
O último pedido do Jorge foi publicar, detalhar tudo, subir os arquivos para qualquer um conseguir criar também e incluir os prompts em português. A página /sapo/raio-x/ tem as etapas de 0 a 10: entrada, prompts, FFmpeg, interpolação, sheet, motor, nitidez, layout, QA, erros e kit, mais o sprite-hero.js inteiro. O pedido inicial aparece em inglês, como foi enviado, e traduzido logo abaixo; as sete mensagens de ajuste, verbatim, cada uma com o que mudou. Dois zips: sapo-kit.zip (clipe original, sheets, poster, código-fonte e scripts, ~7 MB) e sapo-frames.zip (97 frames extraídos e 381 interpolados, ~27 MB). Todo o texto vive em src/data/ e é renderizado em HTML estático no build, sem script inline.
Prompt ou instrução real · Etapa 1 · 8. Publicar
maravilha sobe a na vps usando a skill C:\Users\jorge\.claude\skills\publicar-site-imersivo\SKILL.md detalha tudo , sobe os arquivos para qlq um conseguir criar tb, inclua os prompt em portugues
Documento de origem: E:\Sapo\src\data\raio-x.js · Etapa 1 · 8. Publicar
Entrada: src/data/raio-x.js
Saída: dist/raio-x/index.html + download/sapo-kit.zip