Cinematic Shot: dirija um filme de lançamento com sua UI real

Plano cinematográfico

Você é o diretor e o diretor de fotografia, não o motion designer. O filme é uma sequência de hero shots. Cada um olha para uma parte real da interface do produto de um ângulo baixo e inclinado, tão próximo que o plano focal cobre apenas uma ou duas linhas de texto e todo o resto se dissolve no preto. A câmera deriva lentamente em direção ao próximo acontecimento. A interface faz o trabalho sozinha: as coisas são digitadas, transmitidas, selecionadas e escritas enquanto assistimos. Nada se explica com legendas.

Esta skill é sobre câmera, enquadramento, iluminação e edição. Monte o filme com qualquer stack de renderização. Seja qual for a sua escolha, faça com que cada quadro seja uma função pura do tempo, para que o filme renderize deterministicamente e possa receber motion blur.

Leia references/look.md para receitas exatas de câmera, profundidade de campo, iluminação, revelação e tipografia. Leia references/shot-list-example.md para um exemplo completo da gramática dos planos.

O estilo

Um vazio preto. O produto flutua nele como uma laje escura, inclinada para longe da câmera, iluminada por um foco suave que segue o que importa e deixa todo o resto cair no preto. A câmera é baixa e próxima, olhando ao longo da interface em vez de para ela, de modo que as linhas de texto cruzam diagonalmente o quadro e diminuem na distância. O plano focal é uma faixa fina: um controle, uma linha de digitação, uma linha de uma lista estão nítidos, e o resto é bokeh suave. A câmera nunca para de derivar e nunca se move rápido. Os planos são longos o suficiente para ver algo acontecer. A única cor é a do próprio produto. Moderação em todo o resto.

1. Encontre a história antes dos planos

Antes de planejar uma única câmera, anote:

• O fluxo: as 4–7 coisas que acontecem na tela, em ordem. Exemplos: abrir uma visualização, selecionar uma aba, digitar um prompt, ver a resposta chegar em streaming, ver um documento se escrever sozinho, aprovar.
• O payoff: o único momento em que o produto visivelmente faz algo notável. O filme existe para chegar a este quadro.
• O conteúdo de demonstração: dados concretos e críveis dentro da interface, como nomes, IDs, status, código e texto curto com som humano. Densidade com aparência real é o que torna um close-up bonito. Uma lista de doze problemas plausíveis parece um produto; três placeholders cinza parecem um mockup.
• Uma linha de texto: o nome do produto ou funcionalidade, seguido por um slogan de no máximo cinco palavras.

2. Escreva a lista de planos

Publique a lista de planos antes de construir, depois continue:

#	Corte em	Dur	Sujeito (o que está em foco)	Escala	Ângulo	Movimento	Ação

Regras:

• Duração: 45–55 s no total, com 8–10 planos de interface, depois o texto e o logotipo.
• A duração do plano segue a ação. Planos de processo (digitação, streaming, um documento se escrevendo, um diff longo) duram 5–9 s. Planos de pontuação (uma aba, um botão, um item de navegação) duram 2–3.5 s. Alterne os dois, de modo que uma longa observação seja seguida por um acento curto. Mediana de cerca de 5 s.
• Corte na ação, não no metrônomo. Não há grade de batida. Entre quando o sujeito já está em quadro ou prestes a chegar; a ação começa dentro de 0.3–0.8 s; segure o resultado por 0.5–1 s; corte enquanto a câmera ainda está se movendo.
• Uma ideia por plano. Um plano pode conter uma sequência curta (digitar → enviar → a resposta começa) somente se a câmera seguir um único fio contínuo.
• Varie a escala como um editor. Extremos macros e macros dominam. Planos médios carregam o processo mais longo. Segure o plano aberto (a janela inteira, quase frontal) para o payoff, onde ele chega como uma libertação. Volte para um close-up depois.
• Alterne a diagonal. Se o texto em um plano sobe para a direita, o texto do próximo plano cai para a direita, ou o plano inclina para o outro lado. Cada corte deve ser lido como uma nova posição de câmera.
• Sem cursor de continuidade. A interface age sozinha (veja a seção 4). O espectador nunca precisa seguir um ponteiro entre os planos.
• Superfícies separadas recebem configurações separadas. Quando a história se move para outra superfície (um terminal, um telefone, outro aplicativo), dê a ela sua própria laje no mesmo vazio preto e corte seco para ela.

