# Apresentação de projeto (v1)

Um vídeo horizontal 16:9 de 15 a 25 s que apresenta um projeto a um patrocinador, à diretoria ou a um edital, em quatro
cenas: o problema, a solução, os números e o convite final. O visual é limpo e institucional: papel off-white, azul-marinho
no texto, um verde de destaque, títulos grandes em sans-serif pesada, cartões brancos com sombra suave e cortinas coloridas
que varrem a tela entre as cenas. Os números que o aluno passa no prompt viram contadores que rolam como um odômetro.

## Quando usar

- Apresentar um projeto, programa, iniciativa social ou proposta para patrocinador, diretoria, edital ou conselho.
- Roteiros com a estrutura problema, solução, números e chamada final.
- Quando há de dois a quatro números que sustentam o pedido (escolas, alunos, meses, valor).
- Material que será visto em reunião, e-mail ou página de captação, em tela grande, com a narração em português claro.

## Quando não usar

- Apresentar um software com telas (use a apresentação de software).
- Conteúdo para Reels ou Shorts: o formato é horizontal.
- Projetos sem número nenhum, ou com números que não podem ser ditos em público.
- Vídeos com mais de quatro blocos ou com muito texto por cena.

## Tokens

Os valores são do projeto fictício do exemplo. Troque o verde (`#12905D`) pela cor da instituição, mantendo o resto.

| Token | Valor | Uso |
| --- | --- | --- |
| Fundo | `#F7F5F0` | papel off-white, todas as cenas |
| Tinta | `#14213D` | títulos, números, texto principal |
| Destaque | `#12905D` | palavra-chave, marca, números pequenos, barra do cartão, cortina |
| Secundária | `#F5B942` | pequenos detalhes (bandeirinha, luz da tela) |
| Cinza | `#CBD3DE` e `#B3BDCB` | escolas que ainda não foram atendidas |
| Texto de apoio | `#4B5A78` | linha de contexto no fecho |
| Cartão | `#FFFFFF`, raio 36, sombra `0 24px 60px rgba(20,33,61,.10)`, barra de 14 px no topo na cor de destaque | números |
| Fonte | Plus Jakarta Sans 500, 700 e 800 | tudo |
| Tamanhos | título da cena 1: 86 px, marca: 92 px, frase da cena 2: 68 px, ano: 150 px, número do cartão: 200 px, fecho: 200 px | peso 800 e espaçamento negativo de -1,5 a -6 px |
| Etiqueta | 28 px, peso 700, caixa alta, espaçamento 6 px, com filete de 56 x 4 | rótulo de cena, no canto superior esquerdo |

```json
{
  "quadro": { "largura": 1920, "altura": 1080, "fps": 30 },
  "cores": {
    "fundo": "#F7F5F0", "tinta": "#14213D", "destaque": "#12905D", "secundaria": "#F5B942",
    "cinza": "#CBD3DE", "cinza2": "#B3BDCB", "apoio": "#4B5A78", "cartao": "#FFFFFF"
  },
  "fonte": { "familia": "Plus Jakarta Sans", "pesos": [500, 700, 800], "titulo": 86, "numero": 200, "fecho": 200 },
  "tempo": {
    "cortinaEntra": 0.35, "cortinaSai": 0.45, "palavraSobe": 0.6, "cartaoSobe": 0.7,
    "contador": [0.8, 0.8, 0.6], "fechoEntra": 0.9, "duracaoTotal": 17.5
  },
  "curvas": { "entrada": "power3.out", "titulo": "expo.out", "cortina": "power3.in / power3.out", "mola": "back.out(1.5 a 2.4)", "respiro": "sine.inOut" },
  "cenas": [
    { "nome": "problema", "de": 0, "ate": 4.5 }, { "nome": "solucao", "de": 4.6, "ate": 9.1 },
    { "nome": "numeros", "de": 9.2, "ate": 14.1 }, { "nome": "fechamento", "de": 14.2, "ate": 17.5 }
  ]
}
```

## Regras

1. **Quatro cenas, nessa ordem:** problema (mostra o que falta), solução (nasce o nome do projeto), números (três cartões) e
   fechamento (a pergunta final e a marca). Cada cena segura uma ideia só.
2. **Cada cena nasce no ritmo da fala.** O texto de cada bloco entra palavra por palavra, no segundo da palavra falada
   (`y` de 36 px a 0, 0,6 s, `power3.out`). A palavra-chave muda para a cor de destaque quando é dita, com um pulso de 5%.
3. **O problema é um grupo de objetos cinza.** Dez ícones de escola em cinza, em grade de cinco colunas, entram com mola
   (`back.out(1,6)`) e 0,15 s de intervalo. Cinza significa "ainda não atendido".
4. **A solução acende o objeto.** Uma escola grande aparece, acende em verde, ganha o laboratório (telas, chip) e os pontos
   da rede pulsam. Duas frases curtas aparecem uma de cada vez, a segunda com um selo de "ok" na cor de destaque.
