# Regras do estilo tutorial-tela (Tutorial de tela)

Estas regras valem para QUEM MONTA. Não existe vídeo pronto aqui: só peças (`pecas.json`). Cada cena é escrita do zero, peça a peça.

## Regras do kit: cor
| token | hex | uso |
|---|---|---|
| chao | #ECEEF2 → #DCE0E7 | chão (radial do centro à borda) |
| tela | #FFFFFF | janela, cartões, teclas |
| lateral | #F6F7F9 | lateral do app |
| linha | #E4E7EC | divisórias |
| tinta | #14161A | texto |
| apagado | #6B7280 | texto secundário |
| acento | #FF5B14 | botão, cursor clicando, anel, número do passo, marca-texto |
| acentoClaro | #FFE4D6 | foco do campo, linha nova |
| ok | #17A05D | check |

- Grade de pontos: tinta a 7%, 2 px a cada 32 px.
- Sombra da janela: 0 60 120 tinta 22% + 0 12 30 tinta 12%. Holofote: tinta 22% fora do anel.
- Linha nova: acento 14% + contorno 50%, some em 30 quadros.

## Regras do kit: tipografia
- **Plus Jakarta Sans 500–800** (títulos, UI do app, passos) · **JetBrains Mono 500–700** (rótulos pequenos: "passo 1 de 3", etiquetas, endereço). Registradas como `"TS Jakarta"` e `"TS JetBrains Mono"`.
- Títulos em caixa normal, tracking −0,03 a −0,04 em, `line-height` 1,1–1,18.

| papel | fonte | tamanho px | máx. caracteres |
|---|---|---|---|
| título de abertura | Jakarta 800 | 96, tracking −0,03 em | 14 por linha |
| frase do passo | Jakarta 800 | 46 | 24 |
| "PASSO N DE M" | Mono 500 | 22, tracking 0,08 em | 14 |
| número do passo | Jakarta 800 | 46 num círculo de 84 | 1 |
| tecla com letra | Jakarta 800 | 100 numa tecla de 190 | 1 |
| legenda do atalho | Jakarta 800 | 64 | 22 |
| UI: título / linha / botão | Jakarta 800 / 600 / 700 | 54 / 30 / 24 (na janela 1400 × 940) | 12 / 28 / 14 |
| UI: endereço, etiqueta | Mono 500 | 20 | 16 |

## Regras do kit: area-segura
Tela 1080×1920. Texto lido entre y 168 e 1330, x 88 a 992.

| elemento | y de referência |
|---|---|
| centro óptico da câmera (o controle da vez) | (540, 820) |
| título | 250–470 (janela abaixo, de 634 a 1217 no zoom 0,62) |
| legenda do passo | 1180 |
| teclas de atalho | 680–870, legenda 940 |

- No zoom do controle, a legenda cobre a janela: tudo bem, ela tem cartão branco e sombra.
- Campo largo (560 de largura): zoom ≤ 1,7 pra caber em 1000 px.

## Regras do kit: movimento
Curva da câmera e do cursor: `rampa` = easeInOutQuint. Entradas de cartão: `mola` (s = 1,7).

| 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 |
| teclas | 12 entram · aperta 3 entre teclas | descem 10 px, borda 14 → 4 |

## Regras do kit: 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 |

- Leitura mínima: cada legenda de passo fica ≥ 26 quadros; a tarefa nova fica ≥ 10 quadros visível antes do zoom sair.
- Evento novo (zoom, clique, modal, letra) a cada ≤ 0,7 s dentro da cena da tela; 12–20 quadros de pausa depois do clique final.

### v2

| batida | quadros |
|---|---|
| gancho (título + janela entra) | 36–48 |
| passo (câmera chega + clique + respiro) | 40–56 |
| atalho | 36–48 |

- Clique ≥ 6 quadros depois que a câmera chega; respiro ≥ 8 depois do clique.

## Regras do kit: 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 |
| `whoosh-entra` | 0,8 | entrada de cena sem lado (−1 quadro) |
| `impacto` | 0,85 | opcional, no título |
| `subida` | 0,65 | opcional, antes do fim |
| `assinatura` | 0,85 | fecho |
| `whoosh-sai` | 0,65 | saída grande (opcional) |

- No máximo **3 sons por segundo**; nunca o mesmo arquivo duas vezes seguidas (clique, pop, clique é ok). Som entra 1 a 2 quadros antes do visual.
- Alvo −14 LUFS, pico −1,5 dBTP.

## Movimento (régua extravagante; liso e calmo é reprovado)
- A câmera nunca para: use `CameraDeriva` (ou a câmera do estilo) com ao menos 4 chaves `{em, z, x, y}` mudando `z` e `x/y`, uma chave a cada cena. Deriva e leve rotação por baixo, sempre.
- Em cada corte, um `CorteImpacto` (clarão + tremida + zoom-pop) casado com o som `impacto` 1 a 2 quadros antes.
- Toda cena tem fundo vivo (`Particulas` + o fundo do estilo), pelo menos 1 herói e 2 apoios em movimento. Cena parada é reprovada.
- Entrada de elemento: 10-18 quadros com overshoot curto; saída: metade da entrada. Stagger entre itens: 2-5 quadros.
- Peças 3D e giros valem: quanto mais profundidade (parallax, perspectiva, rotação), melhor, sem sair da área segura.

## Som (camadas)
- Trilha sempre, volume 0,45, fade de saída 20 quadros.
- SFX em TODO corte e em toda entrada de elemento grande, no mínimo 2 camadas por corte (ex.: `whoosh-sai` + `impacto`, depois `swoosh` no quadro seguinte). Máx. 6 efeitos por segundo. Nunca o mesmo arquivo duas vezes no mesmo quadro.
- Sons deste estilo: assinatura, clique, digitar, impacto, pop-cartao, pop-palavra, subida, sucesso, swoosh, whoosh-entra, whoosh-sai.

## Densidade mínima (o conferir cobra isto)
| medida | mínimo |
|---|---|
| camadas visuais simultâneas por cena | 4 (fundo, partículas, herói, apoio) |
| elementos em movimento por segundo (média da linha do tempo) | 5 |
| chaves de câmera por vídeo | 4 |
| SFX por corte | 1 (alvo 2) |
| peças diferentes usadas no vídeo | 6 |

## Proibido
- Copiar uma cena pronta: cada cena é composta peça a peça, com props novas.
- Cena parada: nenhum quadro em que nada se mexe.
- Elemento com movimento grande sem som.