# Análise do vídeo de referência: Tutorial de tela

Método Clube do Motion: dissecar o vídeo pronto pra aprender a técnica, não pra copiar. Este vídeo (`referencia.mp4`, vertical 1080x1920 renderizado em 540x960) é o filme de demonstração do estilo; o código que o fez NÃO está aqui. A IA pode olhar o vídeo e esta análise; a cena nova se escreve do zero com as peças desta pasta.

- Duração: 240 quadros = 8.0 s a 30 fps.
- Trilha: trilha/passo-108bpm.mp3, 108 bpm (1 batida = 16.7 quadros = 0.56 s).
- Cenas: 5; cortes em 1.5 s, 2.8 s, 4.7 s, 6.4 s.

## Linha do tempo, segundo a segundo

| tempo | quadros | entrada | peças em cena (pasta/Peça) | sons |
|---|---|---|---|---|
| 0.0 s-1.5 s | 0-44 | padrão | tipografia/TituloTela | pop-palavra@0.1 s, whoosh-entra@0.3 s |
| 1.5 s-2.8 s | 44-84 | padrão | tipografia/PassoChamada | swoosh@1.5 s, clique@2.3 s, pop-cartao@2.4 s |
| 2.8 s-4.7 s | 84-140 | padrão | tipografia/PassoChamada | swoosh@2.8 s, clique@3.3 s, digitar@3.5 s |
| 4.7 s-6.4 s | 140-192 | padrão | tipografia/PassoChamada | swoosh@4.7 s, clique@5.2 s, sucesso@5.4 s |
| 6.4 s-8.0 s | 192-240 | padrão | formas/TeclaAtalho | whoosh-sai@6.4 s, pop-cartao@6.8 s, clique@7.3 s, assinatura@7.4 s |

Fundo, partículas e a câmera valem o vídeo todo (fundo vivo + câmera em perspectiva sempre).

## Cortes e batida

- Corte em 1.5 s (quadro 44): batida 2.64 (fora da batida: corte na voz ou no gesto).
- Corte em 2.8 s (quadro 84): batida 5.04 (NA batida).
- Corte em 4.7 s (quadro 140): batida 8.40 (fora da batida: corte na voz ou no gesto).
- Corte em 6.4 s (quadro 192): batida 11.52 (fora da batida: corte na voz ou no gesto).

## Câmera

A câmera deste estilo é a peça `camera/Camera` (ver o código da peça): ela dá o empurrão nos cortes e uma deriva contínua. No material novo, `camera/CameraDeriva` (chaves {em, z, x, y, giro}) acrescenta o controle por chaves.

## Números de easing e tempos

- `e5 = (t: number) => 1 - Math.pow(1 - c01(t), 5);`
- `mola = (t: number, s = 1.7) => {const x = c01(t) - 1; return x * x * ((s + 1) * x + s) + 1;};`

Movimentos medidos no estilo:

| movimento | quadros | valores |
|---|---|---|
| janela entra | 18 | sobe 900 px, rotateX 22° → 0 |
| janela sai | 14 | desce 300 px, rotateX 30°, escala 0,8, some |
| câmera vai ao controle | 12–18 | zoom 0,62 → 2,0–2,3; segura ≥ 8 depois do clique |
| câmera atravessa | 12–16 | pan entre controles, zoom 1,6–2,3 |
| desfoque de movimento | durante o voo | até 7 px na direção (0,05 × px/quadro) |
| cursor | 14–20 por trecho | arco de 12% da distância |
| clique | 4 | cursor 82%, botão 92–94% |
| onda do clique | 14 | r 0 → 54, opacidade 1 → 0 |
| modal | 8 abre · 6 fecha | escala 0,94 → 1, sobe 20 px, fundo 28% |
| digitação | 28 por 16 letras | cursor de texto pisca 8/8 |
| linha nova | 10 | altura 0 → 84 |
| anel de foco | 8 entra · 8 sai | 1,25 → 1, pulso 3% |
| legenda do passo | 12 entra · 8 sai | sobe 60 px |

## Ritmo

- 108 bpm: **1 batida = 16,7 quadros** (0,56 s). A cena da tela dura ~7,5 batidas (126 quadros); as outras 2–2,5 batidas.
- Vídeo de 8 s = 240 quadros = 4 cenas.
| batida | duração s | quadros |
|---|---|---|
| titulo | 1,0–1,4 | 30–42 |
| tela | 3,6–5,0 | 110–150 (um passo a cada 30–45 quadros) |
| atalho | 1,2–1,6 | 36–48 |
| fim | 1,2–1,6 | 36–48 |

## Som

- Trilha: `assets/trilha/passo-108bpm.mp3` (8,6 s, 108 bpm, calm-punch, tom F), volume **0,42**, fade nos últimos **20 quadros**. Vídeo maior: gere outra (`music make --preset calm-punch --bpm 108 --key F --force`), sem loop.
- Com narração: trilha a **0,2** e efeitos a 70%.
| som | volume | quando |
|---|---|---|
| `clique` | 0,9 | cada clique do cursor, aperto da tecla |
| `digitar` | 0,6 | a rajada de teclas no início da digitação |
| `pop-cartao` | 0,9 | modal abre, tecla pousa |
| `pop-palavra` | 0,9 | palavra do título, rótulo do atalho |
| `sucesso` | 0,8 | o último clique deu certo (linha nova entra) |
| `swoosh` | 0,85 | a câmera voa até o próximo controle |

## Técnicas pra levar (o que se vê nos quadros 1 a 4)

- Composição: janela do app no centro, aproximada com zoom para a região do clique; título curto no alto, e no fim duas teclas ('⌘ N') no centro.
- Profundidade: janela com sombra suave sobre fundo claro; fora de foco as áreas que não importam; a câmera aproxima do botão.
- Densidade: média. Interface real e balão numerado ('1 · Toque em Nova tarefa'); cursor visível.
- Tipografia: sans geométrica pesada para o título ('Tarefa nova em 3 passos' com '3 passos' em caixa laranja), mono pequeno nos rótulos.
- Cor: fundo creme-esverdeado, interface branca, laranja único para botão e destaque.
- Movimento: zoom na tela até o botão, cursor clica, a janela do formulário sobe; teclas surgem com leve quique no final.