sui-motion-graphic-reel · Crie animações com design usando código

Autor: Sui Yang (IG @asksui.ai). Esta skill foi extraída de sete rodadas de revisão de uma animação de 15 segundos: cada ideia por trás de uma versão descartada, com imagens de comparação em examples/ e o histórico completo em references/case-0099.md.

Em uma frase: A qualidade de uma animação depende 90% da linguagem de design e do enquadramento definidos antes de começar, não da quantidade de efeitos. Esta skill ensina como pensar, como falar com a IA e como revisar a si mesmo, independentemente do motor usado.

O fluxo principal: Encontrar o design system (§1: se o usuário tiver, use-o; senão, um agente de design gera opções para o usuário escolher) → Roteiro e áudio (§2) → Storyboard para o usuário aprovar (§3) → Definir a linguagem de design e criar cada cena (§4 com nove princípios) → Revisão pré-renderização (§5) → Auto-revisão pós-renderização (§6) → Entrega e iteração (§7).

Duas coisas separadas (a decisão de design mais importante desta skill):

	Onde fica	Pode mudar?
Gosto: cores, gradientes, fontes, velocidade da fala, personagens	design system (`references/design-system.md`, um por projeto)	O usuário decide. Os exemplos no design system são apenas ponto de partida; o documento inteiro pode ser substituído
Técnica: unidade do vídeo, uma técnica por cena, múltiplas camadas, senso de enquadramento, um foco por vez, auto-revisão	Esta SKILL.md §4–§6	Não depende do gosto; funciona com qualquer estilo

Se uma regra conflitar com o estilo desejado pelo usuário: o gosto segue o usuário, a técnica é aplicada. Exemplo: se o usuário quer gradientes neon — ok, então o vídeo inteiro usa essa linguagem neon (técnica: unidade visual), sem misturar neon na primeira cena e grelha suíça na segunda.

1. Antes de começar: encontre o design system

Sem um design system (sistema de design: cores, tipografia, estrutura de layout, elementos de assinatura, personalidade do movimento, lista de "não fazer"), a IA cairá em seus padrões: gradiente roxo-rosa, brilho, fade-in com zoom em cada cena. Portanto, este é sempre o primeiro passo, e primeiro procure, depois pergunte, e só então crie você mesmo.

Existe um design system pronto?
├─ Sim → Use o do usuário (1A)
└─ Não → O usuário responde a algumas perguntas ou fornece referências (1B) → O agente de design entra em ação, gera opções para o usuário escolher (1C) → O usuário escolhe → Siga-o

1A. Primeiro, procure: o usuário já tem o seu?

Verifique no projeto: design-system.md, diretrizes de marca, design tokens, variáveis CSS do site, exportações do Figma, logotipo, vídeos ou imagens anteriores.
Se não encontrar, pergunte: "Você tem um design system ou diretrizes de marca prontos? Se sim, envie para mim, e eu seguirei."
Se sim → Use o do usuário. Converta-o em design-system.md no projeto (campos em references/design-system.md). Não altere nada que já esteja definido; para os campos necessários para a animação que não estão especificados (personalidade do movimento, elementos de assinatura, margens de segurança da plataforma), preencha você mesmo e marque cada adição como "preenchido pela IA", pedindo confirmação ao usuário.

1B. Se não houver: o usuário responde a perguntas ou fornece referências

Duas opções, podendo usar uma ou ambas:

Responder a perguntas: faça todas de uma vez, no máximo quatro perguntas, cada uma com opções.
- Tom: sofisticado e elegante / divertido / tecnológico / artesanal / diga você
- Cores: alguma cor obrigatória? Se não, escolha apenas uma cor de destaque
- Personagem ou mascote? Precisa de narração?
- Para quem é este vídeo? Em qual plataforma será publicado?
Fornecer referências: um vídeo favorito, um site, um pôster, uma marca. Para cada referência, pergunte "o que você gosta nela?". Aprenda a linguagem dela (cores, grelha, tipografia, movimento), não copie a imagem.

