# Explainer desenhado a lápis, o "homem palito" (v3)

Vídeo vertical 9:16 de 90 s a 2 min em que um estudo difícil de IA é explicado com UMA metáfora boba,
desenhada a lápis em papel creme na frente de quem assiste. Os personagens são homens palito, cada um
com uma marca que identifica. Traço preto com tremido de mão, uma caneta azul de realce, régua de
capítulos embaixo, legenda de máquina de escrever letra por letra e o Danilo em tela cheia só duas
vezes, curtinho. Tudo é desenhado por código (SVG + Rough.js + GSAP, renderizado no HyperFrames): não
existe nenhum PNG desenhado à mão. Os PNG deste board são as peças da biblioteca recortadas.

## Quando usar

- Um estudo, relatório ou artigo de IA com uma ideia difícil, explicado com UMA metáfora que volta o
  vídeo inteiro (o robô que recebe a ordem de fazer clipes, o puxa-saco que concorda com o chefe).
- Uma história com personagem, ação e consequência. Abre direto: "Imagina que você pede pra uma IA...".
- Um número que assusta, com fonte primária, revelado como evento.
- Vídeos de 90 s a 2 min com a voz clonada do Danilo e o CTA de comentário.

## Quando não usar

- Conceito de IA de nível médio sem estudo por trás: use os reels explicativos (`reels-explicativos`).
- Mito com lugar físico (água, data center, chip): use o explainer 3D (`video-explainer-3d`).
- Demonstração de produto ou de tela, tutorial de interface.
- Notícia que precisa sair em minutos: use o vídeo a jato (`video-a-jato`).
- Vídeo em que o Danilo fala mais de 20% do tempo.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| papel | `#ECE9E1` + `assets/papel.png` | fundo, com fibra, manchas de tom baixas e vinheta leve. Parado |
| grafite | `#1A1A1A` | todo traço, texto da legenda e título. Preto cheio, sem grão |
| lápis | `#55555C` | traço secundário, nome do capítulo na régua |
| cinza | `#8F8A80` | nuvens, rótulo "PASSO 1" |
| cinza claro | `#CFCABF` | bilhete, furinhos do caderno |
| azul | `#1D4ED8` | o ÚNICO realce: sublinhados, linha do gráfico, números grandes, carimbos, joinha, o elemento central da metáfora |
| azul claro | `#8FA6EC` | hachura da bolha do usuário e fundos azuis leves |
| laranja | `#E8590C` | segunda cor, só para o lado ruim, só quando o tema pedir |
| marcador | Permanent Marker 400 | título do vídeo e números grandes, inclinados -3 a -4 graus |
| máquina | Special Elite 400 | legenda (50 px), título de bloco (60 px), carimbo, régua (25 px) |
| mão | Caveat 700 | bolhas, anotações, bilhetes, rótulos |
| traço | chão 11, contorno 4,6, grama 3,6, detalhe 2,5 a 3, marcador 9 | o chão é a linha mais pesada |
| boil | 3 versões de cada traço, deslocadas 1,3 px, 10 trocas por segundo | o desenho parado continua vivo |
| desenhar | 0,5 a 1 s por peça | personagem, seta, gráfico |
| pop | 0,38 s, `back.out(2.2)`, de escala 0,35 | bolha, botão, joinha, brilho |
| carimbar | 0,2 s, `power3.in`, de escala 1,8 | carimbo |
| panorâmica (em teste) | 0,6 s, `power3.inOut`, desfoque até 30 px, parallax do céu 280 px | troca entre cenas de desenho |

