Name: V4TIME/V4SKILL
Author: Community

Motion Craft Kit

Fonte: github.com/iart-ai/motion-skills — 14 pacotes de código aberto, 51 habilidades, licença MIT. Esta é uma referência única e consolidada. Os 14 pacotes originais podem ser instalados separadamente via npx skills add iart-ai/<nome-do-pacote> ou como plugins do Claude Code. Esta habilidade cobre todo o domínio para que você tenha o mapa em um único lugar.

INFO


Repositório	`iart-ai/motion-skills` (upstream, MIT)
Consolidado por	V4TIME — V4SKILL
O que é	51 habilidades de motion graphics/animação/vídeo para agentes de IA de codificação, reorganizadas
Formato	Habilidade de referência — lê-se como um manual, um único SKILL.md
Instalar pacotes originais	`npx skills add iart-ai/tiktok-video-skills` etc.
Quando usar	Qualquer solicitação envolvendo motion graphics, animação, produção de vídeo, motion para web, visualização de dados, 3D/WebGL, animação matemática ou negócios de motion freelance

Tema Principal

Ensinar um agente de IA de codificação a produzir motion graphics, animação e vídeo em todo o pipeline — de um clipe no estilo TikTok com gancho a um fundo shader WebGL, de um vídeo explicativo narrado a um documento de sistema de motion para marca. A coleção abrange 14 domínios, cada um com seu próprio pacote instalável, e compartilha uma estrutura comum: cada habilidade é um SKILL.md + pasta references/ autocontidos que ensinam um fluxo de trabalho. Habilidades que produzem um artefato visual incluem um loop de entrega e verificação, além de um pequeno kit de ferramentas scripts/.

O fio condutor: motion como arte, não como mágica. Cada pacote é fundamentado em técnicas de produção reais — princípios de timing/easing, cortes precisos por quadro, sincronia com a batida, disciplina de 60fps, especificações de plataforma, acessibilidade — não apenas "faça animar".

Principais Temas

Vídeo vertical curto é uma gramática distinta. Ganchos, interrupções de padrão, ritmo, edição para retenção, legendas sincronizadas com palavras, terços inferiores, cronômetros regressivos — 9:16 é uma linguagem própria, não apenas "vídeo virado de lado".
Os dados conduzem o movimento. Corridas de gráficos, contadores crescentes, infográficos animados, resumos no estilo "Wrapped", criativos de anúncios em lote a partir de CSV — o movimento é uma função dos números, renderizado com exatidão em cada quadro.
Tipografia cinética é texto como movimento. Atrasos de caracteres/palavras/linhas, revelações de texto dividido, transições de peso de fonte variável, texto em um caminho, cartões de letra/título — o texto não fica parado, ele atua.
Motion para web vive ou morre nos 60fps e na acessibilidade. Anime apenas transform/opacity, elimine thrash de layout, respeite prefers-reduced-motion com degradação em camadas, transições de página no Next.js App Router, micro-interações, desenhos de SVG, reprodução de Lottie.
3D/WebGL é uma trilha separada. Shaders de fragmentos GLSL, cenas Three.js/R3F, sistemas de partículas — vinculados à GPU, conscientes de vazamentos de memória, implantados como fundos e efeitos, não como o produto inteiro.
Animação matemática é uma arte própria. Manim CE — cenas, mobjects, morphs LaTeX, ValueTrackers, câmera móvel 3D — para vídeos educacionais no estilo 3Blue1Brown e visualizações de equações.
Animação de mapas editoriais é geografia como narrativa. Zooms de câmera, rotas desenhadas, pinos inseridos, destaques de regiões, o tremor de 12fps — estilo Vox, a partir do Google Earth Studio ou GeoJSON/SVG.
Motion de marca é um sistema, não algo único. Tokens de easing/timing, bibliotecas de motion, regras de logotipo, padrões de acessibilidade — criados uma vez, referenciados em todos os lugares.
Motion freelance é um negócio. Briefings, precificação, limites de revisão, especificações de entrega, diretrizes de motion para marca — o back-office que mantém um motion designer ou estúdio solvente.
Toda habilidade visual inclui um loop de verificação. Congele um quadro, monte uma folha de contato, inspecione o MP4 codificado — o agente confirma sua própria saída antes de entregar. Habilidades para web renderizam HTML autônomo; habilidades para vídeo renderizam via Remotion ou Manim.

