# Apresentação de software (v1)

Um vídeo horizontal 16:9 de 15 a 25 s que apresenta um software como numa demonstração gravada: uma janela de navegador
flutuando sobre um fundo escuro com brilho roxo, telas inventadas com cara de SaaS moderno (painel, reunião ao vivo,
lista de tarefas), um cursor animado que clica nos botões (com um anel que cresce e some) e uma câmera que aproxima
suavemente da parte importante. A narração é curta, e o vídeo fecha com a marca e uma frase de uma linha.

## Quando usar

- Apresentar um software, app ou ferramenta (próprio ou do cliente) em 15 a 25 s: o que ele faz, em três telas.
- Páginas de vendas, apresentação para investidor, pitch, post de lançamento e demonstração em palestra.
- Quando não existe print ou gravação de tela boa: as telas são inventadas do zero, em HTML e CSS.
- Com o app de verdade: passe o print ou o repositório, e as telas do vídeo copiam a interface real.

## Quando não usar

- Tutoriais passo a passo longos, em que cada clique precisa ser fiel ao produto (use gravação de tela real).
- Vídeo vertical para Reels: este estilo é 16:9 e a janela de navegador fica pequena no celular.
- Quando o produto não tem tela (serviço, consultoria, evento): use a apresentação de projeto.
- Mais de três telas ou mais de uma ideia por tela.

## Tokens

Os valores abaixo são da marca fictícia do exemplo (o software Pautei). Troque o roxo e o fundo pela cor da marca real.

| Token | Valor | Uso |
| --- | --- | --- |
| Fundo do vídeo | gradiente 135° de `#0C0A24` a `#1A1252` (55%) a `#241470` | atrás da janela |
| Brilho 1 | `rgba(109,93,252,.55)`, 1100 x 800, blur 60 px, canto superior esquerdo | deriva lenta durante o vídeo |
| Brilho 2 | `rgba(176,85,247,.42)`, 1000 x 800, blur 60 px, canto inferior direito | deriva lenta, em sentido oposto |
| Janela | 1640 x 900 em (140, 90), raio 20, fundo `#F6F7FB` | o "navegador" |
| Barra da janela | 56 px, `#ECEEF5`, três bolinhas (`#FF5F57`, `#FEBC2E`, `#28C840`) e URL em pílula | topo da janela |
| Cor da marca | `#6D5DFC` (botão), `#5B4BF0` (texto ativo), `#EEEBFF` (fundo ativo) | botões, item de menu, realces |
| Texto | `#1F2433` (principal) e `#5B6275` (apoio) | títulos e legendas das telas |
| Cartão | `#FFFFFF`, borda `#E6E8F1`, raio 18, sombra suave | KPIs, listas, painéis |
| Sucesso | `#047857` sobre `#D1FAE5`, ponto `#12B981` | "Agora", "Tarefa detectada" |
| Alerta e gravação | `#EF4444`, pílula `#FEE2E2` com texto `#B91C1C` | gravando, encerrar |
| Fonte | Geist (variável 100 a 900) | títulos 46 px peso 750, KPI 64 px, linha 28 px, apoio 21 a 24 px |

```json
{
  "quadro": { "largura": 1920, "altura": 1080, "fps": 30 },
  "cores": {
    "fundo": ["#0C0A24", "#1A1252", "#241470"], "marca": "#6D5DFC", "marcaTexto": "#5B4BF0", "marcaClara": "#EEEBFF",
    "janela": "#F6F7FB", "texto": "#1F2433", "apoio": "#5B6275", "cartao": "#FFFFFF", "borda": "#E6E8F1",
    "sucesso": "#047857", "alerta": "#EF4444"
  },
  "fonte": { "familia": "Geist", "pesos": [450, 520, 650, 720, 750], "titulo": 46, "kpi": 64, "linha": 28 },
  "tempo": { "janelaEntra": 0.7, "entradaTela": 0.5, "stagger": 0.15, "transicaoCena": 0.4, "cliqueAnel": 0.6, "cameraMove": [0.5, 1.0], "palavraTranscricao": 0.085 },
  "curvas": {
    "entrada": "power3.out", "cursorX": "power2.inOut", "cursorY": "sine.inOut", "camera": "power2.inOut",
    "clique": "cursor encolhe a 0,8 em 0,1 s e volta com back.out(2,2)", "tag": "back.out(1,8)"
  },
  "camera": { "padrao": 1, "zoomLista": 1.12, "zoomTranscricao": 1.4, "zoomTabela": 1.35 }
}
```

## Regras

1. **Janela flutuante.** A interface vive numa janela de navegador com cantos arredondados e sombra funda, centralizada,
   sobre fundo escuro com brilhos que se mexem devagar. A janela entra de baixo (40 px) com escala 0,97 e sai com blur.
2. **Telas inventadas, mas críveis.** Menu lateral com ícones de traço, cabeçalho com saudação, três cartões de número,
   lista de itens com avatar e etiqueta. Nomes, horários e prazos concretos (Ana, Bruno, "Sexta"), nunca "Lorem ipsum".
3. **Três telas e um fecho.** Cada tela mostra uma etapa do produto (painel, ação ao vivo, resultado). A troca é um
   fade com blur de 8 a 10 px em 0,35 a 0,4 s.
