Communitygithub.com

remotion-reference-fidelity

Camada de fidelidade de estilo baseada em referência: análise, reprodução e generalização de gramática visual. Gatilhos: referência, reprodução de estilo, alinhamento de referência, gate de fidelidade. Para design sem referência, use rd-noref.

O que é remotion-reference-fidelity?

Este skill define a metodologia de fidelidade a referências (reference-fidelity) para animação de gráficos em movimento (MG) no pipeline de produção de vídeos koubo. Ele não é uma linha de produção paralela, mas sim uma camada de como ler fielmente uma referência e reproduzir sua lógica de argumentação. O objetivo é construir um sistema de movimento transferível, não um desenho único, preservando a lógica da informação, a hierarquia de evidências, o timing e o papel editorial da referência antes de polir detalhes visuais. É projetado para uso com o ecossistema Remotion, integrando-se a skills como `remotion-assembly` (para configurações de composição) e `remotion-design-system` (para tokens de design). O skill descreve seis gramáticas validadas para reprodução de referência, um processo obrigatório de análise antes da codificação (incluindo mapas de movimento), diretrizes de construção de sobreposição (overlay), regras de timing, portões de fidelidade obrigatórios (gates), disciplina de renderização e padrões de falha a serem rejeitados. Ele também inclui uma seção de generalização para novos vídeos com apresentador (talking-head), com um modelo de dados MgBeat, e um contrato de entrega que especifica os artefatos finais.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jincheng2026/jc-remotion-skills/tree/main/skills/remotion-reference-fidelity

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Referência MG Style

Construa um sistema de movimento transferível, não um desenho único. Preserve a lógica da informação, a hierarquia de evidências, o timing e o papel editorial da referência antes de polir detalhes visuais.

Posição no sistema atual

Este skill é a camada metodológica de fidelidade a referências, não uma linha de produção paralela. O pipeline koubo e suas fontes de verdade detêm os números concretos; este arquivo detém apenas "como ler fielmente uma referência e reproduzir sua lógica de argumentação". Delegue a eles e nunca reafirme seus valores aqui:

  • fps / resolução / contagens de quadros → remotion-assembly SKILL §0 (síntese fps/resolução corresponde ao material, use ffprobe primeiro, não assuma 60fps) + remotion-design-system references/motion.md §0 (segundo depois quadro, síntese real 30fps) + specs.md (fonte verdadeira de especificações medidas). Não codifique 60 fps ou 4K aqui.
  • tokens de design (cor / tipo / grade / raio / área segura) → remotion-design-system SKILL §1 + typography.md / texture.md.
  • modelo de tomada → layout.md (tomada de material A; tomada B escurecimento e PiP foi rejeitada pelo usuário, tomada sempre saída completa do personagem).
  • micromovimento persistente → motion.md §8/§9 (protagonista deve incluir Breathe; cada capítulo ≥1 movimento perceptível a olho nu).

Linha de produção: a entrega koubo atual é baked — OffthreadVideo de fundo + MG assado em composição única (Koubo071501.tsx / scenes/SceneNN.tsx), revisada como baked segmento mp4 e finalizada via cadeia master (assembly §4/§6). A linguagem "sobreposição alfa transparente / preview checkerboard / master alfa" abaixo descreve um modo de entrega alfa opcional apenas; ao entregar na linha koubo, leia "preview checkerboard" como "baked segmento preview" e "master alfa" como "baked master + cadeia master."

Princípio inegociável

Trate o MG como uma camada de argumentação anexada à fala:

  1. Identifique a afirmação da frase.
  2. Escolha a estrutura visual mínima que a comprove ou clarifique.
  3. Mantenha o falante visualmente dominante, a menos que a edição se torne deliberadamente uma tomada de mídia.
  4. Mude o estado apenas quando o significado falado mudar.

Não invente uma cena mais bonita, mas semanticamente diferente. Um redesign visualmente polido é uma réplica falhada quando suas evidências, sequência de estados ou função editorial diferem da fonte.

Selecione uma gramática de cena

Use uma destas gramáticas validadas, depois adapte conteúdo e timing:

  • Diagnóstico persistente + evidência transitória: mantenha cartões de risco/checklist estáveis enquanto uma captura de tela real aparece brevemente e sai.
  • Processo estável + frase sucessora: mostre o pipeline completo como um estado estabelecido, depois substitua-o por uma conclusão curta no limite da frase.
  • Evidência + veredito atrasado: deixe um cartão de evidência real sair primeiro; introduza o carimbo de veredito somente após o público ler os números.
  • Explicação multi-shot: use composição -> capítulo apenas -> identidade -> tomada de mídia; não achate tomadas distintas em um único painel.
  • Prova de citação + golpe quantitativo: captura de tela de citação real, anotação, contagem medida, palavra-chave enfatizada, então chip do falante/fonte.
  • Estado do sistema + credenciais progressivas: segure a matriz principal e revele apenas as credenciais mencionadas pela fala.

