# Notícia animada (v1)

Um vídeo vertical de 15 a 25 s com cara de telejornal moderno: selo vermelho de editoria no topo, letreiro rolando
embaixo, título em duas linhas (branco e azul) e cenas que alternam fundo escuro e claro. Os personagens são ilustrações
de corpo inteiro geradas com fundo transparente, e o contexto geográfico ou de dados é desenhado em código (um mapa com
o contorno real dos países, um gráfico de linha que sobe, um carimbo "x4"). A narração tem tom de jornal e a legenda
acende palavra por palavra.

## Quando usar

- Explicar uma notícia ou um fenômeno do dia a dia com causa e consequência: "por que o chocolate ficou tão caro".
- Temas com geografia (mapa com países destacados), preço, produção, clima ou cadeia de abastecimento.
- Roteiros com uma frase por cena e um arco claro: abertura, onde acontece, o que causou, o efeito, o resumo.
- Quando se quer personagens humanos de verdade (produtor, cliente) no lugar de bonecos de palito.

## Quando não usar

- Notícia de última hora que precisa sair em minutos: este estilo pede duas ilustrações geradas, mapa e QA.
- Temas sem ligação com lugar ou com dado (conceitos abstratos de IA): prefira o canvas geométrico.
- Assuntos sensíveis, em que um personagem de ilustração pode soar como humor.
- Vídeos acima de 30 s sem mais cenas: o letreiro e a moldura repetem demais.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| Fundo escuro | `#060A12` | cenas de abertura, mapa, preço e fechamento |
| Fundo claro | `#F4F6FA` | cenas de personagem (produtor, mercado) |
| Azul CPDF | `#00B4FF` | segunda linha do título, sublinhado, linhas, contorno de cartão, palavra falada na legenda |
| Vermelho do selo | `#E5253A` | selo de editoria, seta de alta, "!?" |
| Cacau | `#8B4A2B` | países destacados no mapa, rótulos de chamada |
| Brilho do cacau | `#E8A870` (glow) e `#E3B088` (borda) | contorno e brilho pulsante do país em foco |
| Mapa (fundo) | `#0A1626` | cartão do mapa, raio 28 |
| País comum | `#22324A`, borda `rgba(170,195,225,.55)` | países sem foco, apagados em 45% |
| Letreiro (faixa) | `#04060B`, filete azul `rgba(0,180,255,.5)` de 3 px | rodapé |
| Texto | `#F2F5FA` (escuro) e `#0B1220` (claro) | títulos |
| Fonte | Inter 700 e 800 | título 80 px, legenda 46 px (40 se der três linhas), selo 32 px, letreiro 28 px |

```json
{
  "quadro": { "largura": 1080, "altura": 1920, "fps": 30 },
  "cores": {
    "fundoEscuro": "#060A12", "fundoClaro": "#F4F6FA", "azul": "#00B4FF", "selo": "#E5253A", "cacau": "#8B4A2B",
    "mapa": "#0A1626", "pais": "#22324A", "letreiro": "#04060B", "textoEscuro": "#F2F5FA", "textoClaro": "#0B1220"
  },
  "fonte": { "familia": "Inter", "pesos": [700, 800], "titulo": 80, "legenda": 46, "selo": 32, "letreiro": 28 },
  "tempo": {
    "transicaoCena": 0.3, "tituloEntra": 0.5, "letreiroPxPorSegundo": 150, "mapaDesenha": 0.85,
    "zoomMapa": [46, 68], "cartaoMola": 0.5, "fechamentoLinha": 0.4
  },
  "curvas": { "entrada": "easeOutCubic", "mola": "easeOutBack (c1 = 1,70158)", "transicao": "deslize de 60 px com fade" },
  "zonas1080x1920": {
    "selo": { "x": 60, "y": [90, 170] }, "titulo": { "y": [200, 420] }, "palco": { "y": [450, 1540] },
    "legenda": { "y": [1560, 1740] }, "letreiro": { "y": [1790, 1860] }, "assinatura": { "y": 1888 }
  }
}
```

## Regras

1. **A moldura de telejornal é persistente.** Em todas as cenas: selo vermelho retangular de 250 x 80 em (60, 90) com um
   ponto branco que pisca e o nome da editoria ("ECONOMIA"), a palavra "ENTENDA" em azul com espaçamento de 9 px ao
   lado, e o letreiro rolando na faixa de baixo (y 1790 a 1860).
2. **Letreiro com quatro manchetes** em caixa alta, separadas por um ponto azul, andando a 150 px por segundo da direita
   para a esquerda. À direita da faixa, um bloco azul fixo com a marca (260 px de largura).
3. **Título em duas linhas** em cada cena (primeira branca ou escura, segunda azul) com sublinhado azul que cresce do centro.
4. **Alternar fundo escuro e claro** a cada mudança de assunto. Escuro para dado e lugar, claro para pessoa.
5. **Personagens são ilustrações geradas** com fundo transparente, em estilo vetorial plano, entrando com mola e "respirando"
   (escala vertical de 1 a 1,01 e balanço de 3 px). Se a imagem termina na cintura ou na coxa, esconda as pernas atrás de
   uma gôndola, bancada ou prateleira desenhada em código.
6. **O mapa é desenhado em código** com contornos reais (Natural Earth), projeção equiretangular simples e traçado
   progressivo dos países um a um. Países sem foco ficam apagados; os destacados se pintam na cor do tema, com brilho
   pulsante, rótulo de chamada com linha tracejada e um zoom de câmera que se aproxima ao longo da cena.