1C. O agente de design entra em ação: gera opções para o usuário escolher

Passe as respostas e referências da etapa 1B para outro agente (o agente de design), que fará apenas uma coisa: criar propostas de design system. O modelo de instrução e o formato de entrega estão em references/design-agent.md.

Gere 3 direções distintas (não apenas a mesma coisa com uma cor de destaque diferente).
Cada direção deve vir acompanhada de uma imagem de amostra real: use o mesmo título e o mesmo conteúdo para todas as três, e organize-as lado a lado em uma única imagem. O usuário escolhe com os olhos, não lendo códigos de cores.
O usuário pode escolher uma direção inteira ou misturar elementos ("as cores da A com a tipografia da B"). Se não gostar de nenhuma, pergunte o que está errado e gere uma nova rodada.
A direção escolhida é registrada no design-system.md do projeto. A partir daí, cada cena só pode usar elementos deste documento; para adicionar cores, tipografia ou técnicas, primeiro altere o design system.

Por que outro agente? O agente que cria a animação já tem o roteiro e as imagens na cabeça; se ele mesmo criar as propostas, as três direções serão muito parecidas. Um agente separado, que só vê os requisitos e referências, produz direções mais diversas. Quando não for possível abrir um segundo agente no ambiente, siga o mesmo modelo de instrução você mesmo, gerando três opções com amostras.

Quando o usuário não está presente

Agendamento, turno noturno, ou ele diz "você decide": não trave esperando. O agente de design ainda gera três opções; escolha a mais adequada, marque-a como "selecionada pela IA" no design-system.md e inclua as amostras das outras duas opções. Na entrega, peça confirmação ou substituição.

Campos e quatro exemplos em references/design-system.md.

2. Roteiro e áudio: o som vem primeiro

Escreva o roteiro como uma fala, com conectores naturais ("veja", "e também", "além disso"), não uma lista de termos. Deve soar como uma conversa com um amigo, não como slogans.
Gere a narração inteira de uma vez, não frase por frase para depois juntar — cada frase gerada separadamente soa como um slogan, e a junção perde a entonação natural. Ao gerar, obtenha o timestamp de cada palavra (a maioria dos serviços de TTS tem APIs com carimbos de tempo).
A imagem segue a palavra: cada cena, cada elemento aparece no momento exato em que a palavra é dita. A duração do vídeo = duração da narração + encerramento, sem forçar segundos inteiros. O movimento também: quando a narração diz "a câmera voa para dentro", a imagem deve estar voando naquele momento; o movimento deve acontecer na palavra anterior; se a imagem já estiver parada quando a palavra for dita, o público vê uma imagem estática acompanhando uma frase que descreve movimento. Imprima os segundos de cada palavra e confira, não confie em estimativas.
Não insira pausas na narração para esperar a imagem. Se a imagem não ficar pronta a tempo, simplifique-a.
Para vídeos sem narração: primeiro escreva uma tabela de batidas (o que acontece em cada segundo) e siga-a.
Após renderizar, use uma ferramenta de fala para texto para transcrever o áudio do vídeo e confirme se cada frase está presente e não foi cortada pela metade (um corte no áudio é imperceptível visualmente).

Como contratar narração e o que observar em licenças comerciais: references/engines.md "Narração".

3. Storyboard primeiro, depois a animação

Descobrir que a direção está errada após a animação pronta é a iteração mais cara. Antes de começar, crie uma tabela de storyboard, uma linha por batida:

Coluna	O que escrever
Tempo / Palavra dita	De que segundo a que segundo, e qual palavra é dita
Foco	Para onde o olhar do público deve se dirigir nesta batida (apenas um elemento)
Quatro camadas	O que vai no fundo · no meio (personagem principal) · no primeiro plano · na camada de informação (veja §4 princípio 4)
Técnica	Qual método de animação será usado nesta cena (§4 princípio 2), não pode ser igual ao da cena anterior
Câmera	De onde para onde a câmera se move, e como
Ritmo	Esta batida é densa ou espaçada, clara ou escura (§4 princípio 9). Após escrever a tabela inteira, leia esta coluna sozinha
Como conectar à próxima batida	Qual tipo de transição será usado

