xiaoxiao8096/code-motion-video-skill

Especificação para Criação de Vídeos Animados com Código Puro

Cenas, animações, transições, música, efeitos sonoros, tipografia e layout — tudo gerado exclusivamente por código. Nenhum modelo de geração de vídeo, amostragem ou música gerada por IA é utilizado. Cada fase produz um artefato que deve ser revisado pelo cliente antes de prosseguir.

Stack recomendada: Remotion (React) para cenas, Python + NumPy/SciPy para síntese de áudio, FFmpeg para montagem final. Alternativas viáveis: Motion Canvas, Revideo, Manim, HyperFrames — o fluxo permanece o mesmo.

1. Definir Requisitos

• Protagonista (produto, marca, pessoa, evento), público-alvo, nomes ou elementos que podem ou não aparecer. Se não especificado, assuma que se dirige a "qualquer espectador".
• Duração (comum: 15–60 segundos), proporção (horizontal 1920×1080, vertical 1080×1920 ou quadrado), taxa de quadros (versão final recomenda 60 fps), plataforma de publicação.
• Leia os materiais oficiais do protagonista (site, artigos publicados, documentação) e extraia citações literais: como ele se descreve, seus principais diferenciais e tom de voz. Fatos no vídeo devem vir exclusivamente dessas fontes.

2. Pesquisar Referências Open Source

Cada referência deve ser verificada como existente, registrando URL, licença e relevância. Não inclua referências que não puder confirmar. Categorias comuns:

• Frameworks de vídeo e seus repositórios de exemplo: Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• Sistemas de design e paletas: Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• Gradientes e fundos com shaders: shadergradient, whatamesh, three.js.
• Animações: Motion, react-spring, anime.js, awesome-creative-coding.
• Áudio: Tone.js, jsfxr, ZzFX, tonal.
• Tipografia: Use apenas fontes com licença comercial (ex.: SIL OFL). Para chinês: Noto Sans SC, Noto Serif SC, Smiley Sans (apenas itálico, indicado para títulos), LXGW WenKai. Para ocidentais: Inter, Space Grotesk, Unbounded, JetBrains Mono.
• Ícones: Lucide, Tabler, Phosphor.
• Guias de estilo textual: chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• Logotipos ou assets especificados: localize os arquivos originais, verifique a licença e se são marcas registradas. Marcas registradas sem autorização só podem ser usadas em prévias internas; autorização prévia é necessária para publicação pública.

3. Escrever o Roteiro (sem renderizar ainda)

• Frase tema e tom geral.
• Linha do tempo unificada: defina um BPM (ex.: 120 BPM, 2 segundos por compasso). Cada ponto de edição deve cair na linha do compasso ou no ritmo. Todos os tempos são registrados como números de frame na taxa de quadros da versão final, armazenados em timeline.json — usado tanto para cenas quanto para áudio.
• Storyboard: para cada cena, registre código de tempo, intervalo de frames, texto na tela, descrição visual, animações (curvas de easing ou parâmetros de mola), sons.
• Tabela de transições: cada transição é projetada individualmente, incluindo abertura e encerramento. Descreva a técnica (wipe com máscara, morph, match cut, avanço através de portal, ampliação de elemento compartilhado, wipe com bloco de cor, flip, etc.), intervalo de frames, easing, elementos que transitam para a próxima cena, som e queda na batida.
• Sistema visual: paleta de cores (hex), grade e margens, combinações tipográficas (tamanho, peso), tratamento de fundo.
• Música: tom, progressão de acordes, estrutura de seções, método de síntese de cada instrumento, correspondência com pontos de edição.
• Lista de efeitos sonoros: quais efeitos em cada cena, como sintetizá-los.
• Gere 4 quadros estáticos de estilo usando HTML + navegador headless, mais 1–2 imagens de decomposição de transição (estados intermediários dispostos em uma linha).

4. Opções de Direção Visual

Caso o estilo não esteja definido ou haja objeções do cliente, produza 3–4 direções visualmente distintas (ex.: revista brilhante, gradiente quente com vidro fosco, sticker pop colorido, grid suíço, tech escuro). Cada uma deve conter: paleta, fundo, tipografia e inspirações. Gere um quadro do mesmo frame da cena para cada opção, e monte uma imagem comparativa para escolha. Storyboard e transições permanecem inalterados; apenas o visual muda.

5. Produção

• Cenas: Fontes devem estar em arquivos locais, carregadas antes da renderização. Todas as animações são baseadas no número do frame; animações em tempo real baseadas em SVG, CSS ou JS (executadas pelo navegador) devem ser convertidas para cálculo por frame para garantir resultados determinísticos.
• Animações: Para estilo vibrante, use molas com overshoot e squash-and-stretch. Para estilo contido, use easings suaves. O overshoot pode causar valores de escala negativos; trunque se necessário.
• Áudio: Sintetizadores próprios (ex.: sawtooth detuned para pads, FM glockenspiel, Karplus-Strough para cordas dedilhadas, sweep de seno para kick drum, ruído filtrado para hi-hat e palmas, sidechain compression, reverb). Efeitos sonoros usando ruído, varredura de frequência e ressonância. Você pode projetar um som de marca de 2 a 3 notas, usado na abertura e encerramento.
• Ao gravar WAV, verifique a profundidade de bits e normalização; caso contrário, o volume pode diferir em dezenas de dB. Use FFmpeg para normalizar a loudness para o alvo da plataforma (geralmente -14 LUFS para web), deixando margem de pico.
• Montagem: H.264 + AAC, faststart ativado.
• Em caso de pouca memória, reduza o paralelismo de renderização.

6. Pré-visualização

• Primeiro renderize uma prévia completa em baixa resolução (ex.: 960×540, 30 fps) com a mixagem final de áudio, para confirmar ritmo.
• Auto-inspeção: use ffprobe para verificar duração, número de frames e trilhas de áudio; extraia quadros em intervalos fixos para montar um contact sheet, verificando sobreposições, caracteres ausentes ou quadrados vazios; busque no código por conteúdo que não deveria estar presente.
• Ao entregar a prévia, liste riscos conhecidos (ex.: transições que podem parecer muito rápidas, sons verificados apenas numericamente sem audição humana).

7. Remover Tom de IA nos Textos

• Elimine construções como "não é... mas sim...", tríades de paralelismo, slogans vazios, tom promocional e empilhamento de substantivos abstratos.
• Use cenários concretos e números reais. Ritmo coloquial: uma ideia por frase, encaixe no ritmo.
• Insira espaços entre chinês e inglês, e entre chinês e números.
• Forneça uma tabela de antes/depois para cada cena.

8. Versão Final

• Conteúdo idêntico à prévia aprovada, apenas com especificações elevadas: 1920×1080, 60 fps, CRF 16–18, yuv420p, AAC 320 kbps.
• Use ffprobe para verificar especificações. Extraia keyframes para verificar nitidez, especialmente em áreas corrigidas.
• Se o arquivo for muito grande, produza uma versão compactada para compartilhamento.
• Se necessário, re-layout usando a mesma timeline para exportar em vertical ou outras proporções.

Estrutura de Arquivos

project/
  plan_v*.md        # Roteiro (novo arquivo por versão)
  frames*/          # Arquivos HTML e quadros de estilo
  fonts/  assets/
  timeline.json     # Timeline compartilhada entre cenas e áudio
  video/            # Engenharia de vídeo
  audio/compose.py  # Script de síntese de áudio
  out/              # Prévia, versão final, screenshots