so2bin/anim-skill

anim-skill · Geração de animação ponta a ponta

Um tema entra, um vídeo sai. Os quadros são todos desenhados quadro a quadro por código (Remotion + React), sem depender de bancos de素材, modelos generativos de vídeo ou imagens externas.

Estilo é plugin, voz é plugin, o fluxo é fixo. Adicionar um novo estilo não altera o fluxo, trocar o motor de voz não altera o fluxo.

---

Quando usar

• "Crie uma animação explicativa sobre X"
• "Transforme este documento/aula em vídeo"
• "Adicione narração a este vídeo"
• "Refaça com o estilo X"
• "Verifique se há cintilação ou quadros vazios neste vídeo"

Não usar em: projetos que precisam de素材 reais, narrador em vídeo (persona ao vivo), renderização 3D (que exige Blender).

---

Entrada: Dois modos, decida primeiro

Modo	Gatilho	Passo adicional
A · Tema	Usuário deu apenas um tópico ou frase	Primeiro faça pesquisa (fatos, números, equívocos comuns), depois entre no design
B · Documento	Usuário já forneceu um documento temático (aula, whitepaper, slides)	Primeiro faça refinamento e correção (complete dados, uniformize termos, marque parágrafos não visualizáveis), depois entre no design

Após decidir, repita o plano em voz alta antes de começar: modo A/B, duração N segundos, estilo, público-alvo. Se duas dessas quatro coisas não estiverem claras, pergunte. Não adivinhe.

---

Seis fases (ordem fixa, não pule)

0 PREFLIGHT → 1 Conteúdo → 2 Storyboard → 3 Construção → 4 Dublagem → 5 Validação e entrega
                                    ↑                ↓
                                    └── Retrabalho ←──────┘

0 · PREFLIGHT (único, 2 minutos)

node <skill>/scripts/preflight.mjs

Verifica node / npm / ffmpeg / navegador; lista os motores de voz disponíveis na máquina. Se qualquer item estiver faltando, avise claramente – não espere a renderização para descobrir.

1 · Conteúdo (A pesquisa / B refinamento)

Gera research.md: tese em uma frase, 3–6 fatos de suporte, números e fontes, erros comuns a evitar, o que o público já sabe e o que não sabe.

• Modo A: Foco em verificação. Todo número precisa de fonte; se não encontrar, marque como "a confirmar". Nunca invente.
• Modo B: Baseie-se no original, apenas complete, não altere. Marque frases do original que não podem ser visualizadas (animação só consegue desenhar ações, comparações, mudanças).

2 · Storyboard

Gera plan.md (formato em references/storyboard.md): uma linha por cena – intervalo de quadros, imagem, primitiva de movimento, legenda.

Critérios rígidos (se não atendidos, reescreva):

• Cada cena tem um protagonista, ocupando ≥1/3 da altura da área de conteúdo (gráficos ≥170px, letras grandes ≥96px e linha inteira ≥300px)
• O protagonista entra no 1º ou 2º batida da cena
• Apenas três tamanhos: protagonista ≥170 / coadjuvante 60–110 / legendas 22–30
• Pelo menos um "momento de destaque" no filme inteiro (frase de tese, entrada do protagonista, payoff final – escolha um). Não use decoração para compensar.

3 · Construção

node <skill>/scripts/scaffold.mjs <diretório-do-projeto> --title "Título" --style <id-do-estilo>

