pisakhov/x-motion

X Motion

Crie movimento que comunique algo específico. O gosto é contextual: uma demonstração técnica silenciosa e um identificador musical exuberante exigem decisões diferentes. Um renderizador capaz não é garantia de bom design. O trabalho conquista sua qualidade através de direção de arte, execução, observação e revisão.

Este é um método original e portátil de design de movimento, inspirado na discussão sobre agente de design no artigo da LangChain. Ele não depende de código ou serviços da LangChain e não implica nenhuma afiliação.

Contrato de trabalho

• Siga as instruções do projeto anfitrião e o escopo real do usuário. Esta skill não concede permissão para publicar, gastar, chamar modelos, obter credenciais ou usar ativos sem licença.
• Use uma tese visual e um ponto focal dominante em um dado momento. A complexidade pode apoiar a tese; não deve competir acidentalmente com ela.
• Projete o tipo, espaçamento, tratamento de imagem, movimento e som como um sistema. Não decore uma ideia fraca para parecer sofisticada.
• Escolha ferramentas adequadas para o trabalho e o ambiente disponível. Nenhum modelo, estrutura ou mecanismo de renderização específico é necessário.
• Separe evidências técnicas de julgamento estético. Nunca invente uma pontuação de gosto, reação do público ou aprovação. Nunca afirme ter assistido a um vídeo quando apenas suas imagens estáticas foram inspecionadas.
• Mantenha os ativos locais e sua proveniência explícita. Fixe dependências. Mantenha as renderizações geradas fora do controle de versão, a menos que o projeto deliberadamente as exija.

Escolha o menor processo útil

Pequena edição: uma correção de cópia, ajuste de temporização, troca de ativo ou correção de easing isolada pode dispensar um novo briefing, storyboard e animatic. Preserve a direção aprovada; inspecione o trecho afetado e seus vizinhos, re-renderize e execute as verificações relevantes. Escale para o processo completo se a alteração modificar a mensagem, hierarquia ou narrativa.

Nova composição ou redesenho substancial: siga as etapas abaixo. Dimensione os artefatos conforme a tarefa; um título de seis segundos não precisa de uma bíblia de produção. Se uma intenção crucial estiver faltando, faça uma pergunta focada. Quando as perguntas não estiverem disponíveis, rotule uma suposição conservadora e evite trabalho irreversível.

1. Briefing → tese visual

Estabeleça público, mensagem desejada, contexto de visualização, duração, proporção de aspecto, entregáveis, cópia/ativos necessários, restrições de marca, necessidades de acessibilidade e se o som pode carregar significado. Marque requisitos rígidos separadamente das preferências.

Escreva uma tese neste formato:

Para [público], faça [ideia] parecer [qualidade específica] através de [mecanismo visual], para que eles entendam ou façam [resultado].

Nomeie a metáfora organizadora, o sujeito dominante, o papel tipográfico e a lógica de movimento. Uma lista como “premium, cinematográfico, limpo” não é uma direção. Explique quais escolhas tornam essas palavras tangíveis. Use referências para identificar princípios, não para reproduzir a identidade do trabalho de outro.

Leia Direção de arte para resolução de briefing, análise de referência e uma linguagem visual coerente.

2. Storyboard → argumento legível

Planeje os beats antes de polir os quadros. Para cada beat, registre:

Intervalo de tempo	O que o espectador aprende	Ponto focal / quadro-chave	Transição e motivo	Sinal sonoro
Início–fim	Uma mensagem	Sujeito e hierarquia	O que muda e porquê	Evento ou silêncio deliberado

Desenhe ou renderize quadros representativos com texto real e proporções realistas de ativos. Dê tempo suficiente para leitura e reconhecimento; não distribua cada beat uniformemente por hábito. Confirme a promessa de abertura, as ligações causais entre os beats e a conclusão final. Valide texto crítico ou direção com o humano quando necessário, antes da produção cara.

Leia Tipografia antes de travar a composição ou a temporização do texto.

3. Animatic → teste o tempo de forma barata

Construa quadros, blocos ou movimento grosseiro com temporização aproximada. Use som temporário apenas quando legal e claramente rotulado. Teste o tempo total de execução na velocidade pretendida, não apenas arrastando.

Verifique se a atenção chega onde a informação está, se o texto pode ser lido e se o final tem espaço para pousar. Corrija a estrutura aqui. Traga à tona incertezas sobre a direção em vez de polir para escondê-las.

Leia Animação e câmera para design temporal e construção de cena determinística; leia Áudio quando o som fizer parte da peça.

4. Produção → execução intencional

