# Explainer 3D (v2)

Vídeo vertical 9:16 de 60 a 70 s que desmonta um mito ou explica um tema de IA dentro de UM mundo 3D low poly
feito em código (Three.js). A câmera viaja e mergulha nesse mundo desde o primeiro quadro, pequenas etiquetas
apontam para as coisas, um painel de jogo (HUD) vai sendo preenchido, o título em serifa itálica aparece palavra
por palavra enquanto é falado, a legenda tem de 1 a 3 palavras com a palavra-chave em âmbar, e o Danilo aparece
em cerca de 25% do tempo (tela cheia e canto). Referência aprovada: "O mito do gasto de água com inteligência
artificial" (publicado em 06/10/2026).

## Quando usar

- Mito ou tema de IA que fica claro quando a gente **vê o lugar onde a coisa acontece**: o data center, a usina,
  a casa de quem pergunta, o caminho de uma resposta, o consumo de energia, de água, de chip.
- Gancho contraintuitivo que o 3D mostra bem (uma garrafa que seca inteira, uma coluna 31 vezes maior que a outra).
- Série "IA de verdade": vídeos de 60 a 70 s, com 160 a 180 palavras de narração.
- Quando o roteiro tem uma revelação perto do fim e comparações de escala (placar, colunas, garrafa, régua).

## Quando não usar

- Explicação de conceito abstrato sem lugar físico (alucinação, janela de contexto): use os reels explicativos em
  canvas ou o explainer desenhado.
- Demonstração de produto ou de tela de software: use o modo produto do motion design.
- Vídeo de notícia que precisa sair em minutos: o 3D pede peças novas e render no pod.
- Volta ao mundo de casos, globo e lista de países. Foi exatamente esse bloco que o Danilo cortou na água.
- Vídeo longo (mais de 90 s) ou com o Danilo falando mais da metade do tempo.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| Âmbar | `#F2A93B` | a ÚNICA cor de destaque: palavra-chave da legenda, número do HUD, brilhos, carimbo, palavra do título |
| Âmbar claro (miolo do brilho) | `#FFD68C` | centro do halo aditivo dos brilhos |
| Texto | `#F4F1EA` | título, rótulos, itens do HUD |
| Branco das etiquetas | `#FFFFFF` | ponto, linha fina e rótulo |
| Painel do HUD | `rgba(16,20,27,0.62)` com borda `rgba(255,255,255,0.16)`, raio 18 | fundo do medidor, da lista e do placar |
| Azul da barra | `#58B7E8` | só barra de medidor e água |
| Céu, topo | `#A8C6DE` | gradiente do céu |
| Céu, horizonte | `#F1D8B9` | gradiente do céu |
| Névoa | `#E9D6BE`, FogExp2 0,0017 | profundidade |
| Mundo (PAL do `kit.js`) | grama `#A3B47F`, morro `#8A9C6A`, areia `#D8C8A2`, estrada `#C9C0AE`, parede `#EFE4CF`, telhado terracota `#B56C4F`, telhado ardósia `#6F8197`, folhas `#6F8F4E`, pinheiro `#4F6E47`, concreto `#CFCAC0`, água `#5F9EA6`, data center `#DFE2E3` | tudo facetado (`flatShading`) |
| Rim light do Danilo | `#F2C27B` | contorno quente no recorte em tela cheia |
| Título e fecho | Instrument Serif itálica 400, 124 px (fecho 104 px), entrelinha 1,04 | palavra por palavra no tempo da fala |
| Selo da série | JetBrains Mono 500, 26 px, letras espaçadas 3,2 px, pílula com borda branca 70% | "IA DE VERDADE · EPISÓDIO N", em cima do título |
| HUD | JetBrains Mono 500/700 (rótulos 22 px espaçados, número 52 px âmbar) e Inter 600 30 px (itens) | canto superior esquerdo |
| Legenda | Inter 800, 70 a 72 px, contorno escuro de 9 px, sombra, pop de 0,14 s | 1 a 3 palavras, até 17 caracteres |
| Rótulo da etiqueta | Inter 600, 34 px; nota em JetBrains Mono 500, 24 px | ponto + linha + rótulo |
| Pós | DOF por gather, bloom 0,32, ACES, vinheta 0,42, grão 0,035, aberração 0,0012 | o "filme" por cima de tudo |

