Explorador de Movimento de Código com Remotion

O que Explorador de Movimento de Código com Remotion faz?

Construa uma explicação abstrata como um sistema visual contínuo e editável. Mostre como cada conceito muda, em vez de decorar a narração com movimentos não relacionados.

Criado por Bingo (@DWCD-Bingo) e mantido sob a organização Vibe Motion.

Carregue as orientações relevantes

• Leia references/code-motion-design.md antes de cada produção.
• Leia references/motion-production-patterns.md antes de cada produção.
• Leia references/production-and-qc.md antes da implementação e da entrega final.
• Leia references/ui-motion-shot-library.md para trabalhos com UI, produto, fluxo de IA, foco neon, forma de onda, dashboard, ferramenta de design ou interface de alta fidelidade.
• Leia references/reference-reconstruction.md ao estudar ou reproduzir um vídeo de referência, renderização do After Effects, protótipo ou gravação de tela.
• Use assets/shot-library como a biblioteca inicial editável fornecida. Pesquise em assets/shot-library/shot-library.json antes de projetar um novo plano. Copie a biblioteca para o projeto de destino quando um componente reutilizável corresponder ao trabalho semântico; não edite a Habilidade instalada diretamente.
• Consulte a documentação do Remotion instalada ou a habilidade de melhores práticas antes de usar APIs desconhecidas.

Estabeleça o contrato de produção

1. Resolva o roteiro ou explicação aprovados, status da narração, autoridade das legendas, proporção de aspecto, taxa de quadros, duração, sistema de marca, fatos técnicos e formato de entrega.
2. Trate as legendas verificadas por humanos como autoridade de tempo quando houver narração. Se não houver narração, crie uma linha do tempo explícita de batidas e projete o vídeo para permanecer compreensível mesmo sem som.
3. Use apenas ativos fornecidos pelo usuário, licenciados, de domínio público ou claramente redistribuíveis.
4. Nunca invente comportamento de produto, dados numéricos, relações científicas ou resultados de interação.
5. Prefira um sistema visual parametrizado em vez de cenas únicas codificadas manualmente.

Execute o fluxo de trabalho

1. Converta linguagem em estados visuais

• Divida a explicação em batidas semânticas no nível de cláusulas.
• Para cada batida, registre:
  • narração ou afirmação na tela;
  • propósito narrativo;
  • estado de entrada;
  • verbo dominante;
  • transformação visível;
  • estado de saída;
  • foco do espectador;
  • transição para a próxima batida.
• Compile substantivos, ações, números, relacionamentos e mudanças de estado em atores visuais independentes.
• Identifique objetos persistentes que sobrevivem entre batidas.
• Escolha a representação precisa mais simples: UI, fluxo, diagrama, forma de onda, fórmula, gráfico, modelo espacial ou 3D.
• Escreva o plano em src/data/choreography-plan.json.

Portão: cada afirmação tem um trabalho de raciocínio visível, executor, resultado e transição.

2. Trave o sistema visual

• Defina a grade, área segura, espaçamento, tipografia, semântica de cores, profundidade, câmera e curvas de movimento.
• Escreva uma frase de ângulo de conceito descrevendo o mundo visual.
• Projete quadros estáticos representativos para o gancho, o mecanismo mais complexo e o final.
• Construa o quadro herói de máxima informação antes de projetar as entradas.
• Crie um registro de objetos persistentes e um plano de coordenadas do mundo.
• Decomponha objetos complexos em partes móveis significativas, em vez de animar capturas de tela planas.
• Mantenha conceitos idênticos visualmente consistentes durante todo o vídeo.

Portão: os quadros estáticos são lidos como um único sistema e o quadro complexo pode ser montado a partir de componentes editáveis.

3. Implemente movimento determinístico no Remotion

