Password Reveal Toggle (mostrar/ocultar senha)

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.

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

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.