Refine os beats aprovados com tipografia final, ativos, iluminação ou tratamento gráfico, curvas de movimento, transições e som. Preserve a tese. Cada efeito adicionado deve ter um trabalho: revelar, conectar, enfatizar, orientar ou resolver. Se não fizer nenhum desses, remova-o ou justifique seu papel expressivo.

Contrato opcional do renderizador HTML

Ao usar o renderizador HTML do X Motion, cada composição expõe:

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // Defina cada propriedade animada a partir deste timestamp e dos dados fixos da cena.
  // Chamadas repetidas, incluindo chamadas fora de ordem, produzem o mesmo quadro.
};
window.renderAudio = async function ({ sampleRate }) {
  // Opcional. Construa a partitura em um OfflineAudioContext e retorne seu AudioBuffer.
};

Estes números são ilustrativos, não padrões de design. Largura e altura são pixels; duração, poster e tSeconds são segundos; fps é a taxa de quadros. poster é opcional e nomeia o quadro usado como thumbnail. Corresponda-os ao briefing.

• Calcule o estado diretamente a partir do timestamp fornecido. Nenhum tempo de relógio real, animações CSS autônomas, etapas de simulação acumulativas, ativos de rede ou aleatoriedade sem semente.
• Carregue e decodifique ativos e fontes locais antes da captura. Não introduza mutações de quadro assíncronas após renderFrame retornar; verifique o mecanismo de prontidão do renderizador anfitrião.
• Defina o comportamento nos limites dos beats e além do intervalo ativo. Teste timestamps repetidos e buscas reversas.
• A função de quadro define visuais, não reprodução de áudio. O som vem apenas de renderAudio: um ou dois canais, renderizado offline, idêntico em cada chamada. A reprodução de mídia HTML nunca é capturada.

Resolva primeiro a localização real deste diretório de skill, seguindo qualquer link simbólico de instalação para o clone completo do X Motion. A raiz do repositório é ../.. em relação a esse diretório skills/x-motion resolvido, não em relação ao diretório de trabalho atual do usuário. Mude para essa raiz do repositório antes de executar estes comandos; os caminhos de composição abaixo são relativos a ela.

Exporte PNGs do storyboard e manifest.json (sem vídeo por padrão). Adicione --times 0.5,2,4.25 para escolher os stills e --audio para também exportar sound.wav com valores de loudness:

node scripts/render.mjs path/to/scene.html --out renders/nome-storyboard --audio

Exporte PNGs do storyboard, quadros completos, poster.webp, film.mp4 (com a partitura multiplexada como AAC quando renderAudio existir) e manifest.json:

node scripts/render.mjs path/to/scene.html --out renders/nome-video --video

Use um diretório de saída novo para cada revisão. Inspecione manifest.json e as saídas reais antes de relatar sucesso: ele registra uma verificação de determinismo de quadro, uma verificação de determinismo de áudio, loudness integrado, pico verdadeiro e amostras recortadas. A codificação de vídeo requer ffmpeg. Em outro anfitrião, preserve a semântica de timestamp determinística e adapte o comando de exportação.

5. Crítica → revisão → entrega

Quando o feedback nomear um ID de vídeo publicado, leia Feedback da galeria. Resolva o filme exato, preserve sua identidade e feedback, e publique revisões sob novos IDs vinculados. Carregue lições limitadas ao escopo, não cada instrução específica de um clipe como uma regra universal.

Inspecione os artefatos renderizados, não apenas o código fonte. Veja o storyboard para composição e reproduza o vídeo para ritmo; ouça o áudio exportado quando presente. Se a reprodução ou audição não estiver disponível, declare exatamente o que permanece não revisado.

Use Crítica e entrega para separar falhas mensuráveis de preocupações subjetivas. Aborde o problema de maior impacto primeiro. Limite o loop de crítica/revisão a três iterações por direção. Se a direção permanecer não resolvida, pare, explique as preocupações concorrentes e peça ao humano para escolher ou esclarecer antes de continuar. Uma aprovação técnica não é aprovação estética.

Entregue a localização do artefato, localização do código fonte, especificações de exportação, evidências de verificação, limitações conhecidas e perguntas de aprovação não resolvidas. Relate o que você realmente observou. Não publique externamente sem autorização.

Mapa de referências

Carregue apenas as referências necessárias para o estágio atual:

• Direção de arte: intenção, gosto, referências, tese visual.
• Animação e câmera: temporização, encenação, transições, renderização determinística.
• Tipografia: hierarquia, tipo cinético legível, manipulação de fontes.
• Áudio: mapas de sinal sonoro, sincronização, silêncio, verificações de exportação.
• Crítica e entrega: evidências, revisão limitada, entrega.
• Feedback da galeria: IDs imutáveis, feedback de chat, manter/melhorar/descartar e aprendizado com escopo.