F3.7 · Fundações

Motion

Movimento sutil, funcional, opt-out via prefers-reduced-motion. Easing único: cubic-bezier(0.2, 0, 0, 1). Três durações canônicas, três proibições estéticas.

Durações

Token	Duração	Uso
--d-nudge	120ms	UI nudge: hover de tag, dot ativo.
--d-base	200ms	Padrão: hover de botão, troca de aba, fade de tooltip.
--d-modal	360ms	Modais, drawers, sheets.
instant	0ms	Transição de página, reorganização de layout.

Curva de easing

Easing único: cubic-bezier(0.2, 0, 0, 1) — entrada rápida, saída suave. Cobre 95% dos casos.

/* Padrão */
.btn { transition: background var(--d-base) var(--ease); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Regras estéticas

Permitido

Translação ≤ 8px em hover (translateY(-2px)).
Escala ≤ 1.02 em pressed.
Fade in/out com opacidade.

Proibido

Bounces, springs, anticipation — não somos uma marca lúdica.
Rotações decorativas — só em loaders.
Parallax, autoplay, qualquer efeito que distrai da leitura.

Toda transição respeita prefers-reduced-motion.
Nada de animar mais de duas propriedades por componente.
Loader é um único spinner; nunca bola pulando.