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 MELANCIAPROJETO CONCEITO
Dane-se · UGC 01
Dane-se · cena 02
Dane-se · cena 01
Dane-se · UGC 02
Dane-se · UGC 03
bastidor · textura da lata
bastidor · revisão do olho
bastidor · direção de cor
bastidor · cubos de melancia
Dane-se · cena 04
Dane-se · cena 06
bastidor · frame do Flow
01 / FOTO REAL bastidor · foto → textura → 3D
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.
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