# Canvas geométrico CPDF (v1)

Um explainer vertical de 15 a 30 s com cara de produto de tecnologia: fundo azul-noite com pontinhos que acendem em
onda e uma aurora azul e roxa, objetos com volume suave nas cores naturais deles, e o azul elétrico `#00B4FF` usado só
como destaque (segunda linha do título, setas, pulsos, contorno da legenda). Um protagonista visual fica na tela o
vídeo inteiro (por exemplo, uma rede neural) e vai mudando conforme a narração, com a informação fluindo por linhas
que acendem. A legenda é uma caixa escura com contorno azul, e as palavras acendem conforme são faladas.

## Quando usar

- Explicar um conceito técnico que tem fluxo: dados passando por camadas, antes e depois, treino e uso, causa e efeito.
- Conteúdo de marca CPDF (cursos, aulas, divulgação), que pede fundo escuro e azul elétrico.
- Vídeos curtos em que o espectador acompanha UM objeto mudando, em vez de trocar de cena a cada frase.
- Demonstração ao vivo: o estilo é todo em código e sai em poucos minutos.

## Quando não usar

- Assuntos humanos ou emocionais, que pedem personagens e calor (use os bonecos de palito ou a notícia animada).
- Vídeo de software real ou de produto físico (use a apresentação de software ou o vídeo de produto).
- Marca de outra empresa: as cores e o rodapé são da CPDF. Troque a paleta antes de aplicar em outro lugar.
- Texto longo na tela. O estilo mostra, a legenda conta.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| Fundo escuro | `#060A12` | cenas escuras (a maioria) |
| Fundo claro | `#F4F6FA` | cenas claras, alternando com as escuras, com textura leve de papel |
| Azul CPDF | `#00B4FF` | SÓ destaque: título, sublinhado, setas, pulsos, contorno da legenda |
| Texto | `#F4F6FA` (escuro) e `#0B1220` (claro) | títulos e rótulos |
| Texto apagado | `#8A94A6` | rodapé e notas |
| Nó em repouso | `#44587F` | bolinhas da rede antes de acender |
| Vermelho de erro | `#FF4D5A` | erro, resposta errada |
| Verde de acerto | `#2ED47A` | resposta certa |
| Âmbar | `#FFB020` | ajuste, treino, peso mudando |
| Aurora azul | `rgba(0,180,255,.22)`, raio 700, em (250, 420) com deriva de 80 px | brilho do canto superior |
| Aurora roxa | `rgba(168,85,247,.16)`, raio 650, em (850, 1450) com deriva de 60 px | brilho do canto inferior |
| Pontilhado | grade de 40 px, raio 2,2, cinza `147,160,180` com opacidade de 0,10 a 0,38 | acende em onda a partir do centro |
| Fonte | Inter 700 e 800 | tudo. Título 84 px, eyebrow 26 px com espaçamento de 6 px, legenda 44 px |
| Raio dos nós | 34 px | bolinhas da rede |

```json
{
  "quadro": { "largura": 1080, "altura": 1920, "fps": 30 },
  "cores": {
    "fundoEscuro": "#060A12", "fundoClaro": "#F4F6FA", "azul": "#00B4FF", "texto": "#F4F6FA", "textoClaro": "#0B1220",
    "apagado": "#8A94A6", "noRepouso": "#44587F", "erro": "#FF4D5A", "acerto": "#2ED47A", "ambar": "#FFB020"
  },
  "fonte": { "familia": "Inter", "pesos": [700, 800], "titulo": 84, "eyebrow": 26, "legenda": 44, "pilula": 34 },
  "tempo": {
    "cabecalhoEntra": 0.5, "sublinhado": 0.5, "popObjeto": 0.5, "transicaoCena": 0.35,
    "pulsoPorCamada": [0.22, 0.36], "legendaFadeIn": 0.15, "respiroFinal": 2
  },
  "curvas": { "entrada": "easeOutCubic (1 - (1 - t)^3)", "mola": "easeOutBack (c1 = 1,70158)", "fluxo": "linear, com brilho (shadowBlur 14)" },
  "zonas1080x1920": {
    "eyebrow": { "y": 150 }, "titulo": { "y": [245, 343] }, "sublinhado": { "y": 408 },
    "palco": { "y": [450, 1540] }, "legenda": { "x": 70, "y": 1580, "largura": 940 }, "rodape": { "y": 1860 }
  }
}
```

## Regras

1. **Fundo vivo.** Cor sólida, aurora azul no alto e roxa embaixo (as duas se mexem devagar), pontilhado que acende em
   onda (`sin(distância / 90 - t * 2,2)`) e vinheta nas bordas. Nas cenas claras, a aurora cai a 45% e entra uma textura
   de papel feita de pontinhos quase invisíveis.
2. **O azul é destaque, nunca o objeto inteiro.** Os objetos têm cores naturais (gato laranja, servidor cinza com LED
   verde, calendário vermelho, moeda dourada). Tudo azul e branco fica sem graça.
3. **Todo objeto passa pela função de pintura com volume:** gradiente suave do canto superior esquerdo ao inferior
   direito (14% mais claro a 14% mais escuro), sombra curta e brilho opcional. Nada de cor chapada sem gradiente.
4. **Cabeçalho fixo em duas linhas:** o eyebrow em azul e caixa alta com espaçamento, o título em branco (primeira linha)
   e azul (segunda), com sublinhado azul de 120 x 8 que cresce do centro.
5. **Um protagonista persistente.** O mesmo objeto (a rede, o chip) fica o vídeo todo e muda de estado: nós acendem,
   linhas engrossam, pulsos percorrem as conexões. Não troque de cena a cada frase.