As 51 Habilidades — Consolidades, Reordenadas, Reescritas

Organizadas por fluxo de trabalho, não por pacote original. A ordem foi alterada. As explicações de aproximadamente metade foram reescritas do zero; o restante foi condensado a partir das descrições originais do README.

A. Vídeo Vertical Curto (TikTok / Reels / Shorts)

1. short-form-video

O que faz: A gramática estrutural do vídeo vertical 9:16 — ganchos que sobrevivem ao deslize, interrupções de padrão que redefinem a atenção, ritmo que mantém a retenção e estruturas de modelo repetíveis que podem ser reestilizadas. Ensina o problema dos primeiros 3 segundos como uma restrição de design, não um sentimento vago.

Quando ativa: Ao fazer um Reel/TikTok/Shorts, construir um modelo reutilizável de formato curto, editar para retenção, corrigir aberturas fracas, apertar o ritmo, fazer um loop contínuo.

2. caption-animation

O que faz: Legendas no estilo karaokê sincronizadas com palavras a partir de uma transcrição ou narração — tempo de aparecimento por palavra, destaque da palavra ativa, posicionamento em área segura para que as legendas nunca colidam com a interface da plataforma. Renderiza legendas gravadas ou fornece o array de palavras temporizadas para alimentar outro renderizador.

Quando ativa: Transformar uma narração em legendas palavra por palavra no estilo Hormozi, gravar legendas em um clipe, adicionar legendas animadas a um Reel.

3. countdown-video

O que faz: Cronômetros regressivos precisos por quadro e sem deriva, com movimento de giro/rolagem de dígitos e duração configurável — telas "começando em breve", contagens regressivas de lançamento/promoção, contadores animados que chegam a zero no quadro exato. Resolvido contra o problema de deriva que quebra a maioria das implementações ingênuas de temporizador.

Quando ativa: Construir um cronômetro regressivo, tela "começando em breve", contagem regressiva de lançamento, contador animado que deve terminar em zero.

4. lower-thirds

O que faz: Terços inferiores limpos e com marca para nome/cargo, com animação de entrada/saída em etapas — modelados para que você possa aplicar a mesma aparência a uma lista inteira de pessoas com nomes diferentes. Inclui posicionamento em área segura e bloqueio de marca (cores, tipo de letra, posição do logotipo).

Quando ativa: Criar terços inferiores animados, crachás de nomes, sobreposições de palestrantes, títulos no estilo broadcast para uma lista de pessoas.

5. text-message-animation

O que faz: Anima uma conversa de chat — balões aparecem um de cada vez, indicadores de digitação piscam, sons de envio caem na batida, a conversa rola automaticamente — com estéticas do iMessage/WhatsApp/SMS, renderizada a partir de um array de mensagens ou CSV, de modo que um modelo produza vídeos infinitos.

Quando ativa: Fazer um vídeo falso de mensagem de texto, história do iMessage, clipe de conversa do WhatsApp/SMS, animação de resposta de chat, criar vídeos de mensagens de texto em lote a partir de um CSV.

B. Podcast / YouTube / Longa Duração

6. audiogram

O que faz: Transforma um clipe de podcast, narração ou citação em um vídeo de forma de onda legendada dimensionado para Reels/TikTok/Shorts/publicações no feed — forma de onda reativa, barra de progresso opcional, legendas, saída quadrada ou vertical. O fio condutor visual orientado por áudio é o produto, não uma decoração.

Quando ativa: Fazer um audiograma, transformar um podcast em um vídeo, adicionar uma forma de onda em movimento a uma narração, exportar uma citação de podcast para redes sociais.

7. youtube-intro-outro

