Amartileyton/autovideo

Câmera Cinematográfica

Use com remotion-best-practices e motion-graphics. Construa um mundo conectado e mova uma câmera compartilhada através dele, em vez de painéis desconectados saltando em um vazio.

Intake obrigatório

Antes de planejar ou codificar, siga o portal de intake de motion-graphics. Se estiver faltando, pergunte:

Qual formato você deseja: inserção 4:3 meia-tela para Instagram ou 9:16 tela cheia para Instagram? E qual fundo: luz quente, escuro limpo, grade clara ou grade escura?

Não use silenciosamente o padrão 9:16 ou escuro. Se o usuário delegar a escolha, use luz quente.

Proibição visual absoluta

Este skill nunca introduz neon, brilho, bloom, bordas luminosas, sombras coloridas, orbes gradientes, lavagens de cor radial, gradientes ciano-roxo, vidro, ou iluminação cyberpunk. O movimento da câmera não pode transformar uma cena contida em uma demonstração de IA com 'vibe-coding'. Os acentos do produto permanecem planos e contidos.

Portal de referências aprovadas obrigatório

Complete antes de planejar ou codificar:

1. Inspecione as últimas 3–5 renderizações aprovadas relevantes para o mesmo projeto, produto, proporção, posicionamento ou mecanismo visual.
2. Abra as composições fonte e inspecione keyframes da câmera, temporização, espaçamento, tipografia, cores, densidade, entradas, saídas e esperas finais.
3. Inspecione clipes reais ou quadros representativos; nomes de arquivo sozinhos são insuficientes.
4. Faça um inventário de ativos autênticos: logotipos, mascotes, capturas de tela, gravações, filmagens e saídas anteriores.
5. Escreva um pequeno mapa de batidas explicando como o clipe continua o sistema aprovado.
6. Se não houver referência de projeto, use o fallback bloqueado: mundo editorial/físico branco-quente, tinta escura, neutros suaves, um acento de marca plano contido, sombras neutras e zero efeitos decorativos.

Prioridade de referência: mesmo vídeo → mesmo produto/série → mesma proporção/caso de uso → outros exemplos aprovados no repositório → fallback bloqueado.

Galeria canônica: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

Trabalho aprovado recente é a linha de base, não inspiração opcional. Não invente uma nova estética por novidade.

Ideia central

Construa um mundo maior que a viewport. Abra bem próximo a uma ação, segure enquanto ela se completa, revele contexto, viaje para o contraste/pagamento, então estabilize.

Painéis podem existir, mas devem compartilhar um mundo e uma relação espacial significativa. Evite cartões desconectados aparecendo independentemente em espaço vazio.

Câmera

Use uma timeline de keyframes compartilhada para ponto focal e zoom:

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* focal x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* focal y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Cena inteira em coordenadas do mundo */}
  </div>
</AbsoluteFill>

• As dimensões vêm do formato confirmado, nunca de um padrão oculto.
• A largura do mundo geralmente é 2–2,5 vezes a largura da viewport.
• Keys adjacentes repetidas criam esperas.
• Movimentos da câmera geralmente levam 14–24 quadros.
• Termine com duas keys quase idênticas para uma espera estável no editor.
• Câmera, cursor, efeitos e objetos conectados permanecem em um sistema de coordenadas.

Coreografia

1. Abra bem próximo a algo já em movimento.
2. Segure enquanto a ação principal se completa.
3. Revele seu sistema maior.
4. Viaje para o contraste/pagamento.
5. Afaste-se enquanto objetos de suporte terminam em sequência escalonada.
6. Estabilize para um corte limpo.

Regras:

• A câmera se move para a próxima ação; a ação se completa durante a espera.
• Uma ação principal por batida.
• Use micro-movimento apenas para mostrar estado: digitando, marcando, verificando, reproduzindo, progresso, movimento do cursor.
• Prefira transformação contínua em vez de substituição de cena.
• Prefira viagem suave em vez de chicotadas frenéticas.
• O movimento explica causalidade; nunca compensa um conceito fraco.

Autenticidade e texto

• Use logotipos reais, filmagens, capturas de tela, gravações, UI e dados verificados quando disponíveis.
• Nunca substitua por quadrados coloridos genéricos, marcas falsas, UI inventada ou métricas falsas.
• Nomes de produtos, nomes de arquivos, contadores, comandos, progresso e texto real da UI são permitidos.
• Não repita frases narradas nem adicione badges explicativos porque um quadro parece vazio.

Portal de rejeição de primeira passagem

Não mostre uma renderização até que cada resposta seja "não":

1. O formato ou fundo não foi confirmado?
2. Há algum neon, brilho, iluminação colorida, lavagem gradiente, painel de vidro ou tratamento de IA com 'vibe-coding'?
3. A cena é um conjunto de cartões genéricos desconectados em um vazio?
4. O escuro é usado sem o usuário escolhê-lo ou uma referência aprovada exigi-lo?
5. O movimento da câmera decora em vez de guiar a causalidade?
6. Ativos autênticos estão faltando quando disponíveis?
7. Elementos essenciais são ilegíveis no posicionamento escolhido do Instagram?
8. O resultado falha em corresponder ao espaçamento, densidade, materiais e ritmo de movimento da referência aprovada?

Revise em particular até que o portal seja aprovado.

QA e entrega

1. Renderize stills para a abertura, cada destino da câmera, transição, pagamento e espera final.
2. Compare ao lado das referências aprovadas quanto a enquadramento, densidade, identidade, contenção de materiais e acabamento.
3. Verifique se os ativos autênticos permanecem legíveis.
4. Verifique segurar → mover → segurar e que nenhuma ação está escondida durante a viagem.
5. Inspecione o MP4 completo para viagem vazia, cortes, quadros mortos, preenchimento genérico, neon/brilho e esperas finais fracas.
6. Entregue somente quando parecer o mesmo sistema visual aprovado.

Restrições técnicas

• Dirija o movimento com useCurrentFrame(), spring() e interpolate(); sem animação CSS.
• Os intervalos de entrada de interpolate() devem ser estritamente crescentes.
• Mantenha mundos moderados; grandes camadas com sombra/desfoque são caras e geralmente violam as regras visuais.
• Use numerais tabulares para dados em ticking.