Aplicar Movimento com Continuidade Cinética

O que Aplicar Movimento com Continuidade Cinética faz?

Propósito

Aplicar uma linguagem de movimento contida que dá ao layout memória física: elementos permanecem identificáveis, respondem à energia do usuário e se estabelecem onde a próxima decisão pode ser tomada.

Trate os vídeos de referência fornecidos como evidência para uma linguagem de design, não como modelos a serem reproduzidos. Preserve o conceito, tecnologia, escopo e limite de autorização solicitados pelo usuário. Aplique alterações de arquivos apenas quando o usuário solicitar implementação; para solicitações de planejamento ou revisão, retorne orientações sem editar arquivos.

Quando usar esta habilidade

Use esta habilidade quando:

• Uma demonstração GSAP ou interface web precisa de continuidade entre estados espaciais ou de layout.
• A tarefa envolve um campo de imagem, galeria, carrossel, folha de contato, pré-visualização ancorada, sequência baseada em caminho, grupo roteado ou tipografia cinética contida.
• O movimento existente parece desconectado, obsoleto sob entrada rápida, excessivamente decorativo ou pouco claro sobre a identidade do objeto.
• O usuário deseja traduzir referências de movimento fornecidas em uma linguagem de interação original, acessível e implementável.

Não use esta habilidade quando:

• Um simples hover, foco, pressionar ou mudança de opacidade pode ser tratado com uma transição CSS comum.
• A solicitação é uma tarefa de animação não relacionada, sem continuidade ou problema de estado espacial.
• A tarefa diz respeito a filme, edição de vídeo ou animação de personagens, em vez de comportamento de interface.
• O usuário precisa de uma auditoria de acessibilidade abrangente, em vez de planejamento, implementação ou revisão específica de movimento.

Entradas a inspecionar

Inspecione o menor conjunto relevante de entradas disponíveis:

• A tarefa, acionador, assunto, estado inicial e estado final solicitados pelo usuário.
• Componentes, modelos, estilos, utilitários de movimento, testes, demonstrações e documentação relevantes.
• Dependências de animação existentes, especialmente plugins GSAP já em uso.
• Vídeos, protótipos, capturas de tela, storyboards ou notas de análise de movimento fornecidos pelo usuário.
• Comportamento responsivo, comportamento de ponteiro e toque, caminhos de teclado, comportamento de foco e requisitos de movimento reduzido.
• Restrições de desempenho, como itens repetidos, peso da imagem, medição de geometria e entrada de alta frequência.

Não presuma que mídia de referência, plugins GSAP ou convenções do projeto existem quando eles não estão presentes.

Roteamento de referência

Leia references/pattern-catalog.md ao selecionar uma primitiva de movimento, ajustar temporização e easing, definir comportamento de movimento reduzido ou revisar naturalidade.

O catálogo é autocontido. Se uma tarefa exigir proveniência por vídeo ou comparação com um clipe nomeado, inspecione a mídia de referência ou o documento de análise de movimento fornecido no espaço de trabalho dessa tarefa, em vez de assumir detalhes desta habilidade.

Contrato central de movimento

• Preserve a identidade do objeto através de mudanças de posição, escala e layout.
• Dê a cada batida de movimento uma direção dominante.
• Faça com que elementos vizinhos respondam como um campo espacial único, com velocidade relacionada e stagger baseado em distância.
• Responda à entrada direta no próximo quadro pintado. Aplique easing ao estabelecimento, não ao ponto de agarre.
• Acelere brevemente e gaste mais da duração desacelerando.
• Sobreponha estados de saída e entrada o suficiente para evitar um quadro morto.
• Use escala de forma consistente para comunicar foco, profundidade ou prioridade.
• Resolva passagens ativas em estados de repouso estáveis e legíveis.
• Mantenha a distorção expressiva breve, local, reversível e não essencial.

Prefira continuidade a espetáculo. Remova movimento que não explica estado, hierarquia, orientação ou feedback.

Selecione uma primitiva principal

Escolha a primitiva que melhor explica a mudança de estado. Não combine várias simplesmente para aumentar a novidade visual.