O que faz: Constrói uma vinheta de introdução com marca de 3 a 5 segundos e um encerramento de 20 segundos que respeita as zonas de elementos clicáveis do YouTube (botão de inscrição, cartão de próximo vídeo, etc.) como restrições de design, não como reflexões tardias. Modelo reutilizável onde apenas nome/logotipo/cores/vinheta mudam por canal.

Quando ativa: Fazer uma introdução do YouTube, bumper de canal, vinheta de logotipo, encerramento, tela final, cartão final com espaço para inscrever-se/próximo vídeo.

C. E-Commerce / Produto

8. product-demo-video

O que faz: Transforma capturas de tela estáticas de produto/app em uma demonstração animada e polida — molduras de dispositivo, cursor sintético + clique, zoom em região, legendas de recurso — de modo que uma captura de tela plana se torne um passo a passo sem um gravador de tela. Controle quadro a quadro sobre o que o espectador vê e quando.

Quando ativa: Fazer uma demonstração de produto, passo a passo de app/SaaS, vídeo de anúncio de recurso a partir de capturas de tela, emoldurando cada tela em uma janela de navegador.

9. promo-video

O que faz: Anúncio de venda curto e impactante de 6 a 15 segundos — revelação de desconto, preço de era→agora riscado, código promocional, contagem regressiva, CTA — criado em lote para muitos produtos a partir de uma tabela de dados, de modo que um modelo renderize N promoções com preços extraídos dos dados. Construído para Black Friday / vendas relâmpago onde o volume é importante.

Quando ativa: Criar um vídeo de venda/promoção/revelação de desconto/Black Friday/venda relâmpago, criar promoções em lote a partir de um CSV de ofertas.

10. photo-slideshow

O que faz: Transforma uma pasta de fotos em um vídeo finalizado — movimento Ken Burns por foto, transições sincronizadas com a batida, proporções de aspecto mistas tratadas, legendas sobrepostas. As fotos não são apenas cortadas; elas se movem com intenção.

Quando ativa: Transformar fotos em um slideshow/montagem/vídeo de resumo com música, movimento Ken Burns sincronizado com uma faixa.

D. Anúncios / Marketing

11. ad-creative-video

O que faz: Um modelo de anúncio orientado a dados × um CSV = N variantes de anúncio combinadas por mensagem, exportadas para cada proporção de posicionamento (9:16, 4:5, 1:1, 16:9) para teste A/B. O criativo é parametrizado para que o gancho, o corpo, o CTA e a oferta venham todos da linha de dados.

Quando ativa: Fazer um anúncio em vídeo, criar variantes de anúncio em lote a partir de uma tabela de dados para teste A/B, exportar um anúncio para múltiplas proporções de aspecto para Meta/TikTok/Reels/YouTube.

12. launch-video

O que faz: Vídeos de lançamento de produto / hype de alta energia — gancho → provocação → revelação → montagem de recursos → CTA de cartão final, cortado na batida. A estrutura é um modelo; a energia é a variável que você ajusta.

Quando ativa: Construir um vídeo de lançamento de produto de 30 segundos, reel de hype, revelação sincronizada com a batida, filme de CTA com cartão final.

13. testimonial-video

O que faz: Clipes de citações/avaliações animados com revelações de linhas escalonadas, ênfase em frases-chave, classificações de estrelas fracionárias e um bloco de autor — transforma uma lista de avaliações de clientes em um vídeo de prova social cada, com bloqueio de marca.

Quando ativa: Transformar avaliações de clientes em clipes de depoimentos animados, vídeos de citações com classificações de estrelas, vídeo de prova social a partir de uma lista de avaliações.

E. Explicativo / Educacional

14. explainer-video

O que faz: Transforma uma mensagem em um curta narrado e ritmado de 30 a 90 segundos — roteiro → storyboard → construção de cena → sincronização de narração/legendas → edição → polimento. O pipeline completo, não apenas uma etapa de renderização. Lida com a lacuna entre o roteiro e a tela que a maioria das ferramentas de motion ignora.