```json
{
  "cor": {
    "papel": "#ECE9E1", "grafite": "#1A1A1A", "lapis": "#55555C", "cinza": "#8F8A80",
    "cinzaClaro": "#CFCABF", "azul": "#1D4ED8", "azulClaro": "#8FA6EC", "laranja": "#E8590C"
  },
  "fonte": {
    "marcador": { "familia": "Permanent Marker", "peso": 400, "arquivo": "fontes/PermanentMarker-Regular.ttf", "inclinar": -3 },
    "maquina":  { "familia": "Special Elite", "peso": 400, "arquivo": "fontes/SpecialElite-Regular.ttf", "legenda_px": 50, "titulo_bloco_px": 60 },
    "mao":      { "familia": "Caveat", "peso": 700, "arquivo": "fontes/Caveat-var.ttf" }
  },
  "traco": { "fino": 2.8, "normal": 4.6, "grosso": 7, "marcador": 9, "chao": 11, "boil_px": 1.3, "boil_hz": 10 },
  "tempo": {
    "desenhar_s": [0.5, 1.0], "pop_s": 0.38, "carimbar_s": 0.2, "sumir_bloco_s": 0.3,
    "danilo_tela_cheia_s": [3, 4], "danilo_vezes": 2,
    "panoramica": { "dur_s": 0.6, "ease": "power3.inOut", "desfoque_px": 30, "parallax_ceu_px": 280, "titulo_depois_de_parar_s": 0.55 }
  },
  "curva": { "pop": "back.out(2.2)", "carimbar": "power3.in", "mover": "power2.inOut", "desenhar": "sine.inOut" },
  "zonas_1080x1920": {
    "margem_x": 64, "titulo_bloco_y": 450, "palco_y": [500, 1110], "chao_y": 1110,
    "legenda": { "y": 1168, "x": [160, 920], "largura": 760, "linhas_max": 2 },
    "regua_y": 1400, "ui_instagram_cobre_abaixo_de_y": 1480, "trilho_botoes_x": [945, 1045]
  },
  "proporcao": { "desenho": 0.8, "danilo": 0.2 }
}
```

## Regras

1. **Uma metáfora só, do começo ao fim.** Ela aparece no título e sustenta cada bloco até o fecho.
   Personagem com ação e consequência, nunca símbolo solto.
2. **Papel off-white e UM realce azul de caneta (`#1D4ED8`).** Nunca roxo. O azul marca só o que
   importa. O laranja entra só para o lado ruim, e só quando o tema pedir.
3. **Homem palito com uma marca.** Danilo (cabelo, barba, camiseta preta), chefe (chapéu-coco e
   gravata), cliente (cabelo comprido e saia), robô (a IA: cabeça quadrada, antena e olhos azuis).
   Personagem novo ganha UMA marca própria (o robô do vídeo do clipe tem um clipe na antena).
4. **Desenho grande, palco cheio.** Personagem principal com 480 a 600 px de altura (escala 1,5 a
   1,8); a faixa entre o título de bloco e o chão (y 500 a 1110) fica ocupada. O miolo nunca fica
   vazio por mais de 1 s.
5. **Traço preto cheio, com pressão e boil, nunca desligar.** Cada traço começa fino, encorpa e
   afina; preenchimento é sempre hachura à mão (chapado só em pontinho, como olho). Grão de grafite só
   na régua de capítulos.
6. **Tudo se desenha na frente de quem assiste.** Personagem, seta e gráfico se desenham como lápis;
   bolha, joinha e carimbo entram com pop. Quadro quase fixo: o cenário fica parado e quem se mexe são
   os personagens e os traços. Zoom sutil só quando um detalhe pede.
7. **Cada bloco tem título pequeno no canto, sublinhado em azul**, e a régua de capítulos embaixo
   mostra o nome do bloco atual.
8. **Legenda de máquina de escrever, letra por letra, sincronizada com a voz**, centralizada embaixo
   do chão, 760 px de largura, até 2 linhas. **Sem som de tecla.**
9. **O título do vídeo é falado e escrito ao mesmo tempo**, palavra por palavra igual.
10. **Quando o vídeo conta uma história, abre direto ("imagina que...") e devagar.** O nome do
    conceito e o autor do estudo só aparecem na virada, depois da história contada.