```json
{
  "cores": {
    "ambar": "#F2A93B", "ambarClaro": "#FFD68C", "texto": "#F4F1EA", "branco": "#FFFFFF",
    "painel": "rgba(16,20,27,0.62)", "bordaPainel": "rgba(255,255,255,0.16)", "azulBarra": "#58B7E8",
    "ceuTopo": "#A8C6DE", "ceuHorizonte": "#F1D8B9", "nevoa": "#E9D6BE", "rimDanilo": "#F2C27B",
    "mundo": { "grama": "#A3B47F", "morro": "#8A9C6A", "areia": "#D8C8A2", "estrada": "#C9C0AE", "parede": "#EFE4CF",
               "telhadoTerracota": "#B56C4F", "telhadoArdosia": "#6F8197", "folhas": "#6F8F4E", "pinheiro": "#4F6E47",
               "concreto": "#CFCAC0", "agua": "#5F9EA6", "dataCenter": "#DFE2E3" }
  },
  "fontes": {
    "titulo": { "familia": "Instrument Serif", "estilo": "italic", "peso": 400, "px": 124 },
    "selo": { "familia": "JetBrains Mono", "peso": 500, "px": 26, "espacamento": 3.2 },
    "hudNumero": { "familia": "JetBrains Mono", "peso": 700, "px": 52 },
    "hudItem": { "familia": "Inter", "peso": 600, "px": 30 },
    "legenda": { "familia": "Inter", "peso": 800, "px": 72, "contorno": 9 },
    "etiqueta": { "familia": "Inter", "peso": 600, "px": 34, "nota": { "familia": "JetBrains Mono", "peso": 500, "px": 24 } }
  },
  "tempo": {
    "fps": 30, "duracaoVideo": [60, 70], "palavras": [160, 180],
    "palavraDoTitulo": "entra de ini-0,04 a ini+0,22 s da fala, sobe 26 px",
    "legendaPop": 0.14, "etiquetaEntrada": 0.5, "etiquetaSaida": 0.25,
    "clarao": "sobe 0,3 s antes do corte, desce 0,22 s depois", "pausaMaximaNarracao": 0.15,
    "danilo": { "proporcao": 0.25, "cantoDuracao": 3, "cantoSobe": 0.25 }
  },
  "curvas": {
    "camera": "Catmull-Rom centrípeta por chaves + tempo em cúbica monótona (velocidade contínua, a 1ª chave antes de t=0)",
    "entradaUI": "smoothstep e easeOut", "pontoDaEtiqueta": "outBack", "carimbo": "outBack de 1,6x para 1x"
  },
  "zonas1080x1920": {
    "hud": { "x": 60, "y": 236 }, "titulo": { "y": [640, 820] }, "miolo": { "y": [500, 1250] },
    "legenda": { "y": 1330 }, "daniloCanto": { "x0": 616, "y0": 1282, "escala": 0.42 }, "seloFontes": { "y": 1560 }
  },
  "pos": { "bloom": 0.32, "vinheta": 0.42, "grao": 0.035, "aberracao": 0.0012, "tonemap": "ACES", "nevoa": 0.0017 }
}
```

## Regras

1. **Modo diretor: cada frase da narração ganha um elemento visual próprio.** Uma etiqueta nova, um mergulho,
   uma peça que cresce, um item do HUD marcado, um brilho. Nenhum trecho fica parado esperando a fala acabar.
2. **Câmera em movimento desde o quadro 0.** A primeira chave da trajetória fica em t negativo, então o quadro 0
   já tem velocidade. É assim que se percebe na hora que é 3D. Câmera parada só atrás do Danilo em tela cheia.
3. **Título falado e escrito no primeiro segundo**, palavra por palavra em serifa itálica, cada palavra entrando
   quando é dita, com o selo da série em cima e uma palavra em âmbar.
4. **Um mundo só, do começo ao fim**, low poly em código, com uma vista "casa" (o mapa de cima) que abre, volta a
   cada bloco e fecha. Para explicar um porquê, a câmera mergulha da vista casa para o detalhe (dentro da casa, a
   torre, a régua dentro da garrafa) e volta.
5. **75% mundo 3D e 25% Danilo.** Tela cheia logo depois do gancho (~7 s), no meio e no último parágrafo do CTA,
   sempre sobre a cena desfocada (foco curto, abertura 60 a 70). No canto, 3 s de cada vez, em 2 ou 3 momentos,
   subindo de baixo em 0,25 s enquanto o mundo continua andando. O avatar é UM vídeo HeyGen da narração inteira.
6. **Pessoa em destaque é imagem gerada no gpt-image-2, colada como sprite** (plano sempre de frente para a câmera,
   com sombra de contato no chão). Nunca gente modelada em low poly. Multidão ao longe pode ser bonequinho do kit.
7. **Etiquetas pequenas**: ponto branco, linha fina e rótulo curto em Inter 600, no lugar exato. Rótulo com número
   leva a fonte numa nota mono pequena ("fonte: ANA").