Se possível, para cada batida, desenhe um quadro-chave estático (renderizado de acordo com o design system) e monte uma folha de contato para o usuário aprovar. O usuário aprova antes de começar a animação.

Quando o usuário não estiver presente: crie e salve a tabela de storyboard normalmente, verifique-a seguindo o §4 e depois comece a animação, anexando-a na entrega.

4. Nove princípios de design

Cada princípio explica "por que" e "como fica quando feito errado". Nomes e descrições das técnicas em references/techniques.md.

① Defina uma linguagem de design e use-a em todo o vídeo

Antes de começar, defina estes elementos e escreva-os em um arquivo de tokens compartilhado, do qual cada cena extrai: paleta de cores · grelha e margens de segurança · tipografia e hierarquia de tamanhos · posição dos blocos de título · um "elemento de assinatura" que percorre todo o vídeo (exemplo: no Exemplo A, eram anotações de ferramentas de design — alças de seleção, trilhas de keyframe, etiquetas de nomes de formas, mostrando o processo de construção).

Por que: O público não identifica exatamente o que está errado, mas percebe imediatamente que "estas cenas não são do mesmo vídeo". Unidade visual é a fonte mais barata de "sofisticação".
Como fica quando feito errado: Apenas corrigir a cena rejeitada, deixando as outras com suas próprias cores (compare examples/v3-only-first-scene-fixed.jpg com examples/v4-unified.jpg). Corrigir uma cena exige alinhar o vídeo inteiro.

② Varie a técnica de animação em cada cena, não as cores

A riqueza visual vem de "como esta cena se move", não de mudar a paleta de cores. Alterne as técnicas ao longo do vídeo:

Tema	Técnica
Texto grande	Deformação elástica (achata ao cair, estica ao quicar)
Pixel / Retrô	Animação quadro a quadro, deslocamentos em pixels inteiros, sem interpolação suave
Partículas	Simulação física ou campo de fluxo, dispersão e agregação
Letra manuscrita	Trace traço por traço, seguindo a ordem real da caligrafia
Interface / Tela	Perspectiva 3D, painéis deslocados em profundidade, câmera contornando
Números	Contagem rolante, com um achatamento a cada pulo

Como fica quando feito errado: Todas as cenas são "fade-in + zoom". Mesmo com muitas cenas, apenas um tipo de movimento.

③ Texto realmente cinético

Quando o texto grande é o protagonista, ele deve ter peso: cair alongando-se, achatar ao tocar o solo e depois quicar, letras deslocadas em tempos diferentes, entrada esticada, saída comprimida em uma linha. Fórmulas e código em references/techniques.md "Texto".

Como fica quando feito errado: O texto apenas fade-in, ou é empurrado suavemente por uma máscara.

④ Quatro camadas por cena, um foco por vez

Camada	Função
Fundo	Ambiente em movimento, mostra "onde estamos", escuro e lento
Meio	O único foco: o protagonista ou objeto principal, nítido, grande, no centro
Primeiro plano	Elementos que passam rapidamente na frente da câmera, criando profundidade
Informação	Rótulos, contadores, pequenas UI, legendas

Muitas coisas podem se mover ao mesmo tempo, mas apenas uma deve ser a mais brilhante, a mais nítida e a que mais se move. A riqueza vem do número de camadas, não da quantidade de elementos competindo pela atenção.