Quando ativa: Fazer um vídeo explicativo, de como funciona, de integração ou de conceito; transformar um recurso em um clipe narrado de como funciona.

15. wrapped-video

O que faz: Constrói resumos no estilo "Spotify Wrapped" — um modelo × uma tabela de dados → muitos vídeos 9:16 personalizados, cada um preenchido a partir de uma linha. O modelo é fixo; os dados variam por usuário.

Quando ativa: Construir um vídeo de resumo anual no estilo Spotify Wrapped a partir de um CSV de usuários, vídeos de estatísticas por usuário.

16. diagram-animation (reescrito)

O que faz: Revela diagramas e gráficos ao longo do tempo em vez de exibi-los inteiros de uma vez — revelações progressivas de nós/arestas, conectores fluidos que se desenham, barras crescentes que sobem, contagens que aumentam. O espectador lê o diagrama enquanto ele é construído, não como uma imagem estática que aparece de repente. Lida com diagramas de arquitetura, fluxogramas e gráficos de dados da mesma forma: divulgação em etapas.

Quando ativa: Animar um diagrama, fluxograma, arquitetura ou gráfico passo a passo; revelar nó por nó; crescer barras e aumentar números.

17. whiteboard-animation (reescrito)

O que faz: Explicadores no estilo "VideoScribe" desenhados — uma mão esboça ilustrações e escrita à mão em um quadro, traço por traço, ritmado com a narração. A revelação é o movimento; a mão é o dispositivo. Não é um substituto para bom conteúdo, mas o mecanismo de entrega que faz uma ilustração básica parecer uma lição se desenrolando.

Quando ativa: Fazer um explicador no estilo lousa branca, animação desenhada, ilustrações esboçadas à mão ritmadas com a narração.

18. isometric-animation (reescrito)

O que faz: Cenas isométricas / 2.5D — camadas empilhadas, blocos extrudados, diagramas explodidos, grades isométricas com revelações escalonadas e deriva de câmera. Dá à diagramação plana uma terceira dimensão sem ir para o 3D completo; a câmera deriva, as camadas se separam, o espectador obtém dicas de profundidade sem um pipeline WebGL.

Quando ativa: Construir cenas isométricas/2.5D, diagramas de camadas empilhadas, vistas explodidas, grades isométricas com revelações escalonadas e deriva de câmera.

19. manim (reescrito)

O que faz: Constrói animações de matemática/física/ciência da computação em Python com o Manim Community Edition — Cenas e Mobjects, primitivas de animação, morphs de equações LaTeX/MathTex, gráficos e updaters (ValueTracker), 3D e câmera móvel, renderização via CLI para MP4/GIF com um loop de verificação de renderizar um quadro primeiro. A toolchain do 3Blue1Brown, disponível para um agente que pode escrever o código da cena.

Quando ativa: Fazer uma animação matemática, animar uma equação, usar Manim, fazer um vídeo no estilo 3Blue1Brown, plotar e animar uma função, transformar uma fórmula em outra, renderizar uma superfície 3D com uma câmera orbitando.

F. Tipografia Cinética

20. kinetic-typography

O que faz: Anima texto em CSS, GSAP SplitText, Framer Motion e Remotion — atrasos de caracteres/palavras/linhas, revelações de texto dividido, transições de peso de fonte variável, texto em um caminho, cartões de letra/título. O texto é o sujeito do movimento, não um rótulo sobre algo.

Quando ativa: Animar um título, fazer um vídeo de tipografia cinética, criar um cartão de título animado, revelação de texto dividido, escalonar texto por caractere/palavra/linha, fazer um vídeo de letra ou legenda, animar um peso de fonte variável, colocar texto em um caminho.

G. Animação Web

21. gsap-web

O que faz: Motion web orientado a código com GSAP — timelines, ScrollTrigger, SplitText, Flip e sincronização de rolagem suave com Lenis. A ferramenta de timeline padrão da indústria conectada a uma página web, não um plugin fechado.

