SonuSV7719/cinematic-camera

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 surgindo em um vazio.

Intake Obrigatório

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

Qual formato você deseja: inserção de meia tela 4:3 para Instagram ou tela cheia 9:16 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, esferas gradientes, lavagens de cor radiais, gradientes ciano-roxo, glassmorphism ou iluminação cyberpunk. O movimento da câmera não pode transformar uma cena contida em uma demo de IA com vibe codificada. Os acentos do produto permanecem planos e contidos.

Portão de Referência Aprovada Obrigatório

Complete antes de planejar ou codificar:

1. Inspecione os últimos 3 a 5 renders aprovados relevantes para o mesmo projeto, produto, proporção, posicionamento ou mecanismo visual.
2. Abra composições de origem e inspecione keyframes da câmera, temporização, espaçamento, tipografia, cores, densidade, entradas, saídas e pausas finais.
3. Inspecione clipes reais ou quadros representativos; somente nomes de arquivo 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 breve mapa de batidas explicando como o clipe continua o sistema aprovado.
6. Se não houver referência de projeto, use a alternativa fixa: mundo físico/editorial em off-white quente, tinta escura, neutros suaves, um acento de marca plano e 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 → alternativa fixa.

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 janela de visualização. Abra bem próximo a uma ação, segure enquanto ela é concluída, revele o contexto, viaje para o contraste/desfecho, depois 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.

Rig da Câmera

Use uma única linha do tempo 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 janela de visualização.
• Keys adjacentes repetidas criam pausas.
• Os movimentos da câmera geralmente duram de 14 a 24 quadros.
• Termine com duas keys quase idênticas para uma pausa estável na edição.
• 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 é concluída.
3. Revele seu sistema maior.
4. Viaje para o contraste/desfecho.
5. Afaste enquanto os 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 é concluída durante a pausa.
• Uma ação principal por batida.
• Use micromovimento apenas para mostrar estado: digitação, tique, verificação, reprodução, progresso, movimento do cursor.
• Prefira transformação contínua em vez de substituição de cena.
• Prefira viagem suave em vez de guinchos frenéticos.
• O movimento explica causalidade; nunca compensa um conceito fraco.

Autenticidade e Texto

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

Portão de Rejeição de Primeira Passagem

Não mostre um render até que toda 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?
3. A cena é um conjunto de cartões genéricos desconectados em um vazio?
4. O escuro é usado sem o usuário ter escolhido ou uma referência aprovada exigir?
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 para o Instagram?
8. O resultado não corresponde ao espaçamento, densidade, materiais e ritmo de movimento da referência aprovada?

Revise em particular até que o portão seja aprovado.

QA e Entrega

1. Renderize stills para a abertura, cada destino da câmera, transição, desfecho e pausa final.
2. Compare com referências aprovadas para enquadramento, densidade, identidade, contenção de materiais e polimento.
3. Verifique se os ativos autênticos permanecem legíveis.
4. Verifique pausa → movimento → pausa e se nenhuma ação está oculta durante a viagem.
5. Inspecione o MP4 completo para viagem vazia, cortes, quadros mortos, preenchimento genérico, neon/brilho e pausas finais fracas.
6. Entregue apenas quando parecer o mesmo sistema visual aprovado.

Restrições Técnicas

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