6. **Conceito abstrato vira objeto concreto.** Peso vira um dial na linha, erro vira uma régua que esvazia, "parado" vira
   um cadeado, resposta vira um cartão. Toda frase da narração tem uma conexão visual no mesmo instante.
7. **Foco.** O que não importa agora fica apagado; o que importa ganha brilho (`shadowBlur`), contorno ou círculo.
8. **Câmera que entra e volta.** Zoom suave (escala de 1 a 0,62 conforme a cena) para mostrar um detalhe e voltar.
9. **Pílulas de estado** (TREINO, USO) em 34 px com espaçamento 4, contorno de 3 px na cor do estado, fundo escuro e brilho.
10. **Legenda em caixa escura:** `rgba(6,10,18,.82)`, raio 24, contorno `rgba(0,180,255,.55)` de 2 px, sombra. Palavra falada
    em `#F4F6FA`, a que ainda vai ser falada em 35% de opacidade. Fica em y = 1580 e nada do palco passa de y = 1560.
11. **Rodapé:** marca à esquerda e assinatura do autor à direita, 26 px, `#8A94A6`.
12. **Fechamento com resumo em dois cartões** lado a lado, cada um com a cor do seu estado, durante os últimos 2 s.

## Proibições

- Fonte condensada (Bebas), fonte arredondada (Nunito) e qualquer fonte diferente da Inter.
- Tudo em azul e branco, fundo branco puro, ou o azul usado como cor de objeto.
- Imagem de banco ou gerada em cenas de explicação: tudo é desenhado no canvas.
- Texto saindo de cartão, balão ou caixa; elemento por cima da legenda; peça cortada na borda.
- Quadros parados. Sempre há algo se movendo (pulso, flutuação de 3 a 5 px, brilho).
- Trocar o estilo do personagem no meio do vídeo. O personagem padrão é angular (rosto de queixo reto em facetas).

## Som

- **Narração** na voz clonada do autor, 2,6 palavras por segundo, uma frase por cena.
- **Música:** opcional, eletrônica suave e minimalista, uns 18 a 20 dB abaixo da voz. O exemplo do curso usa só a voz.
- **Efeitos (opcionais):** um tique curto quando um nó acende e um "ding" quando a resposta certa aparece.
- **Proibido:** riser, impacto cinematográfico, música com vocal.

## Prompts dos assets

Estilo 100% código (canvas). Não há imagem gerada. As figuras (rede, gato, cadeado, régua) são funções de desenho que
usam a função de pintura com volume e os arcos e elipses do canvas. O que se gera é só a narração, a partir de um roteiro
de uma frase por linha:

```
Toda rede neural vive dois momentos: o treino e o uso.
No treino, ela erra, compara com a resposta certa e ajusta os pesos.
No uso, os pesos ficam parados e a informação só atravessa a rede, de um lado pro outro.
```

## Componente de referência

Fundo com aurora, pontilhado em onda e vinheta, mais a pintura com volume que todo objeto usa.

```js
const lerp = (a, b, t) => a + (b - a) * t;
function bg(t) {
  x.fillStyle = '#060A12'; x.fillRect(0, 0, W, H);
  const blob = (X, Y, r, col) => {
    const g = x.createRadialGradient(X, Y, 0, X, Y, r);
    g.addColorStop(0, col); g.addColorStop(1, 'rgba(0,0,0,0)'); x.fillStyle = g; x.fillRect(0, 0, W, H);
  };
  blob(250 + 80 * Math.sin(t * .7), 420, 700, 'rgba(0,180,255,.22)');     // aurora azul
  blob(850 + 60 * Math.cos(t * .6), 1450, 650, 'rgba(168,85,247,.16)');   // aurora roxa
  for (let X = 20; X < W; X += 40) for (let Y = 20; Y < H; Y += 40) {      // pontilhado que acende em onda
    const w = .5 + .5 * Math.sin(Math.hypot(X - W / 2, Y - 1000) / 90 - t * 2.2);
    x.fillStyle = `rgba(147,160,180,${.10 + .28 * w * w})`; x.beginPath(); x.arc(X, Y, 2.2, 0, 7); x.fill();
  }
  const v = x.createRadialGradient(W / 2, H / 2, H * .3, W / 2, H / 2, H * .75);
  v.addColorStop(0, 'rgba(0,0,0,0)'); v.addColorStop(1, 'rgba(0,0,0,.45)'); x.fillStyle = v; x.fillRect(0, 0, W, H);
}
// flat com volume: p() desenha o caminho, col é a cor natural do objeto, b é a caixa [x0, y0, x1, y1]
function paint(p, col, b, opt = {}) {
  const [x0, y0, x1, y1] = b;
  if (opt.shadow !== false) { x.save(); x.shadowColor = 'rgba(0,0,0,.28)'; x.shadowBlur = 18; x.shadowOffsetY = 8; p(); x.fillStyle = col; x.fill(); x.restore(); }
  const g = x.createLinearGradient(x0, y0, x1, y1); g.addColorStop(0, shade(col, .14)); g.addColorStop(1, shade(col, -.14));
  p(); x.fillStyle = g; x.fill();
}
```

## De onde vem

- **Skill que produz:** `video-a-jato`, que traz a identidade CPDF como padrão (um `index.html` com `render(t)`
  determinístico, narração com timing por palavra, prévia em prancha e QA quadro a quadro).
- **Aula:** 1, Explainers, estilo 1D.
- **Pedido de exemplo:** "Faz um vídeo a jato de 15 segundos explicando a diferença entre treinar e usar uma rede neural.
  Bolinhas ligadas por linhas: no treino os pesos vão se ajustando, no uso a informação só atravessa a rede de um lado
  pro outro. Fundo escuro, azul #00B4FF de destaque, fonte Inter. Narração na minha voz."