Add to cart with flying product
The product photo flies in an arc to the cart icon, which bounces and shows the new item count.
Settings
Code
<div class="uv-mac"><header><b>Shop</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">items in your cart</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>Cloud sneakers</b><span>Size 42, off white</span><em>89 €</em></div></div><button type="button" class="ad"><span class="a">Add to cart</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>Added</span></button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Shoppers like to see where their product went. When the button is pressed, a copy of the product image flies along a curved path into the cart icon, shrinking and spinning slightly on the way. The cart then bounces, a badge appears with the count, and the button flips to a green confirmation for a moment.
The flight uses the Web Animations API with keyframes calculated from the real positions, so it adapts to any layout. The cart button announces its count to screen readers, and with reduced motion the count updates without the flight.