Movimento
TailwindCSS como padrão para transitions, durations, easings, animações simples e reduced motion no Sinapse.
Contrato
TailwindCSS é o padrão de motion
Movimento começa com utilities do TailwindCSS: propriedades explícitas, durações curtas, easing previsível e preferência do usuário respeitada. Bibliotecas entram apenas quando a stack precisa de gesto, spring, layout animation ou transição de rota que CSS utilitário não resolve bem.
TailwindCSS primeiro
Use utilities de transição e animação antes de criar CSS ou instalar biblioteca. Isso mantém o motion próximo do componente.
Propriedade explícita
Prefira `transition-colors`, `transition-opacity`, `transition-transform` ou `transition-[opacity,transform]`. Evite `transition-all`.
Redução por padrão
Todo movimento não essencial precisa de `motion-reduce:*` ou `motion-safe:*` para respeitar preferência do usuário.
Sem decoração solta
Movimento deve explicar estado, continuidade espacial ou resposta à ação. Se só chama atenção, não entra.
Preview de propriedades
Cores
transition-colors duration-150 ease-out Opacity
transition-opacity duration-200 ease-out Transform
transition-transform duration-200 ease-out Duração
Escala recomendada
| Utility | Uso | Exemplo |
|---|---|---|
| duration-100 | Feedback quase instantâneo | Hover simples, mudança de cor, affordance pequena. |
| duration-150 | Padrão de interação | Botões, links, chips, controles compactos. |
| duration-200 | Superfície pequena | Tooltip, popover, menu, dropdown curto. |
| duration-300 | Mudança de contexto | Drawer, side panel, entrada/saída de bloco relevante. |
| duration-500+ | Exceção | Evite em UI operacional; use só quando a espera comunica progresso. |
Easing
Curva por intenção
ease-out Entrada
O elemento aparece rápido e desacelera no fim.
ease-in Saída
O elemento começa discreto e sai mais rápido.
ease-in-out Troca de estado
Use quando não existe direção clara de entrada ou saída.
ease-linear Progresso contínuo
Use para spinner, progresso técnico ou rotação contínua.
Exemplos
Classes prontas
Feedback de botão
Padrão para hover/focus de cor. Não anima tamanho nem posição sem necessidade.
transition-colors duration-150 ease-out motion-reduce:transition-noneOverlay pequeno
Use para menus e popovers. Opacity e transform são previsíveis e evitam animar propriedades caras.
transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-noneEstado de loading
Animação contínua só quando comunica atividade. Em reduced motion, use texto ou estado estático.
motion-safe:animate-spin motion-reduce:hiddenSkeleton
Use com parcimônia. Skeleton deve indicar carregamento, não criar ruído visual permanente.
animate-pulse motion-reduce:animate-noneStacks
Quando TailwindCSS não basta
A regra do design system continua sendo TailwindCSS. As ferramentas abaixo são sugestões quando a interação exige comportamento que CSS utilitário não cobre com qualidade.
Astro
TailwindCSS + Astro View Transitions quando for navegação entre páginas
Bom para páginas estáticas/documentação que precisam de continuidade entre rotas sem virar SPA.
Não use transição de página para esconder carregamento ou mudar hierarquia de navegação.
React / Next.js
TailwindCSS; Motion para gestos, drag, layout e spring
Motion entra quando há interação rica, layout animation, presença/saída coordenada ou gesto.
View Transitions em React/Next ainda devem ser tratados como experimentais antes de produção ampla.
Vue / Nuxt
TailwindCSS + `<Transition>`/`<TransitionGroup>`; Motion for Vue ou VueUse para casos avançados
Vue Transition cobre enter/leave simples. VueUse funciona bem para valores numéricos; Motion for Vue para gestos e springs.
Evite misturar várias bibliotecas de motion na mesma aplicação sem um motivo claro.
HTML
TailwindCSS + JavaScript mínimo do produto quando houver interação
Bom para páginas e componentes estáticos onde o contrato visual vem das classes itps.
Para overlays, menus e disclosure, implemente foco, teclado e estado de forma explícita.