coastdigitalgroup/coastai-skills

Sistema de Movimento de Interface

Propósito

O Sistema de Movimento de Interface fornece uma metodologia para projetar "movimento funcional"—movimento que atende a um propósito específico na interface do usuário. Ele vai além da animação decorativa para estabelecer um sistema de durações, curvas de easing e coreografia que ajuda os usuários a entender relações espaciais, fornece feedback para ações e reduz a carga cognitiva durante mudanças de contexto.

Casos de Uso

• Definir temporizações e curvas de transição padrão para uma biblioteca de UI.
• Projetar alterações de layout complexas (ex.: expandir um cartão para tela cheia).
• Estabelecer movimento de feedback para ações do usuário (ex.: marcas de verificação de sucesso, spinners de carregamento).
• Coreografar a entrada e saída de camadas de UI (Modais, Gavetas, Toasts).
• Usar movimento para guiar a atenção em direção a um elemento ou mudança específica.

Quando NÃO Usar

• Estética de Marca Apenas Estática: Onde o estilo visual intencionalmente evita movimento para transmitir um tom específico (ex.: designs minimalistas, brutalistas ou "similares a papel").
• "Frescuras" Puramente Decorativas: Animações que não agregam valor funcional e distraem o usuário de sua tarefa principal (ex.: elementos de fundo se movendo sem interação).
• Ambientes de Alta Latência: Onde o custo de desempenho ao renderizar movimento supera o benefício de UX, resultando em "travamentos" ou lag.

Entradas

1. Personalidade da Marca: O movimento é "Rápido/Produtivo" (rápido, linear) ou "Natural/Fluído" (elástico, suave, orgânico)?
2. Contexto de Interação: O que está se movendo? (Elemento atômico, contêiner ou página inteira).
3. Tipo de Gatilho: O movimento é acionado pelo sistema (Carregamento), pelo usuário (Clique/Passar o mouse) ou pelo ambiente (Rolagem)?
4. Capacidades da Plataforma: Restrições técnicas dos navegadores ou dispositivos de destino.

Saídas

1. Escala de Duração: Um conjunto de tokens de temporização padronizados (ex.: motion-fast, motion-standard, motion-slow).
2. Paleta de Easing: Um conjunto definido de curvas Bezier para diferentes intenções de movimento (ex.: ease-in, ease-out, emphasized).
3. Regras de Coreografia: Padrões para como os elementos entram, saem e se movem uns em relação aos outros.
4. Especificação de Token de Movimento: Documentação de variáveis de movimento para desenvolvedores.

Fluxo de Trabalho

1. Estabelecer a Escala de Duração

Crie uma progressão lógica de temporizações com base no tamanho da mudança:

• Rápido (100–150ms): Para micro-interações e estados atômicos (Hover, Alternar, Ativo).
• Padrão (200–300ms): Para transições de tamanho médio (Menus suspensos, Dicas, Pequenas expansões).
• Lento (350–500ms): Para grandes mudanças de layout ou transições imersivas (Modais, Mudanças no nível da página).

2. Definir as Curvas de Easing

Atribua significado semântico a diferentes curvas Bezier:

• Padrão (Ease-in-out): Para elementos se movendo de um ponto a outro dentro da viewport.
• Entrada (Ease-out): Para elementos aparecendo ou entrando na viewport (começo rápido, fim lento para parecer responsivo).
• Saída (Ease-in): Para elementos desaparecendo ou saindo da viewport (começo lento, fim rápido para parecer proposital).
• Enfatizado (Complexo): Uma curva personalizada (ex.: cubic-bezier(0.4, 0, 0.2, 1)) para transições primárias que precisam parecer de alta qualidade.

3. Projetar para Modelos Mentais Espaciais

Use movimento para explicar de onde veio um elemento e para onde está indo:

• Continuidade Direcional: Se uma gaveta desliza da direita, ela deve sair para a direita.
• Relação Pai-Filho: Um elemento filho (como um menu) deve idealmente se originar de seu pai (o botão).

4. Coreografar Sequências (Escalonamento)

Quando vários elementos aparecem ao mesmo tempo, evite o efeito "Pop-in":

• Escalonamento: Introduza elementos com um leve atraso (20–50ms) entre cada um para guiar o olho em uma ordem específica.
• Escalonamento Direcional: Escalone itens na direção da leitura (de cima para baixo ou da esquerda para a direita).

5. Planejar para Acessibilidade (Movimento Reduzido)

Movimento deve ser inclusivo:

• A "Verificação Pré-voo": Sempre defina um fallback para usuários que têm "Movimento Reduzido" ativado no nível do SO.
• Visuais Alternativos: Substitua movimento por fades de opacidade ou nenhuma animação quando prefers-reduced-motion estiver ativo.

Regras de Decisão

• A Regra do "Funcional Primeiro": Se você não consegue explicar o que um movimento diz ao usuário, remova-o.
• Temporização Responsiva: As durações devem ser mais curtas em telas pequenas (mobile) porque a distância física que um elemento percorre é menor.
• Velocidade sobre Fluidez para Ação: O feedback de interação (ex.: clique em um botão) deve parecer instantâneo (<100ms) mesmo que a transição resultante seja mais longa.
• Sem Loops Infinitos: Evite animações em loop contínuo (spinners, pulsos) a menos que representem um estado ativo que bloqueia o fundo.

Restrições

• Acessibilidade: Deve respeitar prefers-reduced-motion. Movimento não deve desencadear convulsões (evite flashes rápidos ou padrões de alta frequência em grande escala).
• Desempenho: Limite-se a propriedades "apenas Compositor" (transform e opacity) para garantir desempenho de 60fps. Evite animar width, height ou margin.
• Consistência: Use a mesma duração e easing para o mesmo tipo de componente em todo o site.

Padrões Comuns de Falha

• A Armadilha da "Náusea de Movimento": Usar movimentos grandes e amplos (ex.: a página inteira deslizando) que causam desconforto vestibular.
• Interfaces Lentas: Definir durações muito longas (ex.: 1 segundo para um menu), fazendo o usuário esperar e o site parecer quebrado.
• Movimento Linear: Usar easing "linear", que parece mecânico e não natural em comparação com a aceleração/desaceleração encontrada no mundo físico.
• Direção Confusa: Um modal que "cresce" do centro, mas "desliza" para o fundo, quebrando o modelo espacial do usuário.
• O Efeito "Tremulação": Escalonar elementos com atrasos muito longos, fazendo a página parecer que está carregando lentamente.

Critérios de Validação

• Cada transição tem um token de Duração e Easing definido.
• As durações são proporcionais ao tamanho da transição (Rápido para pequeno, Lento para grande).
• O movimento suporta um modelo mental espacial claro (Entrada/Saída lógica).
• O escalonamento é usado para revelações de múltiplos elementos para guiar o olho.
• Acessibilidade: prefers-reduced-motion é tratado com uma estratégia de simplificação clara.
• Desempenho: Apenas transform e opacity são usados para animações frequentes.
• O movimento de feedback (ex.: clique em botão) começa em <100ms.