Ripple

Ao passar o mouse, um círculo colorido cresce a partir do centro ou encolhe em direção a ele para preencher o elemento.

Adicione um efeito de hover "Radial Fill" (também chamado circle expand) em [onde].
Um círculo da nova cor deve crescer suavemente a partir do centro até preencher o elemento, e encolher de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o círculo recortado dentro da forma do elemento e o texto acima dele, e mostre o mesmo efeito no foco do teclado.

A nova visualização é revelada dentro de um círculo que se expande a partir do ponto do clique.

Adicione uma transição "Circular Reveal" (também chamada clip-path circle expand ou theme toggle reveal) em [onde].
A nova visualização deve aparecer dentro de um círculo que cresce a partir do controle pressionado até cobrir toda a área: suave e constante, acelerando e desacelerando com suavidade.
Faça o círculo começar exatamente onde o controle foi pressionado e troque na hora, sem círculo, se o usuário preferir movimento reduzido (prefers-reduced-motion).

Círculos concêntricos se expandem a partir de um ponto central e desaparecem.

Adicione um efeito "Ripple Rings" (também chamado background ripple ou concentric ripples) em [onde].
Os anéis devem se expandir sem parar a partir de um ponto central e sumir conforme crescem, um após o outro e com espaçamento igual: lento e constante.
Mantenha o elemento central parado no lugar e pare as ondas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma camada translúcida tinge o elemento para mostrar que o ponteiro está sobre ele.

Adicione um "Hover State Layer" (também chamado hover state, state layer ou hover overlay) em [onde].
Uma camada translúcida e fraca na cor do conteúdo deve aparecer rapidamente sobre o elemento enquanto o ponteiro estiver sobre ele, e sumir quando ele sair.
Mantenha-a fraca para preservar o contraste, e use a mesma abordagem de camada para os estados de foco e pressionado.

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.