• Anime com useCurrentFrame(), interpolate(), spring() e intervalos de quadro explícitos.
• Não use transições CSS, keyframes CSS, valores aleatórios sem determinismo semeados ou animações de navegador com tempo independente.
• Mantenha os valores parametrizados por meio de props e esquemas Zod quando útil.
• Prefira React, SVG e HTML. Use Canvas, WebGL ou Three.js apenas quando o conceito precisar deles.
• Meça texto, limite intervalos, valide entradas numéricas e evite efeitos colaterais dependentes de quadro.
• Mantenha objetos persistentes montados e mude seu estado entre batidas.
• Componha dois a quatro átomos de movimento compatíveis em cada janela de revisão de quatro a seis segundos.
• Dê a cada janela fases de configuração, ação, resultado visível e transição.
• Congele todo filho dependente de tempo a partir do mesmo quadro de exibição quando o final precisar ser mantido.

Portão: a renderização é determinística, editável, tecnicamente precisa e estável em quadros arbitrários.

4. Preserve continuidade e causalidade

• Reutilize posição, identidade de objeto, escala, máscaras, direção e motivos de áudio entre transições.
• Transforme ou transfira um elemento significativo antes de introduzir o próximo.
• Use movimentos de câmera apenas para revelar hierarquia ou relacionamento.
• Evite repetições de redefinições de fade e escala em tela cheia.
• Mantenha pelo menos um invariante visual entre batidas adjacentes, a menos que uma redefinição de capítulo seja deliberada.
• Torne causa e efeito legíveis: entrada se move, processo reage, saída se torna visível e a câmera revela o sistema maior.

Portão: o vídeo silencioso permanece compreensível como uma explicação contínua.

5. Vincule narração, rótulos e som

• Dispare rótulos, valores, estados e feedback de interação em pistas exatas de legendas.
• Mantenha a narração claramente dominante sobre música e efeitos.
• Use ticks, impactos, varreduras e acentos tonais contidos apenas para eventos visíveis.
• Crie um mapa de eventos de áudio junto com o plano de movimento.
• Termine a música e o movimento com uma resolução intencional, em vez de um corte brusco.

6. Revise, renderize e aprenda

• Renderize primeiro o gancho, o mecanismo mais complexo, estados de equações/dados, transições e final.
• Inspecione quadros de entrada, ponto médio, máxima informação, transição e espera.
• Revise janelas de movimento contíguas e suas sobreposições, não apenas capturas de tela isoladas.
• Crie uma folha de contato cobrindo toda a linha do tempo.
• Verifique a espera do quadro final comparando dois quadros tardios pixel por pixel.
• Verifique corte de texto, áreas seguras, contraste de cor, correção de forma de onda/dados, ativos ausentes, picos de áudio, duração, taxa de quadros e codec.
• Salve evidências de revisão em qc/workflow-evidence.json.
• Registre correções e componentes reutilizáveis em qc/production-learning.json.

Portão: a renderização completa passa nas verificações de semântica, continuidade, causalidade, composição, tempo, técnica e licenciamento.

Rejeite

Rejeite interações imprecisas, dados inventados, movimento arbitrário, rótulos ilegíveis, diagramas de processo achatados, redefinições de slide genéricas, incompatibilidade narração/legenda, ativos não licenciados, caminhos pessoais codificados, renderização não determinística, revisão de janela de movimento ausente, verificações de espera de quadro final puladas ou cópias de referência com marca registrada apresentadas como modelos reutilizáveis.

Entregue

Retorne o vídeo final, projeto Remotion editável, linha do tempo, parâmetros de componente, ativos de entrada aprovados, faixas de áudio quando usadas, folha de contato, evidência de QC e uma lista curta de componentes reutilizáveis.

Exemplos fornecidos

• assets/showcase/code-motion-promo-30s.mp4: trailer de capacidade de 30 segundos.
• assets/showcase/ac-to-dc-explainer.mp4: exemplo de explicador científico.
• assets/shot-library: biblioteca de planos Remotion editável e catálogo pesquisável.