Quando o movimento para: O sujeito (foco e texto a ser lido) deve parar completamente para leitura, mas o fundo e os elementos ao redor devem continuar se movendo lentamente: pequenos símbolos flutuando no fundo, texto grande no fundo, objetos do primeiro plano nas laterais, a respiração de um personagem. Se tudo parar, a imagem morre. O movimento deve estar fora do sujeito, sem cruzar o texto a ser lido.
As camadas devem se sobrepor, não se alinhar verticalmente: o fundo atrás do protagonista, o primeiro plano na frente de sua borda. Colocar "fundo" e "primeiro plano" em espaços vazios abaixo do protagonista apenas adiciona dois elementos, não cria camadas sobrepostas; a área inferior na vertical é frequentemente coberta pela interface da plataforma.
Como fica quando feito errado: Um cartão em um fundo sólido (faltam três camadas, parece "seco"); ou quatro elementos piscando ao mesmo tempo (sem foco, parece "confuso").

⑤ A câmera deve se mover

Coloque todos os elementos em um mesmo mundo (uma tela muito maior que o quadro, ou um espaço 3D) e mova a câmera dentro dele, em vez de trocar de tela no mesmo lugar.

Abertura: A câmera voa de longe (fly-in), atravessa algumas camadas do primeiro plano, e só quando se estabiliza o protagonista faz seu movimento.
Nos primeiros 4 segundos, duas ondas: a primeira com grande deslocamento (0–1 s), e depois de 1,5 s uma segunda onda (outro movimento de câmera, mudança de área, ou grande deformação do texto). Se voar e parar, é como se tivesse apenas 1 segundo de abertura.
Transição: A câmera se desloca para outra área do mundo, com as três camadas (fundo, meio, primeiro plano) se movendo em velocidades diferentes (paralaxe). Nos quadros mais rápidos, adicione desfoque de movimento, mas sem desfocar as legendas.
Vídeos de tom calmo também precisam de uma segunda onda, mas de forma diferente: não precisa ser um grande movimento de câmera; pode ser uma deformação do texto (esticar, achatar), uma linha que varre para revelar a próxima linha, ou um movimento do objeto principal. "Lento" significa easing suave, não imobilidade.
Quando a câmera se move, as margens de segurança devem ser recalculadas: após um zoom ou movimento lateral, textos pequenos que estavam dentro das margens podem ser levados para fora. Nos quadros com movimento de câmera, corte no tamanho original e verifique as bordas.
Como fica quando feito errado: A abertura é uma imagem estática; a transição é um fade-out para a próxima tela.

⑥ 3D deve ser 3D real

Para movimentos de câmera 3D, crie uma cena 3D real com uma câmera em perspectiva real (three.js ou similar): movimento em arco, com aceleração e desaceleração, mostrando as laterais dos objetos. Partículas devem ter volume, profundidade de campo e rastros.

Como fica quando feito errado: Ampliar uma imagem 2D e chamar de "zoom"; construir um cubo com alguns elementos CSS (faltam faces, a oclusão frontal está errada, desmorona ao girar); partículas são apenas pontos em um plano.
Segmentos em 3D real devem ser verificados quadro a quadro em zoom máximo (§6), pois são os mais propensos a erros que não são perceptíveis na miniatura.

⑦ A transição em si é um atrativo

Além do fluxo da câmera, as transições entre segmentos podem incluir: atravessar (a câmera entra dentro de um objeto da cena anterior, e dentro dele está a próxima cena) · máscara (a próxima cena aparece através de letras ou formas, anel de abertura) · match cut de forma (o ponto onde a cena anterior terminou = a ponta do pincel da próxima cena) · revelação por afastamento (a cena anterior era apenas um dos muitos monitores em uma tela maior).

Coloque a transição no intervalo entre frases da narração.
Para cada transição, extraia alguns quadros e verifique se há cortes ou saltos (examples/v4-transitions.jpg).

⑧ Tudo na imagem é calculado a partir do "número do quadro"

