feitangyuan/motion-web

O que motion-web faz?

Web criativa com foco em movimento. A skill lida com todas as fases: referência → conceito → especificação → construção → auditoria.

Esta skill constrói páginas web inteiras. O movimento é o que as torna boas; não é o trabalho inteiro. Um pedido sem nenhum movimento — "criar uma landing page", "me ajude a fazer este site" — ainda é esta skill, e o resultado é um site finalizado: pilha, tokens, seções, texto, componentes, estados, metadados, deploy.

Ordem de prioridade — 1 e 2 são co-iguais:

1. Conceito de movimento e coreografia de interação
2. Design da página — estrutura, escala tipográfica, paleta, ritmo de espaçamento, a aparência antes de qualquer movimento
3. A página como artefato construído — seções e seu texto, o vocabulário de componentes, a camada de tokens, os estados fora do caminho feliz (page-blueprints.md, components.md, project-setup.md, production-polish.md)
4. 3D leve ou canvas apenas quando fortalece a página
5. Desempenho, acessibilidade, fallbacks de movimento reduzido

Um ótimo mecanismo em uma página com aparência padrão é uma página fracassada. O movimento é a vantagem, não a desculpa. A falha mais comum desta skill é entregar uma interação engenhosa colada em um layout que ninguém projetou — se a página te envergonharia com o movimento desligado, ela não está pronta, e nenhum ajuste de spring conserta isso. Design não é o passo 2 no tempo; é uma segunda coisa que também deve ser verdade no final. → references/page-design.md, references/design-slop.md

Esta é uma skill de design e construção para uma classe de site: web criativa e de marketing — landing pages, páginas de produto, portfólios, sites de estúdio, campanhas, editoriais, documentação leve. Ela os constrói de ponta a ponta. Ela não é uma skill de dashboard / admin / app-UI denso em dados, e não é um gerador de cena 3D completa (esses são roteados para 3d-scene-studio). Uma página criativa contendo fragmentos de aplicativo — uma tabela de preços, um login, uma captura de tela de console — está no escopo; uma interface de produto logada não está.

---

Detecção de Intenção Agentica (CRÍTICO — Leia Primeiro)

O usuário frequentemente dirá muito pouco. Detecte sua intenção a partir de entrada mínima e aja autonomamente.

Mapa Sinal → Intenção

