Motion

Movimento com intenção

Rápido, contido, respeitoso. Nunca decoração. Todas as animações respeitam prefers-reduced-motion.

Durações

instant

0ms

Nenhuma animação, para mudanças críticas

fast

120ms

Micro-interações, hover, focus

base

200ms

Botões, toggles, dropdowns

moderate

300ms

Modais, sheets, transições de página

slow

500ms

Ilustrações, splash, celebrações

standard

Padrão para tudo

cubic-bezier(0.4, 0, 0.2, 1)

emphasized

Elementos que entram (in)

cubic-bezier(0.2, 0, 0, 1)

spring

Feedback tátil, sucesso

cubic-bezier(0.34, 1.56, 0.64, 1)

linear

Loading spinners, progresso

linear

fade

slide-up

scale

spring

Hover, press, focus. Feedback imediato, sem interromper o fluxo.

Card com lift

Skeleton loader

Spinner