Quando ativa: Construir animações web orientadas por rolagem, de herói ou de revelação de texto com GSAP; fixar uma seção de herói que percorre uma timeline com a rolagem.

22. 60fps-animation

O que faz: Princípios de animação web a 60fps — animar apenas transform/opacity, evitar thrash de layout, degradação em camadas para prefers-reduced-motion, micro-interações, animações de estado de hover/foco/ativo, animações de campo de formulário, animações de carregamento ambiente (esqueletos, spinners, barras de progresso). A regra: a página nunca deve parecer que está lutando.

Quando ativa: Depurar uma animação que trava, consertar reflow de layout, adicionar suporte a movimento reduzido, projetar uma micro-interação suave.

23. framer-motion

O que faz: Animações no React com Framer Motion — declarações de motion.div, variantes, gesture handlers (enquanto passa o mouse, toca, arrasta), AnimatePresence para animações de saída, LayoutGroup para layout compartilhado, useScroll/useInView para animações orientadas por rolagem, motion() para criar componentes de movimento personalizados. A biblioteca padrão para motion no ecossistema React.

Quando ativa: Adicionar animações de entrada/saída/página no React/Next.js com Framer Motion, animar saídas de lista com AnimatePresence, animações de layout com LayoutGroup, animações orientadas por rolagem.

24. lottie-web

O que faz: Reproduzir e controlar animações Lottie na web — carregar, reproduzir, pausar, percorrer no tempo e loop com Lottie-web e lottie-react. Gerencia o cache de animações para que a troca seja instantânea após o primeiro carregamento, dimensiona o viewport sem explosão de memória, expõe segmentos e marcadores. Transforma o arquivo do designer em um player controlável.

Quando ativa: Reproduzir uma animação Lottie em um site, controlar reprodução/loop/segmentos, carregar Lottie no React.

25. svg-animation

O que faz: Animar SVG nativo — stroke-dasharray/dashoffset para caminhos que se desenham, transições de morph de forma, animações de atributos, animações CSS para elementos SVG e interpolação de caminhos. O SVG não precisa de uma biblioteca para se mover; o navegador faz isso de graça.

Quando ativa: Desenhar um ícone SVG, animar um logotipo, morph de uma forma para outra, animar atributos de SVG (cor, raio, etc.).

H. 3D e WebGL

26. threejs-basics

O que faz: Cenas 3D no navegador com Three.js — cena, câmera, renderizador, geometrias, materiais, malhas, luzes, OrbitControls, animação de quadro a quadro com requestAnimationFrame. A base para qualquer coisa que pareça 3D em uma página.

Quando ativa: Construir uma cena 3D no navegador, adicionar geometrias com Three.js, animar um objeto 3D, configurar OrbitControls.

27. r3f-scenes

O que faz: Three.js declarativo com React Three Fiber — <Canvas>, <mesh>, <Box>, <OrbitControls>, <Float>, <Text>, <Environment>, <useFrame> para animação quadro a quadro. A mesma potência 3D, dentro do mundo do React.

Quando ativa: Construir uma cena 3D no React/Next.js com React Three Fiber (R3F), adicionar geometria e animação 3D a uma página React.

28. glsl-shaders (reescrito)

O que faz: Shaders de fragmentos WebGL escritos em GLSL — uniforms de tempo/resolução/rato, padrões de SDF, paletas de cores analíticas, código de shader embutido em um buffer canvas 2D ou em uma cena Three.js/R3F. O pixel é seu meio; você escreve uma função por pixel que desenha todo o quadro, executada na GPU, paralelizada sobre milhões de pixels. Pode parecer abstrato, mas o resultado é um fundo animado, uma transição ou um efeito que nenhuma outra técnica consegue igualar em desempenho ou expressão visual.

Quando ativa: Escrever um shader de fragmentos GLSL, adicionar um fundo animado alimentado por GPU, prototipar uma transição de shader, depurar um shader que não compila.

29. particles-threejs