11. **80% desenho, 20% Danilo.** Ele aparece em tela cheia só duas vezes, de 3 a 4 s cada: logo
    depois do gancho (perto dos 10 s) e por volta da metade. **Corte SECO** na entrada e na saída.
    Na tela dele a legenda continua igual, numa tira de papel creme na mesma altura.
12. **CTA obrigatório dentro da animação**, falado como continuação do assunto ("deixa um comentário
    que eu te mando..."), com o desenho se adaptando à fala. **O Danilo não aparece no CTA.**
13. **A animação mostra, a legenda escreve.** Pouco texto no desenho (rótulos, números, falas de
    personagem), nunca a frase narrada.
14. **Número só com fonte primária**, e o estudo é citado pelo nome na virada ou no fecho.
15. **Troca de bloco:** dentro do mesmo assunto a cena anterior sobe e some (0,3 s) e a nova se
    desenha no papel limpo. A panorâmica horizontal de 0,6 s entre cenas de desenho está **em teste**
    (receita em "Componente de referência").
16. **Render final no pod de CPU de 64 vCPU.** Na VPS só prévia de trecho de até 30 s e quadros soltos.

## Proibições

- Roxo, gradiente, sombra, brilho, 3D, cor chapada em área grande.
- Mais de uma cor de realce (o laranja só existe como "lado ruim").
- Som de máquina de escrever na legenda.
- O Danilo no CTA, ou em tela cheia mais de duas vezes, ou com transição de slide (o corte é seco).
- Abrir uma história já dizendo o nome do conceito ou do autor.
- Título no alto com papel vazio embaixo; cena parada mais de 4 s.
- Texto da narração escrito no desenho.
- Informação abaixo de y 1480 (a interface do Instagram cobre) ou colada na borda.
- Ícone ou logo de marca (o chat é genérico).
- Fonte fora das três.
- Usar `gsap`, `Math.random` ou `rough` direto na cena (quebra o render, que pula para qualquer quadro).
- Na escrita da tela: travessão no meio da frase, "não é sobre X, é sobre Y", "ouro", "muda o jogo",
  "mora" no sentido de ficar, singular nu.

## Som

- **Música:** instrumental leve, entre bonitinha e misteriosa. **Padrão: trilha A** (a publicada no clipe de papel, 06/10/2026); a B fica como alternativa. Trilha A: piano de feltro, pizzicato e
  marimba, ~92 BPM, tom menor suave. Trilha B (tema mais sério): piano grave e espaçado, cordas
  sustentadas, celesta, ~80 BPM. Sem bateria, sem vocal. Cama a volume 0,05 com ducking pela narração
  (`compor_final.py --trilha musica.mp3 --vol-trilha 0.05`); mix final em -20 LUFS.
- **Efeitos:** o vídeo aprovado não tem efeito nenhum, só voz e trilha. Se for usar, é teste: pop
  suave baixo quando bolha ou joinha entra, carimbo quando o carimbo bate, whoosh bem baixo na
  panorâmica. Nunca em cada traço.
- **Proibido:** som de máquina de escrever, música com vocal, épica ou de terror, bateria, efeito mais
  alto que a voz.
- Arquivos: `sons/trilha-a-piano-pizzicato-92bpm.mp3`, `sons/trilha-b-misterio-80bpm.mp3`,
  `sons/efeito-pop-suave.mp3`, `sons/efeito-carimbo.mp3`, `sons/efeito-whoosh-curto.mp3`.

## Prompts dos assets

Os assets visuais saem da biblioteca `desenho.js`, por código. Os "prompts" são as chamadas prontas:

```js
// personagens (pés em x, y; escala 1,5 a 1,8 no principal)
c.boneco(300, 1110, { variante: 'danilo', rosto: 'sorriso', escala: 1.6 });
c.boneco(800, 1110, { variante: 'robo', rosto: 'neutro', rostos: ['surpreso', 'sorriso'], escala: 1.6 });
c.boneco(270, 1110, { variante: 'chefe' });   // 'cliente', 'neutro' também
// marca própria do personagem do tema: desenhe por cima com as primitivas
const rb = c.boneco(820, 1110, { variante: 'robo' });
rb.caminho(XD.clipePath(0, -357, 0.42), { esp: 3, cor: XD.COR.azul });   // clipe na antena (lib/clipe.js)

// peças
c.tituloBloco('A fábrica', { sobre: 'passo 1' });
c.titulo('O apocalipse do clipe de papel', { y: 560 });
c.bolha(450, 500, { w: 250, h: 110, texto: 'Oi, IA!', tam: 52, rabo: [-110, 120] });
c.bolha(820, 470, { w: 280, h: 110, texto: 'Pode falar!', rabo: [-70, 115], preench: XD.COR.azulClaro });
c.carimbo(545, 790, 'nota alta', { tam: 66, rot: -8 });          // .carimbar(t)
c.joinha(560, 1000, { escala: 1.15, preench: true });            // .pop(t)
c.numero('+40%', { x: 540, y: 700, tam: 150 });
c.chat(220, 560, 640, 520, [{ lado: 'dir', texto: 'Meu plano é bom?' }, { lado: 'esq', texto: 'É genial!' }]);
c.medidor(540, 900, { r: 220, esq: 'discorda', dir: 'concorda', valor: 0.2 });   // .apontar(t, 0.9)
c.grafico(140, 560, 800, 420, [0.1, 0.2, 0.15, 0.5, 0.9], { rotuloX0: '2019', rotuloX1: '2026' });
c.barras(140, 560, 800, 400, [{ valor: 1, rotulo: 'antes' }, { valor: 2.4, rotulo: 'depois', cor: XD.COR.azul }]);
c.checklist(140, 560, ['Divide o dia', 'Multiplica']);           // item.marcar(t), item.riscar(t)
c.brilho(560, 700, { r: 26 }); c.lupa(540, 800); c.seta(200, 900, 600, 760);
c.rodear(540, 800, 380, 170); c.sublinhado(200, 900, 300); c.xis(540, 800);
```

Briefing pronto para o subagente de UMA cena (cole e troque os `<>`):

```
Você vai escrever UMA cena do explainer desenhado do Danilo Gato: o arquivo <pasta>/cenas/NN-<id>.js.
Não mexa em nenhum outro arquivo.
1. Leia ~/.claude/skills/explainer-desenhado/references/biblioteca-pecas.md (a API) e
   references/estilo-visual.md (paleta, zonas da tela, linguagem). Exemplos reais em
   ~/.claude/skills/explainer-desenhado/exemplos/puxa-saco/cenas/.
2. A sua cena está em <pasta>/briefing_cenas.md, seção "Cena `<id>`". Metáfora: <metáfora e personagens>.
3. Desenho GRANDE (personagem principal com escala 1,5 a 1,8), palco entre y 500 e 1110 cheio.
   Sincronize tudo pela fala com c.palavra('...'). A animação mostra, a legenda escreve.
4. Texto na tela em português do Brasil, sem travessão no meio da frase.
5. Confira com bash <pasta>/scripts/previa.sh <pasta> quadros <tempos> e leia a folha. Máximo 3 rodadas.
```

Prompts das trilhas (ElevenLabs `music_v1`, `force_instrumental: true`, foram os usados no vídeo aprovado):

```
A: Instrumental background music for a hand-drawn explainer video about the risks of artificial intelligence. Gentle felt piano melody with light pizzicato strings and soft marimba accents, medium tempo around 92 BPM, soft minor key. Curious and slightly mysterious, thoughtful, but still warm and light, never childish, never dark or scary. No drums, no heavy percussion, no vocals. Steady, unobtrusive and consistent energy so it sits quietly under a spoken narration. Evolves gently over three minutes with small variations, no sudden changes, ends with a soft resolution.

B: Instrumental background music for a science documentary with a touch of mystery, about the hidden risks of artificial intelligence. Low, sparse piano notes in a minor key, sustained low string pad underneath, occasional delicate pizzicato and celesta accents. Around 80 BPM. Mood: curious suspense, intriguing and slightly dark, like uncovering a secret, but still light and elegant. Not a horror film, no aggressive tension, no stingers, no sound effects. No drums, no percussion, no vocals. Steady and unobtrusive so it sits quietly under a spoken narration, evolving gently over three minutes with small variations and no sudden changes, ending with a soft unresolved fade.
```

## Componente de referência

Uma cena completa (arquivo `cenas/NN-<id>.js`). Tempos em segundos do vídeo inteiro, sincronizados
pela fala:

```js
XD.cena('chefe', function (c) {
  c.chao().mostrar(c.bloco.v0);                                   // chão pronto quando a cena aparece
  c.tituloBloco('O puxa-saco').desenhar(c.t0 + 0.05, 0.6);        // título de bloco, sublinhado azul
  const tChefe = c.palavra('chefe,');
  const chefe = c.boneco(250, 1110, { variante: 'chefe', rosto: 'sorriso', pose: 'aponta', escala: 1.5 });
  chefe.desenhar(tChefe - 0.35, 0.7);                              // se desenha como lápis
  c.bolha(290, 560, { w: 420, h: 135, texto: 'Vamos vender gelo no Polo Norte!', tam: 42, rabo: [-30, 85] })
    .pop(tChefe + 0.35);                                           // bolha com pop
  const tPs = c.palavra('puxa-saco');
  const ps = c.boneco(800, 1110, { variante: 'neutro', rosto: 'bajulador', escala: 1.5 });
  ps.desenhar(tPs - 0.3, 0.6);
  ps.posar(tPs + 0.35, 'comemora', 0.3);
  c.bolha(800, 560, { w: 300, h: 115, texto: 'Genial, chefe!', tam: 50, rabo: [-20, 95] }).pop(tPs + 0.45);
  [[630, 760], [985, 790], [640, 950]].forEach(([x, y], i) => c.brilho(x, y, { r: 22 + i * 3 }).pop(tPs + 0.6 + i * 0.12));
  ps.balancar(tPs + 0.65, { n: 3, ang: 5, dy: 10, per: 0.3 });   // vivo depois de desenhado
});
```

Panorâmica entre cenas (em teste), do `main.js` do vídeo do clipe de papel: a cena velha sai pela
esquerda e a nova entra pela direita já montada; o título de bloco da cena nova se escreve em
`c.t0 + 0.55`, depois que a câmera para.

```js
const PAN = { dur: 0.6, antes: 0.05, dx: 1080, borrao: 30, ease: 'power3.inOut' };
// entra: translate(1080) -> translate(0); sai: translate(0) -> translate(-1080), os dois em PAN.dur
tl.fromTo(saida, { attr: { transform: `translate(${de} 0)` } },
  { attr: { transform: `translate(${ate} 0)` }, duration: PAN.dur, ease: PAN.ease, immediateRender: false }, t0);
// desfoque só na horizontal: sobe até 30 px na metade e volta a 0
tl.fromTo(blur, { attr: { stdDeviation: '0 0' } }, { attr: { stdDeviation: '30 0' }, duration: 0.26, ease: 'power2.in', immediateRender: false }, t0 + 0.04);
tl.fromTo(blur, { attr: { stdDeviation: '30 0' } }, { attr: { stdDeviation: '0 0' }, duration: 0.26, ease: 'power2.out', immediateRender: false }, t0 + 0.3);
// o chão das duas cenas some e um chão fixo assume no mesmo lugar; o céu corre 280 px (parallax);
// o nome do capítulo velho sai pela esquerda da régua e o novo chega pela direita
```