Zapatillas NubeTalla 42, blanco roto89 €
HTML + CSSMikrointeraktionen
In den Warenkorb mit fliegendem Produkt
Das Produktfoto fliegt im Bogen zum Warenkorb, der kurz hüpft und die neue Anzahl anzeigt.
Einstellungen
16px
1x
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">Artikel im Warenkorb</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>Wolken Sneaker</b><span>Größe 42, Altweiß</span><em>89 €</em></div></div><button type="button" class="ad"><span class="a">In den Warenkorb</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>Hinzugefügt</span></button></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Käufer sehen gern, wohin ihr Produkt verschwindet. Beim Klick fliegt eine Kopie des Produktbilds auf einer Kurve in das Warenkorbsymbol und wird dabei kleiner und dreht sich leicht. Danach hüpft der Warenkorb, ein Zähler erscheint, und der Knopf zeigt kurz eine grüne Bestätigung.
Der Flug nutzt die Web Animations API mit Keyframes aus den echten Positionen und passt sich so jedem Layout an. Der Warenkorbknopf nennt Screenreadern die Anzahl, und bei reduzierter Bewegung wird nur die Zahl aktualisiert, ohne Flug.