Toggle Switch
Também chamada Switch, Switch Thumb Slide
Um botão redondo desliza por um trilho e a cor do trilho muda entre desligado e ligado.
Onde usar
Configurações, modo escuro
Variações
- checkbox-hack toggle
- role=switch
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione uma animação "Toggle Switch" (também chamada switch) em [onde].
Ao ligar ou desligar, o botão redondo deve deslizar suavemente até a outra ponta do trilho enquanto a cor do trilho muda: rápido e nítido, sem quique.
Mantenha como um switch acessível real (role="switch" com seu estado checked) que também funcione pelo teclado.Animações parecidas
Clique
Checkbox Check Draw
Também chamada Animated checkbox, Checkmark draw
Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.
Onde usar
Formulários, listas de tarefas
Adicione uma animação "Checkbox Check Draw" (também chamada animated checkbox ou checkmark draw) em [onde].
Quando a caixa for marcada, ela deve se preencher de cor e o sinal de visto deve se desenhar sozinho em um traço rápido e suave; ao desmarcar, ele se apaga do mesmo jeito.
Mantenha como um checkbox de verdade, com seu estado de marcado, funcionando pelo teclado e com um anel de foco visível.ABC
Clique
Tab Indicator Slide
Também chamada Sliding underline, Active tab indicator, Segmented control pill
Um sublinhado ou pílula desliza da aba anterior para a aba recém-selecionada.
Onde usar
Barras de abas, controles segmentados
Adicione um "Tab Indicator Slide" (também chamado sliding underline ou active tab indicator) em [onde].
Quando uma nova aba for selecionada, o sublinhado deve deslizar da aba anterior para a nova, rápido e desacelerando suavemente, esticando até a largura da nova aba se ela for diferente.
Mantenha a semântica correta de abas com navegação pelas setas do teclado e mova o indicador sem deslizar se o usuário preferir movimento reduzido (prefers-reduced-motion).••••••ABCDEF
Clique
Password Reveal Toggle (mostrar/ocultar senha)
Também chamada Show/hide password, Eye icon toggle
Um ícone de olho alterna entre aberto e riscado conforme a senha é mostrada ou ocultada.
Onde usar
Formulários de login e cadastro
Adicione um botão de mostrar/ocultar senha (Password Reveal Toggle) (também chamado show/hide password ou eye icon toggle) em [onde].
Ao tocar no olho, o risco deve sumir rapidamente enquanto os pontos ocultos se transformam nos caracteres reais, e tocar de novo redesenha o risco e os esconde: suave e rápido, sem quique.
Mantenha a largura do campo estável para o texto não pular, e faça do botão um botão real cujo rótulo diga se a senha está visível.Mais em Micro-interaction
A
1
Clique
Add to Cart Fly
Também chamada Fly to cart, Add-to-cart animation
A imagem do produto encolhe e voa em arco até o ícone do carrinho.
Onde usar
E-commerce
Adicione uma animação "Add to Cart Fly" (também chamada fly to cart ou add-to-cart animation) em [onde].
Quando o botão de adicionar for pressionado, uma pequena cópia da imagem do produto deve encolher enquanto voa em um arco suave e rápido até o ícone do carrinho, e o carrinho deve dar um pequeno pulo ao atualizar a contagem.
Reproduza uma vez por clique sem mover o card original do produto, e pule o voo se o usuário preferir movimento reduzido (prefers-reduced-motion), mas continue atualizando o carrinho.A
Clique
Confetti (confete)
Também chamada Confetti burst, Celebration
Pedaços de papel coloridos explodem e caem para comemorar um sucesso.
Onde usar
Compra concluída, meta atingida
Adicione uma comemoração de confete (Confetti) em [onde], também chamada confetti burst.
Pequenos pedaços de papel coloridos devem explodir rapidamente do botão e depois girar e cair flutuando enquanto desaparecem, em uma chuva curta e animada.
Dispare uma vez por sucesso em vez de repetir em loop, não deixe bloquear os cliques na página e não mostre se o usuário preferir movimento reduzido (prefers-reduced-motion).