Kinetics · SCSS
Motion com intenção
Curvas físicas para resposta direta e transições estáveis para contexto, cor e hierarquia. Os exemplos abaixo usam os mesmos componentes e tokens disponíveis no produto.
Fundação
Tokens semânticos
feedback 150ms Hover, foco e confirmação imediata.
enter 360ms Entradas pequenas, como modal e toast.
layout 420ms Expansões que precisam manter contexto.
Demonstrações
Microinterações
Press feedback
Compressão curta, seguida de retorno suave.
Spring snappy
O thumb do switch prioriza resposta direta.
Entrada
O toast entra com spring e preserva a atenção.
Contexto
O modal usa deslocamento curto e escala discreta.
Laboratório
Uma ação, três personalidades
Layout
Expansão com contexto
Por que a expansão usa spring-gentle?
Expansões alteram a hierarquia da página. Por isso o movimento é mais calmo que uma confirmação de clique e respeita a preferência de redução de movimento do sistema operacional.
Aplicação
Cenários do projeto
Feedback de compra com botão, selo e avaliação do produto.
Acompanhamento do pedido
O progresso usa uma transição de layout suave, adequada a mudanças de estado.
Filtros de estampas
Chips aplicam feedback imediato sem competir com o conteúdo da busca.
Confirmação destrutiva
Exclusões pedem uma intenção deliberada, sem abrir uma etapa extra.
Mantenha pressionado para confirmar a ação.Ações de pedido
Deslize o cartão ou use o botão “Ações” para manter a alternativa de teclado.
Contexto da criação
Tags entram e saem com movimento curto, útil para prompts e filtros salvos.
Regra de uso
Use spring-gentle para entrada e expansão, spring-snappy
apenas para feedback pequeno e ease-in-out para cores, opacidade
e bordas. Interações com física contínua permanecem componentes opt-in em JavaScript.