Seguindo o brief do estilo (styles/index.json), escreva src/scenes/*.tsx e conecte as cenas com <Series>.

Regras de ferro (violação quebra a renderização ou estraga o filme):

1. Tudo derivado de useCurrentFrame(). Proibido Math.random(), Date.now(), contadores com setState. Aleatoriedade determinística: hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453).
2. Cada interpolate() deve ter {extrapolateLeft:'clamp', extrapolateRight:'clamp'}. Se faltar um, quadros fora da cena voam para fora.
3. Proibido CSS transition / animation / @keyframes. Animações apenas com interpolate e spring.
4. Não importe素材 externos ou dependências pesadas (three.js / GSAP / imagens). Para visuais, desenhe SVG e gradientes CSS.
5. Primitivas de desfoque SVG: no máximo 12 por quadro; elementos com filter: blur(): no máximo 15 por quadro, senão a renderização fica 10x mais lenta.

4 · Dublagem (opcional)

node <skill>/scripts/srt.mjs <diretório-do-projeto>            # Gera SRT a partir do storyboard
python <skill>/scripts/narrate.py <video> --provider edge|volc --voice <id>

• Pode entregar sem dublagem (por exemplo, para aulas presenciais).
• Com dublagem: gere o SRT primeiro, depois sintetize. A linha do tempo é baseada nos números de quadros da renderização, não em estimativas.
• Motor é plugin. Veja references/voice.md.

5 · Validação e entrega

python <skill>/scripts/qc.py <video>          # Quadros vazios / tamanho do elemento principal
python <skill>/scripts/qc_flicker.py <video>  # Cintilação / localização de cortes bruscos

Dois critérios rígidos (veja references/qc.md):

• Quadro vazio: maior objeto na área de conteúdo <110px por mais de 45 quadros → defeito; <80px → bloqueante
• Cintilação: desvio do brilho local mediano maior que 6 (transição 0/1) → defeito

Lista de entrega: <slug>.mp4, <slug>.srt, plan.md, research.md, src/ (projeto editável), README.md (como modificar, como re-renderizar).

---

Plugin de estilo

styles/index.json contém 15 estilos embutidos, cada um é um brief executável (cor de fundo, tinta, 7 cores, espessura de linha, tremor, brilho, textura, fonte, clima, legibilidade de projeção, para o que serve).

Chamada: --style neon / --style paper / --style crayon …

Adicionar novo estilo: acrescente uma entrada em index.json + coloque um brief em styles/, não precisa alterar o fluxo, scripts ou templates. Veja o contrato de extensão em references/styles.md.

Dica para escolher estilo: primeiro filtre por "legibilidade de projeção" (dá para ver no fundo da sala?), depois por "clima". Papel artesanal/giz de cera são bons para crianças, Neon/mínimo são bons para salas com projetor ruim.

---

Plugin de voz

Dois provedores internos:

provedor	custo	requisito	observação
edge	Gratuito	Nenhum	Voz neural Microsoft Azure, tom de locução
volc	0,0003 yuan/caractere	APPID + API Key	Voz Doubao, próxima de humana; contas novas têm crédito grátis

Adicionar novo motor: implemente synthesize(text, voice) -> mp3 bytes e registre em scripts/tts/<provider>.py; narrate.py não precisa ser alterado. Veja references/voice.md.

---

Auto-inspeção antes da entrega (marque cada item)

• remotion render código de saída 0; ffprobe número de quadros = número de quadros planejado
• qc.py sem itens bloqueantes; qc_flicker.py sem picos exceto cortes de capítulo
• Todos os interpolate com clamp (grep -c "interpolate(" = grep -c "extrapolateLeft")
• Sem Math.random / Date.now / CSS animation
• Legendas sincronizadas com o vídeo (verifique 3 quadros de batida)
• Fonte chinesa instalada localmente (senão a renderização produz quadrados)

---

Resumo de uma página

node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/meu-filme --title "Título" --style paper --seconds 20
cd videos/meu-filme && npm install
node <skill>/scripts/render.mjs . main out/meu-filme.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/meu-filme.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/meu-filme-volc.mp4

Detalhes em references/: pipeline.md (cada fase detalhada), storyboard.md (template de storyboard), styles.md (catálogo de estilos e extensão), voice.md (voz e extensão), qc.md (critérios de validação), render-env.md (armadilhas de ambiente: sandbox Windows, TEMP, caminho do navegador, parâmetros ffmpeg).