7. **Cada informação tem um objeto:** uma rosca que enche até o percentual (50%), cartões de causa entrando um por vez
   no ritmo da fala, uma barra que cai com seta vermelha, um gráfico de linha que sobe de x1 a x4 e termina num
   carimbo grande com tremidinha. Eixos sem valores inventados.
8. **O momento da palavra manda.** Cada elemento entra no segundo exato em que a palavra correspondente é falada, lido do
   `timing.json` (início de cada palavra).
9. **Legenda karaokê** em caixa escura (`rgba(6,10,18,.88)`, raio 28, contorno azul de 2 px), em y 1560 a 1740: palavra atual em
   azul, já falada em branco, futura a 38% de branco. A legenda some quando a fala acaba.
10. **Transições de 0,3 s** (deslize de 60 px com fade), sem quadro vazio.
11. **Fechamento** com três cartões em sequência (causa, meio, efeito), cada um com um ícone na cor do assunto, e a marca em
    azul grande embaixo, sem legenda.

## Proibições

- Valores inventados (preço em reais ou dólar sem fonte). Use fatores (x1 a x4) ou textos como "em alta".
- Mapa com contorno falso ou desenhado à mão: use dados geográficos reais.
- Pernas ou corpo cortados no meio da tela. Esconda a parte que falta atrás de um objeto.
- Mais de uma ilustração nova por cena e personagens em estilos diferentes na mesma notícia.
- Elemento passando de y = 1540 ou por cima da legenda.
- Travessão e fórmulas de manchete sensacionalista no texto da tela.

## Som

- **Narração** na voz clonada, tom de jornal (firme, ritmo constante), uma frase por cena.
- **Música e efeitos:** o exemplo do curso usa só a voz. Se usar, um colchão instrumental discreto de telejornal, bem abaixo
  da voz, e um "tec" curto no carimbo do gráfico.
- **Proibido:** vinheta com impacto alto, risers, música com vocal.

## Prompts dos assets

Os dois personagens saem do GPT Image com fundo transparente. O fundo transparente só funciona no `gpt-image-1.5`
(o `gpt-image-2` não aceita), com `size 1024x1536`, `quality high` e `background transparent`.

**Produtor de cacau**
```
Flat vector style illustration of a smiling cocoa farmer in West Africa, full body, standing, holding a yellow-orange
cocoa pod in one hand, a woven basket at his feet, simple clothes in warm earthy colors, soft gradients, clean shapes,
transparent background, no text, no shadow on the ground, vertical composition, centered.
```

**Cliente no mercado**
```
Flat vector style illustration of a woman shopping, shown from the waist up to mid-thigh, holding a red shopping basket
and looking at a chocolate bar in her other hand with a surprised expression, yellow cardigan, white t-shirt, blue jeans,
dark hair in a ponytail, soft gradients, clean shapes, transparent background, no text, vertical composition, centered.
```

O mapa, o gráfico, os cartões e a moldura não usam imagem: são desenhados no canvas.

## Componente de referência

Moldura persistente: o selo de editoria com o ponto piscando e o letreiro rolando.

```js
const BL = '#00B4FF', RED = '#E5253A';
const TICK = ['CACAU EM ALTA', 'COSTA DO MARFIM E GANA PRODUZEM METADE DO CACAU DO MUNDO',
              'CLIMA E PRAGA DERRUBARAM AS COLHEITAS', 'PREÇO DA TONELADA CHEGOU A QUADRUPLICAR'];
function frame(t) {
  x.fillStyle = RED; x.fillRect(60, 90, 250, 80);                          // selo de editoria
  if (Math.sin(t * 7) > -.2) circ(92, 130, 9, '#FFFFFF');                  // ponto piscando
  text('ECONOMIA', 116, 131, 32, '#FFFFFF', 800, 'left', 2);
  text('ENTENDA', 350, 131, 32, BL, 800, 'left', 9);
  x.fillStyle = '#04060B'; x.fillRect(0, 1790, W, 70);                      // letreiro
  x.fillStyle = 'rgba(0,180,255,.5)'; x.fillRect(0, 1790, W, 3);
  x.save(); x.beginPath(); x.rect(0, 1790, 820, 70); x.clip();
  const sz = 28, seg = TICK.map(s => ({ s, w: tw(s, sz, 700) })), gap = tw(' • ', sz, 700) + 40;
  const total = seg.reduce((a, o) => a + o.w + gap, 0);
  const off = -((t * 150) % total);                                        // 150 px por segundo
  for (let rep = 0; rep < 3; rep++) { let cx = off + rep * total;
    seg.forEach(o => { text(o.s, cx, 1826, sz, '#FFFFFF', 700, 'left'); cx += o.w + 20;
                       text('•', cx + gap / 2 - 20, 1826, sz, BL, 800, 'center'); cx += gap - 20; }); }
  x.restore();
  x.fillStyle = BL; x.fillRect(820, 1790, 260, 70); text('cpdf.ai', 950, 1826, 34, '#04101C', 800, 'center', 1);
}
```

## De onde vem

- **Skills que produzem:** `video-a-jato` (canvas, narração, legenda) junto com `criacao-edicao-imagem-gpt-image` (os personagens).
- **Aula:** 1, Explainers, estilo 1E.
- **Pedido de exemplo:** "Faz uma notícia animada de 20 segundos: 'Entenda por que o chocolate ficou tão caro'. Usa bonecos gerados
  no GPT Image com fundo transparente (um produtor de cacau e uma cliente no mercado) e um mapa da África Ocidental desenhado
  em código, destacando Costa do Marfim e Gana. Narração na minha voz, com tom de jornal."