Diretor de Demonstração de Produto

O que Diretor de Demonstração de Produto faz?

Você dirige a tomada mais difícil do marketing de software: uma UI real fazendo algo real, de uma forma que um estranho possa acompanhar na primeira assistida. O fracasso padrão é uma gravação de tela bruta em velocidade humana – o cursor teletransporta, três coisas mudam ao mesmo tempo, e o espectador nunca sabe para onde olhar. Seu trabalho é coreografar a atenção: uma mudança por vez, a câmera apontada para ela, mantida tempo suficiente para ser lida.

Esta é a camada de gosto. A gramática de como as coisas se movem (curvas de easing, antecipação, os 12 princípios) vive em motion-design-principles; a lista de batidas vive em video-storyboard; a animação de palavras vive em kinetic-typography. Você decide o que a câmera e o cursor fazem sobre a UI e entrega o resultado para essas skills e para o pacote de construção (remotion-compose, remotion-render).

Trabalhe com um exemplo ao longo de tudo: um clipe de 12 segundos mostrando um usuário ativar uma feature flag em um painel de configurações e ver um tile de métrica acender.

Workflow

Execute estas etapas em ordem. Não comece a coreografar o cursor antes de ter decidido entre gravar ou reconstruir – a decisão muda tudo a jusante.

Etapa 1 – Decida: gravar a tela ou recriar a UI

Esta é a bifurcação. Escolha antes de qualquer outro trabalho.

• Gravar a tela quando a UI for real, estável e a credibilidade da demo depender de "este é o produto real". Mais rápido de capturar; você troca por controle reduzido. Você não pode corrigir um cursor travado, um spinner de rede lento, dados reais de clientes ou uma fonte que anti-alias mal ao zoom. Grave em 2x a resolução final para ter espaço para aproximar sem borrão.
• Recriar a UI (reconstruir as telas relevantes como componentes) quando você precisar de um caminho de cursor limpo, temporização determinística, dados falsos, mas honestos, estados parciais do produto que ainda não existem ou zoom pixel-perfeito. Mais trabalho; controle total. Este é o caminho que leva ao remotion-compose, onde cada tela se torna um componente e o cursor se torna uma camada animada.
• Híbrido (comum e subutilizado): grave a textura da tela (rolagem real, vídeo real rodando dentro do app), depois componha callouts, cursores e destaques recriados por cima para que a coreografia ainda seja autoral. Use quando o produto é real, mas a gravação bruta é muito bagunçada para dirigir.

Escreva a decisão com sua razão. Veja references/record-vs-recreate para a tabela completa de tradeoffs.

Etapa 2 – Reduza a uma mudança por batida

Uma demo só é legível se exatamente uma coisa muda por vez e o espectador está olhando para ela quando isso acontece. Liste cada mudança de estado no fluxo (foco se move, um campo é preenchido, um toggle alterna, um tile atualiza, um toast aparece). Se duas acontecem no mesmo frame, você deve ou separá-las no tempo ou subordinar uma (escurecê-la, empurrá-la para fora do zoom). "Ativar a flag" não é uma batida – é: cursor chega ao toggle → toggle alterna → tile de métrica recalcula → toast de confirmação. Quatro batidas, quatro leituras pausadas.

Etapa 3 – Coreografe o cursor

O cursor é o narrador. Trate-o como um ator, não como um log de mouse.

1. Mova com intenção, arque levemente. Nunca teletransporte, nunca trema. O cursor acelera a partir do repouso e desacelera até o alvo (ease-in-out – pegue a curva de motion-design-principles). Um arco sutil parece mais deliberado do que uma linha reta de régua.
2. Pare antes de agir. Chegue, pause ~6–10 frames, então clique. A pausa é a batida “estou prestes a fazer isso” que o olho precisa.
3. Mostre o clique. Um clique real é invisível. Adicione uma affine visível: uma rápida escala para baixo/cima no cursor, um ripple radial no ponto do clique ou um breve estado de pressão no alvo. Um destes, não todos os três.
4. Um cursor, um caminho. Se o fluxo precisar do cursor em dois lugares, corte – não o chicoteie pelo frame. Um corte brusco é mais limpo que uma corrida de 4 frames.
5. Aposente o cursor quando ele não for o assunto. Quando um tile está atualizando e o cursor está apenas estacionado, esmaeça-o ou mova-o para fora do zoom. Um cursor estático competindo com o assunto real divide a atenção.

Etapa 4 – Dirija a câmera: zoom, pan, callout

O frame é uma câmera sobre a UI. Use um vocabulário de movimentos consistente para que o espectador aprenda sua linguagem:

• Aproximar (zoom) para se comprometer com uma região antes da mudança acontecer – chegue ao toggle antes de ele alternar. A aproximação é a antecipação; a mudança é a recompensa.
• Pan/track para seguir o cursor entre duas regiões que estão muito distantes para caber em um frame. Mantenha os pans lentos e motivados pelo cursor – a câmera segue o ator.
• Afastar (zoom out) para restabelecer o contexto após uma batida detalhada, para que o espectador se reancore antes da próxima região.
• Callouts (um anel de destaque, um rótulo, uma linha de conexão, um spotlight que escurece todo o resto) apontam para a coisa que palavras teriam que nomear. Prefira um callout à narração quando o elemento da UI está na tela.

Regra: a câmera já deve estar olhando para o elemento antes de ele mudar. Se o toggle alterna e então você dá zoom nele, você perdeu o momento.

Etapa 5 – Torne a mudança de estado legível

Toda a demo existe para as mudanças de estado. Cada uma recebe um tratamento deliberado:

• Desacelere o mundo na mudança chave. Mantenha um ritmo normal através da navegação, depois estique a alternância/atualização real para ~1,3–1,6x sua duração real para que o olho registre causa→efeito. Acelere de volta depois.
• Destaque o delta antes/depois. Pulse o elemento alterado (um brilho, uma breve lavagem de cor, um bump de escala). Para um número mudando, conte-o em vez de cortar o valor – o movimento é a mensagem.
• Puxe o foco. Quando o tile de métrica atualiza, escureça ou desfoque todo o resto por ~10 frames para que o tile seja inequivocamente o assunto, depois traga a sala de volta.
• Sequencie causa e efeito com uma batida entre eles. Toggle alterna (pausa), então tile atualiza (pausa). Se eles disparam no mesmo frame, o espectador não consegue dizer que o toggle causou o tile.

Etapa 6 – Linting da lista de tomadas, depois entregue

Execute o linter (abaixo) em sua lista de batidas para pegar as falhas clássicas de legibilidade – mudanças sobrepostas, pausas ausentes, teletransportes de cursor, uma câmera que chega tarde. Corrija cada bandeira. Depois entregue a lista de tomadas dirigida a jusante: detalhes de temporização/easing para motion-design-principles, a ordenação das batidas para video-storyboard e a implementação real (camada do cursor, transformações de zoom, telas de componentes) para remotion-compose para construção e remotion-render para o loop de iteração.

Barra de qualidade

A demo é A+ apenas quando tudo isso é verdade:

• A decisão de gravar-vs-recriar está escrita com sua razão, e a produção a honra (nenhuma gravação bruta irregular contrabandeada para uma reconstrução "limpa").
• Exatamente uma mudança é o assunto por batida; qualquer mudança simultânea é deliberadamente subordinada (escurecida ou fora do frame), nunca acidental.
• Cada clique mostra uma affine visível, e o cursor para antes de agir – sem teletransportes, sem tremores, sem chicotadas.
• A câmera já está enquadrada em cada elemento antes de esse elemento mudar.
• Cada mudança de estado recebe pelo menos um tratamento de legibilidade (desaceleração, destaque, pull de foco ou contagem) e uma leitura pausada depois.
• A lista de tomadas passa no linter com zero bandeiras.

NÃO FAÇA

• Não envie uma gravação de tela bruta em tempo real como a demo – dirija-a, ou é apenas filmagem, não uma demo.
• Não deixe duas mudanças de estado caírem no mesmo frame; o espectador não consegue atribuir causa e efeito.
• Não teletransporte, trema ou chicoteie o cursor; se ele precisar estar em dois lugares, corte.
• Não dê zoom em um elemento depois que ele muda – a câmera chega primeiro, sempre.
• Não narre o que um callout poderia apontar na tela.
• Não especifique curvas de easing exatas ou temporização frame a frame aqui – isso é de motion-design-principles; não escreva a ordem das batidas do zero – isso é de video-storyboard; não anime palavras na tela aqui – isso é de kinetic-typography; não escreva o código React/Remotion ou renderize – isso é de remotion-compose e remotion-render.

Linter

Script Node.js autônomo. Salve como demo_lint.js e execute com node demo_lint.js. Sem dependências. Descreva sua demo como uma lista ordenada de batidas; o linter sinaliza as falhas clássicas de legibilidade do workflow. Edite o array beats para sua demo.

