Fundamentos
Movimento
Sai rápido, pousa devagar. Seis durações e duas curvas.
Durações e curvas#
| Token | Valor | Uso |
|---|---|---|
| motion.instant | 120ms | Fecha a pálpebra. Hover, troca de cor. |
| motion.strike | 150ms | O corpo do controle viaja antes da luz. Thumb do Switch. |
| motion.quick | 200ms | Botão, chip, toast, drawer. |
| motion.calm | 280ms | Abre a pálpebra. Diálogo que assenta. Aba que desliza. |
| motion.slow | 420ms | Bloco que entra na tela, tile ativo da navegação. |
| motion.pupil | 80ms | Atraso da luz. Entra depois que o corpo chegou. |
| motion.ease | cubic-bezier(0.16, 1, 0.3, 1) | Curva padrão: sai rápido, pousa devagar. |
| motion.spring | cubic-bezier(0.34, 1.36, 0.64, 1) | Só para confirmação alegre: passa um pouco e volta. |
Clique para ver as durações lado a lado
Curvas#
ease sai rápido e pousa devagar: a interface responde na hora e não termina seco.
ease-hb · padrão
cubic-bezier(0.16, 1, 0.3, 1)
ease-hb-spring · confirmação
cubic-bezier(0.34, 1.36, 0.64, 1)
Animações prontas#
hb-lid
Pálpebra. O painel abre a partir do gatilho em 280ms e fecha em 120ms. Menu, filtro, busca.
hb-tip
Tooltip. Só opacidade, 120ms. A espera de 400ms fica antes.
hb-hear
Toast. A opacidade chega, o deslocamento vem depois. 200ms.
animate-fade-in
Scrim e conteúdo de aba. Só opacidade, 120ms.
animate-rise-in
Bloco que sobe. 200ms.
animate-sheet-up
Folha de papel no celular. 280ms.
animate-pop-in
Diálogo no desktop assenta, sem encolher o miolo. 280ms.
animate-slide-in-left
Drawer que entra pela esquerda. 200ms.
animate-slide-in-right
Drawer que entra pela direita. 200ms.
animate-blink
Coruja vigiando. A cada 6s. É a fonte do compasso.
animate-orbit
Coruja trabalhando. 1.6s por volta.
hb-shimmer
Skeleton. 2,8s, contraste baixo.
animate-pulse-dot
Ponto de estado vivo. 1.4s.
Movimento reduzido#
Automático
Com prefers-reduced-motion, styles.css zera animação e transição em todo elemento: órbita, piscar, shimmer, deslizes. Nenhuma informação depende só de movimento.
Regras#
Faça
- Uma animação por mudança.
- Movimento que explica de onde algo veio.
Evite
- Animação decorativa em loop (exceto a coruja).
- Durações fora dos tokens.
- Bounce em ação de dinheiro.