motion2d-prompt

Prompt de movimento 2D de alto nível

Esta skill transforma uma visão vaga em um prompt após o qual o modelo não toma nenhuma decisão importante por padrão: forma, técnica, formato do quadro e formato de saída, lei de estilo, movimento de assinatura, timing em quadros, batidas ou comprimento do loop, interação, exportação, lista de itens obrigatórios. É uma skill irmã de threejs-world-prompt. O esqueleto é o mesmo, mas em 2D o "uau" é carregado por composição, arte do movimento e linguagem das formas, não por câmera e realismo.

Arquivos de referência: quando ler

• references/forms.md: sempre, assim que a forma for definida. Seções obrigatórias para cada uma das 10 formas.
• references/tech.md: sempre na rodada 0. A matriz forma → técnica, os limites de cada técnica, esqueletos com versões fixadas, exportação e suas consequências.
• references/anatomy.md: sempre antes de escrever. Blocos compartilhados e níveis (micro / mid / max / spec).
• references/craft.md: o glossário de arte do movimento: princípios de animação em código, easing e molas, timing em quadros, coreografia, transições, tipografia em movimento, loops, textura, composição. Leia nas rodadas 2–4.
• references/patterns.md: módulos opcionais (batidas, movimento de assinatura, continuidade de objetos, morphs, paralaxe de camadas, cursor como ator, sincronia de som, quadro de pôster, higiene).
• references/examples.md: três prompts de calibração sintéticos (loop generativo max, tipografia cinética mid, cena de personagem max). Leia aquele que corresponde à forma. Não copie seu conteúdo.

Como conduzir a conversa

Regra geral: o usuário tem a visão, você tem o conhecimento. Proponha decisões concretas (paleta, tipo de letra, easing, comprimento do loop, técnica) e pergunte se elas se encaixam. Não pergunte sobre o que você pode decidir sozinho. Cada rodada: resuma o que foi decidido, proponha padrões, faça 1–3 perguntas sobre o que você realmente não sabe. Para escolhas fechadas, use opções clicáveis se a ferramenta estiver disponível. "Próximo / você escolhe" = aceite as propostas. Pule as rodadas que o usuário já respondeu. Objetivo: 2–5 trocas antes de um rascunho.

Rodada 0: Forma, nível, entrega, técnica

• Forma (forms.md): loop generativo / peça generativa infinita / filme ou explicador de motion design / tipografia cinética / efeito em uma página ou em UI / brinquedo ou instrumento 2D / dados animados / cena de personagem / micro (vinheta de logotipo, loader) / peça de shader. As formas podem ser combinadas; uma é primária.
• Nível: micro (~80–150 palavras), mid (~350–600), max (~1000–1800), spec (formato de engenharia).
• Entrega: página ao vivo / exportação (MP4, WebM, GIF, sequência PNG, Lottie, SVG) / ambos. Decida a exportação agora, pois ela restringe a técnica: toda exportação exige que a animação seja uma função pura do tempo, e o Lottie exige a construção a partir de formas e keyframes desde a primeira linha (tech.md).
• Formato do quadro: viewport responsivo total / 16:9 / 9:16 / 1:1 / 4:5 / componente embutido. Para exportação, forneça resolução e fps.
• Técnica: proponha você mesmo a partir da matriz em tech.md e justifique em uma frase. Pergunte apenas quando o usuário tiver uma restrição (stack do site, uma biblioteca já no projeto).

Rodada 1: Gancho, abertura, ideia central

• Gancho: o que faz alguém não rolar para passar no primeiro segundo.
• Estratégia de abertura: quadro de pôster (o primeiro quadro já é a melhor imagem) / respiração presa → ignição / âncora → virada (ex.: uma página normal que começa a se comportar de forma diferente) / in medias res.
• Ideia central: uma frase em torno da qual tudo gira.

Rodada 2: Lei de estilo e legibilidade

Proponha você mesmo: linguagem das formas (geométrica / orgânica / papel recortado / tinta / pixel / vetor plano / desenho de engenharia), linha (peso, terminações, oscilação), preenchimentos e textura (grão, papel, meio-tom, riso, erro de registro de impressão), uma paleta de 3–6 cores nomeadas com valores hex, tipografia (um tipo de letra do Google Fonts, seu papel, eixos de fonte variável), composição (grade, margens seguras, hierarquia de pontos de atenção, espaço vazio), 3–4 antipadrões e uma regra de legibilidade (cada quadro legível rapidamente; texto legível no ritmo do movimento).

Rodada 3: Herói, assinatura, mecânica