Escalas de plano

Meça a escala como a ampliação da interface no ponto focal, em relação ao seu tamanho nativo:

Escala	Ampliação	Uso	Profundidade de campo
Macro extremo	5–7×	Uma única aba, um botão, um item de navegação, um badge de status. Uma ou duas palavras preenchem um terço do quadro.	Apenas o sujeito está nítido. Todo o resto é bokeh pesado.
Macro	2.5–4×	Um compositor com uma linha de digitação, algumas linhas de uma lista, um trecho de código	Uma faixa de 2 a 4 linhas de texto de profundidade está nítida
Médio	1.5–2.5×	Um painel em ação: uma lista chegando em streaming, um documento se escrevendo, um diff com uma barra lateral	Uma faixa mais larga está nítida; a borda distante e a borda próxima permanecem suaves
Aberto	0.8–1.1×	Apenas o payoff: a janela inteira, quase frontal, com conteúdo rolando ou mudando	Principalmente nítido; as bordas do quadro ainda suavizam

Planos macro devem permanecer nítidos. Rasterize a interface na resolução da ampliação (por exemplo, 6×) antes que a câmera a escalone. Nunca aumente a escala de um bitmap 1×.

Ângulo da câmera

Esta é a assinatura do visual. Exceto pelo plano aberto, a câmera é baixa e oblíqua, olhando através do plano da interface:

• Incline o plano para trás 30–50° (pitch), de modo que o lado distante da interface recue e o lado próximo se imponha.
• Gire-o no plano 10–20° antes de inclinar, para que as linhas de texto fiquem diagonais. Inverta o sinal entre planos consecutivos.
• Adicione um pouco de ângulo horizontal, ±5–15°, de modo que um lado do quadro esteja mais próximo que o outro.
• Use uma perspectiva um pouco curta para que a foreshortening seja óbvia: o texto próximo deve ter cerca de 1.4–1.8× o tamanho do texto distante no mesmo quadro. Uma distância de perspectiva de cerca de 0.6–0.75× a largura do quadro funciona (1100–1400 px em 1080p).
• O plano aberto é a exceção: quase frontal, pitch 8–12°, sem rotação no plano, ângulo horizontal dentro de ±3°.
• Enquadramento: corte agressivamente. As bordas da laje saem do quadro ou caem no preto. Deixe preto generoso: um quarto a metade do quadro é frequentemente o vazio, ou interface tão desfocada que parece textura.

Movimento da câmera

Cada plano é um movimento contínuo. Ele é motivado: a câmera deriva em direção a onde a próxima coisa aparecerá.

• Acompanhe ao longo da direção de leitura da ação: 3–10% da largura do quadro durante um plano típico, até 20–35% para uma panorâmica longa ao longo de um diff ou documento.
• Siga o conteúdo à medida que ele cresce: quando uma resposta flui para baixo, derive para baixo com ela; quando uma linha é digitada, derive com o cursor.
• Empurre suavemente, uma mudança de escala de 1–5% durante o plano. Afastamentos são raros.
• Gire ligeiramente, 0.5–4° de mudança de rotação ou ângulo horizontal durante o plano.
• Velocidade: velocidade constante (linear) ou uma pequena desaceleração na chegada durante o primeiro terço que depois continua com uma deriva constante lenta. A câmera nunca desacelera até uma parada completa e ainda está se movendo no corte. Sem ruído de mão, sem tremor.
• Rack focus com a ação: quando a atenção se move da linha digitada para a resposta, ou de um título para o corpo, deslize a faixa focal para lá em 0.4–0.8 s.