5. **Os números são cartões.** Três cartões brancos de 500 x 470 px, com barra de destaque no topo, sobem de 80 px em 0,7 s
   e cada um tem um contador que rola como odômetro (uma coluna de dígitos deslocada em `power2.out`). O contador chega ao
   valor exatamente na palavra falada. O ano aparece grande no alto, com a palavra-chave na cor de destaque.
6. **Cortina entre cenas.** Um painel na cor de destaque cruza a tela da esquerda para a direita: entra em 0,35 s com
   `power3.in`, troca a cena escondida por baixo e sai em 0,45 s com `power3.out`.
7. **Marca com selo.** O nome do projeto é escrito em tinta e a sigla fica num bloco verde de cantos arredondados com texto branco.
8. **Fecho com convite.** A frase final ("Vamos juntos?") em 200 px, com a palavra de ação em destaque, a marca e uma linha de
   contexto em 38 px com espaçamento de 3 px. Um brilho verde respira ao fundo.
9. **Fundo vivo, mas calmo.** Duas manchas grandes e suaves se movem devagar durante todo o vídeo (`ease: none`, 17,5 s), e os
   objetos flutuam de 10 a 18 px em `sine.inOut`.
10. **Os números vêm do prompt.** Nenhum dado é inventado pela IA: se o aluno não passou o número, pergunte antes de renderizar.

## Proibições

- Números inventados, estimativas sem fonte ou percentuais que ninguém mencionou.
- Fundo escuro, gradientes fortes, neon ou brilho de tecnologia: o tom é institucional.
- Mais de três números por cena e texto abaixo de 28 px.
- Cortinas diferentes na mesma peça (use sempre a mesma, na mesma cor).
- Imagem de banco, foto de pessoas sem autorização ou logotipo de terceiros sem permissão.
- Mais de quatro cenas em vídeos de até 25 s.

## Som

- **Narração** na voz clonada, tom firme e acolhedor, quatro blocos de frase, com um respiro de 0,4 s entre eles.
- **Música:** opcional, instrumental inspiradora (piano e cordas leves), uns 20 dB abaixo da voz, crescendo suave no fecho.
- **Efeitos opcionais:** um "tick" curto em cada contador chegando ao valor e um som suave de cortina nas trocas.
- **Proibido:** música épica de trailer, riser, voz cantada.

## Prompts dos assets

Estilo 100% código (HTML, CSS, SVG e GSAP). Nenhuma imagem gerada: a escola, o laboratório e os ícones são desenhados em SVG
reutilizável (um `<symbol>` de escola usado dez vezes). A fonte entra como arquivo local, para o render não depender de internet.

## Componente de referência

O contador de odômetro e a cortina entre cenas, em GSAP.

```js
const E = 'power3.out', X = 'expo.out';
const tl = gsap.timeline({ paused: true });

// contador: uma coluna com os números de 0 até o valor, deslocada em passos de 200 px (a altura da linha)
function counter(id, to, t, dur) {
  const el = document.getElementById(id);
  let h = ''; for (let k = 0; k <= to; k++) h += '<b>' + k + '</b>';      // cada <b> tem height: 1em e line-height: 1
  el.innerHTML = h;
  tl.fromTo(el, { y: 0 }, { y: -to * 200, duration: dur, ease: 'power2.out' }, t);
}
counter('n1', 10, 10.6, 0.8);   // 10 escolas, chega junto com a fala
counter('n2', 3, 11.5, 0.8);    // 3 mil alunos
counter('n3', 12, 12.5, 0.6);   // 12 meses

// cartão sobe, depois flutua
[['#c1', 10.4], ['#c2', 11.3], ['#c3', 12.3]].forEach(([c, t]) => {
  tl.fromTo(c, { opacity: 0, y: 80 }, { opacity: 1, y: 0, duration: 0.7, ease: X }, t);
  tl.fromTo(c, { y: 0 }, { y: -10, duration: 1.8, ease: 'sine.inOut' }, t + 0.7);
});

// cortina na cor de destaque: entra, troca a cena por baixo, sai
tl.fromTo('#wipe', { x: -1920 }, { x: 0, duration: 0.35, ease: 'power3.in' }, 8.85);
tl.set('#s2', { opacity: 0 }, 9.2); tl.set('#s3', { opacity: 1 }, 9.2);
tl.to('#wipe', { x: 1920, duration: 0.45, ease: 'power3.out' }, 9.2);
window.__timelines['main'] = tl;
```

## De onde vem

- **Skill que produz:** `hyperframes` (vídeo em HTML com linha do tempo do GSAP), horizontal 16:9, 1920 x 1080.
- **Aula:** 3, Apresentação de projeto.
- **Pedido de exemplo:** "Quero apresentar um projeto novo para um patrocinador: o Escola com IA, que vai montar laboratórios de
  inteligência artificial em 10 escolas públicas do DF em 2027. Faz um vídeo de 20 segundos, horizontal, mostrando o problema, a
  solução, os números (10 escolas, 3 mil alunos, 12 meses) e um fechamento com 'Vamos juntos?'. Visual limpo, narração na minha voz."