Add to Cart Fly

Un elemento recorre una trayectoria curva personalizada y puede girar para seguirla.

Añade una animación "Motion Path" (también llamada animate along path) en [dónde].
Un elemento pequeño debe recorrer una ruta curva personalizada a un ritmo lento y constante, girando para mirar hacia donde avanza.
Usa una ruta cerrada para que el bucle se repita sin saltos, y haz que la ruta se adapte al tamaño de su contenedor en lugar de quedarse con un tamaño fijo.

Un indicador numérico aparece de golpe, rebota o late cuando llega una nueva notificación.

Añade una animación "Notification Badge Bounce" (también llamada badge pop o ping) en [dónde].
Cuando llegue una nueva notificación, el indicador numérico debe aparecer desde la nada y asentarse con un par de rebotes rápidos y elásticos mientras un anillo suave se expande desde él una vez.
Reprodúcela una vez por cada notificación nueva en lugar de en bucle, y anuncia el nuevo número a los lectores de pantalla.

Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.

Añade una animación "Checkbox Check Draw" (también llamada animated checkbox o checkmark draw) en [dónde].
Al marcar la casilla, debe rellenarse de color y la marca de verificación debe dibujarse sola en un trazo rápido y suave; al desmarcarla, se borra de la misma forma.
Mantenla como una casilla real con su estado marcado, que funcione con el teclado y con un anillo de foco visible.

Trozos de papel de colores salen disparados y caen para celebrar un éxito.

Añade una celebración de confeti (Confetti) en [dónde], también llamada confetti burst.
Pequeños trozos de papel de colores deben salir disparados rápidamente del botón y luego girar y caer flotando mientras se desvanecen, en una lluvia breve y animada.
Lánzala una vez por cada éxito en lugar de repetirla en bucle, evita que bloquee los clics en la página y omítela si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.