Micro-interaction

A imagem do produto encolhe e voa em arco até o ícone do carrinho.

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.

Ao marcar a caixa, um sinal de visto é desenhado traço a traço dentro dela.

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.

Pedaços de papel coloridos explodem e caem para comemorar um sucesso.

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).

O ícone de copiar se transforma em um sinal de visto e o rótulo mostra Copiado por um instante.

Adicione uma animação "Copy-to-Clipboard Feedback" (também chamada copied state ou copy icon to checkmark) em [onde].
Quando o botão de copiar for pressionado, o ícone de copiar deve encolher rapidamente enquanto um sinal de visto é desenhado e o rótulo muda para "Copiado"; depois de um breve momento, tudo volta suavemente.
Mantenha o botão do mesmo tamanho durante a troca para que nada se desloque e anuncie o estado de copiado para leitores de tela.

Um elemento segue o ponteiro ao ser arrastado e pode ser limitado a uma área ou a um eixo.

Adicione uma interação "Drag" (também chamada draggable ou drag constraints) em [onde].
O elemento deve seguir o ponteiro diretamente enquanto é arrastado, parar nas bordas da área permitida e voltar à posição de repouso com um pequeno quique ao ser solto.
Faça funcionar tanto com toque quanto com mouse, sem a página rolar por baixo, e ofereça uma forma de movê-lo pelo teclado.

O rótulo do placeholder sobe e diminui acima do campo quando ele recebe foco ou é preenchido.

Adicione um label flutuante (Floating Label) em [onde], também chamado float label ou animated placeholder.
Quando o campo receber foco ou tiver um valor, o label que fica dentro dele deve deslizar para cima e diminuir até a borda superior do campo, de forma suave e rápida, e só voltar quando o campo estiver vazio e sem foco.
Mantenha como um label de verdade ligado ao input e garanta que a altura do campo não mude, para que o formulário nunca se desloque.

Um ícone de coração se enche de cor e solta pequenas partículas ou pulsa ao ser clicado.

Adicione uma animação "Like / Heart Burst" (também chamada heart animation ou favorite toggle) em [onde].
Ao curtir, o coração deve se encher de cor e saltar com um quique elástico enquanto um anel e pequenos pontos explodem para fora e somem, tudo rápido e divertido; ao descurtir, o coração só se esvazia discretamente.
Mantenha como um botão de alternância real com estado pressionado e reproduza a explosão só ao ativar.

Segurar um item pressionado por um instante dispara ações extras ou um preenchimento de progresso.

Adicione uma interação de toque longo (Long Press) (também chamada press and hold ou touch and hold) em [onde].
Enquanto o item estiver pressionado, ele deve afundar um pouco enquanto um preenchimento de progresso o percorre em ritmo constante; ao completar, ele volta com um leve quique e abre o menu, e soltar antes cancela e zera o preenchimento.
Dê aos usuários de teclado e leitor de tela outra forma de chegar às mesmas ações, e não deixe o toque selecionar texto nem abrir o menu de contexto do navegador.

Um selo de contagem surge, quica ou pulsa quando chega uma nova notificação.

Adicione uma animação "Notification Badge Bounce" (também chamada badge pop ou ping) em [onde].
Quando chegar uma nova notificação, o selo de contagem deve surgir do nada e se assentar com um ou dois quiques rápidos e elásticos, enquanto um anel suave se expande a partir dele uma vez.
Reproduza uma vez por notificação nova em vez de em loop, e anuncie a nova contagem para leitores de tela.

Um ícone de olho alterna entre aberto e riscado conforme a senha é mostrada ou ocultada.

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.

Uma seta de ponteiro desenha uma caixa de destaque em volta de uma palavra quando o texto entra na tela.

Adicione um efeito "Pointer Highlight" em [onde].
Quando o texto entrar na tela ao rolar, uma caixa deve se desenhar em volta da palavra-chave da esquerda para a direita enquanto uma pequena seta de ponteiro percorre o canto dela, suave e constante, como se alguém marcasse a palavra à mão.
Desenhe só na primeira vez que aparecer, sem deslocar o texto, e mostre a caixa pronta de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

O elemento encolhe um pouco enquanto é pressionado e volta com um quique ao soltar.

Adicione um efeito "Press (Button Tap Scale)" (também chamado tap feedback ou press state) em [onde].
Enquanto é pressionado, o elemento deve encolher um pouco e escurecer levemente, e ao soltar voltar ao tamanho normal com um pequeno quique: rápido e sutil.
Mostre o mesmo retorno no teclado e no toque, e não deixe o layout ao redor se mexer.

Arrastar uma lista para baixo revela um indicador de carregamento e recarrega o conteúdo ao soltar.

Adicione uma interação de puxar para atualizar (Pull to Refresh) (também chamada swipe to refresh) em [onde].
Ao puxar a lista para baixo a partir do topo, ela deve seguir o dedo com certa resistência e revelar um indicador de carregamento que gira enquanto é puxado; ao soltar, ele continua girando enquanto o conteúdo recarrega, e então a lista sobe suavemente de volta.
Só ative quando a lista já estiver no topo, e ofereça também um botão de atualizar comum para usuários de teclado e leitor de tela.

Uma onda circular se expande e some a partir do ponto exato do clique ou toque.

Adicione um efeito "Ripple" (também chamado material ripple ou ink ripple) em [onde].
A cada clique ou toque, uma onda circular suave deve se espalhar a partir do ponto exato pressionado até cobrir o elemento, sumindo enquanto cresce: rápida e leve.
Recorte a onda no formato do elemento, deixe cada toque rápido iniciar sua própria onda e faça ela começar do centro quando acionada pelo teclado.

Um círculo e um tique se desenham sozinhos para confirmar que a ação deu certo.

Adicione uma animação "Success Checkmark" (também chamada animated success tick) em [onde].
Um círculo deve se desenhar em um único traço suave, depois o tique se desenha dentro dele e o símbolo inteiro dá um pequeno salto suave: calmo e confiante.
Reproduza uma vez quando a ação der certo, acompanhe com uma mensagem de texto que leitores de tela possam anunciar, e mostre o símbolo pronto de imediato se o usuário preferir movimento reduzido (prefers-reduced-motion).

Deslizar uma linha da lista para o lado revela botões de ação como excluir ou arquivar.

Adicione uma interação "Swipe to Delete" (também chamada swipe actions ou swipe to reveal) em [onde].
Ao arrastar uma linha para o lado, ela deve acompanhar o dedo diretamente para revelar por trás botões de ação como arquivar e excluir, parando quando estiverem totalmente visíveis, e ao soltar deslizar suavemente para o lugar, sem quique.
Mantenha a rolagem vertical funcionando durante o deslize horizontal, e deixe as mesmas ações acessíveis por teclado e leitor de tela sem precisar deslizar.

Um botão redondo desliza por um trilho e a cor do trilho muda entre desligado e ligado.

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.