• Campo inercial: uma constelação panável ou à deriva que se move como um sistema.
• Trilhos paralelos: trilhas de mídia repetidas com variação de velocidade contida.
• Grupos roteados: clusters se movendo entre faixas ou categorias visíveis.
• Troca de pré-visualização ancorada: um índice estável controla uma região de pré-visualização limitada.
• Procissão curvada: cartões derivam posição, escala e empilhamento de um valor de progresso de caminho.
• Cadeia convergente: uma visão geral se dobra e escala em uma composição focada.
• Resolução de folha de contato: itens retidos fazem a ponte entre layouts densos e curados.
• Disrupção de texto limitada: texto de exibição é brevemente deslocado e depois se reconstrói de forma limpa.

Use transições CSS comuns quando a interação precisar apenas de um simples hover, foco, pressionar ou mudança de opacidade.

Fluxo de trabalho

1. Confirme se a solicitação é de planejamento, implementação ou revisão e preserve esse limite.
2. Identifique o acionador, assunto, estado inicial, estado final e tarefa do usuário.
3. Escreva uma tese de movimento de uma frase que explique por que o movimento existe.
4. Escolha uma primitiva principal e defina suas composições estáveis de início e fim.
5. Defina o estado de movimento reduzido antes de adicionar coreografia completa.
6. Estabeleça hierarquia micro, meso e macro. Nem todo elemento precisa de movimento em cada camada.
7. Implemente ou especifique resposta direta, deslocamento coordenado e um estabelecimento silencioso.
8. Faça com que a entrada rápida redirecione o estado renderizado atual em vez de enfileirar animações.
9. Verifique caminhos de ponteiro, toque, teclado, foco, movimento reduzido, interrupção e falha.
10. Revise em velocidade normal e em velocidade de quadro ou 0.25x para encontrar descontinuidades e erros de empilhamento.
11. Quando a implementação foi solicitada, execute os testes ou verificações relevantes do repositório e relate a validação manual que permanece.

Assinatura de temporização

Use os tokens de referência como pontos de partida, depois ajuste modestamente para distância de deslocamento e frequência de interação:

• Reconhecimento imediato: cerca de 90ms.
• Hover ou foco: cerca de 180ms.
• Mudança de estado compacta: cerca de 320ms.
• Reconfiguração de layout: cerca de 520ms.
• Cena espacial grande: cerca de 780ms, normalmente limitada abaixo de 1000ms.
• Stagger espacial: 35–60ms, ordenado por distância da fonte de movimento.

Prefira power3.out para estabelecimento padrão, power4.out para uma entrada editorial mais forte e power2.inOut para reconfiguração de estado conhecido. Use movimento linear apenas quando o progresso segue rolagem, arrasto ou outra entrada contínua.

Não torne o easing elástico ou back a assinatura do sistema. Se um encaixe de liberação precisar de ultrapassagem, mantenha-a abaixo de aproximadamente 3%.

Invariantes de implementação

• Use CSS para transições de estado simples e timelines GSAP para sequências coordenadas.
• Use GSAP Flip para mudanças reais de layout quando a continuidade de elementos compartilhados for valiosa.
• Use Draggable apenas quando o arrasto for uma interação real e existirem controles visíveis equivalentes.
• Use ScrollTrigger apenas para uma narrativa de rolagem genuína; não introduza scroll-jacking.
• Derive propriedades de movimento curvo de um valor de progresso normalizado para que x, y, escala, opacidade e empilhamento não se separem.
• Use overwrite: "auto", quickTo() ou uma timeline orientada por progresso para movimento interrompível.
• Anime transform e opacity primeiro.
• Agrupe leituras de DOM, cache de geometria e evite medição dentro de atualizações de alta frequência.
• Aplique will-change apenas durante o movimento ativo e remova-o após grandes sequências únicas, quando prático.
• Mantenha o conteúdo final disponível se o JavaScript falhar. Não exija uma timeline de entrada para revelar conteúdo essencial.

Siga as convenções existentes de HTML, CSS, JavaScript, ativos e documentação de demonstração do repositório. Não adicione ou substitua uma dependência de animação sem autorização do usuário.

Invariantes de interação e acessibilidade