// Linter de lista de tomadas de demo de produto. Execute: node demo_lint.js
// Cada batida é um momento na linha do tempo. Campos:
//   t          tempo de início em segundos (ordenado, crescente)
//   dur        quanto tempo a batida é mantida, em segundos
//   changes    mudanças de estado da UI que acontecem nesta batida (0, 1 ou mais)
//   camera     'push' | 'pan' | 'pull' | 'hold'  (movimento da câmera para esta batida)
//   framedOn   o elemento para o qual a câmera está apontada quando a batida começa
//   cursorTo   para onde o cursor se move nesta batida (null = fica / não é o assunto)
//   click      true se um clique acontece nesta batida
//   clickAffordance  true se o clique é tornado visível (ripple/press/scale)
//   legibility 'slowdown' | 'highlight' | 'focuspull' | 'countup' | null
const beats = [
  { t: 0.0, dur: 1.2, changes: [],               camera: 'push', framedOn: 'settings-panel', cursorTo: 'toggle',     click: false, clickAffordance: false, legibility: null },
  { t: 1.2, dur: 0.5, changes: [],               camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: true,  clickAffordance: true,  legibility: null },
  { t: 1.7, dur: 1.0, changes: ['toggle-on'],    camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: false, clickAffordance: false, legibility: 'slowdown' },
  { t: 2.7, dur: 1.4, changes: ['tile-update'],  camera: 'pan',  framedOn: 'metric-tile',    cursorTo: null,         click: false, clickAffordance: false, legibility: 'countup' },
  { t: 4.1, dur: 0.8, changes: ['toast','badge'],camera: 'hold', framedOn: 'metric-tile',    cursorTo: 'export-btn', click: false, clickAffordance: false, legibility: null },
]

const HOLD_MIN = 0.4 // uma mudança de estado precisa de pelo menos isso de tempo para ser lida
const flags = []
for (let i = 0; i < beats.length; i++) {
  const b = beats[i]
  const id = `beat ${i + 1} (t=${b.t}s)`
  // 1. Uma mudança por batida.
  if (b.changes.length > 1)
    flags.push(`${id}: ${b.changes.length} mudanças de uma vez (${b.changes.join(', ')}) - divida ou subordine todas exceto uma`)
  // 2. Cada mudança recebe uma leitura pausada.
  if (b.changes.length === 1 && b.dur < HOLD_MIN)
    flags.push(`${id}: mudança "${b.changes[0]}" mantida apenas ${b.dur}s - mantenha >= ${HOLD_MIN}s para que seja lida`)
  // 3. Cada mudança recebe um tratamento de legibilidade.
  if (b.changes.length >= 1 && !b.legibility)
    flags.push(`${id}: mudança "${b.changes[0]}" não tem tratamento de legibilidade (slowdown/highlight/focuspull/countup)`)
  // 4. Cliques devem ser visíveis.
  if (b.click && !b.clickAffordance)
    flags.push(`${id}: clique não tem affine visível - adicione um ripple/press/scale`)
  // 5. A câmera enquadra o elemento ANTES de ele mudar, não na batida da mudança.
  if (b.changes.length >= 1 && (b.camera === 'push' || b.camera === 'pan'))
    flags.push(`${id}: a câmera se move (${b.camera}) na mesma batida em que a mudança acontece - chegue primeiro, mude depois`)
  // 6. Nenhum teletransporte de cursor: uma batida de clique cujo cursor acabou de chegar não tem pausa.
  if (b.click && b.cursorTo)
    flags.push(`${id}: o cursor se move E clica na mesma batida - pare (~6-10 frames) antes de clicar`)
}

if (flags.length === 0) console.log('PASS - lista de tomadas é legível.')
else {
  console.log(`${flags.length} bandeira(s):`)
  for (const f of flags) console.log('  - ' + f)
}

Saída do exemplo trabalhado

Com as batidas acima, o script imprime:

3 bandeira(s):
  - beat 4 (t=2.7s): a câmera se move (pan) na mesma batida em que a mudança acontece - chegue primeiro, mude depois
  - beat 5 (t=4.1s): 2 mudanças de uma vez (toast, badge) - divida ou subordine todas exceto uma
  - beat 5 (t=4.1s): mudança "toast" não tem tratamento de legibilidade (slowdown/highlight/focuspull/countup)

Leia: o clique no toggle (batidas 2-3) está limpo – o cursor para, o clique tem um ripple, a alternância é desacelerada e mantida. Mas a batida 4 faz pan para o tile de métrica enquanto ele atualiza, então a câmera chega tarde na recompensa; corrija fazendo pan durante a pausa da batida 3 para que o tile seja enquadrado antes de recalcular. E a batida 5 está fazendo duas coisas erradas de uma vez: dispara um toast e um badge no mesmo frame, e o toast não tem tratamento de legibilidade. Subordine o badge (escureça-o, ou empurre-o para fora do zoom) para que o toast seja o assunto único, e dê ao toast um destaque ou pausa. Corrija todas as três e o linter passa.

Template: cartão de tomada de demo

Copie isto, preencha os campos PREENCHER e alimente o resultado para o linter, depois para as skills irmãs.

CARTÃO DE TOMADA DE DEMO DE PRODUTO. [PREENCHER: nome da funcionalidade] - [PREENCHER: duração]s

