risingjerry/motion-skill

Curta de Motion Graphics com Código (motion)

O vídeo é escrito em código: cada frame é calculado a partir do tempo t, então "aqui mais lento" é só alterar um número e renderizar de novo, sem refilmar. Nenhum modelo de IA de geração de imagem ou vídeo é usado; tudo na tela vem de ativos reais ou código.

Escolha a Camada

As três camadas usam o mesmo fluxo, mas cada uma é mais parecida com filmagem real e mais lenta. Escolha de acordo com o que o vídeo precisa; pode misturar.

Camada	O que é a imagem	Ideal para	Ponto de partida
1. Motion 2D	Logotipo real, capturas de tela reais, formas que se transformam	Apps, software, abertura de marca	templates/2d.html
2. 3D no navegador	Cartões de interface em espaço 3D, câmera voando; transições silhueta para live-action	Demonstrações de múltiplas telas, vídeos que precisam de live-action	templates/3d.html, scripts/silhouette.py
3. Blender Studio	Modelos reais de produtos, uma luz, materiais realistas	Produtos físicos como fones, celulares, copos	scripts/blender/studio.py

Detalhes: references/layers.md.

Fluxo (na ordem, sem pular etapas)

1. Pergunte claramente, reúna ativos reais. O que é o produto, para quem, duração, plataforma de exibição, o que o espectador deve fazer no final. Use sempre ativos reais: Arquivo oficial do logo, capturas de tela reais do dispositivo (apague notificações, avatares, números de telefone), cores e fontes da marca. Não use imagens promocionais da loja de aplicativos como interface, não desenhe o logo de memória. Para produtos físicos, tire fotos de vários ângulos, de preferência fotos tiradas pelo próprio usuário, para depois comparar as proporções do modelo.
2. Defina o final. No final, deixe apenas o ícone e o logotipo (ou corte para live-action). Não adicione frases como "Baixar agora" ou "Abra o XX", nem coloque texto de isenção de responsabilidade "conceito" (coloque na descrição se necessário).
3. Crie um storyboard numerado, aguarde aprovação. 5–10 cenas, cada uma com: período de tempo, imagem, ação, como transicionar para a próxima, texto na tela. Escreva shots.json, execute node scripts/render.mjs board shots.json board.png para gerar uma imagem e mostrar. Só continue após aprovação — é mais barato mudar aqui. Formato em references/storyboard.md.
4. Monte a página. Copie o template e templates/motion-kit.js para a pasta de ativos. Todos os beats são escritos no BEATS no topo da página; mude o ritmo alterando apenas este local. Convenções da página em references/html-engine.md.
5. Verifique frame a frame, depois mostre. render.mjs still captura momentos-chave (3–4 pontos por transição, não apenas frames parados), scripts/sheet.py monta em uma imagem, revise você mesmo. Depois execute scripts de verificação:
   • render.mjs probe + scripts/layout_check.py probe: texto a pelo menos 40 px do objeto principal (4K), objeto principal próximo ao centro.
   • 3D: scripts/blender/motion_check.py (clipping, rotação máxima de 6° por frame, velocidade de rotação suave), scripts/seam_check.py (costura de fechamento ≤ 1 px). Lista em references/checklist.md.
6. Renderize apenas em 4K. node scripts/render.mjs video page.html NomeDoVideo-4K.mp4 --scale 2 (1920x1080 → 3840x2160). Apenas uma renderização 4K ou Blender por vez no mesmo computador. Extraia frames do vídeo 4K final para verificação: python3 scripts/sheet.py video ....
7. Adicione som só depois que a imagem estiver definida. Qualquer alteração na imagem desloca todos os beats. Trilha sonora e efeitos sonoros são obrigatórios; o beat mais forte da trilha deve coincidir com o ponto-chave da imagem; -14 LUFS no geral, pico verdadeiro não superior a -1 dBTP; stream de vídeo copiado sem reencodificação. Veja references/sound.md.
8. Revisões. A cada rodada, faça backup, após alterações refaça a verificação de frames, explique em linguagem clara o que mudou. Salve como nova versão, não sobrescreva nem apague arquivos do cliente. Indique claramente o que foi verificado: frame estático não é igual a reprodução, ver imagem não é igual a ouvir a mixagem.

Regras para um vídeo bonito

Explicação completa em references/transitions.md e references/blender-3d.md, aqui estão os itens essenciais:

• Cada cena evolui da anterior. Sem fade in/out, sem crossfade. Um objeto se transforma, vira, se desdobra, se recolhe; o olhar do espectador não precisa reencontrar algo.
• Ação centralizada. Imagine uma mira no centro da tela; o protagonista fica sempre perto dela.
• A tela está sempre em movimento. Mesmo cenas paradas devem ter um zoom lento ou deriva.
• Um movimento, uma curva. Zoom só para frente, não para trás; rotação contínua, sem voltar no meio. Aceleração rápida, desaceleração lenta, com tempo prolongado para a desaceleração.
• Texto curto, emerge de desfocado para nítido, sem saltos ou aumentos repentinos. Texto não pode sobrepor o objeto principal.
• 3D usa apenas uma luz, fundo escuro. Isso é a maior parte do visual "tipo estúdio".
• 3D deve ser fisicamente plausível: fechamento perfeito; objetos não se atravessam; troca de posição entre dois objetos faz uma órbita 3D, não uma linha reta; rotação suave, sem saltos.
• Compare com fotos reais do produto para ajustar proporções, cantos arredondados e posições de aberturas no modelo.
• Transição silhueta começa com um close-up e depois abre, cortando para live-action. Veja references/silhouette.md.
• Áudio e vídeo só se movem juntos, sem alteração de velocidade ou tom.

Regras de conduta

• Marca: Trabalhe apenas com marcas que o cliente possui ou tem permissão para usar. Marcas de terceiros são apenas para exercícios; não finja ser oficial, não anuncie, não imite campanhas reais.
• Ativos: Use apenas ativos, fontes, músicas, modelos que o cliente criou ou tem licença; verifique se a licença cobre este uso.
• Alegações: Números e afirmações no vídeo devem ser verdadeiros e com fontes; não invente dados ou avaliações.
• Privacidade: Remova informações pessoais de capturas de tela e gravações; pessoas que aparecem devem consentir.
• Serviços pagos (narração, música por IA, etc.) consomem créditos do cliente; use apenas se solicitado.

Lista de Scripts

Script	Função
scripts/render.mjs	Página HTML → frame estático / mp4 4K / registro de posição (probe) / storyboard (board)
scripts/sheet.py	Extrai frames de frames estáticos ou vídeo final → imagem de verificação com timestamps (da resolução original)
scripts/layout_check.py	Distância entre texto e objeto principal, verificação de centralização
scripts/seam_check.py	Deslocamento de costura entre duas peças em posição real de câmera (pixels)
scripts/blender/studio.py	Cena de estúdio com uma luz + render EEVEE/Cycles, aceita GLB/glTF/USDZ/OBJ/FBX, --demo com modelo de exemplo
scripts/blender/motion_check.py	Verificação de clipping frame a frame, velocidade angular, pico de rotação
scripts/silhouette.py	Extrai máscara de pessoa (macOS Vision, opcional) → silhueta vetorial suave, pode abrir de close-up
scripts/audio/synth.py	Síntese de efeitos sonoros e base de trilha sonora em código (livre de direitos autorais)
scripts/audio/mix.py	Alinha trilha sonora com beats, coloca efeitos nos beats, sidechain, normaliza loudness, insere no vídeo
scripts/encode.py	PNGs frame a frame → mp4
scripts/doctor.py	Verifica dependências, o que falta e como instalar

Quando ler qual arquivo

Você está…	Leia
Escolhendo camada, estimando esforço	references/layers.md
Escrevendo storyboard	references/storyboard.md
Escrevendo página HTML, renderizando	references/html-engine.md
Projetando transições entre cenas	references/transitions.md
Fazendo 3D de produto físico	references/blender-3d.md
Fazendo silhueta, integrando live-action	references/silhouette.md
Adicionando trilha e efeitos	references/sound.md
Autoverificação antes da entrega	references/checklist.md
Algo na imagem não está certo	references/pitfalls.md

Ambiente

Node.js 20+, Python 3.9+ (numpy, Pillow, opencv-python-headless), ffmpeg, Google Chrome ou Chromium. Camada 3 precisa de Blender (gratuito); a extração automática de silhueta precisa de macOS 14+, outros sistemas usam outras ferramentas para gerar máscaras. Antes de começar, execute python3 scripts/doctor.py e informe o que falta e como instalar. Se o diretório da Skill tiver .venv, os scripts Python usam .venv/bin/python (Windows: .venv\Scripts\python); no Windows, substitua python3 por python.