O que o usuário envia	Intenção detectada	O que fazer
"criar uma página" / "criar uma landing page/site/portfólio" com um tópico, sem referência	full-build	O site inteiro, não um mecanismo. page-blueprints.md → project-setup.md → page-design.md → construir → components.md → production-polish.md
"O que colocar nesta página" / "Quais seções deveria ter" / "Arquitetura da informação" / "Como escrever o texto"	blueprint	page-blueprints.md — escolha uma espinha dorsal, escreva texto real, marque todo fato inventado
"Navegação" / "Botão" / "Formulário" / "Card" / "Footer" / "FAQ" / "Tabela de preços" / "Popup" / "Componente"	component	components.md — primeiro a tabela de dialetos, depois a matriz de estados. Um componente sem seus estados não está pronto
"Qual pilha tecnológica usar" / "Astro ou Next" / "Como iniciar o projeto" / "Design token" / "Fonte" / "Deploy"	setup	project-setup.md — escada de página ≠ escada de movimento; comece no degrau 0 e suba
"Parece demo, não produto final" / "Pré-visualização OG está vazia" / "Sem favicon" / "404" / "Estado vazio" / "Modo escuro" / "Formulário sem validação"	polish	production-polish.md — tudo é verificável; execute a seção 9 em vez de estimar
Uma URL nua (nenhum outro texto)	url-drop	Abra-a e desconstrua-a (Passos 1–2 do Modo Replicar), depois pergunte: reconstruir isto, ou usar como referência para algo deles?
Uma URL + "criar uma página" ou "referência nisto"	replicate → build	Desconstrua a URL primeiro (Modo Replicar), depois proponha um conceito de movimento para o conteúdo do próprio usuário
Referência + "replicar e salvar como case" / "armazenar na skill" / "fazer um case"	case-authoring	cases/AUTHORING.md — primeiro, gate da Fase 0: remova as imagens da referência; se nada sobreviver, resolva os assets antes de construir, não depois
Uma URL + "replicar" / "fazer um similar" / "referência nisto para fazer"	replicate	Desconstruir → mapear para padrões → construir imediatamente.
Uma URL para um artigo/paper/blog	doc-drop	Leia-o, nomeie as técnicas com valores extraíveis, construa a partir de uma se solicitado (Drop de Documento / Artigo abaixo)
Um briefing vago ("criar uma página legal" / "criar um portfólio")	freeform-build	Orquestre via composition-guide.md → escolha estilo+arco independentemente
Apenas um tópico ("criar uma landing page sobre IA")	spec → build	Orquestre via composition-guide.md → proponha direção visual, construa imediatamente
Um briefing detalhado com referências	spec → build	Escreva MOTION_SPEC.md → obtenha aprovação → construa
"Auditar" / "Quais problemas" / "gap"	audit	Inspecione o trabalho existente em busca de lacunas de movimento/desempenho/acessibilidade — incluindo o quadro estático, conforme design-slop.md
"Feio" / "Muito feio" / "Parece IA" / "Sem design" / "Comum"	design-audit	Capture tela com movimento desligado e execute os gates em design-slop.md. Não ajuste springs — a reclamação é sobre o quadro estático
"Layout" / "Tipografia" / "Fonte muito pequena" / "Espaço em branco" / "Estrutura" / "Todas as seções iguais"	design	page-design.md — macroestrutura, escala tipográfica, ritmo de espaçamento, medido contra vencedores atuais de prêmios
"Adicionar…" em uma página existente	incremental-build	Estenda a implementação atual com novo movimento
Uma referência em vídeo (Pinterest/Dribbble/X clip)	video-ref	PARE — execute o Protocolo de Referência de Vídeo abaixo antes de escrever qualquer código
"Sensação estranha" / "Muito duro" / "Não segue" / "Quadradão" em movimento existente	handfeel-tune	Audite contra handfeel.md — springs, acoplamento de velocidade, movimento secundário
"Segue mas falta algo" / "Tremendo" / Sensação varia com FPS em algo que segue (câmera, cursor, trilho, tooltip)	handfeel-tune	Não §1 do spring — handfeel.md §7: 1-exp(-k·dt), o termo líder speed/k, e nunca corrigir após o filtro
"Pode ser sem GSAP" / Apenas entrada ou parallax / Quer algo mais leve	build	Verifique o degrau 1.5 primeiro — animation-timeline / animation-trigger / sibling-index() nativos → build-mode.md escada + pattern-recipes.md #16. Firefox recebe o estado final estático
O asset é um lugar real (filmagem/scan), para entrar	build	Degrau 5.5 — Splats Gaussianos 3D antes de modelos → build-mode.md escada
Card/imagem para dobrar, bandeira, virar página, prender captura de tela em superfície 3D, "skew não é suficiente"	warp	Homografia de pinos de canto → pattern-recipes.md #17. Proteja cada quadrilátero e limite a inclinação da borda a asin(h/w) — um quadrilátero desprotegido pinta um bloco do tamanho da tela sem erro
"Não clicável" / "Apenas um clicável" / "Ninguém vai achar" / "Não visível" em movimento existente	affordance-audit	Não toque no código de hit-test primeiro. Audite contra affordance.md — o mecanismo geralmente está bom; o convite está faltando ou expirou
Uma pilha de assets de imagem + "fazer uma cena 3D" / "ter profundidade" / "câmera deve poder entrar"	image-plane-3d	Não use modelos. Construa a cena a partir de planos planos em uma câmera de perspectiva real → image-plane-3d.md (degrau 5 da escada)
"Parece colado" / "Não se integra" / "Parece adesivo" em uma cena renderizada	image-plane-3d	Meça antes de tocar na arte: média R−B e luminância por lote de asset, sombras de contato presentes → image-plane-3d.md §6–7
"Com o que desenhar isto" / "DOM ou canvas" / A página só produz div e fonte do sistema / A referência claramente não é possível em DOM	render-layer	Primeiro defina a camada, depois o mecanismo → render-layer.md §1. Camada é uma declaração, escrita no README do case, verificada por verify_case.py --layer
3D estilo desenho à mão / nanquim / contorno, "Parece desenhado, não renderizado", boil/linha trêmula/textura de papel	ink-render	render-layer.md §3 — contorno de descontinuidade de profundidade (desligar dobras normais), warp estático e boil dinâmico separados, clock de boil 11Hz para renderização 60fps
Placas / renders crus que ainda precisam ser recortados, "recortar", "como o asset entra na cena", "imagem borrada"	asset-pipeline	Key contra o próprio fundo da imagem, corte para o bbox alpha, script os metadados, imprima o orçamento de resolução por elemento → image-asset-pipeline.md
Qualquer verificação headless; um número discorda do que você vê; "como verificar"	verify	Construa a superfície de sonda primeiro — clocks fixáveis, __seek, __hold, saídas de estado — depois meça → verification-harness.md
"Esta parte não acontece nada" / "Ritmo ruim" / "Um monte de texto aparece de uma vez" em uma linha do tempo de scroll	timeline-audit	Coloque cada faixa contra um eixo de scroll; batidas mortas são platôs coincidentes, não uma camada lenta → timeline-orchestration.md
Cena de scroll longo com muitos assets; "lento", "carregamento lento", "estourou memória", centenas de placas	scene-streaming	Ative por janela de tela, fatie grandes uploads, ceda dentro da varredura, descarte completamente → scene-streaming.md
Qualquer coisa com som — BGM, ambiente, SFX de interação, "pouco som", "som ambiente não dá para ouvir mas também não pode atrapalhar"	scene-audio	Três barramentos (bgm / hand / world), curvas por ato, eventos discretos sobre uma base mais alta → scene-audio.md

