Claude Code Motion Graphic Video Skill

Estúdio de vídeo motion

Um vídeo aqui é uma página web onde cada frame é uma função pura do tempo, render(t), gravado um quadro exato por vez por scripts/record.mjs. Isso proporciona movimento perfeito quadro a quadro, fontes reais, UI de produto real e iteração em velocidade de código. O padrão é um trabalho do qual um designer motion sênior teria orgulho: uma ideia clara por momento, movimento com peso físico e cada elemento merecendo seu lugar.

Este skill ensina a pensar e construir. Não é um template. Cada vídeo recebe seu próprio conceito a partir de seu próprio assunto. Não reutilize cenas, layouts ou batidas narrativas de um vídeo anterior; reutilize o motor, o ofício e as lições. Dois vídeos feitos com este skill devem parecer que vieram do mesmo estúdio, não do mesmo molde.

Antes de começar

• Leia os arquivos de gosto. references/taste.md contém lições que se aplicam a todos. Depois procure o gosto da pessoa: MOTION_TASTE.md na raiz do projeto, ou ~/.claude/motion-video-taste.md entre projetos. O gosto deles substitui os padrões gerais.
• Adapte sua comunicação para quem está falando. Muitas pessoas que pedem vídeos não são desenvolvedoras. Lidere com o que elas verão. Mostre frames renderizados, não esboços ASCII ou maquetes de texto; uma imagem resolve em uma rodada o que uma descrição leva cinco.

O fluxo de trabalho

Cada etapa termina com algo real para olhar, antes que o tempo seja investido na próxima.

1. Coleta: que tipo de vídeo e preferências

Pergunte em uma rodada, cada pergunta com um padrão sensato, para que uma pessoa ocupada possa apenas dizer "vai" (references/intake.md):

1. O tipo de vídeo, a partir do menu em references/kinds/README.md:
   • filme de lançamento, anúncio hero, explicador, filme de história, filme de personagem
   • tipo cinético, sizzle reel, teaser, showcase de clima
   • walkthrough, showcase reel, história de dados
2. Onde será publicado e por quanto tempo.
3. Preferências: o visual, o tom, o som (música, voz, legendas), momentos obrigatórios, coisas a evitar, vídeos de referência que eles amam.

Em seguida, leia o manual daquele tipo (references/kinds/<kind>.md) e faça apenas as perguntas de sua lista que o material não puder responder.

2. O material e a compreensão do produto

Peça a UI: o repositório (somente leitura), capturas de tela ou gravações e o site ao vivo. Nunca modifique o repositório, abra segredos, faça login ou chame serviços ao vivo.

Leia da forma que references/intake.md descreve:

• o que é e para quem é
• a jornada do usuário, tela por tela, nas próprias palavras do produto
• os pontos de venda, ranqueados (por que alguém migraria)
• o momento "aha"
• a marca (logotipo, cores, fontes, tom)
• dados realistas
• o que não mostrar

Escreva o briefing de entendimento do produto e obtenha o "sim" da pessoa (ou declare suas suposições ao trabalhar sozinho). Qualquer coisa que a pessoa pediu para mostrar, explorar ou explicar vai nele como item obrigatório.

Anote fontes, cores, raio, espaçamento, texto real e dados reais das telas reais. O vídeo deve parecer da marca deles, não um template de motion genérico; inventar um visual é a razão mais comum pela qual uma primeira versão é rejeitada.

Se a pessoa compartilhar um vídeo de referência, estude-o quadro a quadro antes de projetar (bash scripts/study-reference.sh ref.mp4 out/). Escreva o que ele realmente faz:

• distância e ângulo da câmera
• o tamanho e o papel do texto
• o que sua cor significa
• como os planos se unem
• seu tempo e seu arco

Conte à pessoa sua leitura e confirme-a antes de construir. Nunca construa a partir de uma única captura de tela de uma referência.

3. Conceito: uma ideia original primeiro, depois um estilo

Construa a partir do briefing de entendimento do produto (a jornada, os pontos de venda ranqueados, o momento "aha"). Faça o método de originalidade em references/originality.md primeiro, toda vez, mesmo ao trabalhar sozinho:

1. encontre a verdade humana
2. escreva 8 conceitos de 8 ângulos diferentes
3. mate os genéricos com os testes de troca e clichê
4. escolha o sobrevivente mais ousado que ainda venda e anote as ideias óbvias que rejeitou

A ideia mais provável para qualquer produto de software (digitar uma solicitação → o resultado constrói → brindes → montagem → slogan → logotipo) é banida como espinha dorsal. Tudo o mais neste skill (demonstrações, guia de campo, receitas, filmes anteriores) mostra mecânicas, nunca uma ordem de planos para copiar.

Em seguida, escolha o estilo de references/styles.md:

• filme de produto cinematográfico
• filme de produto claro e leve
• vidro atmosférico
• explicador narrado
• um dia na vida
• liderado por personagem
• hero shot
• sizzle
• showcase de cards
• walkthrough
• tipo cinético
• história de dados

Leia references/patterns.md antes de escolher: é o guia de campo sobre o que filmes de lançamento fortes realmente fazem.

O gênero diz para que é o vídeo; o estilo diz como ele se sente. Quando o briefing estiver aberto, ofereça dois estilos como duas direções.

Em seguida, escreva a história como uma frase, depois a metáfora visual que a carrega, tirada dos próprios substantivos e verbos do assunto. Liste cenas: uma ideia cada, cada uma com um momento de assinatura (a batida de animação que prova o ponto), também daquele assunto. Quando o briefing estiver aberto, proponha duas direções e deixe a pessoa escolher. references/craft.md tem os princípios profundos (verdadeiros em todos os estilos), o método, o vocabulário de movimento e as regras de tempo. Leia seus princípios antes de cada conceito.

4. O plano de produção: o filme inteiro, quadro a quadro

Antes de qualquer código, escreva o plano completo no formato de references/plan.md:

• o filme em uma página: conceito, ideias óbvias rejeitadas, objeto heroico, o arco em sentimentos, quais pontos de venda aparecem onde
• o visual como tokens
• cada plano quadro a quadro: cada mudança visível com carimbo de data/hora, mais a câmera, efeitos, transições de entrada e saída, texto, som, ativos e movimentos
• 4 a 8 quadros-chave renderizados como stills
• os riscos

As expectativas não têm limite nesta fase: descreva o filme no seu melhor, depois construa para isso. Cada plano deve mover a história adiante; se não, corte-o. Mostre o plano e os quadros-chave, e construa apenas após um "sim". Ao trabalhar sozinho, verifique o plano contra a lista de verificação de qualidade e originality.md, e corrija-o antes de construir. Escreva qualquer narração agora, porque ela dita o tempo. references/voice-and-sound.md cobre o formato de roteiro que ferramentas de voz AI leem bem, ritmo, pronúncia e som. Para um lançamento de produto, planeje a cadeia: qual elemento carrega cada tela para a próxima (craft.md, "Telas conectadas").

5. Construir

Copie assets/engine-starter.html e assets/motion.js ao lado dos ativos do projeto, e construa plano por plano. Construa a partir da biblioteca de movimentos primeiro (references/moves.md):

• o close-up de digitação (macroType)
• countUp
• o mergulho na parede (wall)
• buildIn, cascade, montage, growToWord
• cursor e clickZoom
• morphRect
• profundidade de campo (twin)
• shots para cortes, e start para pré-visualização e gravação

assets/moves-demo.html mostra como cada um é chamado. Leia-o apenas para mecânicas; sua ordem de planos é o padrão banido, nunca um template. Use um movimento apenas onde o conceito precisar dele; um filme pode não usar nenhum deles. Construa manualmente apenas o que a biblioteca não cobrir, e quando um novo movimento se provar, adicione-o à biblioteca na mesma forma.

Pegue toda duração e curva de references/motion-tokens.md, não de palpites. Siga o contrato e as armadilhas em references/engine.md; eles vêm de bugs reais.

Para qualquer coisa acima de cerca de 20 s, faça uma passagem rápida de tempo bruto primeiro: caixas cinza com os movimentos e tempos reais da câmera, alguns stills. Acerto o ritmo, depois troque pela arte real sem alterar o tempo.

6. Portão: folha de contato

Renderize 8 a 16 momentos-chave com node scripts/record.mjs page.html stills/ --stills 1,3.5,..., depois bash scripts/contact-sheet.sh stills/ sheet.jpg. Revise você mesmo primeiro contra a lista de verificação abaixo e os arquivos de gosto; corrija e re-renderize. Só então mostre à pessoa. Não grave o vídeo completo até que os stills estejam corretos.

7. Gravar, voz, ajustar, mixar

Grave um rascunho (--scale 1 --fps 30) para revisão, e o final com --scale 2 --blur 4: supersampleado, depois reduzido, com motion blur no estilo de filme real. Quando uma gravação de voz chegar, execute node scripts/voice-segments.mjs voice.wav para encontrar cada linha falada. Estique a animação para a voz com a tabela de time-warp. Não corte ou acelere a voz. Posicione as falas e a música com node scripts/mix.mjs mix.json.

8. Entregar

Exporte por canal, mais um thumbnail e o texto do post (references/delivery.md). Verifique o arquivo final: extraia frames do próprio mp4 (uma chamada ffmpeg por frame) e verifique duração e volume.

9. Aprender

