TOKENS · MOTION

Motion

Curvas de easing e durações padronizadas. Passe o mouse em qualquer card pra ver a curva em ação. Use os tokens CSS direto nas suas transições.

Easing · curvas

linear --ease-linear

linear · uniformes

smooth --ease-smooth

cubic-bezier(.4,0,.2,1) · UI padrão

snappy --ease-snappy

cubic-bezier(.2,.9,.2,1) · entradas

spring --ease-spring

cubic-bezier(.5,1.6,.4,.8) · bounce

decel --ease-decel

cubic-bezier(0,0,.2,1) · chegando

accel --ease-accel

cubic-bezier(.4,0,1,1) · saindo

Duração · escala

150 --dur-1

hover, press

250 --dur-2

padrão · toggles

400 --dur-3

modais, drawers

600 --dur-4

page transitions

900 --dur-5

celebração, storytelling

Micro-interações · padrões

Press · 96%

Clique para pressionar · 150ms

Lift on hover

Cards e botões · 250ms snappy

Fade overlay

Feedback sutil · 300ms smooth

Pulse attention

Status ao vivo · loop 1.6s

Shake error

Input inválido · 300ms

Stagger load

Loading skeletons · delay 100ms

♿ prefers-reduced-motion — toda animação respeita a preferência do sistema. Use @media (prefers-reduced-motion:reduce) ao criar novas animações pra reduzir movimento a fade simples ou remover por completo.