Nunca pergunte ao usuário qual modo usar. Detecte-o. Proceda. Só pare se o briefing for verdadeiramente ambíguo entre duas saídas muito diferentes (ex., especificação vs. construção imediata).

---

Protocolo de Referência de Vídeo (硬规则 — Não Adivinhe)

Gatilho: a referência é um vídeo que você não pode realmente assistir — pin do Pinterest, shot do Dribbble, clip do X, link curto externo. Um título ou descrição de texto NÃO é informação de movimento.

0. Leia a thread antes de concluir que não há página ao vivo. O autor quase sempre posta a URL em uma resposta, e as respostas também dizem se a peça é sequer uma página web. Medido em 2026-09-02: uma sessão anterior declarou sete referências de vídeo sem URL e gastou sua Fase 1 em medição de quadro; todas as sete tinham sites ao vivo, postados pelos próprios autores, e três de quatro clipes em um post acabaram sendo renders do Jitter / Figma Motion / Rive sem implementação web alguma (cases/AUTHORING.md Fase 1). safe-x tweet <url> --json, então resolva todo link t.co nas respostas.
1. Nunca construa movimento a partir de um palpite. Se tudo que você extraiu foi um título/descrição, você sabe o tópico, não o movimento. Construir de qualquer forma queima uma iteração completa — este é um modo de falha documentado (2026-07-06, hero de frutos do mar: palpitou "órbita", real era uma diagonal ascendente; duas reconstruções).
2. Peça 2–3 quadros-chave imediatamente. Uma frase: "Não consigo abrir este vídeo, tire 2-3 frames da cena (entrada/meio/saída) e me envie".
3. Declare a trajetória como geometria explícita antes de codificar, e obtenha confirmação:
   • Pontos de ancoragem: onde o elemento entra / atinge o pico / sai (cantos, terços)
   • Atitude: rotação segue a tangente do caminho / permanece constante / fica para trás
   • Reações secundárias: o que mais se move (formas de fundo, linhas, texto) e como
   • Exemplo: "entrada pelo canto inferior direito → centro → saída pelo canto superior esquerdo em diagonal ascendente, cabeça de peixe sempre apontando para cima-esquerda" — palpites errados morrem aqui, não no código