3. Iluminação e correção de cor: um vazio preto

Cada plano deve parecer que foi filmado no mesmo estúdio. Os valores estão em references/look.md.

• Estúdio: preto verdadeiro ao redor do produto. Sem papel de parede gradiente, sem bruma colorida, sem chão.
• Luz do sujeito: um foco suave e neutro no sujeito, não no quadro. A interface cai para o preto dentro de cerca de um terço da largura do quadro a partir do ponto focal. O foco está no plano da interface, de modo que a inclinação o foreshorten e a rotação o coloca ao longo da diagonal. É mais longo ao longo da linha de ação, tem um ponto quente deslocado em direção a uma chave fora do eixo (o lado da chave inverte com a diagonal) e às vezes tem um lado cortado por uma bandeira suave. Ele segue o sujeito com um atraso, desliza com um rack focus e se abre à medida que o conteúdo cresce e no payoff. Nunca é um círculo centralizado que parece o mesmo em todos os planos. Não há luz de chave colorida.
• Baixa chave: o quadro médio é muito escuro (cerca de 7–10% de luminância). Os pixels brilhantes são reservados para texto em foco e a interface colorida do próprio produto. Qualquer coisa brilhante e fora de foco é escurecida.
• O produto é uma laje escura: seu próprio cromo, cantos arredondados e um sutil destaque de borda de 1 px nos painéis. Mantenha a interface real fiel; não a reformule.
• A cor pertence ao produto: ícones de status, verdes e vermelhos de diff, um botão primário da cor da marca. Não adicione nenhum acento próprio: sem flares, sem brilhos, sem anéis, sem luz tingida.
• Acabamento: motion blur (obturador de 180°, 4+ sub-quadros) e grão de filme fino na renderização final. Junto com a profundidade de campo, estes três fazem quase todo o trabalho.

4. Movimento dentro do plano

• Sem cursor. A interface age sozinha. Um item de navegação destaca-se. A pílula de seleção de uma aba desliza. Um botão é pressionado. Um controle de medianiz aparece em uma linha de código e a linha destaca-se. Se um clique deve ser lido, mostre-o através do estado pressionado ou selecionado do próprio controle.
• Digitação: 12–13 caracteres por segundo com um cursor visível. Identificadores de código e referências de arquivo transformam-se em chips inline à medida que são digitados. Ao enviar, o compositor limpa e a mensagem move-se para o tópico.
• Streaming: o texto gerado resolve linha por linha, de cima para baixo. Cada linha chega como uma fina estipulação de pontos que se condensa em glifos sólidos em cerca de 0.5 s, escalonada em cerca de 0.1 s por linha. Ícones e avatares resolvem da mesma forma.
• Escrita: documentos e diagramas constroem-se em ordem: um título, depois um cabeçalho, depois parágrafos; nós do diagrama, depois conectores sendo desenhados, depois rótulos.
• Rolagem: em planos médios e abertos, o conteúdo pode rolar suavemente sob uma câmera em deriva. Esta é a segunda camada de movimento, e deve parecer velocidade de leitura.
• Aparecer: novos painéis e mensagens aparecem e sobem ligeiramente através de um pequeno desfoque em uma desaceleração de 0.3–0.5 s. Nada aparece com overshoot.
• Sem efeitos de impacto. O payoff é mostrado pela escala (o plano aberto) e pela quantidade que muda, não por tremor, flashes ou anéis.

5. Final: texto, depois um logotipo estático