4. **O cursor conta a história.** Uma seta preta com contorno branco e sombra, movida por duas curvas independentes
   (X em `power2.inOut`, Y em `sine.inOut`) para fazer arco. Ele clica antes de cada mudança.
5. **Todo clique tem três sinais:** o cursor encolhe a 80% e volta com mola, o botão afunda a 96% e volta, e um anel de 64 px
   (borda de 4 px na cor da marca) cresce de 0,3 a 2,8 vezes e some em 0,6 s.
6. **Câmera que aproxima.** A câmera é um único elemento com `transform` (origem no canto superior esquerdo). Aproxime 1,12
   a 1,4 vezes na parte que a narração cita, segure ou derive com `sine.inOut`, e volte a 1 antes do próximo clique.
7. **Dados que chegam ao vivo.** A transcrição aparece palavra por palavra (0,085 s entre palavras), as linhas de resultado
   entram da esquerda com 0,25 s de intervalo, e um selo "gerando" com brilho passando vira "4 tarefas geradas".
8. **Realce depois do zoom.** Um retângulo na cor da marca a 11% de opacidade, com borda de 2 px a 50%, cresce de cima para
   baixo sobre a coluna importante (responsável, prazo) e some.
9. **Fecho curto.** Logo com 160 px e a frase de uma linha em 68 px (peso 620) entram com blur que se desfaz, e o endereço
   do site aparece por último em cor clara.
10. **Determinismo.** Linha do tempo do GSAP pausada, registrada pelo nome da composição, e qualquer aleatoriedade (barras de
    áudio) vem de um gerador com semente fixa.

## Proibições

- Print real com dados reais de clientes, e-mails ou números verdadeiros sem autorização.
- Telas vazias, "Lorem ipsum" ou texto abaixo de 20 px dentro da janela.
- Cursor que se move em linha reta ou clica sem o anel.
- Animação em loop infinito: tudo tem repetição finita, para o render ser previsível.
- Mais de uma ideia por tela, ou câmera mudando de zoom sem motivo na narração.
- Gradiente colorido na janela. Só o fundo do vídeo tem gradiente.

## Som

- **Narração** na voz clonada, curta (3 frases para 17 s), com a marca dita no começo.
- **Música:** opcional, eletrônica suave de produto (bumbo leve, sintetizador morno), 20 dB abaixo da voz.
- **Efeitos opcionais:** um clique suave em cada clique do cursor e um "ding" curto quando a lista aparece.
- **Proibido:** riser, impacto cinematográfico, vocal.

## Prompts dos assets

Estilo 100% código (HTML, CSS e GSAP). Nenhuma imagem gerada: a interface, o logo e os ícones são desenhados com
divs e SVG. A fonte (Geist) entra como arquivo local para o render não depender de internet.

## Componente de referência

O cursor e o clique, com dois elementos para X e Y (para a trajetória fazer curva) e o anel de clique.

```js
const tl = gsap.timeline({ paused: true });
const MOVES = [{ t: 1.3, d: 1.9, x: 1592, y: 226 }, { t: 3.8, d: 0.8, x: 1330, y: 430 }];
MOVES.forEach(m => {
  tl.to('#curX', { x: m.x, duration: m.d, ease: 'power2.inOut' }, m.t);   // X e Y com curvas diferentes
  tl.to('#curY', { y: m.y, duration: m.d, ease: 'sine.inOut' }, m.t);     // fazem o cursor andar em arco
});
function click(t, btn, ring) {
  tl.fromTo('#curS', { scale: 1 }, { scale: 0.8, duration: 0.1, ease: 'power2.out' }, t);          // cursor encolhe
  tl.fromTo('#curS', { scale: 0.8 }, { scale: 1, duration: 0.25, ease: 'back.out(2.2)', immediateRender: false }, t + 0.1);
  tl.fromTo(btn, { scale: 1 }, { scale: 0.96, duration: 0.1, ease: 'power2.out' }, t);              // botão afunda
  tl.fromTo(btn, { scale: 0.96 }, { scale: 1, duration: 0.25, ease: 'back.out(2)', immediateRender: false }, t + 0.1);
  tl.fromTo(ring, { scale: 0.3, opacity: 0.85 }, { scale: 2.8, opacity: 0, duration: 0.6, ease: 'power2.out', immediateRender: false }, t);
}
click(3.45, '#recBtn', '#ring1');
// câmera: um único elemento recebe o transform (origem 0 0)
tl.to('#cam', { scale: 1.4, x: -572, y: -262, duration: 0.8, ease: 'power2.inOut' }, 4.6);
tl.to('#cam', { scale: 1, x: 0, y: 0, duration: 0.5, ease: 'power2.inOut' }, 8.0);
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:** 2, Apresentação de software.
- **Pedido de exemplo:** "Faz um vídeo de apresentação de 20 segundos, horizontal, do meu software Pautei: ele grava a reunião,
  transcreve e já devolve as tarefas com responsável e prazo. Inventa as telas com cara de SaaS moderno: o painel, a reunião
  sendo transcrita ao vivo e a lista de tarefas aparecendo sozinha. Cursor animado clicando, zoom suave nas partes importantes
  e narração curta na minha voz."