Copy-to-Clipboard Feedback

Um ícone, como o menu hambúrguer, se transforma em outro (X) com barras que giram e se movem.

Adicione um "Icon Morph" (também chamado hamburger to X ou menu icon morph) em [onde].
A cada toque, as barras de cima e de baixo devem primeiro deslizar juntas até o meio e depois girar formando um X enquanto a barra do meio some; tocar de novo inverte o movimento: rápido e ágil.
Faça dele um botão de alternância de verdade, com rótulo acessível e estado expandido que mudem junto, e mantenha o tamanho do ícone fixo para nada ao redor se deslocar.

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

Um botão troca o texto por um pequeno spinner, ou o acrescenta, enquanto uma ação é executada.

Adicione um "Button Loading State" (também chamado spinner button ou loading button) em [onde].
Ao ser pressionado, o botão deve afundar um pouco, esmaecer o texto e mostrar um pequeno spinner no lugar enquanto a ação roda; ao terminar, o texto volta.
Mantenha a largura do botão fixa durante o carregamento, bloqueie cliques repetidos e anuncie o estado ocupado 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.

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.