Claude Motion System — guia mestra do usuário
A guia completa está em GUIA-MAESTRA.md (mesma pasta, 20 seções). Não a carregue inteira: leia a seção que a tarefa necessita (busque o cabeçalho # N. com Grep e leia aquele trecho).
Regra principal (§0)
Antes de projetar, gerar, animar, editar ou renderizar qualquer elemento visual de um projeto, leia MOTION.md completo (raiz do repositório). Se não existir, estiver vazio ou já não representar o design real, primeiro audite o projeto e crie-o ou atualize-o. O motion reforça informação, hierarquia, narrativa e marca; nunca é decoração nem uma demo genérica de IA.
Rotina
- Descobrir (§3): README, CLAUDE.md, package.json, tokens CSS/Tailwind, componentes e layouts, logos, fontes, assets, capturas, Figma, vídeos e áudios existentes. Responder: personalidade, cores dominantes e funcionais, tipografias reais, hierarquia, qual movimento é coerente e o que nunca deve mudar.
- Classificar (§3): A sem necessidade de motion (não instalar nada) · B app com potencial de demos (criar
MOTION.md, sem projeto de vídeo) · C motion/vídeo ativo (preparar HyperFrames e QA) · D com After Effects (além disso, MCP do AE). MOTION.md(§5): propósito, identidade, cor, tipografia, grid, linguagem de movimento (princípios, timing, easing, proibições), motion por componente, câmera/3D, áudio, cortes, formatos e quality bar. Constrói-se a partir da identidade REAL; complementa o design system, não o substitui. Se o produto mudou, corrige-se antes de produzir.- Peça nova:
BRIEF.md(§6) →STORYBOARD.md(§7). Cada cena cumpre uma função narrativa, informativa ou de marca. - Áudio (§8): a música é o relógio editorial — beats confiáveis, frases, drops, silêncios; não forçar uma grade de beat.
- Implementar (§9): HyperFrames (
/hyperframescomo entrada) ou o motor que o projeto já tiver. Não duplicar engines (§13): se o repositório já tiver um motor de motion próprio, usa-se esse. - QA (§11): doctor → lint → check → snapshots de frames críticos (olhá-los) → preview completo → render →
ffprobee revisão do arquivo final. Nunca "pronto" só porque compila. - Critério "não parece barato" (§12) e definição de pronto (§17): MOTION-READY e DELIVERY-READY.
Regras de segurança e dívida técnica
- Não instalar dependências de vídeo em projetos que não produzem vídeo (§3, §13).
npxde terceiros (HyperFrames, MCP do After Effects) apenas quando for produzir e com a aprovação da usuária.- After Effects via MCP apenas se existir um
.aepou a entrega exigir; backup antes de mexer (§10). - Assets reais da marca; nunca inventar logos, dados, capturas nem claims (§15). Dados de clientes nunca em peças visuais sem aprovação.
- Recompor por formato (16:9, 9:16, 1:1), nunca corte cego (§16).
Índice da guia
| § | Tema |
|---|---|
| 0 | Ordem mestra |
| 1 | O que o vídeo ensina (HyperFrames, MOTION.md, música, After Effects) |
| 2 | Arquitetura global + por projeto |
| 3 | Bootstrap: descoberta e classificação |
| 4 | Instalar/verificar HyperFrames |
| 5 | Template de MOTION.md |
| 6 | BRIEF.md |
| 7 | STORYBOARD.md |
| 8 | Áudio como relógio editorial |
| 9 | Implementação com HyperFrames |
| 10 | After Effects via MCP |
| 11 | Pipeline de QA obrigatório |
| 12 | Critério "não parece barato" |
| 13 | Sem dívida técnica |
| 14 | Organização recomendada |
| 15 | Política de assets |
| 16 | Multiformato |
| 17 | Definição de "pronto" |
| 18 | Prompt único para preparar um repositório |
| 19 | Comandos de referência |
| 20 | Princípio final |