# Bonecos de palito (v1)

Um explainer vertical de 15 a 20 s que parece um desenho de caderno feito na hora: fundo branco, traço preto grosso e
tremido, bonecos de palito que se desenham na sua frente, balões de fala em letra manuscrita e uma lista de tarefas
sendo riscada. Tudo é uma frase por cena, com a legenda numa caixa branca com contorno preto embaixo. O humor está
nos bonecos (um deles, o agente, tem cabeça quadrada e antena), e a explicação cabe em uma história de três passos.

## Quando usar

- Explicar um conceito com uma historinha de duas ou três personagens: "o que é um agente de IA", "o que é um prompt".
- Temas em que um pedido vira etapas (pedir, quebrar em tarefas, executar), porque a lista riscada mostra isso sozinha.
- Vídeos de 15 a 30 s para Reels e Shorts, com narração na voz do autor e legenda.
- Quando a pessoa quer algo simpático, simples e rápido de produzir (sai em poucos minutos, sem imagem gerada).

## Quando não usar

- Assuntos que pedem dados, gráficos ou números em destaque (use o canvas geométrico CPDF).
- Marca que precisa parecer sofisticada ou tecnológica: o traço de caderno é informal por natureza.
- Cenas com mais de três personagens ou com muito texto na tela.
- Vídeos longos (mais de 45 s): o estilo cansa sem variação de cor.

## Tokens

| Token | Valor | Uso |
| --- | --- | --- |
| Fundo | `#FFFFFF` | o quadro inteiro, sem textura e sem gradiente |
| Traço | `#111111` | bonecos, contornos, texto, chão, riscos |
| Cinza do feito | `#999999` | item da lista já riscado e seu ícone |
| Cinza da legenda | `#BBBBBB` | palavra da legenda que ainda não foi falada |
| Cinza do pontilhado | `#BBBBBB` | linha pontilhada embaixo de cada item da lista |
| Cinza do rodapé | `#888888` | marca e assinatura, 34 px |
| Fonte de título e legenda | Inter 800 | título (64 e 104 px) e legenda (62 px) |
| Fonte manuscrita | Caveat 700 | balão de fala (70 px), lista (62 px), frase final (90 px), o "3" gigante (400 px) |
| Espessura do traço | 8 px (balão e papel 7 px, chão 10 px, antena 7 px) | `lineCap` e `lineJoin` redondos |
| Tremido | ±1,5 px por ponto, muda a cada 0,12 s | dá a cara de desenho à mão |
| Escala do boneco | 1,35, pés em y = 1540 | os dois bonecos têm a mesma altura |

```json
{
  "quadro": { "largura": 1080, "altura": 1920, "fps": 30 },
  "cores": { "fundo": "#FFFFFF", "traco": "#111111", "feito": "#999999", "naoFalado": "#BBBBBB", "rodape": "#888888" },
  "fontes": {
    "titulo": { "familia": "Inter", "peso": 800, "px": [64, 104] },
    "legenda": { "familia": "Inter", "peso": 800, "px": 62 },
    "manuscrita": { "familia": "Caveat", "peso": 700, "px": [62, 70, 90] }
  },
  "tempo": {
    "tremidoPasso": 0.12, "chaoDesenha": 0.9, "bonecoDesenha": 1.4, "balaoEntra": 0.5,
    "risco": 0.6, "respiroFinal": 1.5
  },
  "curvas": { "entrada": "easeOutCubic", "mola": "easeOutBack (c1 = 1,70158)", "pose": "smoothstep" },
  "zonas1080x1920": {
    "titulo": { "y": [140, 340] }, "balao": { "x": 70, "y": 560 }, "lista": { "y": [345, 720] },
    "chao": { "y": 1540 }, "legenda": { "x": 70, "y": 1600, "largura": 940, "altura": 200 }, "rodape": { "y": 1860 }
  }
}
```

## Regras

1. **Só duas cores.** Preto sobre branco, mais os cinzas para o que já passou. Nenhuma cor de destaque.
2. **Tudo se desenha.** Cabeça, pescoço, braços e pernas entram nessa ordem, cada parte avançando pelo comprimento
   do traço (a função de traço recebe uma fração de 0 a 1). O chão também se desenha, da esquerda para a direita, em 0,9 s.
3. **Tremido determinístico.** Cada ponto recebe um deslocamento de ±1,5 px calculado por uma função de hash que
   muda a cada 0,12 s. Nunca use `Math.random`: o quadro tem que depender só do tempo `t`.
4. **Dois bonecos, dois papéis.** A pessoa tem cabeça redonda (raio 70). O agente tem cabeça de retângulo arredondado
   (150 x 136, raio 32) e uma antena com bolinha que pisca. Sempre o mesmo par de formas, para o aluno reconhecer.
5. **Os bonecos respiram.** Um balanço de 3 px no corpo e uma piscada a cada 3,3 s. O boneco nunca fica congelado.
6. **A fala vira balão.** O texto do pedido é digitado letra por letra dentro de um balão branco com contorno preto e
   cauda apontando para quem fala. O texto quebra linha pela largura medida (`measureText`), nunca por contagem de letras.
