video-animado

Vídeo animado (MP4 curto, renderizado na caixa)

Você escreve UMA página HTML cuja animação depende só do tempo t. O script scripts/renderizar.py abre a página no Chromium, chama __render(t) quadro a quadro, e o ffmpeg monta o MP4 (H.264, 30 fps). Um vídeo de 5 s leva cerca de 20 segundos para renderizar.

Passo a passo

1. Planeje antes de codar. Escreva no chat, em poucas linhas: formato, duração, cenas com tempos e o texto de cada uma. Exemplo para 5 s: cena 1 (0 a 1,8 s) gancho, cena 2 (1,8 a 3,6 s) ideia, cena 3 (3,6 a 5 s) fecho. Formato padrão: vertical 1080x1920. Horizontal: 1920x1080. Quadrado: 1080x1080.
2. Copie o template e adapte: cp ~/.claude/skills/video-animado/templates/composicao-base.html ./video.html Troque textos, cores e a função __render(t). Não mexa no motor (easings, tween, pose). Se mudar o formato, ajuste juntos o CSS de html, body, #palco e window.__tamanho.
3. Renderize: /opt/venv/bin/python ~/.claude/skills/video-animado/scripts/renderizar.py video.html video.mp4 (opções: --fps 30, --largura N --altura N). Mostra o progresso a cada 30 quadros e, no fim, caminho, duração e tamanho, conferindo a duração com o ffprobe.
4. Confira com os olhos. Extraia 3 quadros e olhe cada um com a ferramenta de leitura de imagem:

   for s in 0.5 2.5 4.5; do ffmpeg -y -loglevel error -ss $s -i video.mp4 -frames:v 1 q$s.png; done
   

   Procure texto cortado, fora da margem segura, sobreposto ou pequeno demais. Se achar, corrija e renderize de novo.
5. Entregue o MP4 ao aluno (anexo ou caminho do arquivo, como o canal permitir) e diga em uma linha o que tem em cada cena.

O contrato da página

• window.__duracao = 5; (segundos) e window.__tamanho = [1080, 1920];
• window.__render = function (t) { ... } desenha o estado EXATO do instante t, sempre do zero, sem depender do quadro anterior.
• Proibido: requestAnimationFrame, setTimeout, setInterval, CSS animation rodando sozinha, vídeo ou GIF embutido, imagens da internet. Tudo é calculado de t.
• Helpers do template: tween(t, inicio, fim, de, para, 'saida') devolve o valor interpolado; pose(id, {x, y, escala, rot, op, w, h, raio}) aplica o estado do elemento. Easings: suave, saida, entrada, volta, elastico, linear.
• Alternativa avançada: WAAPI com animation.pause() e animation.currentTime = t * 1000.
• Fontes: use só as da caixa (DejaVu Sans, Liberation Sans, Arial). Fonte da internet não carrega.