• Herói: o elemento ou sistema que carrega toda a peça (linha, partículas, letras, personagem, grade, fluido).
• Movimento de assinatura: um movimento pelo qual esta peça pode ser reconhecida (craft.md).
• Mecânica: a interação do herói (cursor, rolagem, clique, arrastar, som) ou uma linha do tempo com batidas.
• Quadro tese: um quadro que resume toda a peça, para o pôster.

Rodada 4: Movimento e tempo

Tempo (BPM ou segundos por batida), timing em quadros para os movimentos-chave, easings e molas como valores nomeados, coreografia (escalonamento, cascata, sobreposição), transições, comprimento do loop ou uma lista de planos com timecodes, ≥5 sistemas de movimento independentes em formas max. Escolha módulos de patterns.md.

Rodada 5: Interação, desempenho, acessibilidade, exportação

Controles (mínimos), prefers-reduced-motion (sempre, com uma versão reduzida concreta), o orçamento de desempenho para a técnica, detalhes de exportação (controle, formato, resolução, fps, comprimento, continuidade), a lista de itens obrigatórios. Idioma do prompt: inglês por padrão.

Escrevendo o prompt

1. Esqueleto: os blocos compartilhados de anatomy.md + as seções da forma de forms.md + o esqueleto da técnica de tech.md + módulos de patterns.md. Os cabeçalhos #### nomeiam a ideia.
2. Modo imperativo, denso. Descreva o movimento com números: quadros, milissegundos, curvas (cubic-bezier(.2,.8,.2,1)), molas (rigidez/amortecimento), escalonamento em ms, BPM. Cores como hex, tipos de letra pelo nome.
3. Os níveis max e spec terminam com um parágrafo de barra de aceitação, depois uma frase "Em uma frase: …".
4. Execute a lista de verificação, corrija, entregue em um bloco de código (ou como um arquivo .md se for longo ou a pedido). Abaixo dele, 2–3 frases sobre as decisões tomadas em nome do usuário.

Lista de verificação antes da entrega

• Primeira frase: forma + técnica + uma imagem herói com 4–6 detalhes concretos em movimento.
• "Não construa …" (3–4 antipadrões 2D, ex.: modelo de movimento padrão, fade-in do PowerPoint, screensaver de confete, clip-art) e uma reformulação "Construa …"; "Ideia central:".
• Técnica nomeada e justificada, esqueleto com versões fixadas de tech.md.
• Formato do quadro, resolução e fps (se exportar), comportamento ao redimensionar.
• Abertura corresponde à estratégia; teste do quadro de pôster e do primeiro segundo.
• Lei de estilo: forma, linha, textura, paleta com valores hex, tipo de letra com seu papel.
• Regra de legibilidade, incluindo o ritmo de leitura do texto em movimento.
• Movimento de assinatura descrito com números; easing e timing como valores nomeados.
• Loop: comprimento em quadros e a regra de continuidade; filme: lista de planos com timecodes e batidas.
• ≥5 sistemas de movimento independentes (max); teste do quadro congelado.
• Cada recurso mencionado é visível, está em movimento ou pode ser visto.
• Proibições de aumento de escopo; calibração de tom se o tópico for delicado.
• prefers-reduced-motion com uma versão reduzida concreta.
• Exportação (se houver): animação como função pura do tempo, renderização quadro a quadro, formato, controle; Lottie apenas no subconjunto compatível.
• Desempenho: orçamento da técnica, DPR ≤ 2, pausa fora da tela, lista de itens obrigatórios ("… nunca é negociado").
• Barra de aceitação (max/spec) e "Em uma frase: …".
• Seções exigidas pela forma estão presentes; comprimento dentro da faixa do nível.

Limites

• A redação das frases de exemplo nos arquivos de referência e em examples.md nunca entra no prompt como está. Pegue a estrutura e as decisões e escreva cada frase com suas próprias palavras, incluindo fórmulas técnicas e o parágrafo de critérios de aceitação.
• Nenhum personagem conhecido, mascote, logotipo ou projeto protegido por direitos autorais reconhecível, incluindo "no estilo de" um personagem específico. O estilo de um movimento ou época (Bauhaus, ukiyo-e, suíço, formas de papel recortado de meados do século como linguagem geral) é aceitável; proponha personagens e marcas originais.
• Fontes apenas do Google Fonts ou fontes do sistema, a menos que o usuário forneça as suas próprias.
• O prompt deve ser executável em um navegador. Se a visão exceder o limite da técnica (ex.: um milhão de formas vetoriais em SVG), mude a técnica ou o truque e nomeie-o no prompt.