# Movimento Tailwind como padrão para transições, durações, easings, animações simples e movimento reduzido no Sinapse DS. Contrato ## Tailwind é o padrão de movimento Movimento começa com os utilitários do Tailwind: 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. ### Tailwind primeiro Use utilitários de transição e animação antes de criar CSS ou instalar biblioteca. Isso mantém o movimento 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. Prévia de propriedades Cores `transition-colors duration-150 ease-out` Opacidade `transition-opacity duration-200 ease-out` Transform `transition-transform duration-200 ease-out` Duração ## Escala recomendada | Utilitário | 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. ```txt transition-colors duration-150 ease-out motion-reduce:transition-none ``` ### Overlay pequeno Use para menus e popovers. Opacidade e transform são previsíveis e evitam animar propriedades caras. ```txt transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none ``` ### Estado de loading Animação contínua só quando comunica atividade. Com movimento reduzido, use texto ou estado estático. ```txt motion-safe:animate-spin motion-reduce:hidden ``` ### Skeleton Use com parcimônia. Skeleton deve indicar carregamento, não criar ruído visual permanente. ```txt animate-pulse motion-reduce:animate-none ``` Stacks ## Quando o Tailwind não basta A regra do design system continua sendo o Tailwind. As ferramentas abaixo são sugestões quando a interação exige comportamento que CSS utilitário não cobre com qualidade. ### Astro Tailwind + 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 Tailwind; 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 tratadas como experimentais antes de produção ampla. ### Vue / Nuxt Tailwind + \`\`/\`\`; 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 Tailwind + 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.