Independentemente do motor usado, a renderização é uma captura de tela quadro a quadro. Portanto, cada posição, tamanho e opacidade deve ser uma função do número do quadro: dado o quadro 137, ele desenha o quadro 137. Não use elementos que controlam seu próprio tempo (CSS animation / transition, temporizadores independentes, loop de animação do motor 3D) — ao capturar a tela, eles não estarão sincronizados com o quadro, causando cintilações, saltos e elementos faltantes.

Vantagem: Qualquer cena pode ser colocada em uma janela de transição ou no resumo final, continuando a se mover, pois basta fornecer um número de quadro.
Dados que exigem tempo para calcular (pontos de amostragem de texto, posições-alvo de partículas, pixels de personagens) devem ser pré-calculados e salvos em arquivos, não calculados durante a renderização.

⑨ Ritmo como música: variação entre denso e espaçado, claro e escuro

Se o vídeo inteiro tiver a mesma densidade e o mesmo fundo do início ao fim, cada batida individualmente pode parecer boa, mas juntas rapidamente entediam. Trate o vídeo como uma música: momentos densos e espaçados, claros e escuros, com acelerações e desacelerações planejadas antes de começar.

Crie uma partitura de ritmo: na tabela de storyboard, marque cada batida com duas colunas: denso / espaçado, claro / escuro. Leia em voz alta algo como "denso-denso-espaçado, denso-denso-espaçado, denso" — isso soa certo; se houver 4 ou 5 batidas consecutivas como "denso, escuro", insira uma batida espaçada ou mude o fundo.
Espaçado = apenas um elemento na tela: um telefone, uma linha de texto grande, um número, com bastante espaço em branco ao redor. Uma montagem rápida não é espaçada; é a parte mais densa do vídeo.
Uma batida densa também pode começar espaçada: primeiro apenas o título, e só quando a palavra-chave é dita os outros elementos aparecem.
Claro/escuro muda com o fundo: se o design system tiver mais de uma cor de fundo, mudar o fundo de uma batida inteira é a forma mais direta de criar variação. Ao mudar, mude a tela inteira, não deixe uma borda da cor anterior.
A cor mais intensa deve ser usada apenas como flash: cobrir a tela inteira com a cor de destaque, passando rapidamente e cobrindo por cerca de um segundo, é muito impactante; usá-la como fundo de uma batida inteira com texto a ser lido será desconfortável.
Como fica quando feito errado: Cada batida é "mesmo fundo + título grande + um quadrado no meio"; ou o primeiro momento espaçado aparece apenas no final.
Como verificar por conta própria: Reduza os quadros estáticos de cada batida para miniaturas e alinhe-os em uma linha, escondendo o texto. Se for possível perceber parágrafos, onde é claro e onde é escuro, o ritmo está funcionando.

5. Revisão pré-renderização: identifique problemas antes de renderizar

Renderizar um vídeo inteiro é lento. A maioria dos problemas que o usuário apontaria pode ser detectada antes da renderização, apenas olhando algumas capturas de tela estáticas. Portanto, não vá direto para a renderização após escrever as cenas; passe por três camadas, começando pelas mais baratas:

Camada	O que verificar	O que detecta
① Revisão no papel	Verifique a tabela de storyboard contra o arquivo de hábitos de revisão, item por item	Técnica repetida em todas as cenas, falta de camadas, mais de um foco, abertura sem duas ondas, desvio da frase principal
② Medição automatizada	Capture algumas imagens estáticas e execute `scripts/preflight.py`	Texto fora das margens de segurança, duas cenas quase idênticas, segmentos que deveriam se mover mas estão estáticos, espaço vazio excessivo
③ Agente de revisão	Outro agente que analisa apenas as imagens e o arquivo de hábitos, simulando o olhar do usuário	O protagonista é reconhecível? Parece genérico? Seco? Objetos quebrados? Unidade visual?

