Confetti (confeti)

Un icono de corazón se rellena de color y lanza pequeñas partículas o late al hacer clic.

Añade una animación "Like / Heart Burst" (también llamada heart animation o favorite toggle) en [dónde].
Al marcar me gusta, el corazón debe llenarse de color y dar un salto elástico mientras un anillo y pequeños puntos estallan hacia fuera y se desvanecen, todo rápido y juguetón; al desmarcarlo, el corazón solo se vacía en silencio.
Que sea un botón de alternancia real con su estado pulsado, y reproduce el estallido solo al activarlo.

Muchos puntos pequeños flotan, se conectan o reaccionan al puntero por el fondo.

Añade un fondo de partículas ("Particles", también llamado floating particles o particle field) en [dónde].
Puntos pequeños de distintos tamaños deben flotar y desplazarse despacio por trayectorias suaves y errantes, cada uno a su propio ritmo: tranquilo y ligero.
Usa una cantidad moderada de puntos para que siga siendo liviano en dispositivos lentos, páusalo cuando esté fuera de pantalla y detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Pequeños destellos brillantes aparecen y desaparecen alrededor de un texto o una sección.

Añade un efecto "Sparkles" (también llamado glitter o twinkle particles) en [dónde].
Pequeños destellos en forma de estrella deben aparecer, titilar y desvanecerse alrededor del texto en puntos dispersos y momentos aleatorios: ligero y rápido.
Que los destellos sean decorativos y queden ocultos para los lectores de pantalla, que nunca tapen el texto y detenlos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras salen volando al pasar el puntero y regresan, o estallan hacia fuera al entrar.

Añade un efecto hover "Letter Scatter" (también llamado scatter gather letters o explosive letter burst) en [dónde].
Cuando el puntero pase sobre el texto, cada letra debe salir disparada un poco en su propia dirección con un leve giro, y luego volver a reunirse suavemente en la palabra cuando el puntero se vaya.
Mantén fijo el espacio de la palabra en el diseño mientras las letras se mueven, haz que los lectores de pantalla la lean como una sola palabra y muestra el mismo efecto con el foco del teclado.

El icono de copiar se transforma en una marca de verificación y la etiqueta muestra Copiado por un momento.

Añade una animación de copiar al portapapeles (Copy-to-Clipboard Feedback) en [dónde], también llamada copied state o copy icon to checkmark.
Al pulsar el botón de copiar, el icono de copiar debe encogerse rápidamente mientras se dibuja una marca de verificación y la etiqueta cambia a "Copiado"; tras un breve momento, todo vuelve suavemente a su estado inicial.
Mantén el botón del mismo tamaño durante el cambio para que nada se desplace, y anuncia el estado de copiado a los lectores de pantalla.

Un elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.

Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.

La etiqueta del placeholder sube y se reduce por encima del campo cuando este recibe el foco o tiene contenido.

Añade un "Floating Label" (también llamado float label o animated placeholder) en [dónde].
Cuando el campo reciba el foco o tenga un valor, la etiqueta que está dentro debe deslizarse hacia arriba y reducirse hasta el borde superior del campo, de forma suave y rápida, y volver a bajar solo cuando el campo esté vacío y sin foco.
Mantenla como una etiqueta real vinculada al input y asegúrate de que la altura del campo no cambie para que el formulario nunca se desplace.