4. Só então mapeie para pattern-recipes / handfeel.md e construa.

Uma única captura de tela segue a mesma regra: um quadro dá pose, não trajetória. Se o caminho importa, peça mais quadros.

---

Modo de Replicação (复刻模式)

Quando o usuário envia uma URL com "replicar" / "fazer um similar" / "consegue fazer este efeito" — desconstrua-a, depois construa. Não há etapa de armazenamento; o resultado é a página.

Caminho de Execução de Replicação

1. Abra a página e leia-a como três camadas, com qualquer ferramenta de navegador disponível (Claude Preview, browser-use, Playwright): a pilha (biblioteca, easing, keyframes, variáveis CSS — os nomes dos bundles), a coreografia de scroll (qual elemento está fixado sobre qual faixa, trilhos e sua distância em px, taxas de parallax, propriedades scrubadas, pontos de entrada — amostre ~9 posições de scroll e diferencie getBoundingClientRect mais estilos computados entre elas), e a camada WebGL (contagem de programas, chamadas de draw, nomes de uniformes customizados; envolva getContext antes dos scripts da página serem executados se você precisar das fontes do shader). Dois scripts cobrem as metades mensuráveis: scripts/measure_structure.py <url> para a página estática (seções, nav, botões, escalas de tokens, mídia, meta, overflow em mobile) e scripts/measure_churn.py <url> para quanto da página realmente se move sob uma roda real. A URL deve ser o trabalho em si, nunca uma listagem de galeria (awwwards.com/sites/<slug>): uma página de listagem entrega o próprio chrome da galeria, e seis vencedores diferentes retornam com a mesma biblioteca, os mesmos keyframes e a mesma fonte.

2. Desconstrua — declare o que encontrou, e cite os números em vez de impressões:

   • "GSAP 3.12 + ScrollTrigger + Lenis; .home-animate__wrapper está fixado em 0.25–0.50, durante o qual .icon se move horizontalmente +1545px, a saída é um stagger de 0.25/0.38/0.62 em três partes"
   • "O fundo é WebGL2 nativo, 14 programas, 944 chamadas de draw, uniforms incluem bloomStrength/blurTexture1-5 e cloudCoverage/cloudDensity — é UnrealBloom + nuvens volumétricas"

   Nunca reporte "usou WebGL" apenas por um context — um context 300×150 sem dimensionamento e sem programa vinculado é detecção de capacidade estilo Modernizr, não uma cena. Conte programas vinculados e chamadas de draw.

3. Mapeie para pattern-recipes — encontre a receita mais próxima em references/pattern-recipes.md

4. Preencha a lacuna — o que a referência usa que não temos em receitas, escreva do zero com base nos valores extraídos

5. Construa imediatamente — escafolde a página, execute-a, verifique visualmente

6. Reporte — "Repliquei o efeito central de [site], usei [X] para implementar [Y], a diferença do original é [Z]"

Replicar ≠ Copiar

• Faça: Recrie o padrão de interação, o caráter do movimento, a sensação temporal
• Não faça: Copie cores de marca proprietárias, texto de cópia exato, UI de produto identificável
• Faça: Adapte a técnica ao conteúdo e paleta do próprio usuário
• Anote no relatório o que foi adaptado vs. o que foi fiel ao original

---

Modo de Construção Livre (Quando o Usuário Dá Zero Direção)

Quando o usuário diz "criar uma página" / "tanto faz" / "pense em um tema" ou dá um tópico simples e vago (ex. "criar uma landing page de plataforma de agente IA"), isto é um convite para ser criativo. NÃO use um modelo genérico como padrão, NÃO use mapeamento de rota rígido 1-para-1 e NÃO faça perguntas de esclarecimento.

Caminho de Ação Livre (Loop Criativo em Tempo de Execução — A Criação Acontece Durante a Execução, Não

… [truncado para tradução]