Arquivo de hábitos de revisão (review-habits.md) é o núcleo desta etapa: cada problema que o usuário apontou em revisões anteriores é registrado ali, item por item. Primeiro, veja se já existe no projeto; depois, procure o do usuário; se nenhum existir, copie a lista inicial de references/review-habits.md.
Cada vez que o usuário apontar um problema, registre um novo item. Ao registrar, pergunte: este problema poderia ser detectado antes da renderização na próxima vez? Se sim, anote como verificar. Este arquivo se tornará cada vez mais parecido com os olhos do usuário.
Só renderize após passar pelas três camadas. Itens marcados como "obrigatório corrigir" não podem ser ignorados.
Esta etapa não detecta problemas de áudio ou fluxo contínuo — esses ficam para o §6.

Como cada camada funciona e o modelo de instrução do agente de revisão: references/pre-render-review.md. Formato do arquivo de hábitos, lista inicial e como ele cresce: references/review-habits.md.

6. Auto-revisão antes de entregar (obrigatório, não espere o usuário reclamar)

Não diga "pronto" após terminar. Siga esta ordem e anote "o que vi e o que mudei":

Folha de contato: um quadro a cada 0,5 segundo, para avaliar o ritmo geral e se cada quadro é legível. python3 scripts/review.py sheet <caminho_do_video>
Quadros parados ampliados: para cada batida, no momento em que o sujeito para, capture o quadro no tamanho original e examine um por um. A folha de contato reduzida não mostra texto colado na borda, personagens quebrados ou camadas sobrepostas incorretamente. python3 scripts/review.py frames <caminho_do_video> 1.2 4.5 7.0 ...
Segmentos em movimento examinados de perto: transições, movimentos de câmera 3D, partículas, um quadro a cada 0,1–0,2 segundo. python3 scripts/review.py burst <caminho_do_video> <inicio> <fim>
Varredura de congelamento: há trechos de mais de 1 segundo completamente parados? (Causa comum: um elemento congela a cena inteira.) python3 scripts/review.py freeze <caminho_do_video>
Transcrição: converta o áudio do vídeo em texto e compare com o roteiro.
Verificação do design system: alguma cena usou cor, tipografia ou técnica fora do design system?
Comparação com a versão anterior: esta versão é melhor que a anterior? Se foi apenas "alterada" em vez de "melhorada", explique.

Perguntas para cada quadro:

Qual é o foco deste quadro? Dá para identificar em um segundo?
O texto é grande o suficiente? Está borrado? Colado na borda? Coberto por outro elemento?
As quatro camadas estão presentes? Conte uma por uma: o que está no fundo, no primeiro plano, na camada de informação? Se só der para contar a camada do protagonista, está raso. Compare com qualquer quadro de examples/v7-near-final.jpg.
A técnica desta cena é diferente da anterior?
Apareceu algum item da lista de "não fazer" do design system?
Há dois elementos fazendo a mesma coisa no mesmo quadro?

As ferramentas de auto-revisão também podem enganar: a folha de contato pode estar correta em cada quadro, mas ainda assim pode haver um congelamento (é preciso verificar separadamente); os quadros amostrados podem estar corretos, mas o movimento pode estar errado (3D e transições exigem exame denso); a transcrição de fala para texto pode errar homófonos ou nomes de marcas em inglês (isso é um problema de transcrição, não precisa corrigir a narração).

No máximo, três rodadas de auto-revisão. Uma rodada = renderizar o vídeo completo + seguir os sete passos acima uma vez; verificar com capturas de tela individuais antes de renderizar não conta como rodada. Se após três rodadas ainda houver problemas, liste-os e informe o usuário, não os esconda.

7. Entrega e quando o usuário diz "não estou satisfeito"

Ao entregar, informe três coisas: o que foi feito nesta versão · o que a auto-revisão encontrou e corrigiu · quais problemas ainda permanecem.

O feedback do usuário geralmente vem como uma sensação. Primeiro, traduza essa sensação em linguagem visual, depois aja; se não conseguir traduzir, pergunte, não adivinhe:

O usuário diz	Provavelmente é	Verifique primeiro
Muito genérico / Parece IA / Não é sofisticado	Linguagem de design: muitas cores, gradiente brilhante, estilo em si muito chamativo	§4① e a lista de "não fazer" do design system
Só mudou uma parte / Não está unificado	As outras cenas não foram atualizadas com a nova linguagem	§4①
Muito monótono / Tudo igual	Mesma técnica de animação em todas as cenas	§4②
Cansa / Sem variação / Cansativo de assistir de uma vez	Sem variação de densidade e tom: todas as batidas igualmente cheias, mesmo fundo o tempo todo	§4⑨, primeiro reduza os quadros parados e organize-os em uma linha
Parece morto quando para	Quando o sujeito para, o fundo e os elementos ao redor também param completamente	§4④ "Quando o movimento para"
Seco / Vazio / Sem profundidade	Faltam fundo, primeiro plano, camada de informação; ou o protagonista é muito pequeno	§4④
Confuso / Não sei para onde olhar	Muitos elementos competindo pela atenção ao mesmo tempo	§4④
Estático / Sem movimento / Sem sensação de espaço	A câmera não se moveu, ou se moveu apenas uma vez	§4⑤
Movimento de câmera falso / 3D estranho	Usando zoom 2D como substituto, ou objetos 3D quebrados	§4⑥
Texto sem impacto	O texto apenas fade-in	§4③
Parece slogan / Ritmo muito lento	Narração cortada em segmentos, pausas no meio, velocidade de fala	§2
Texto e narração não sincronizados	Elementos não vinculados aos timestamps de cada palavra	§2
Sufocante / Muito cheio	O sujeito ocupa a tela inteira sem espaço em branco, ou sem moldura	Reduza o sujeito, adicione moldura, deixe espaço para título e anotações

Duas regras ao corrigir:

Corrija um lugar, verifique o vídeo inteiro: o mesmo problema existe em outras cenas?
Não mexa no que o usuário gostou. Apenas ajuste suas cores e grelha para alinhar, mantenha a técnica original.

A cada iteração, volte e releia a frase principal que este vídeo deveria comunicar. Após várias iterações, o acidente mais comum é que cada rodada corrigiu o ponto apontado, mas o vídeo já não conta mais a história original.

Anexo: Arquivos

Arquivo	Descrição
`references/design-system.md`	Campos do design system + quatro exemplos (ponto de partida, pode ser substituído inteiramente)
`references/design-agent.md`	Instruções para o agente de design e formato de entrega (gerar três design systems + amostras)
`references/pre-render-review.md`	Como fazer as três camadas de revisão pré-renderização e instruções para o agente de revisão
`references/review-habits.md`	Arquivo de hábitos de revisão: formato, lista inicial, como registrar cada problema apontado pelo usuário
`references/techniques.md`	Glossário de técnicas: nome, aparência, como falar com a IA, erros comuns
`references/engines.md`	Como conectar motores (HyperFrames · Remotion · outros), 3D real, narração, efeitos sonoros, licenciamento
`references/case-0099.md`	Histórico completo de um vídeo de 15 segundos do v1 ao v7: o que foi dito em cada versão, a causa raiz e como foi corrigido
`examples/`	Folhas de contato de cada versão do caso acima (exemplos positivos e negativos); além de um vídeo real com outro estilo (veja Exemplo C em `design-system.md`)
`scripts/preflight.py`	Medições pré-renderização: aceita apenas capturas estáticas, gera quadros parados alinhados (com margens de segurança), capturas em sequência, lista de lembretes (requer Pillow)
`scripts/review.py`	Script de auto-revisão: folha de contato, captura de quadros no tamanho original, capturas densas em sequência, varredura de congelamento (requer apenas ffmpeg; saída em `review/<nome_do_video>/` ao lado do vídeo, uma pasta por versão para facilitar comparação)

sui-motion-graphic-reel

O que é sui-motion-graphic-reel?

Perguntar na sua IA favorita

Documentação