Quando a pessoa reagir, escreva o que eles amaram ou rejeitaram, e por quê, em seu arquivo de gosto (crie MOTION_TASTE.md, ou ~/.claude/motion-video-taste.md se for o gosto deles em vez do projeto). Se uma lição puder ajudar alguém, proponha adicioná-la a references/taste.md. É assim que cada vídeo supera o anterior.

Lista de verificação de qualidade (execute em cada folha de contato)

• Parece com a marca/produto real: mesmas fontes, cores, raio, componentes. Nada inventado.
• Uma ideia por tela. Se o olho precisa ler duas coisas ao mesmo tempo, corte uma.
• Nada cortado, sobreposto ou apertado: texto quebra limpo, logotipos centralizados opticamente, cards inteiros, margens seguras mantidas.
• Cores verdadeiras: sem filtros desbotados ou véus cinza; texto tem contraste.
• Movimento tem peso: ease in e out, molas estabilizam, linear apenas para relógios e barras de progresso.
• Transições são motivadas (um movimento de câmera, um hand-off de objeto, um empurrão), e a cena ainda é legível enquanto ocorrem.
• Tela e voz concordam: a coisa que está sendo dita é a coisa na tela naquele momento.
• Fatos são reais e seguros para publicar (veja delivery.md).
• Final: marca mais um link ou uma ação. Sem pedidos extras que a pessoa não quis.
• Legível em um telefone: texto importante tem 40 px ou mais no palco, ou a câmera aumenta o zoom até que tenha. Verifique a folha reduzida para cerca de 375 px de largura.
• Cada plano estabiliza: após cada movimento há um momento estático longo o suficiente para ler (0,5 s + 0,3 s por palavra).
• O estilo se mantém: junções, cor, texto e câmera seguem a receita do estilo escolhido do início ao fim.
• Ações, não telas: cada plano mostra alguém fazendo algo, ou o resultado disso.
• Escala e tempo mudam pelo menos uma vez (close ↔ wide, lento ↔ rápido).
• A cor de destaque tem um significado.
• Cada imagem verificada visualmente: o produto certo para seu rótulo, o logotipo certo, nada cortado ou esticado. Abra cada uma; não confie em nomes de arquivo.
• Números fazem sentido: apenas totais e quantidades crescentes contam para cima; preços e valores fixos apenas aparecem.
• Transições limpas: texto sai antes de algo passar sobre ele (sem engolir branco sobre branco), e nenhum frame vazio entre planos.
• Específico, não genérico: pelo menos um momento que apenas este assunto poderia ter; movimentos da biblioteca apenas onde o assunto tem aquela ação.
• Original: passa no teste de troca, não usa uma espinha dorsal banida (originality.md) e não compartilha uma ordem de planos com as demonstrações ou com o último filme feito com este skill.

Antes de mostrar qualquer coisa à pessoa, pontue de 0 a 10 em cada um destes: correspondência com a marca, clareza da história, qualidade do movimento, legibilidade, transições, sincronia som/voz e acabamento. Corrija qualquer coisa abaixo de 8 primeiro.

Arquivos

• references/genres.md: tipos de vídeo com padrões de estrutura, duração e formato.
• references/intake.md: as perguntas de coleta (com padrões), como ler um repositório para a jornada do usuário e pontos de venda, e o briefing de entendimento do produto.
• references/kinds/: um manual por tipo de vídeo (filme de lançamento, anúncio hero, explicador, filme de história, filme de personagem, tipo cinético, sizzle, teaser, showcase de clima, walkthrough, showcase reel, história de dados): o que perguntar, formas que pode assumir, mundos, movimentos, exemplos, armadilhas. kinds/README.md é o menu.
• references/plan.md: o formato do plano de produção: o filme em uma página, tokens visuais, cada plano quadro a quadro, quadros-chave, riscos.
• references/originality.md: leia primeiro. O método para um conceito original toda vez: verdade humana, 8 ângulos, testes de aniquilação, clichês banidos. Ele substitui todos os exemplos no skill.
• references/patterns.md: o guia de campo de um estudo quadro a quadro de 15 filmes de lançamento fortes: o que quase todos fazem, tipo cinético, transições, mostrando o produto funcionando, quando ângulos funcionam, estruturas, detalhes profissionais. Leia-o na fase de conceito.
• references/styles.md: doze estilos distintos (filme de produto cinematográfico, explicador narrado, showcase de cards, walkthrough, tipo cinético, história de dados, filme de produto claro e leve, vidro atmosférico, um dia na vida, liderado por personagem, hero shot, sizzle), cada uma receita completa: câmera, texto, cor, junções, tempo, arco, armadilhas.
• references/craft.md: princípios profundos, método de conceito, composição, vocabulário de movimento (macro digitação, parede de resultados, telas conectadas, click zoom, câmera), tempo.
• references/motion-tokens.md: os números: curvas, durações, molas, escalonamento, pausas de leitura, tamanhos de texto para telefone, bea

...

[truncado para tradução]