O que faz: Sistemas de partículas no Three.js — geometria Points, posições de vértices, cores, tamanhos, animação quadro a quadro via PointsMaterial, animação de textura de sprite, emissores que geram/eliminam partículas, aceleração e gravidade. As partículas não são sprites individuais; são um único buffer de vértices desenhado como uma nuvem de pontos.

Quando ativa: Construir um sistema de partículas, adicionar uma nuvem de estrelas, simular fumaça/fogo/faíscas em 3D.

I. Visualização de Dados

30. chart-animation

O que faz: Gráficos animados — corridas de barras, gráficos de linhas com caminhos que se desenham, gráficos de pizza com revelações segmentadas, dispersões com pontos que pousam. Os números chegam primeiro; a forma segue. Cada tipo de gráfico tem seu idioma de animação: as barras correm, as linhas se desenham, as fatias giram para dentro.

Quando ativa: Animar um gráfico de barras, corrida de gráfico, gráfico de linhas com traçado, gráfico de pizza com revelação de fatia.

31. data-vis-animation

O que faz: Narrativa visual de dados — sobreposições de números animados, escalas, contadores crescentes, animações de big numbers, destaques orientados por dados. O número não fica parado; ele muda, conta, sobe, destaca. A animação enfatiza a mudança e a magnitude.

Quando ativa: Animar big numbers, sobreposições de dados, destaques de estatísticas, contar de zero até um valor.

32. timeline-animation

O que faz: Revelações progressivas de linha do tempo — eventos que aparecem em ordem, barras de duração que se expandem, linhas de conexão entre eventos, indicador de agora. O tempo é o eixo; o conteúdo se desenrola ao longo dele.

Quando ativa: Construir uma animação de linha do tempo, revelar eventos em ordem cronológica, animar marcos históricos, impulsionar uma viagem no tempo.

J. Ferramentas de Produção

33. template-video (reescrito)

O que faz: Um modelo de vídeo onde a estrutura é fixa, mas o conteúdo (texto, imagens, vídeos, cores, música) vem de um arquivo de dados — CSV para texto/números, uma pasta de ativos para mídia. Um modelo × muitos dados = saída consistente em escala. O modelo é o invólucro; os dados são a variação. As habilidades 1 a 32 são modelos conceituais; esta é a infraestrutura que os torna repetíveis e escaláveis.

Quando ativa: Criar um modelo de vídeo reutilizável, renderizar vídeos a partir de dados, escalar a produção de vídeo, criar uma fábrica de vídeos.

34. scriptwriting (reescrito)

O que faz: Escrever um roteiro para um vídeo curto ou explicador — estrutura baseada em gancho, contagem de palavras para duração alvo, tom para o público, linhas de narração numeradas para storyboard e anotação de tempo. O roteiro é um documento de produção: cada linha corresponde a um segmento de vídeo que será construído, editado e mixado. A saída é um documento que um editor (humano ou agente) pode executar.

Quando ativa: Escrever um roteiro, estruturar um vídeo, planejar um storyboard, calcular a duração de um roteiro para um alvo de 30/60/90 segundos.

35. storyboarding

O que faz: Transforma um roteiro em um storyboard visual — descrições de cena, ângulos de câmera, ações de personagens, elementos na tela, transições, número de quadro ou carimbo de tempo. O storyboard preenche a lacuna entre o que o roteiro diz e o que a tela mostra.

Quando ativa: Planejar visualmente um vídeo, criar um storyboard a partir de um roteiro, definir ângulos e transições de câmera.

36. voiceover-sync

O que faz: Sincroniza um arquivo de áudio de narração com o vídeo — carimbo de tempo de palavras/frases a partir do áudio, alinhamento de cena com a narração, ajuste de duração de cena para caber na narração, geração de legendas a partir do áudio. O que o narrador diz determina quanto tempo cada cena fica na tela.

Quando ativa: Sincronizar narração com vídeo, alinhar cenas com tempos de áudio, gerar legendas a partir de áudio, ajustar temporização de cena à narração.

37. video-editing (reescrito)

