Confetti (confete)

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.

Muitos pontos pequenos flutuam, se conectam ou reagem ao ponteiro pelo fundo.

Adicione um fundo de partículas ("Particles", também chamado floating particles ou particle field) em [onde].
Pontos pequenos de tamanhos diferentes devem flutuar e vagar devagar por trajetos suaves e errantes, cada um no seu ritmo: calmo e leve.
Use uma quantidade moderada de pontos para continuar leve em aparelhos mais lentos, pause quando estiver fora da tela e pare se o usuário preferir movimento reduzido (prefers-reduced-motion).

Pequenos pontos brilhantes piscam e somem ao redor de um texto ou seção.

Adicione um efeito "Sparkles" (também chamado glitter ou twinkle particles) em [onde].
Pequenos brilhos em forma de estrela devem surgir, cintilar e sumir ao redor do texto em pontos espalhados e momentos aleatórios: leve e rápido.
Mantenha os brilhos decorativos e ocultos para leitores de tela, nunca cubra o próprio texto e pare-os se o usuário preferir movimento reduzido (prefers-reduced-motion).

As letras se espalham no hover e voltam, ou explodem para fora na entrada.

Adicione um efeito de hover "Letter Scatter" (também chamado de scatter gather letters ou explosive letter burst) em [onde].
Quando o ponteiro passar sobre o texto, cada letra deve voar um pouco na própria direção com um leve giro e depois se reagrupar suavemente na palavra quando o ponteiro sair.
Mantenha fixo o espaço da palavra no layout enquanto as letras se movem, faça os leitores de tela lerem como uma só palavra e mostre o mesmo efeito no foco do teclado.

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.