madhavsomani/animation-skills

Reel explicativo em tela

Criado originalmente para um Reel de dicas sobre currículo em outubro de 2026 e depois salvo como fórmula reutilizável.

• Exemplo funcional: template/example-08-resume.html (a composição HyperFrames completa daquele Reel; os assets de mídia não estão incluídos).
• Capturas de tela: ../../docs/canvas-explainer/.

Regras gerais que se aplicam: manter o avatar na tela em pequenos trechos (cerca de 3 a 4 s cada) e entregar apenas o master em qualidade total. Motor: HyperFrames (fixar [email protected]). FFmpeg é apenas para preparação e QA.

A fórmula (manter tudo)

1. Uma tela preta infinita. Use #world com 2400x6400 e uma grade de pontos sutil. A câmera nunca corta; ela desliza com power3.inOut e um leve blur de movimento em movimentos grandes.
2. Tudo é desenhado ao vivo, na palavra falada.
   • Traços de marcador são caminhos SVG com um filtro feDisplacementMap áspero.
   • Rótulos manuscritos usam Ink Free, digitados com steps().
   • Cores: branco #f4f4ef, amarelo #ffd84a, azul #6f8cff, rosa #ff6fae, verde #7ee08a, vermelho #ff4b3e.
   • Setas e círculos vermelhos apontam para o elemento chave.
3. Artefatos reais de tecnologia, nunca apenas rabiscos genéricos. Um público de engenharia de software quer arquitetura real, código, terminais, capturas de tela reais e documentos reais (por exemplo, um currículo redigido), anotados com caixas e escrita à mão.
4. Avatar dentro de quadros esboçados na tela.
   • Quadros têm 405x720 em 9:16. A câmera dá zoom em um quadro (s = 1080/405) para que a filmagem dele fique em tela cheia; esse zoom é a transição. Anote sobre a filmagem com escrita à mão.
   • O total do avatar fica abaixo de 40% do tempo de execução (mire em cerca de 20%): um gancho de abertura, um meio 'pessoal' e o fechamento.
5. Sem tela vazia.
   • Cada região preenche a visualização y 120-1500.
   • Setas conectoras vermelhas desenham entre regiões durante os movimentos da câmera.
   • Um cabeçalho amarelo aparece quando a câmera chega.
   • Legendas ficam em y 1555-1720 em Ink Free 64px com palavras-chave em amarelo. Envolva o HTML da legenda em um <span> interno, ou o flex perderá os espaços.
6. Final.
   • A câmera faz zoom out para todo o mapa desenhado (s ≈ 0,31) atrás de um cartão final escurecido (0,58).
   • O CTA é falado na voz dele. Exemplo: 'Quer meu currículo? Comente 'currículo' e eu envio para você como modelo.' Mostre a palavra-chave grande em amarelo.
   • Nunca diga aos espectadores para não copiar o recurso compartilhado. O recurso é deles para usar.
7. Som.
   • Uma trilha musical sob a voz, esculpida com ~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <dir com node_modules/@hyperframes/core>. Aponte --core para qualquer pasta de projeto que tenha @hyperframes/core instalado.
   • Aumente a música nas pausas da voz e no zoom out.
   • Efeitos sonoros: clique de caneta em ticks/labels, digitação em código, virar página/whoosh em movimentos de câmera, swish-thud em pop-ups, sininho no final.
   • A música deve ser segura para Instagram (veja Música abaixo).

Etapas de construção

1. Entradas.
   • WAV de voz, normalizado a -16 LUFS: gancho + narração, concatenados.
   • Tempos das palavras palavra@segundos: JSON alinhado ou legendas clips.json, salvos como words.txt.
   • MP4 do avatar cujo tempo de mídia = tempo da voz menos a duração do gancho.
   • Imagens de artefatos reais.
2. Regiões do storyboard. Para cada batida, escolha uma origem no mundo e liste seus desenhos com tempos de palavras faladas. Mantenha o texto dentro da visualização de 1080px (Ink Free ≈ 0,5 em por caractere).
3. Copie template/example-08-resume.html para uma nova pasta de projeto e substitua os blocos de região, quadros (JPG de pôster sob cada `<video class=