Añadir al carrito con producto volando
La foto del producto vuela en arco hasta el icono del carrito, que rebota y muestra cuántas unidades llevas.
Ajustes
Código
<div class="uv-mac"><header><b>Tienda</b><button type="button" class="ct"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span class="n">0</span><span class="sr">productos en el carrito</span></button></header><div class="pr"><div class="im" aria-hidden="true"><svg viewBox="0 0 48 32"><path d="M3 22c0-3 1-6 3-8l5-6c1-1 3-1 4 0l3 4c1 2 3 3 5 3h6c6 0 12 2 15 5 1 1 1 3 0 4H5c-1 0-2-1-2-2z" fill="#fff"/><path d="M4 27h40" stroke="#fff" stroke-width="2.5" stroke-linecap="round" opacity=".7"/></svg></div><div class="tx"><b>Zapatillas Nube</b><span>Talla 42, blanco roto</span><em>89 €</em></div></div><button type="button" class="ad"><span class="a">Añadir al carrito</span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5L20 7"/></svg>Añadido</span></button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
A quien compra le gusta ver adónde ha ido su producto. Al pulsar el botón, una copia de la foto vuela por una curva hasta el carrito, encogiéndose y girando un poco por el camino. Después el carrito rebota, aparece una insignia con la cantidad y el botón cambia un momento a una confirmación verde.
El vuelo usa la Web Animations API con fotogramas calculados a partir de las posiciones reales, así que se adapta a cualquier diseño. El botón del carrito anuncia la cantidad a los lectores de pantalla y con movimiento reducido solo se actualiza el número.