---
slug: tutorial-tela
nome: Tutorial de tela
descricao: tour de produto com cara de gravação profissional: zooms grandes no controle exato, cursor grande que clica e causa o próximo estado, passos numerados, rampa de velocidade
familia: Redes sociais
versao: 2
quando:
  - "tutorial de como usar meu app ou site em 3 passos"
  - "vídeo de tela gravada com zoom e cursor mostrando um fluxo"
  - "reels de dica rápida de produtividade com atalho de teclado"
  - "demonstrar uma funcionalidade nova passo a passo"
nao_serve:
  - "vídeo sem interface nenhuma (use tipografia ou minimal)"
  - "tela real do cliente com dados sensíveis (o kit desenha uma tela demo; com tela real, mande o vídeo gravado e use só os elementos de fora)"
---

# Tutorial de tela

Um **tour de produto com acabamento de Apple/Linear**: uma janela de app nítida num chão limpo (cinza-azulado com
grade de pontos que deriva) e uma **câmera de gravação** que nunca para: começa na janela inteira (zoom 0,62),
**mergulha no controle exato** (zoom 2–2,3), **atravessa** a interface até o próximo controle e recua no fim. Todo
deslocamento tem **rampa de velocidade** (easeInOutQuint: arranca, voa, freia longo) e **desfoque de movimento** na
direção do voo. O **cursor é grande**, anda em arco e cada **clique causa o próximo estado** (o botão afunda, o modal
abre, o texto é digitado, a linha nova entra destacada), com **onda laranja** no ponto do clique. Um **anel de foco**
com holofote marca o controle da vez, e a **legenda do passo** (número laranja + "PASSO 1 DE 3" + frase) sobe num
cartão branco. Fecha com **teclas de atalho** de verdade sendo apertadas. Um acento só: laranja `#FF5B14`.

## Como montar um vídeo com este kit

1. **Corte o fluxo** em 2–4 passos. Cada passo = um controle + uma frase de até 24 caracteres.
2. **Escreva a gravação** no plano: `janela` (os textos do app e os tempos de clique/digitação), `camera`
   ({em, x, y, zoom}: chegue no controle ~8 quadros antes do clique e segure ≥ 8 depois), `cursor` (chaves e
   cliques nos MESMOS quadros dos `tempos`) e `destaques` (o retângulo do controle). Pontos úteis: `ALVOS` em JanelaApp.
3. **Escreva as cenas de cima**: título no começo, um `PassoChamada` por passo, `TeclaAtalho` no fim.
4. **Renderize** e confira: o controle da vez sempre perto do centro (540, 820), legenda em y 1180, nada parado.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `CameraTela` | câmera da gravação: zoom/pan por chaves, rampa de velocidade, desfoque de movimento, janela entra e sai | toda a gravação |
| `JanelaApp` | app de lista nítido que muda de estado por quadros (botão, modal, digitação, salvar, linha nova) | toda a gravação |
| `Cursor` | ponteiro grande em arco, afunda no clique, onda laranja | passos |
| `DestaqueCaixa` | anel de foco que pulsa + holofote | passos |
| `PassoChamada` | legenda do passo com número, "PASSO N DE M" e frase | passos |
| `TituloTela` | título grande com marca-texto laranja | gancho |
| `TeclaAtalho` | teclas em relevo apertadas em sequência + legenda | atalho, cta |

## Proibido

- Janela parada: a câmera sempre está indo pra um controle ou segurando ≤ 20 quadros.
- Clique sem consequência (todo clique muda o estado da tela).
- Corte seco entre passos: o passo seguinte chega pela câmera.
- Mais de 1 legenda na tela; texto da legenda com mais de 24 caracteres.
- Cor fora da paleta; tela real do cliente com dado sensível.