ai-video-render

ai-video-render: Renderização de Animação por Código

Quando usar

film.json existe e o estilo foi escolhido. Esta skill transforma o storyboard em imagens: uma página de renderização, capturas de quadros e um vídeo silencioso. Nenhum trabalho de narração acontece aqui.

O contrato de determinismo (innegociável)

• Cada imagem é uma função pura do tempo: window.render(t) desenha o quadro de qualquer momento. Sem requestAnimationFrame, sem setTimeout, sem transição CSS, sem estado salvo entre quadros para exportação.
• Toda aleatoriedade usa sementes fixas. Nunca use uma fonte aleatória não semeada ou um relógio real no caminho de renderização.
• Redefina o estado do canvas no início de cada quadro.
• A página expõe window.seek(t), window.render(t) e window.ready = true após o primeiro quadro bem-sucedido.
• O mesmo timestamp renderizado duas vezes deve produzir o mesmo quadro. Verifique isso com scripts/determinism-check.js antes de uma renderização completa.

1. Escolha um estilo (usuário escolhe, trava forte)

Recomende 1 estilo mais 2 alternativas diferentes, com diferenças visuais, motivos e limites, em style-options.md. Aguarde o usuário escolher. "Apenas execute" não é autorização para escolher.

Catálogos de estilo (busque upstream por conta própria; arquivos de prompt e fontes de demonstração não estão neste repositório):

• Flowchart plano, anotações manuscritas, jornal retrô, papel recortado retrô, colagem surreal, cartoon 3D, fundo preto tech (7 conjuntos, dashi-animationstyle).
• 15 estilos MG: vetor plano, arte de linha, isométrico 2.5D, render 3D, morph de formas, sticker explainer, cyberpunk HUD, colagem, vidro aurora, Bauhaus, synthwave, pixel art, movimento líquido, line boil quadro a quadro, legendas variadas.
• 36 receitas de estilos de arte (huashu-art-motion) e estilos lemo-opuscar: óleo impasto, aquarela, nanquim chinês, ukiyo-e, whiteboard explainer.

Regras para uso de estilo:

• Um filme usa um estilo, um tema e no máximo 2 gramáticas de animação.
• Aprenda o método a partir do prompt ou demonstração de um estilo, depois recrie o conteúdo para o novo tópico. Nunca copie a composição, personagens ou ativos de uma demonstração para o filme.
• Quando um prompt de estilo diz "não altere características de assinatura", mude apenas a semente criativa (história, marca, texto, paleta) ou a saída (por exemplo vertical 1080x1920, duração).
• Não use gradientes azul-roxo, céus estrelados roxo escuro ou ciano-roxo neon (lê-se como sabor óbvio de IA) a menos que o usuário peça explicitamente.
• O código nunca desenha um rosto humano realista. Use filmagens geradas por IA apenas para tomadas de personagens em tela verde, compostas em cenas construídas por código; sem capacidade de geração de imagem, mostre apenas mãos e costas.

2. Construa cena por cena

• Escreva a página de renderização a partir de templates/render-page.html e templates/render.js. Configure 1920x1080 por padrão (vertical: 1080x1920 com composição e legendas reposicionadas, nunca um quadro horizontal redimensionado).
• Construa uma cena de cada vez. Renderize 3 quadros fixos por cena (início, meio, fim) e verifique transbordamento de texto, sobreposição, tamanho do assunto e duração na tela. Corrija a cena antes de prosseguir.
• Para filmes com mais de 30 segundos, renderize uma amostra de baixa resolução sem desfoque de movimento primeiro, confirme, depois renderize a versão completa.
• O estilo de render 3D é a exceção: renderize imagens no Blender, adicione palavras e granulação na página web.

3. Renderize e monte

• Chrome headless captura uma captura de tela por quadro na taxa de quadros do filme. Monte com ffmpeg (H.264, CRF 16). Mantenha a faixa de áudio fora daqui; a narração é mixada na próxima skill.
• Mantenha uma linha do tempo para som e imagem: cortes e ações-chave ficam na grade de batida ou na linha do tempo da narração.
• Verifique com ffprobe: H.264, 1920x1080 (ou 1080x1920), 30 fps, contagem de quadros corresponde à duração do film.json vezes fps.

Contrato de saída

• render-page.html + render.js (a página de renderização do filme).
• frames/ (capturas por quadro).
• film.mp4 (imagem silenciosa).
• render-report.md (resolução, fps, contagem de quadros, resultado da verificação de determinismo).

Regras

• Uma verificação que não foi executada é escrita como "não executada". Nunca afirme que uma renderização passou em uma verificação que não aconteceu.
• Não apresente uma página HTML, um arquivo intermediário silencioso ou um prompt como o filme finalizado.
• As imagens de referência são do próprio usuário ou licenciadas; o filme finalizado nunca contém a imagem original.