ThomasHMD/motion-design

motion-design: o workshop (Remotion, tema, sons, música)

Tudo é local e determinístico: mesmo código = mesmo MP4. Nenhuma imagem ou vídeo gerado por IA.

A stack

Peça	Ferramenta	Onde
Animação	Remotion 4.0.529 (React / TSX), versões fixadas em package.json	src/; npx remotion add <package> para mais um módulo
Tema	cores, fontes, tamanhos, margens	src/illustration/theme.ts (lido pelas constantes C e F de src/illustration/scenes/kit.tsx), fontes em public/fonts/
Módulos Remotion	transições, efeitos, gsap, three, noise, paths, shapes, motion-blur, light-leaks, starburst, rough-notation, captions, layout-utils, lottie	package.json
Composições gráficas	BrandedVideo (cenas em tela cheia), LowerThirdTrack (barras de título, títulos de seção), Screencast (demonstrações do site), Scene (catálogo de cenas), ControleTexte (verificação de texto), FondAnime (fundo animado em loop; seu grão é feito por scripts/make-grain.py)	src/illustration/, declarado por Compositions.tsx, conectado em src/Root.tsx
Cues compartilhados	tempos-chave em segundos, lidos pela animação E pelo som	src/<project>/cues.json
Música	uma partitura escrita em Python em um sintetizador numpy (scripts/synth.py: piano elétrico FM, pad, baixo, percussão, crepitar de vinil, reverb)	music/<project>.py, modelo: music/example_pad.py
Efeitos sonoros	paleta sintetizada: leia reference/sound-palette.md antes de qualquer som. Receitas de sintetizador scripts/make-sfx.py -> public/sfx/*.wav + palette.json; vocabulário de gestos scripts/son.py (um plano nomeia um gesto, nunca um arquivo; listas são um cartão colocado por item por padrão, son.LISTES; son.releve: uma lista numerada dos sons de um vídeo, para ser revisada por número); scripts/palette-import.py (uma paleta de gravações reais, mesmos nomes de arquivo, volta ao padrão); scripts/sfx.py (alguns sons extras: obturador, clique de foco, whoosh)	scripts/
Mixagem	música + efeitos sonoros + voz, música com volume reduzido sob a voz, volume alvo EBU R128, pico verdadeiro limitado a -1.5 dBTP (limitador superamostrado, apenas quando ultrapassa)	scripts/mix.py
Verificações	equilíbrio tonal por oitava, volume	scripts/ltas.py, mix.py

Licenças. Remotion é gratuito para indivíduos e empresas de até 3 funcionários; acima disso, uma licença corporativa é necessária (remotion.pro). Leia o LICENSE.md antes de usar o kit comercialmente em uma empresa maior. As fontes Inter e Source Serif 4 estão sob a OFL (public/fonts/OFL-*.txt); os sons e a música de exemplo são sintetizados aqui, sem direitos de terceiros. Música encontrada em outro lugar: verifique sua licença (sem CC-BY-NC em um canal monetizado).

Configuração, e o que a linha node_modules faz

O plugin é instalado uma vez com:

bash "${CLAUDE_PLUGIN_ROOT}/install.sh" --data "${CLAUDE_PLUGIN_DATA}"

(Claude Code substitui ambas as variáveis por caminhos reais quando lê este arquivo.) Por que uma pasta de dados: a pasta do plugin é substituída a cada atualização do plugin, e node_modules pesa cerca de 1 GB. Então npm ci é executado uma vez na pasta de dados do plugin (${CLAUDE_PLUGIN_DATA}), que sobrevive às atualizações, e skills/motion-design/node_modules é um link simbólico para ela. Se node_modules estiver faltando após uma atualização do plugin (a nova pasta do plugin não tem link), execute novamente a linha acima: ela só faz o que está faltando e religa em um segundo.

Instalação manual (as quatro pastas skills/ copiadas lado a lado em ~/.claude/skills/): bash install.sh a partir da raiz do kit; node_modules é então uma pasta normal instalada por npm ci. Lado Python: python3 -m pip install numpy scipy soundfile pillow, e brew install ffmpeg. Detalhes e uma verificação de toda a cadeia: INSTALL.md do kit.

Execute todos os comandos desta skill a partir da pasta do workshop (skills/motion-design).

Pipeline de um vídeo completo de motion design

1. Enquadre: duração, formato (1920x1080 a 30 fps por padrão; 1080x1920 para um reel vertical; 1080x1080 para um quadrado), uso, restrições da plataforma. Escreva src/<project>/cues.json: os tempos-chave orientam tanto a imagem quanto o som.
2. Anime: uma composição por entregável em src/<project>/, declarada em src/Root.tsx, props tipadas com zod. Tudo deriva de useCurrentFrame(): nunca uma animação CSS livre, nunca Math.random() (random(seed) ou noise2D). Apenas cores e fontes do tema.
3. Verifique a imagem sem esperar por uma renderização: npx remotion still src/index.ts <Id> out.png --frame=N nos quadros-chave, depois uma folha de contato do MP4 (ffmpeg tile). Julgue no tamanho de um telefone: a imagem reduzida para 390 px de largura deve permanecer legível.
4. Narração (se houver): gravada pelo usuário (WAV 48 kHz), colocada com --voice-at. O kit não clona vozes.
5. Música e efeitos sonoros: python3 music/<project>.py <duration> music.wav; sons através de son.py, colocados nos mesmos instantes que a imagem (o plano chama son.releve(...) para escrever a lista numerada para ouvir); verifique com python3 scripts/ltas.py music.wav (sem buraco mais profundo do que cerca de 6 dB contra uma inclinação suave).
6. Mixagem: python3 scripts/mix.py --music ... --sfx ... [--voice ... --voice-at s] --lufs -16 --out public/audio/<project>_mix.wav (-14 para um reel, -16 para YouTube; --sfx-voix-ref -22 redimensiona os efeitos sonoros na voz real).
7. Renderize: npx remotion render src/index.ts <Id> out.mp4 --props='{"audio":"audio/<project>_mix.wav"}' --codec=h264 --crf=16 --audio-bitrate=320k.
8. Entregue sem sobrescrever um entregável existente (sufixo -v2), com uma pré-visualização.

Renderizações colocadas no Premiere (gráficos)

• Nenhum logotipo em uma cena, um gráfico de tela cheia ou uma barra de título: ele carrega a imagem à toa.
• Um arquivo destinado a uma sequência de 29.97 fps deve cobrir TODO o seu clipe: n quadros de sequência duram n x 1.001 / 30 s. As composições de src/illustration/ aceitam tailFrames: o componente TenirFin (src/illustration/tenir-fin.tsx) reproduz a animação durante sua duração e, em seguida, mantém o último quadro; animações de saída não se movem. A skill overlays's scripts/render-segments.py calcula tailFrames.
• As composições gráficas são renderizadas por scripts/render-segments.py, scripts/screencast-render.py e scripts/montage-tella.py da skill overlays (pasta de trabalho = este workshop, quadros PNG, 4 núcleos), nunca manualmente fora de uma verificação remotion still. A mídia chamada através de staticFile vai para public/scenes/<video>/.

Torne-o seu (mude o tema)

O kit vem com um tema neutro: destaque azul #2F5BEA, Inter e Source Serif 4, um arquivo de tema, src/illustration/theme.ts. Para usar sua própria marca:

1. Cores: src/illustration/theme.ts (color: base, contrast, inkSoft, muted, surface, line, accent, accentDark, accentWash, darkBg, paperWarm); as cenas o leem através de C. O destaque e seus tons claros ainda estão codificados em alguns lugares: grep -rn "#6B8CFF\|rgba(47,91,234\|rgba(214,224,252" src/ (destaques em preuves.tsx, Screencast.tsx, as variantes PALETTES de compositions/FondAnime.tsx), para corresponder ao novo destaque. Um destaque, usado como sinal, nunca como preenchimento.
2. Fontes: coloque os arquivos .woff2 em public/fonts/, depois altere os nomes de arquivo e nomes de família nas listas de carregamento (src/illustration/scenes/kit.tsx, compositions/BrandedVideo.tsx, compositions/LowerThirdTrack.tsx, compositions/Screencast.tsx) e em theme.ts (font.display, font.sans). Verifique se a fonte tem dígitos e acentos (um subconjunto "latin-ext" sozinho não tem dígitos nem letras base, e tudo recai para Georgia). Nome da família sem um dígito (ou entre aspas no CSS).
3. Curva de animação: easeStd em scenes/kit.tsx e EASING em scripts/make-sfx.py andam juntos (o som segue a curva da imagem).
4. Verifique: npx tsc --noEmit, depois um remotion still de cada composição (citação, barra de título, cartão de seção, número...), depois --force na próxima execução de render-segments.py (seu cache já segue o código de src/illustration/).

Adicione uma cena ou um som

• Cena: um componente em src/illustration/scenes/opaque.tsx (tela cheia) ou alpha.tsx (sobreposição), seu contrato data como um comentário acima dele, uma linha no registro scenes/Scene.tsx, uma linha no catálogo do SKILL.md do overlays. Cada instante vem dos cues. Verifique: remotion still em vários quadros, a sobreposição composta em um quadro do clipe.
• Som: reference/sound-palette.md, "Adicionar ou ajustar um som".

Armadilha de pastas sincronizadas

Se o workshop estiver em uma pasta sincronizada (Dropbox, iCloud, Drive...), outra máquina pode enviar de volta uma versão antiga de um arquivo e renomear a boa como "cópia conflitante". Sintoma: Could not find composition with ID .... Reflexo: find . -name '*cópia conflitante*' -not -path './node_modules/*', compare, mantenha a versão mais recente. O cache do webpack (node_modules/.cache) também pode entrar em conflito: exclua-o, Remotion o reconstrói. Melhor: mantenha node_modules fora da sincronização.