7. **O pedido vira lista.** O balão se parte em três pedaços que voam até uma folha de papel com três linhas
   numeradas. Cada item aparece digitado, ganha um ícone desenhado em traço (avião, hotel, mapa) e depois é riscado
   com um zigue-zague, ficando cinza.
8. **A legenda é uma caixa.** Caixa branca de 940 x 200, raio 36, contorno preto de 5 px, em y = 1600. Até duas linhas,
   página trocada quando a frase pede. A palavra falada fica preta, as outras `#BBBBBB`, e um sublinho de 5 px marca
   a palavra atual.
9. **Nada passa de y = 1540** (é onde começa a legenda). O chão fica nessa altura.
10. **Um fecho curto.** A última frase vira texto manuscrito grande no centro, com pop de mola.
11. **Rodapé fixo:** a marca à esquerda e a assinatura do autor à direita, em 34 px e `#888888`.

## Proibições

- Qualquer cor de destaque, gradiente, sombra, brilho ou textura de papel.
- Fonte arredondada de rede social (Nunito) ou fonte condensada de impacto.
- Imagem gerada, emoji e ícone colorido. Os ícones são traços de 5 a 6 px na cor do texto.
- Bonecos sem tremido (ficam com cara de vetor frio) ou com tremido aleatório (a cada quadro, vira ruído).
- Texto saindo do balão ou da caixa de legenda.
- Mais de uma ação importante ao mesmo tempo.

## Som

- **Narração** na voz clonada do autor, ritmo de 2,6 palavras por segundo, uma frase por cena.
- **Música e efeitos:** o exemplo do curso não usa nenhum. Se precisar, só um tema instrumental bem baixo, uns 20 dB abaixo da voz.
- **Proibido:** música cantada, riser, impacto cinematográfico.

## Prompts dos assets

Este estilo é 100% código (canvas). Não há imagem gerada, e é isso que o deixa rápido. Só a narração é gerada, a partir
de um roteiro de uma frase por linha:

```
Sabe o que é um agente de inteligência artificial?
Você chega e pede: organiza minha viagem.
O agente pensa e quebra esse pedido em três tarefas.
Primeiro, comprar a passagem. Depois, reservar o hotel. E por último, montar o roteiro.
Aí ele resolve cada uma e vai riscando da lista, sozinho.
Você pede, o agente planeja e faz.
```

## Componente de referência

Traço que avança por fração, com o tremido por hash (`NB` muda a cada 0,12 s). É a base de tudo: boneco, chão, risco e sublinhado.

```js
const cl = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
const lerp = (a, b, t) => a + (b - a) * t;
const hash = a => { const s = Math.sin(a * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
let NB = 0;                                            // NB = Math.floor(t / 0.12), definido no render(t)
const J = (k, i) => (hash(k * 91.3 + i * 17.7 + NB * 3.7) - 0.5) * 3;   // tremido de ±1,5 px
const jp = (pts, k) => pts.map((p, i) => [p[0] + J(k, i * 2), p[1] + J(k, i * 2 + 1)]);

function strokeP(pts, f, k, lw = 8, col = '#111', close = false) {
  if (f <= 0) return;
  pts = jp(pts, k);
  const L = []; let tot = 0;
  for (let i = 1; i < pts.length; i++) { const d = Math.hypot(pts[i][0] - pts[i-1][0], pts[i][1] - pts[i-1][1]); L.push(d); tot += d; }
  let rem = tot * cl(f);
  x.strokeStyle = col; x.lineWidth = lw; x.lineCap = 'round'; x.lineJoin = 'round';
  x.beginPath(); x.moveTo(pts[0][0], pts[0][1]);
  for (let i = 1; i < pts.length; i++) {
    if (rem >= L[i-1]) { x.lineTo(pts[i][0], pts[i][1]); rem -= L[i-1]; }
    else { const u = rem / L[i-1]; x.lineTo(lerp(pts[i-1][0], pts[i][0], u), lerp(pts[i-1][1], pts[i][1], u)); break; }
  }
  x.stroke();
}
// o chão: strokeP(pontosDoChao, easeOutCubic(t / 0.9), 77, 10)
// a cabeça redonda: strokeP(pontosDoCirculo(cx, cy, 70), seg(0, 0.3), id + 1)
```

## De onde vem

- **Skill que produz:** `video-a-jato` (explainer em canvas, narrado na voz clonada).
- **Aula:** 1, Explainers, estilo 1B.
- **Pedido de exemplo:** "Usa a skill video-a-jato e faz um explainer de 15 segundos com bonecos de palito, fundo branco e
  traço preto, explicando o que é um agente de IA. Um boneco pede 'organiza minha viagem', o agente (outro boneco com uma
  antena de robô) quebra o pedido em três tarefas e vai riscando cada uma. Narração na minha voz e legenda embaixo."