8. **HUD no canto superior esquerdo** em um dos três modos: medidor (número âmbar e barra), lista que vai sendo
   marcada (contador âmbar "2/3") ou placar numerado. Quem assiste quer ver a lista completar.
9. **Uma única cor de destaque, o âmbar `#F2A93B`.** Azul só para água e barra de medidor.
10. **Legenda de 1 a 3 palavras**, Inter ExtraBold com contorno escuro, na faixa y 1330, palavra-chave em âmbar.
    Se o título ou o fecho estão na tela, a legenda fica muda.
11. **Estrutura do roteiro**: mito, por que acontece, revelação perto do fim, comparações, frase-síntese em
    serifa, crédito da agente e CTA. A resposta nunca vem cedo.
12. **Transição entre mundo aberto e interior é um clarão branco quente** (sobe 0,3 s antes do corte, desce
    0,22 s depois). Nada de cortina, zoom digital ou wipe.
13. **Narração sem pausa acrescentada**: take único, no máximo 0,15 s entre frases.
14. **Estado só função do tempo**: `estadoEm(t)` define câmera, objetos e UI. O render é em faixas paralelas no
    pod, fora de ordem.
15. **Render final no pod de CPU de 64 vCPU** (`render_no_pod.sh`). Na VPS só prévia e trecho curto.

## Proibições

- Plano parado no começo do vídeo ou trecho "paradão" enquanto a narração anda.
- Pessoa low poly em primeiro plano.
- Texto por cima de texto (título sobre a tela do monitor, legenda junto com o título).
- Chat com marca, logo ou cor de produto; terminal no lugar do chat. O chat é genérico: barra "Nova conversa",
  caixa "Pergunte alguma coisa", pergunta legível e resposta em barras cinza ilegíveis.
- Segunda cor de destaque, cartão grande cobrindo a cena, emoji, seta desenhada à mão.
- Globo, mapa-múndi ou volta pelos países quando o lugar não é o argumento.
- Modelo 3D baixado pronto (GLB): o mundo é 100% em código, porque o CTA diz que a agente modelou o 3D.
- `transmission` e refração no material (o SwiftShader do pod não aguenta): vidro é `opacity`.
- Símbolos fora do subset latino das fontes (`◀ ▶ →`): caem em `system-ui` sem erro.
- Na escrita: travessão no meio de frase, "não é sobre X, é sobre Y" e variações, "ouro", "muda o jogo", "mora"
  no sentido de ficar, "endereço" no sentido de lugar.

## Som

- **Música:** a trilha instrumental reta da biblioteca da conteudo-danilo-gato (`trilha_instrumental_reta.mp3`, a
  mesma do vídeo da água): instrumental sem vocal, pulso constante perto de 120 BPM, cama neutra. Entra no mix com
  volume 0,065, equalizador cortando 3 dB em 1,5 kHz e sidechain pela narração (a trilha abaixa quando o Danilo
  fala). Fade de entrada de 0,6 s e de saída de 2,2 s. Mix final normalizado em **−20 LUFS**. Trecho de exemplo:
  `sons/trilha-instrumental-reta.mp3` (24 s, já em −20 LUFS para ouvir sozinho).
- **Efeitos** (volume 0,07 a 0,13 no mix, todos em `template/audio/sfx/` da skill e no board):
  - `whoosh-curto` e `whoosh-medio`: mergulho e subida de câmera, clarão de corte;
  - `teclado-digitando`: a pergunta sendo digitada no chat;
  - `click-analog`: enviar a pergunta, apertar algo;
  - `tick-marcador`: item do HUD marcado, etiqueta entrando;
  - `pop-suave`: número ou peça aparecendo;
  - `carimbo`: o carimbo "CONFERIDO" no CTA;
  - `impacto-seco`: a revelação.
  As marcas ficam em `cena/data/sfx.json` (`{ t, arquivo, volume }`) e o `audio/mixar.py` monta tudo.
- **Proibido:** música com vocal, trilha épica ou de suspense exagerado, som de máquina de escrever na legenda,
  efeito em toda palavra, efeito mais alto que a voz, mix fora de −20 LUFS.

## Prompts dos assets

O mundo, as peças e a UI saem de código (não há prompt de imagem para eles). Os dois prompts que existem:

**1. Pessoa em destaque (gpt-image-2, 1024x1536, qualidade medium, ~US$ 0,04).** Fundo magenta chapado para
recortar depois (o gpt-image-2 não devolve fundo transparente); o recorte é chroma key no magenta com despill.
Testado em 06/10/2026 e aprovado no clipe `pessoa`:

```
Draw a single full-body person standing, a young adult Brazilian woman in casual clothes (mustard yellow sweater,
dark blue jeans, white sneakers), looking down at a smartphone in her hands, slight smile. Style: stylized 3D
render like a premium toy diorama character, soft matte clay-like materials, gentle simplified shapes but
realistic proportions, warm late-afternoon sunlight coming from the right, soft rim light in warm amber, subtle
ambient occlusion. She must match a low poly 3D world with a desaturated warm palette (cream, terracotta, sage
green). Centered, entire body visible from head to feet with margin around. Background: perfectly flat solid pure
magenta color #FF00FF everywhere, no floor, no shadow on the background, no gradient, no other objects, no text.
Do not use any magenta or pink on the character.
```

Troque a pessoa, a roupa e o objeto na mão; mantenha estilo, luz, enquadramento e o fundo magenta.

**2. Peça 3D nova (brief para subagente ou card, um por peça).**

```
Construa a peça <NOME> do Video Explainer 3D em ./x3d-<slug>/cena/src/pecas/<nome>.js.
Leia antes cena/src/kit.js (PAL, sombra, malha, caixa) e reaproveite; kit.js é só leitura.
Exporte construir<Nome>({ scene, env, renderer, origem }) devolvendo
{ grupo, A: { ancoras Vector3 }, atualizar(t, estado), sombra: { centro, raio }, cameras: { aberto, perto, detalhe } }.
Low poly facetado (flatShading), cores da PAL, uma escala coerente com a casa (4,4 m de largura).
Estado só função de (t, estado); nada guardado entre quadros. Sem transmission, metalness até 0,65.
Confira na bancada: EP=testes/bancada bash tools/previa.sh 1,3,5,7,9,11 previa/<nome> ""
e abra previa/<nome>/folha.jpg com Read. Nenhum rm; caminhos absolutos; um arquivo por vez.
```

## Componente de referência

Um plano do episódio (Three.js, motor da skill). A câmera já anda no quadro 0, o título entra palavra por
palavra com o selo, a etiqueta aponta para o data center e as torres ganham brilho:

```js
import { construirCidade, CASA } from './mundos/cidade.js';
import { trajetoria } from './camera.js';
import { smooth, faixa } from './util.js';

export async function criarEpisodio({ scene, renderer, dados }) {
  const M = construirCidade({ scene, renderer });
  const P = dados.palavras.palavras;
  const cam = trajetoria([
    { t: -0.9, pos: [92, 96, 74], alvo: [-24, 40, 4], fov: 44, abertura: 6 },   // antes do 0: já em movimento
    { t: 0.0, pos: [70, 72, 58], alvo: [-24, 30, 4], fov: 44, abertura: 6 },
    { t: 3.0, pos: CASA.pos, alvo: CASA.alvo, fov: 42, abertura: 8 },            // a vista casa
    { t: 6.0, pos: [66, 17, 2], alvo: [34, 7, -30], fov: 40, abertura: 14 },     // mergulho no data center
  ]);
  const titulo = (t) => [P.filter((w) => w.bloco === 'p00').map((w) => ({
    texto: w.texto, u: faixa(t, w.ini - 0.04, w.ini + 0.22), destaque: w.texto === 'água' }))];
  return {
    fps: 30, duracao: 6,
    antesDoRender(camera) { M.ajustarSombra(camera); },
    estadoEm(t) {
      M.atualizar(t);
      const c = cam(t), u = smooth(4.2, 4.7, t);
      return {
        camera: c,
        post: {},
        ui: {
          frase: t < 3.2 ? { linhas: titulo(t), px: 124, y: 640, selo: 'IA DE VERDADE · EPISÓDIO 1', seloU: smooth(0.05, 0.5, t), saida: faixa(t, 2.7, 3.15) } : null,
          etiquetas: u > 0 ? [{ texto: 'data center', ancora: M.A.dataCenter, u, nota: 'onde a resposta é calculada', dx: -70, dy: -320 }] : [],
          brilhos: M.A.dcTorres.map((p) => ({ ancora: p, u, r: 110, t })),
          hud: t > 4 ? { modo: 'lista', titulo: 'O CAMINHO DA RESPOSTA', u: smooth(4, 4.4, t),
                         itens: [{ texto: 'a pergunta sai de casa', feito: 1 }, { texto: 'chega ao data center', feito: smooth(5, 5.3, t) }] } : null,
        },
      };
    },
  };
}
```

O código dos clipes deste board (curvas fechadas para loop, sprite da pessoa, render dos assets isolados) está
em `fonte/` do pacote.