Timing de animações e percepção UX

1) Por que o timing é crítico

• sensação de resposta instantânea e confiança no sistema;
• clareza de causa-investigação (de onde/para onde o elemento foi movido);
• cansatividade e conforto em sessões longas;
• precisão de ação (especialmente no celular e em taxas elevadas).

Regra: O timing serve o sentido. Se a animação não ajuda a entender o que aconteceu, ela atrapalha.

2) Psicofísica e liminares

• ≤ 50 ms - ecos de entrada (impressão, clique-efeito); Parece imediato.
• 100 ms é o primeiro widback visual da ação (botão «lucrado»).
• 120-180 ms - hover/focus, transição de estado «suave».
• 180-280 ms - modalks/painel; é visto como uma aparição «natural».
• 300-500 ms - movimento atento (shared element), progresso «passo a passo».
💡 700 ms - riscos de «lentidão»; deixe apenas se fizer sentido (por exemplo, confirmar o ganho).
• ≈ 1200-1600 ms - ciclo skeleton/shimmer; É cansativo há mais tempo.

3) Curvas de aceleração (easing) e «peso»

• Padrão: 'cubic-bezier (0. 2, 0, 0. 2, 1) '- dinâmica «material» neutra.
• Aceleração (pressed): 'cubic-bezier (0. 4, 0, 1, 1) '- entrada rápida, clique curto.
• Desaceleração (overlay out): 'cubic-bezier (0, 0, 0. 2, 1) '- saída macia.
• Sotaque enfatizado (raramente): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2)` с overshoot ≤ 8 px.

Óptica de peso: quanto maior o componente (cartão, drower), maior a duração (+ 40-80 ms para base).

4) Fases e coreografia

1. Iniciação (10-40 ms): fácil fade/scale 0. 98→1 é um sinal de início.

2. Transporte (fase principal): deslocamento/divulgação.

3. Sedimento (20-60 ms): freio pequeno, estabilização da sombra/anel de foco.

• Lista: 20-40 ms/item, no máximo 6-8 elementos consecutivos.
• Formas: sem cascata; tudo aparece ao mesmo tempo para não atrapalhar a digitação.

Reversível: «para trás» espelha «para frente» e para 15-30% mais rápido.

5) Timing por tipo de interação

6) Percepção do tempo: como «acelerar» sem aceleração real

Momento afordance: mudança instantânea cursors/pressed estilo ≤ 100 mc antes da rede.
Encobrimento de complexidade: paralelo de download; alongamento de fundo dos dados até a abertura do painel.
Âncora de sentido: shared element e direção de movimento reduzem o custo cognitivo de espera.
Atualizações otimistas: UI pronto imediatamente, o servidor confirma ou recua.

7) Cansabilidade e higiene das animações

Evite pulsações infinitas; qualquer ciclo deve ser intermitente ou desligável.
Micro-efeitos em matrizes de elementos (tabela, grid) façam sem blur/box-shadow em cada nó.
Suporte 'preferers-reduced-motion': deixe apenas fade ≤ 100 ms ou um alternador de estado estático.

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8) Token timing (sistema de design)

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Nome: 'motion. duration.{role}` и `motion. easing.

9) Implementação: CSS e Framer Motion

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10) Composição do tempo: sequência de paralelos vs

O paralelo (fade + translate ao mesmo tempo) é mais rápido.
A seqüência (primeiro contêiner, depois conteúdo) é mais clara, mas mais longa. Aplique quando for importante mostrar a hierarquia.
Evite «degraus»> 60 ms entre elementos estreitamente ligados em um único bloco.

11) Timing e conteúdo

Texto: Não anime leter/word-by-word nos produtos; É uma técnica de marketing.
Números/contadores: passo 40-60 ms batchs, sem tremer layout (tabular-nums).
Gráficos: divulgação da série 180-240 ms, hover-highlight ≤ 120 ms.

12) Disponibilidade e erro de percepção

Os estilos de foco devem aparecer sem atraso.
Avisos/erros - Animação mínima (≤ 120 ms), sem tremor, se o usuário estiver com AT (assistente tech).
Evite flash> 3/s e grandes efeitos de contraste.

13) Especificidades iGaming

• Press ≤ 100 ms; status 'busy' imediatamente; brinde final/indicador - sem atrasos.
• O tempo de resposta UI é mais importante do que a animação de confirmação: confirmação de 120-160 ms.

• Início ≤ 200 ms, ciclo uniforme, freio 300-500 ms; Nada de piores infinitos.
• Win-surf ≤ 500 ms, sem versos; O texto da quantia é AAA.

• Atualizações de batches (250-1000 ms); diff visual ≤ 160 ms; sem saltos de layout.
• Em hover/focus - debouns realce 80-120 ms para não «piscar».

14) Anti-pattern

Curvas lineares para movimentos (sensação de «mecânica»).
Duração> 400 ms para os estados simples do botão.
Cascata 100 + ms em uma lista de dezenas de elementos (gravação).
Sombras/blur em centenas de elementos na animação.
Incoerência: Ações idênticas a times diferentes no mesmo produto.
Foco adiado ou atraso na ativação do teclado.

15) QA-folha de tempo de cheque

Consistência

• Os temporizadores e curvas são tirados de tokens, iguais para ações idênticas.

Resposta

• Press/hover/focus se encaixam na escala de 80-180 ms.
• Primeira resposta visual ≤ 100 ms.

Coreografia

• A entrada e a saída são simétricas; Uma entrada 15-30% mais rápida.
• Cascata não ultrapassa 8 elementos e 40 ms passo.

A11y

• 'preferers-reduced-motion' suportado; truque sem atraso.
• Sem piscar> 3/s.

Performance

• Só se pode animar 'transfm/opacity'; não há blur/sombra em massa.

16) Documentação em design

«Motion Tokens»: duration/easing/stagger + mapa de aplicações (button, overlay, se).
Rhythm & Phasing: esquemas de cascata e reversibilidade.
Reduce Motion: regras de degradação e exemplos.
«Do/Don 't»: clipes curtos com temporizadores e métricas de destino (INP/First Feedback).

Resumo curto

Um bom timing é uma resposta instantânea, uma coreografia compreensível e curvas de baixo custo. Mantenha a duração curta para os micro-estados, estique apenas onde isso adicione sentido, mantenha o reduse-motion e não anime propriedades «caras». Então a interface é sentida viva e confiável, especialmente em cenários de tempo real e altas taxas.