Motion Path

Círculos o iconos pequeños giran alrededor de un centro en órbitas circulares.

Añade "Orbiting Circles" (también llamado orbit animation u orbiting icons) en [dónde].
Unos círculos pequeños deben girar lenta y constantemente alrededor de un elemento central en anillos circulares, con el anillo exterior girando en sentido contrario y más despacio.
Mantén el bucle sin cortes y los elementos en órbita siempre derechos, y detén la rotación si el usuario prefiere movimiento reducido (prefers-reduced-motion).

La imagen del producto se encoge y vuela en arco hasta el icono del carrito.

Añade una animación "Add to Cart Fly" (también llamada fly to cart o add-to-cart animation) en [dónde].
Al pulsar el botón de añadir, una pequeña copia de la imagen del producto debe encogerse mientras vuela en un arco suave y rápido hasta el icono del carrito, y el carrito debe dar un pequeño salto al actualizar su contador.
Reprodúcela una vez por pulsación sin mover la tarjeta original del producto, y omite el vuelo si el usuario prefiere movimiento reducido (prefers-reduced-motion), pero actualiza igualmente el carrito.

Un pulso luminoso recorre una línea que conecta dos elementos.

Añade un efecto "Animated Beam" (también llamado connecting beam) en [dónde].
Un pulso luminoso corto debe recorrer la línea que conecta dos elementos, avanzando a ritmo constante de un extremo a otro y volviendo a empezar: suave y tranquilo.
Mantén siempre visible la línea de conexión, y deja el pulso quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El texto sigue una trayectoria curva y avanza por ella a medida que el usuario hace scroll.

Añade un efecto "Text Path Scroll" (también llamado text path curve scroll animation) en [dónde].
El texto debe apoyarse en una línea curva y deslizarse por ella a medida que el usuario hace scroll, avanzando al bajar y retrocediendo al subir.
Vincula el movimiento directamente a la posición del scroll sin retraso y mantén el texto legible como texto normal para los lectores de pantalla.

Una forma vectorial se transforma con suavidad en otra.

Añade un "Shape Morph" (también llamado path morphing o SVG morph) en [dónde].
Una forma debe transformarse con suavidad en otra, por ejemplo un pentágono que se estrecha hasta ser una estrella, con sus puntos deslizándose a su sitio a un ritmo uniforme y sin prisa.
Da a ambas formas el mismo número de puntos equivalentes para que la transformación quede limpia y sin parpadeos, y reprodúcela una vez por cada cambio de estado en lugar de en bucle.

Un filtro SVG deforma texto o formas con ruido animado.

Añade un efecto hover "SVG Displacement Distortion" (también llamado displacement map effect) en [dónde].
Mientras el puntero esté encima, el texto o la forma debe ondularse y temblar como si se viera a través de agua en movimiento, apareciendo con suavidad, y volver a verse nítido cuando el puntero se va.
Aplica el filtro de distorsión solo mientras el efecto esté activo para que no cueste nada en reposo, y muestra el mismo efecto con el foco del teclado.