O que faz: Edição programática de vídeo — corte, divisão, emenda, transições (dissolver, cortar, deslizar), sobreposições (texto, imagem, vídeo), mixagem de áudio (volume, fade), redimensionamento e corte para proporções, sobreposição de legendas. A edição não é manual; é uma sequência de quadros que você descreve como dados: cada faixa de tempo, cada efeito, cada transição são valores em um plano de edição que um renderizador executa.

Quando ativa: Editar um vídeo, cortar/emendar clipes, adicionar transições, sobrepor texto/imagens/vídeo, mixar áudio.

K. Motion Freelance

38. motion-brief

O que faz: Estruturar um briefing de motion para um projeto freelance — escopo, estilo de animação, dimensões/duração, áudio, marca, entrega, prazo, orçamento. O briefing é o contrato criativo: define o que será feito, como será e quando chega.

Quando ativa: Escrever um briefing de motion, definir escopo de projeto, comunicar requisitos a um motion designer.

39. pricing

O que faz: Precificar um projeto de motion — modelos de taxa fixa, diária e por projeto, estimativa com base em escopo/duração/complexidade, custos de revisão, taxas de licenciamento, termos de pagamento. O preço não é um palpite; é uma função do escopo e da complexidade.

Quando ativa: Precificar um projeto de motion, estimar custo, definir orçamento, calcular taxa de revisão/licenciamento.

40. revision-management

O que faz: Gerenciar revisões — rodadas de revisão, coleta de feedback, rastreamento de alterações, limites de revisão, processo de aprovação final. A revisão não é interminável; ela é estruturada em rodadas com limites claros.

Quando ativa: Gerenciar revisões de projeto de motion, definir rodadas de feedback, rastrear alterações, finalizar aprovação.

41. delivery-specs

O que faz: Especificar formatos de entrega — codec, resolução, taxa de quadros, bitrate, perfil de cor, formato de arquivo, plataforma alvo. A entrega não é apenas "enviar o arquivo"; é entregar o arquivo correto para o destino correto.

Quando ativa: Especificar formatos de entrega de vídeo, definir codec/resolução/bitrate, preparar arquivos para plataforma.

42. motion-guidelines (reescrito)

O que faz: Documentar um sistema de motion para uma marca — princípios de motion, tokens de easing e timing, animações de componentes, regras de logotipo, padrões de acessibilidade, exemplos de implementação. As diretrizes são a única fonte de verdade para como uma marca se move. Cada entrada de easing, cada duração de transição, cada animação de componente é especificada uma vez e referenciada por todos os projetos. Sem adivinhação.

Quando ativa: Escrever diretrizes de motion de marca, definir sistema de motion, documentar tokens de easing/timing, criar guia de marca para motion.

L. Motion Avançado

43. 3d-motion (reescrito)

O que faz: Técnicas de motion 3D — animação de câmera, animação de luzes, animação de material, rigging e animação de esqueleto, morph targets, partículas 3D. O motion 3D opera em um espaço tridimensional onde câmera e luzes são personagens ativos, não configurações passivas.

Quando ativa: Animar uma câmera 3D, animar luzes, animar esqueleto, configurar morph targets, simular partículas 3D.

44. compositing (reescrito)

O que faz: Composição de múltiplas camadas — empilhamento de camadas, modos de mesclagem, máscaras, grades, efeitos de cor, sombras, desfoques, animação de opacidade. A composição não é apenas empilhar camadas; é combinar camadas para que pareçam uma única imagem.

Quando ativa: Compor múltiplas camadas de vídeo, sobrepor efeitos, mascarar camadas, mesclar com modos de mesclagem.

45. motion-graphics-3d (traduzido)

O que faz: Motion graphics 3D — texto 3D, formas 3D, extrusão de logotipo 3D, animação de câmera, animação de material. O motion graphics ganha profundidade sem se tornar um produto 3D completo.

Quando ativa: Fazer motion graphics 3D, animar texto 3D, extrudar logotipo, animar câmera ao redor de elemento 3D.

M. Animação Matemática

46. manim-advanced (reescrito)