Estas seis são gramáticas de reprodução de referência. O sistema de batidas nativo da montagem koubo (sistema de etiquetas laterais / campos vermelho-verde / momento do golpe / hook·CTA / elevação do veredito) vive em remotion-assembly references/narrative.md — use-o ao criar um novo vídeo koubo, não duplique aqui.

Analise antes de codificar

Para cada segmento de referência:

  1. Verifique o arquivo fonte correto e o intervalo de tempo exato. Faça verificação cruzada de candidatos quando os nomes dos arquivos forem ambíguos.
  2. Extraia quadros no início, em cada limite semântico, em cada ponto médio de transição e no final.
  3. Escreva um mapa de movimento com tempo absoluto da fonte, quadro local, camadas visíveis, camadas entrando/saindo e a frase falada que causou a mudança.
  4. Separe o MG real de legendas, filmagens do apresentador, B-roll e o próximo take editorial.
  5. Meça âncoras, limites, opacidade e duração a partir dos quadros da fonte. Marque estimativas explicitamente.
  6. Use capturas de tela reais, pessoas, logotipos, artigos, clipes de notícias quando a referência se basear em evidências. Não desenhe manualmente UI de evidência falsa.

Se o mapa de movimento for incerto, pare antes da implementação e colete mais quadros.

Construa a sobreposição

  • Corresponda ao fps e resolução do projeto — koubo referência 1080p, síntese 30fps; use ffprobe primeiro, não assuma 60fps/4K (Nota de Posição; erro #19). Saída 4K é ×2 da base 1080p conforme design-system §1.
  • O modo de entrega decide o fundo: baked (koubo padrão) compõe MG sobre o OffthreadVideo de fundo em uma composição; modo alfa mantém o fundo do render transparente e envia uma composição de preview checkerboard separada.
  • Proteja a zona de legendas e o rosto e mãos do falante (tokens SAFE: cartões permanentes não ultrapassam x55%, zona de legendas y>82%, borda inferior de elementos da zona esquerda ≤y840 mais restrito — design-system §1; coordenadas da zona proibida de pessoas/zona direita veja layout.md).
  • Reutilize tipografia, cor, grade, raio e tokens de área segura do projeto de src/design/tokens.ts (design-system SKILL §1); não introduza um sistema de design paralelo nem reafirme valores de token aqui.
  • Armazene conteúdo e timing da cena em objetos de dados quando o padrão for reutilizado.
  • Exija metadados evidenceRef rastreáveis para material real. Gateie ativos fonte importantes com SHA-256 quando a substituição silenciosa invalidaria a fidelidade.
  • Prefira mudanças curtas de opacidade, posição ou escala atreladas ao significado (motion.md §6 três níveis de efeitos de movimento). Rejeite loops decorativos, fly-ins gratuitos e overshoot de mola (motion.md §11). Isto não é uma proibição de micromovimento persistente — a referência respira: elementos protagonistas devem incluir <Breathe>, fases alternadas, pequenos itens não incluem (motion.md §9), e cada capítulo carrega ≥1 movimento contínuo legível (motion.md §8). (A leitura anterior de "evitar respiração ambiente" estava errada contra a fonte e é substituída por motion.md §9.)
  • Preserve a hierarquia de opacidade editorial: HUD do capítulo é nítido; nomes de apoio, retratos, linhas do tempo e evidências contextuais podem ser mais escuros; a prova ou veredito atual recebe o maior contraste.
  • Um clipe fonte em tela cheia é uma tomada editorial opaca (tomada de material A, layout.md), não uma sobreposição translúcida. Modele-o como seu próprio shot/cena, com o falante saindo por toda a sua duração (saída completa do personagem, sem PiP — layout.md; PiP rejeitado).

Linguagem de timing

  • Comece do estado atual da fonte. Não repita a animação de construção quando a referência começa já montada.
  • Segure a informação tempo suficiente para ler; o estilo é orientado a estado, não em movimento constante.
  • Entradas/saídas pequenas são ~0.1-0.3s; converta para quadros no fps real da composição (segundo depois quadro, motion.md §0 — koubo 30fps → ~3-9 quadros). Meça a partir da fonte quando possível (specs.md fonte verdadeira de especificações). Nunca carregue uma contagem de quadros de 60 fps em uma composição de 30 fps (erro #19).
  • Permita escalonamento (stagger) apenas quando mapear para enumeração falada.
  • Deixe a evidência antiga sair antes de um veredito ou frase sucessora quando a referência o fizer.
  • Preserve sobreposições e revelações atrasadas. Nunca substitua uma sequência de fade/sobreposição por um corte seco por conveniência.
  • Termine no limite real do MG. Não estique um gráfico de 1,2 segundos sobre B-roll não relacionado.

Portões de fidelidade obrigatórios

Passe cada portão em ordem:

  1. Mapa de movimento: sequência de estados e limites verificados pela fonte.
  2. Portão estático: 3-6 quadros fonte versus réplica em momentos correspondentes.
  3. Portão dinâmico: um pequeno H.264 lado a lado — fonte à esquerda, nosso render à direita (baked segmento para koubo; preview checkerboard no modo alfa).
  4. Auditoria independente: outro revisor verifica timing, geometria, hierarquia de opacidade, ativos reais e estados extras/faltantes. Qualquer dimensão <7 ou existir violação nível FAIL = rejeitado (mg-judge + rubric.md, assembly §2.5).
  5. Lançamento master: renderize o master final somente após a comparação dinâmica e aprovação dinâmica final do usuário passarem (sensação de movimento é ponto cego de IA para quadros estáticos, lançamento master inclui aprovação final do usuário antes — assembly §2.5 gate ③; baked mp4 → cadeia master para koubo, assembly §6; master transparente no modo alfa).

O thread de implementação não deve auto-certificar-se. Uma correspondência de imagem estática não pode aprovar timing de movimento.

Disciplina de renderização

  • Use --bundle-cache=false após edições de código quando bundles Remotion desatualizados puderem esconder mudanças (erro #02: ○ = reutilizar imagem antiga).
  • Renderize previews pequenos para revisão — 1080p --scale=0.5, ou o serviço de segmento node scripts/render-service.cjs segment|stills|qc (assembly §6); uma composição checker apenas no modo alfa.
  • Para um reparo de timing estreito, renderize apenas o intervalo de quadros afetado (--frames=a-b), não a composição inteira.
  • Mantenha previews de revisão pequenos; nunca renderize um master grande especulativamente (armadilha "rodar render 4K automaticamente"; renderize apenas dentro do escopo confirmado pelo usuário/plano).
  • Renderize o master final apenas para uma composição aprovada e o codec de entrega solicitado; renders longos vão nohup … & disown, reconheça as linhas + no log (erro #09).

Padrões de falha a rejeitar

  • Redesign semântico apresentado como replicação.
  • Cartões abstratos substituindo capturas de tela reais ou evidências de notícias.
  • Primeiro quadro com aparência correta, mas estados posteriores errados.
  • Identidade, veredito ou conclusão aparecendo antes de sua deixa falada.
  • Grupos inteiros saindo quando a referência mantém uma camada âncora persistente.
  • Novos rótulos, taxonomias, carimbos ou conclusões ausentes na referência. (Breathe persistente do protagonista é obrigatório por motion.md §9 e não é considerado um elemento inventado — não o remova para corresponder a um still de aparência estática.)
  • Evidência ampliada até competir com o falante.
  • Legendas ou filmagens do apresentador acidentalmente assadas em um ativo destinado a reutilização.
  • Uma aprovação declarada sem comparação fonte versus saída.

Generalize para um novo vídeo com apresentador

Guarda de escopo: esta seção generaliza as seis gramáticas validadas de reprodução de referência — aplica-se apenas quando existe uma referência para selecionar gramáticas. Projetar batidas sem referência é um caminho diferente: remotion-assembly fluxo ponta a ponta passo 4 (selection.md tabela de correspondência de frases) + references/rd-noref.md (geração multi-opções em lacuna de gramática → painel de juízes → aprovação do usuário). Não force uma das seis gramáticas em conteúdo que não se encaixa.

Converta o roteiro em batidas semânticas. Para cada batida, preencha:

type MgBeat = {
  claim: string;
  grammar:
    | "diagnosis-evidence"
    | "pipeline-successor"
    | "evidence-verdict"
    | "multi-shot"
    | "quote-punch"
    | "system-credentials";
  startFrame: number; // todos os campos *Frame no fps da composição (segundo depois quadro, motion.md §0); nunca uma contagem de 60fps
  endFrame: number;
  cueFrame: number;
  persistentLayers: string[];
  transientLayers: string[];
  evidenceRef?: string;
};

Escolha a gramática a partir da afirmação, não de palavras-chave superficiais. Substitua cópia, ativos e quadros de deixa, preservando a lógica de estado da gramática. Se nenhuma gramática validada se encaixar, analise uma nova referência e adicione uma nova gramática apenas após ela passar pelos mesmos portões.

Contrato de conclusão

Entregue:

  • A composição entregue — cena(s) baked na composição koubo por padrão; um par de Sobreposição Transparente + Preview Checker apenas no modo alfa.
  • Metadados de evidência e gates de ativos onde aplicável.
  • Comparações estáticas em tempo correspondente.
  • Comparação dinâmica lado a lado.
  • APROVAÇÃO independente (qualquer dimensão ≥7 e sem violação nível FAIL — mg-judge + rubric.md, assembly §2.5) mais aprovação dinâmica final do usuário passada.
  • Uma nota concisa explicando qual gramática foi usada e por quê.

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

Habilidades Relacionadas