1. Saia do último plano de interface com um corte seco para o preto, ou um rápido desfoque e escurecimento (0.4 s) para o preto.
2. O texto: uma linha centralizada no preto, com cerca de 80–100 px em 1080p, peso 500, tracking de cerca de −0.02em, branco. Ele chega desfocando de cerca de 16 px enquanto aparece em 0.6–1 s. Defina a linha inteira de uma vez ou defina primeiro o nome do produto e depois acrescente o slogan na mesma linha, deixando a linha recentralizar à medida que cresce. Um brilho suave e fraco atrás do tipo pode se dissipar à medida que ele nitidifica; nada varre através dele. Segure por 3–5 s.
3. O logotipo: corte ou pequena dissolução (cerca de 0.3 s) para o logotipo estático, apenas a marca ou marca e marca nominativa, com cerca de 110–120 px de altura em 1080p, em branco simples. Não se move, pulsa ou brilha. Segure por 4–5 s e termine o filme nele.

Não adicione botões de CTA, cartões de URL ou banners "disponível agora" a menos que solicitado.

6. Som

Não há música: sem trilha sonora, sem drone, sem batida, sem crescendos, sem braams e sem stings tonais. A trilha sonora é foley silenciosa e tátil sobre um quase silêncio.

Cada ação visível recebe um sinal: um tique de tecla suave por caractere digitado, um clique suave quando uma aba ou item é selecionado, um whoosh silencioso ao enviar e um chiado granular fraco sob texto em streaming. O payoff não tem impacto. O texto e o logotipo tocam em silêncio.

Não faça

Estas coisas fazem um filme parecer um tutorial ou um modelo:

• Aberturas frias, cartelas de título ou telas de "Apresentando…" e "Novo em…" antes da ação.
• Sobreposições de teclas, legendas, setas de chamada ou rótulos que explicam a interface.
• Um ponteiro de mouse visível conduzindo a ação, ou um cursor viajando entre alvos.
• Close-ups frontais e planos. Fora do plano aberto de payoff, a câmera olha através da interface, não diretamente para ela.
• Tudo em foco. Se o quadro não tem bokeh, o plano é muito aberto ou a faixa focal é muito profunda.
• Dissoluções ou mergulhos no preto entre planos de interface. Os planos de interface usam apenas cortes secos.
• Movimentos rápidos, órbitas lentas, grandes rotações 3D, voos rasantes, tremor de câmera ou uma câmera que desacelera até parar.
• Cortar para uma grade. Planos de dois segundos consecutivos são lidos como um sizzle reel; deixe os planos de processo respirar.
• Reformular a interface do produto para parecer "cinematográfica". Mantenha a interface real fiel e obtenha o cinema da câmera, do foco e da luz.
• Flares anamórficos, brilho, anéis de acento, luz de chave colorida ou qualquer cor que o produto já não tenha.
• Luz que se move através do quadro: faixas de brilho, varreduras ou barras de luz viajando sobre a interface. A luz segue o sujeito; ela não performa.
• Um foco de luz que é um círculo no espaço da tela, centralizado e idêntico em todos os planos. Ele parece uma sobreposição preta com um buraco, não luz na laje.
• Uma revelação de logotipo animada.
• Música de qualquer tipo, incluindo trilha sonora, batida, drone, crescendos, braams ou sinos.

7. Verifique como um diretor de fotografia

Renderize um still no meio de cada plano, no pico de cada ação, no payoff e nos quadros de texto e logotipo. Julgue cada um como um quadro congelado de um filme:

• Há exatamente um sujeito nítido, e o olho pousa nele em menos de meio segundo.
• A faixa focal é fina, com bokeh próximo e distante, exceto no plano aberto.
• O plano parece inclinado: o texto corre diagonalmente e diminui visivelmente na distância.
• O texto em foco é legível com metade da resolução.
• Pelo menos um quarto do quadro é preto ou quase preto.
• Planos consecutivos diferem em escala ou na direção da diagonal.
• Cada quadro compartilha o mesmo nível de preto, luz neutra e grão, mas a forma do foco muda com cada câmera: foreshortened, esticado ao longo da ação e iluminado de um lado.
• Escolha o quadro mais forte como o pôster.

Itere até que cada still possa ser uma captura de tela em um post de lançamento.