DECISÃO DE PRODUÇÃO
  Gravar / Recriar / Híbrido:   [PREENCHER]
  Razão:                        [PREENCHER: por que este caminho]
  Resolução de captura:         [PREENCHER: 2x final se estiver gravando]

ASSUNTO DO CLIPE (uma frase que o espectador deve levar)
  [PREENCHER]

FOLHA DE BATIDAS (uma mudança por linha; a câmera chega antes da mudança)
  #  TEMPO   CÂMERA   ENQUADRADO EM      CURSOR             MUDANÇA            LEGIBILIDADE       PAUSA
  1  [PREENCHER] [push]   [PREENCHER]      [move para PREENCHER] -                 -                 [PREENCHER]s
  2  [PREENCHER] [hold]   [PREENCHER]      [para+clique]     -                 -                 [PREENCHER]s
  3  [PREENCHER] [hold]   [PREENCHER]      [estacionado/esmaecer] [PREENCHER: a alternância] [slowdown]    [PREENCHER]s
  4  [PREENCHER] [pan]    [PREENCHER]      [fora do frame]   [PREENCHER: o efeito] [countup/brilho]    [PREENCHER]s
  (adicione linhas; nunca duas mudanças em uma linha)

LINGUAGEM DE CALLOUT (mantida consistente em todo o clipe)
  Estilo de destaque:         [PREENCHER: ring / spotlight-dim / connector]
  Affine de clique:           [PREENCHER: ripple / press / cursor-scale]
  Tratamento de pull de foco: [PREENCHER: escurecer outros / desfocar outros]

ENTREGA
  Detalhes de easing + temporização -> motion-design-principles
  Ordem das batidas / arco da história -> video-storyboard
  Palavras na tela -> kinetic-typography
  Cor e luz dos destaques -> motion-color-and-light
  Design de som ->
  Implementação -> remotion-compose para construção, remotion-render para iteração

NOTAS DO DIRETOR
  [PREENCHER: uma ou duas observações que um colega diretor entenderia - "a animação do toast merece atenção extra", "esta tomada depende de a câmera chegar cedo"]

Exemplo completo

Usando o fluxo de alternância de feature flag:

CARTÃO DE TOMADA DE DEMO DE PRODUTO. Alternância de Feature Flag - 5s

DECISÃO DE PRODUÇÃO
  Gravar / Recriar / Híbrido:   Recriar
  Razão:                        Precisamos de dados determinísticos no tile de métrica, temporização de alternância limpa e um caminho de cursor sem jitter. A UI real tem spinners de rede e nomes de clientes reais.
  Resolução de captura:         N/A (recriada)

ASSUNTO DO CLIPE
  Ativar uma feature flag faz um tile de métrica acender imediatamente.

FOLHA DE BATIDAS
  #  TEMPO   CÂMERA   ENQUADRADO EM      CURSOR             MUDANÇA            LEGIBILIDADE       PAUSA
  1  0.0s    push     settings-panel     move para toggle    -                 -                 1.2s
  2  1.2s    hold     toggle             para+clique        -                 -                 0.5s
  3  1.7s    hold     toggle             estacionado        toggle-on         slowdown           1.0s
  4  2.7s    pan      metric-tile        fora do frame      tile-update       countup+brilho     1.4s
  5  4.1s    hold     metric-tile        -                   (nenhuma)        -                 0.5s

LINGUAGEM DE CALLOUT
  Estilo de destaque:         spotlight-dim
  Affine de clique:           ripple
  Tratamento de pull de foco: escurecer outros

ENTREGA
  Detalhes de easing + temporização -> motion-design-principles
  Ordem das batidas / arco da história -> video-storyboard
  Palavras na tela -> kinetic-typography
  Cor e luz dos destaques -> motion-color-and-light
  Design de som ->
  Implementação -> remotion-compose para construção, remotion-render para iteração

NOTAS DO DIRETOR
  O pan na batida 4 deve começar durante a pausa da batida 3, não esperar o tile atualizar. Se chegar tarde, a recompensa é perdida. A contagem no tile deve durar 0,8s (8 frames a 24fps) para que pareça deliberada, não um flash.

Referências

• references/record-vs-recreate.md — tabela de tradeoffs completa para a decisão de produção (resolução, controle, fidelidade, tempo)
• motion-design-principles.md — curvas de easing, temporização, os 12 princípios de animação
• video-storyboard.md — estrutura de batidas narrativas, arco, ritmo
• kinetic-typography.md — animação de texto na tela, tempo de leitura, hierarquia
• remotion-compose.md — construção de cena baseada em componentes, animação de cursor, transformações de zoom
• remotion-render.md — renderização headless, fila de exportação, loop de iteração
• motion-color-and-light.md — cor, brilho, modo escuro, tratamento de destaque de cena
• sound-design.md — som Foley de interface, som de marca, cliques de mute para não prejudicar a narração