O que faz: Técnicas avançadas do Manim — cenas 3D com câmera móvel, animação de superfície paramétrica, morph de equação LaTeX, ValueTrackers e updaters para gráficos animados, saída de alta resolução. Este é o Manim com potência total: a câmera não fica parada, as equações não ficam estáticas e a saída é adequada para transmissão.

Quando ativa: Fazer animação matemática avançada, cenas 3D do Manim, superfícies paramétricas, morph de equações, gráficos com updaters.

N. Animação de Mapas

47. map-animation

O que faz: Animação de mapas editoriais — zooms de câmera para localização, rotas desenhadas em movimento, pinos que caem, regiões destacadas, o tremor de câmera de 12fps, rotações de mapa. Vídeos no estilo Vox onde o mapa conta uma história.

Quando ativa: Fazer uma animação de mapa, zoom de câmera para localização, animação de rota, pino caindo, destaque de região.

O. Integração e Scripts

48. remotion-pipeline (reescrito)

O que faz: Renderizar vídeos via Remotion — componente React → quadro → MP4. Escrita de frames, composição, configuração de input, renderização via CLI. O Remotion é o motor de renderização que transforma componentes React em quadros de vídeo, um de cada vez. Esta habilidade conecta o componente ao arquivo.

Quando ativa: Renderizar um vídeo com Remotion, configurar um pipeline de renderização Remotion, escrever um componente que saia como MP4.

49. verify-loop (reescrito)

O que faz: O loop de verificação que toda habilidade visual entrega — congelar um quadro, gerar uma folha de contato de quadros de amostra, verificar codificação de MP4, verificar duração/taxa de quadros/resolução, inspecionar o perfil de cor. Antes de o agente dizer "pronto", ele verifica se o que foi renderizado corresponde ao que foi prometido. Sem verificação, a saída é um palpite.

Quando ativa: Verificar a saída de vídeo renderizada, inspecionar um quadro congelado, gerar folha de contato, validar codificação MP4, confirmar especificações de renderização.

50. scripts-toolkit (reescrito)

O que faz: O kit de ferramentas scripts/ que acompanha cada habilidade de saída visual — congelar quadro, folha de contato, info de arquivo MP4, redimensionar/recortar em lote, extrair áudio. Não é um framework; é um conjunto de utilitários que o agente pode chamar para inspecionar, validar e transformar arquivos de vídeo.

Quando ativa: Usar scripts para inspecionar/validar/transformar vídeos, congelar um quadro, gerar folha de contato, verificar codificação, redimensionar/recortar/extrair áudio em lote.

P. Motion de Marca

51. brand-motion-system

O que faz: Um sistema completo de motion de marca — princípios de motion, tokens de easing, tokens de timing, animações de logotipo, animações de componentes, padrões de acessibilidade, exemplos de código, referências de implementação. Não é uma única animação; é o sistema que as governa todas.

Quando ativa: Construir um sistema de motion de marca, definir tokens de easing/timing de marca, documentar animações de componentes de marca, criar guia de implementação de motion.

Instalação e Uso

Instalar pacotes originais (separadamente)

npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/data-vis-skills
# ... 14 pacotes no total em github.com/iart-ai/motion-skills

Usar esta habilidade consolidada

npx skills add v4time/v4skill

Esta é uma única SKILL.md de referência. Ela não substitui os pacotes originais — ela os consolida em um mapa para que você veja todo o domínio.

Licença

MIT — use, modifique, redistribua. Atribuição a iart-ai/motion-skills é apreciada, mas não exigida.

Nota do Consolidator

Reorganizado por fluxo de trabalho, não por pacote. Explicações de aproximadamente metade das habilidades reescritas do zero; o restante condensado a partir das descrições originais do README. A ordem dos fluxos de trabalho foi alterada para construir desde o básico (vídeo curto vertical) até sistemas (motion de marca). O objetivo: um mapa único e coerente de motion de IA que um agente possa ler e executar.

Consolidado por V4TIME — V4SKILL

Perguntar na sua IA favorita

Documentação