• Corresponda hover com foco e comportamento de clique ou toque.
• Mantenha o estilo de foco visível e pelo menos tão claro quanto o hover.
• Preserve a ordem semântica de origem quando os itens visuais se tornam espaciais.
• Mantenha uma fonte de texto legível intacta para tipografia dividida ou interrompida.
• Torne arrasto, deslize e roda métodos de entrada opcionais; forneça controles anterior e próximo ou outro caminho de teclado.
• Cancele o momentum quando um novo gesto começar.
• Pause o movimento contínuo durante interação significativa e quando a página não estiver visível.
• Para prefers-reduced-motion: reduce, remova inércia, órbita, reprodução automática, deslocamento de zoom e disrupção de texto. Preserve o conteúdo e a seleção com mudanças instantâneas ou uma transição curta de opacidade.
• Não reivindique conformidade com acessibilidade sem testar.

Padrão de revisão

Sinalize movimento quando ele:

• teletransporta ou substitui objetos que deveriam permanecer identificáveis;
• usa stagger aleatório sem uma fonte espacial;
• enfileira estados de hover obsoletos;
• permanece em movimento constante ao lado de conteúdo de leitura;
• torna a escala decorativa em vez de significativa;
• depende de arrasto, hover ou animação para expor conteúdo essencial;
• cria trabalho de layout em cada quadro de animação;
• transforma um proprietário sticky em vez de uma camada de cena interna;
• é mais longo ou mais elaborado do que a mudança de estado justifica.

Formato de saída

Retorne o resultado apropriado ao modo:

Planejamento

• Tese de movimento e primitiva selecionada.
• Estados inicial, de transição e estabelecido.
• Hierarquia de movimento, temporização, interrupção e comportamento de movimento reduzido.
• Notas de acessibilidade, desempenho, implementação e validação.

Implementação

• Resumo do comportamento de movimento aplicado.
• Arquivos alterados e a função de cada alteração.
• Primitiva selecionada, hierarquia de movimento, resultado de movimento reduzido, comportamento de acessibilidade e estratégia de desempenho.
• Testes ou verificações executados e quaisquer verificações manuais que permanecem.

Revisão

Prioridade	Problema	Evidência	Recomendação

Relate também a primitiva inferida, hierarquia de movimento, resultado de movimento reduzido, comportamento de acessibilidade, estratégia de desempenho e quaisquer limites de evidência.

Padrão de qualidade

A tarefa está completa apenas quando:

• A primitiva escolhida explica a mudança de estado mais claramente do que uma transição mais simples faria.
• Identidade do objeto, direção, resposta, interrupção, estabelecimento e repouso são coerentes.
• Os estados de movimento total e movimento reduzido preservam o mesmo conteúdo e resultado da tarefa.
• Comportamento de ponteiro, toque, teclado e foco têm caminhos utilizáveis equivalentes quando aplicável.
• Movimento de alta frequência evita medição repetida de layout e estados enfileirados obsoletos.
• Os achados da revisão citam estados de interface concretos, código ou comportamento observável.
• O trabalho de implementação segue as convenções do projeto e inclui validação proporcional.

Casos extremos

• Se o projeto não usar GSAP, preserve sua pilha existente, a menos que o usuário peça para adicionar GSAP; expresse os mesmos princípios com as APIs de plataforma disponíveis ou forneça um plano.
• Se a mídia de referência não estiver disponível, use o catálogo de padrões incluído e divulgue que nenhuma comparação específica de clipe foi realizada.
• Se várias mudanças de estado precisarem de primitivas diferentes, escolha uma primitiva principal por mudança de estado e mantenha regras de temporização e físicas compartilhadas consistentes.
• Se a animação falhar ou o JavaScript não estiver disponível, o conteúdo e os controles essenciais devem permanecer utilizáveis.
• Se um elemento sticky ou de propriedade de rolagem precisar parecer que está transformando, anime uma camada de cena interna em vez do proprietário sticky.
• Se um conceito entrar em conflito com requisitos de movimento reduzido, teclado ou acesso ao conteúdo, preserve o resultado da tarefa e a relação de estado enquanto simplifica a coreografia.

Habilidades relacionadas

• motion-behavior-planner para um plano de movimento neutro em biblioteca sem implementação.
• motion-experience-director para um sistema de movimento mais amplo em todo o site.
• motion-animation-accessibility-audit para uma auditoria abrangente de acessibilidade de movimento.
• creative-technologist para viabilidade frontend mais ampla e planejamento de aprimoramento progressivo.