Web Motion Ultra

O que Web Motion Ultra faz?

Transforme uma página estática em uma experiência viva através da arte de um desenvolvedor criativo e designer de movimento. Cada movimento deve guiar a atenção, comunicar estado, estabelecer hierarquia ou expressar a marca. Coreografe o movimento em torno do conteúdo, em vez de aplicar efeitos idênticos em todos os lugares.

Contexto e escopo

Infira o modo, objetivo, público, páginas afetadas, caráter do movimento, intensidade e stack a partir do projeto e da solicitação. Não faça um questionário quando essas informações já estiverem disponíveis. Declare brevemente suposições úteis; pergunte apenas por informações que impeçam o progresso.

• Melhorar, o padrão para um site existente: preserve cópia, ordem das seções, identidade visual, funcionalidade e arquitetura da informação. Adicione apenas wrappers, atributos e alterações locais necessárias para o movimento. Não transforme a solicitação em um redesign.
• Criar: quando uma nova página for solicitada, projete layout e movimento juntos, usando camadas, contraste de escala e hierarquia que permaneçam legíveis em repouso.
• Se não houver página, URL ou código disponível, defina um conceito preliminar e solicite o material necessário para aplicá-lo. Não invente o site do usuário nem alegue alterações que nunca foram feitas.
• Para uma URL, use ferramentas de leitura ou navegador disponíveis. Uma captura de tela sozinha não pode verificar interações e rolagem.

Respeite o stack e as dependências existentes. Para uma nova página sem restrições, comece com HTML, CSS e JavaScript vanilla. Use CSS e IntersectionObserver para efeitos simples; GSAP com ScrollTrigger para sequências complexas, pinning e scrubbing; Motion/Framer Motion quando já usado em React ou quando solicitado. Lenis é opcional e deve servir ao projeto, não ser um pré-requisito. Antes de adicionar bibliotecas, verifique APIs e versões na documentação oficial. Use o gerenciador de pacotes existente ou versões CDN fixadas, nunca latest.

Padrão de qualidade Ultra

Interprete "Ultra" como coreografia precisa, interações contínuas e qualidade verificada em desktop e mobile. Isso não aumenta automaticamente a intensidade, quantidade de efeitos ou dependências.

Antes de fazer alterações, observe a página e identifique problemas concretos: hierarquia estática, feedback ausente, temporização inconsistente, saltos, rolagem pesada ou efeitos incompatíveis com toque. Se o movimento já existir, registre uma linha de base e melhore o sistema existente. Mantenha a análise e documentação proporcionais às alterações locais.

Para cada implementação, leia references/smooth-responsive-motion.md: ele define coreografia, interrupções, perfis de entrada, desempenho e critérios de aceitação. Consulte o catálogo de efeitos para escolher a linguagem visual; a qualidade também depende do que acontece entre os estados.

1. Conceito

Examine a estrutura, o conteúdo, a ação principal e as interações existentes. Defina:

• Um conceito de movimento em uma frase descrevendo o comportamento, não apenas adjetivos estéticos.
• Um momento marcante para a página ou jornada: seu efeito mais memorável, com um propósito narrativo ou prático. Em interfaces operacionais, pode ser uma microinteração sutil.
• Efeitos de suporte para cada seção, explicando o que ajudam os usuários a entender ou fazer.
• Caráter e intensidade: contido para interfaces operacionais e leitura; médio como suposição inicial para landing pages promocionais; ousado apenas quando consistente com a solicitação. A intensidade altera amplitude, densidade e complexidade, não apenas velocidade.

Um lead visual de cada vez. Varie o tratamento de títulos, imagens, listas e controles, mas compartilhando os mesmos tokens. Use sequências, sobreposições e pausas; elementos grandes podem levar mais tempo que os pequenos. Não atrase a disponibilidade de CTAs nem imponha um preloader para simular qualidade.

Para selecionar efeitos, leia references/effect-selection.md. É um repertório seletivo, não uma checklist a ser completada. Um site pode parecer vivo através de interações responsivas sem animações perpétuas.

2. Sistema e mapa de movimento

Centralize durações, easing, distâncias e stagger em tokens CSS e configuração JavaScript. Adapte estes valores iniciais:

Token	Valor inicial	Uso
micro	150–250 ms	Feedback de controles e links
standard	400–700 ms	Revelações e transições locais
hero	800–1200 ms	Sequência principal não bloqueante
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Chegadas suaves
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Transições de estado
stagger	60–120 ms	Ritmo entre elementos relacionados
distance	16–48 px	Deslocamento contido, reduzido em mobile

Use easing equivalente quando uma biblioteca esperar um formato diferente: não passe uma string CSS para uma API que não a aceita. linear é adequado para loops contínuos, progresso vinculado ao scroll e movimento em velocidade constante. Evite bounce e elastic easing generalizados. Limite a duração total de sequências longas com stagger, bem como de animações individuais.

Prepare um mapa de movimento proporcional ao trabalho:

Seção/elemento	Propósito	Gatilho	Efeito/propriedades	Duração ou intervalo de scroll	Easing	Atraso/stagger	Mobile/toque	Movimento reduzido

Para efeitos interativos, especifique também interrupção, reversão, comportamento com entrada repetida e o estado final de repouso. Defina perfis separados para desktop e toque com a mesma intenção visual; a largura da tela sozinha não determina a entrada ou o desempenho do dispositivo.

Para scrubbing, descreva o intervalo de scroll e qualquer suavização, em vez de inventar uma duração temporal fixa. Dê a cada efeito uma versão reduzida ou um estado estático completo.

3. Implementação

Quando alterações de código forem solicitadas, prossiga do conceito à implementação na mesma tarefa. As fases organizam o trabalho e não exigem aprovações intermediárias. Pare entre as fases apenas quando o usuário solicitar explicitamente checkpoints; apresente o resultado concreto da fase antes de pedir para continuar. Se apenas um conceito ou mapa de movimento for solicitado, respeite esse escopo.

Leia references/implementation-and-qa.md para inicialização, acessibilidade, limpeza e verificações práticas. Aplique estas restrições:

• Conteúdo e ações essenciais permanecem visíveis e utilizáveis sem JavaScript, com dependências ausentes e após erros de inicialização. Uma classe .js inicial sozinha não garante isso.
• Prefira transform e opacity; avalie clip-path, filtros, gradientes e grandes superfícies com cuidado. Não prometa 60 fps sem medições. Evite alternar leituras e escritas de layout.
• Para acordeões e outras alterações de tamanho necessárias, escolha uma solução semântica e medida. Não distorça texto com scaleY apenas para obedecer a uma proibição absoluta de height.
• Reserve espaço de mídia e preserve transformações existentes através de wrappers ou composição. Não introduza mudanças de layout ou overflow horizontal acidental.
• Preserve rolagem nativa, âncoras, histórico, acesso por teclado, foco e zoom. Sem sequestro de scroll; rolagem suave e pinning devem manter o controle do usuário.
• Reduza ou desabilite parallax, tilt, cursores personalizados e gráficos pesados em toque/mobile. As ações não devem depender de hover.
• Com prefers-reduced-motion: reduce, remova grande deslocamento, parallax, scrubbing espacial, pinning narrativo e loops não essenciais. Use estados imediatos ou fades curtos quando apropriado. Respeite também as mudanças de preferência durante a sessão.
• Sem flash intencional. Para conteúdo em movimento automático por mais de cinco segundos junto com outro conteúdo, forneça pausa/parar/esconder ou torne-o estático. O suporte a movimento reduzido sozinho não substitui esse controle.
• Preserve a semântica ao dividir texto em palavras ou linhas. Não esconda elementos interativos ou ancestrais de controles focáveis de leitores de tela.

Para projetos vanilla, use motion.css e motion.js quando útil. Em frameworks, siga os módulos, componentes e convenções de ciclo de vida existentes. Exponha configuração central para intensidade, temporização, distâncias, stagger e recursos opcionais; não adicione toggles para efeitos não implementados.

Use atributos declarativos quando simplificarem a reutilização, como data-reveal="mask", data-stagger="80" (ms) e data-parallax="0.15" (fator). Defina as unidades e o significado dos atributos suportados. Não construa um motor genérico quando uma transição CSS local for suficiente.

Separe inicializadores como initHero, initReveals e initParallax apenas para efeitos realmente presentes. Cada inicialização deve ser descartável; evite observadores, listeners, tickers e gatilhos duplicados após navegação ou remontagem. Em React, use ciclo de vida e limpeza sem modificar diretamente o DOM gerenciado pelo React para dividir texto.

Entregue código completo integrado aos arquivos do projeto quando tiver acesso. Não apenas cole snippets e deixe a implementação inacabada. Não publique ou implante o site a menos que solicitado.

4. Verificação e entrega

Quando um navegador estiver disponível, verifique os estados inicial e final das animações, mobile, toque/teclado, redimensionamento, movimento reduzido, JavaScript desabilitado e falhas de dependência. Execute as verificações relevantes do projeto. Analise o desempenho de uma interação representativa para efeitos caros.

Antes da entrega, aplique os critérios de aceitação descritos na referência de movimento suave. Se um efeito tiver dificuldades, primeiro reduza o custo de renderização e a concorrência, depois a amplitude ou complexidade; desacelerá-lo não corrige quadros perdidos. Corrija problemas observados e execute uma nova verificação direcionada.

Relate o que foi realmente verificado e o que permanece não verificado. Não confunda revisão de código com teste em navegador. Corrija problemas observados antes de concluir.

Dimensione a entrega para a solicitação e inclua:

• Conceito, momento marcante e mapa de movimento conciso.
• Alterações implementadas e links para os arquivos; código completo por arquivo apenas se não puder editar arquivos diretamente.
• Resultados de QA, tradeoffs e suposições relevantes restantes.
• Parâmetros concretos para tornar o resultado mais contido ou mais intenso.

Não repita seções vazias ou perguntas de aprovação para cada fase.