Checkbox Check Draw

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 traço SVG parece ser desenhado ao longo do caminho conforme o deslocamento do tracejado é animado.

Adicione uma animação "Line Drawing" (também chamada path drawing ou self-drawing SVG) em [onde].
Cada traço deve parecer se desenhar sozinho, suavemente, ao longo do caminho do início ao fim, e um segundo traço, como um sinal de visto, deve vir logo depois do primeiro.
Reproduza só uma vez ao entrar na tela, sem repetir, e mostre as linhas já desenhadas se o usuário preferir movimento reduzido (prefers-reduced-motion).

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 lista de etapas é destacada ou marcada uma a uma conforme uma tarefa longa avança.

Adicione um "Multi-Step Loader" (também chamado step loader ou checklist loader) em [onde].
As etapas devem se acender uma de cada vez, de cima para baixo, e cada uma deve ganhar um pequeno check que surge com um leve pulo ao ser concluída, em um ritmo calmo e fácil de ler.
Avance as etapas conforme o progresso real da tarefa em vez de um temporizador fixo, e anuncie cada etapa concluída para leitores de tela.

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.