Papierkorb, der das Blatt zerknüllt
Das Dokument knüllt sich zu einer Papierkugel, die im Bogen fliegt; der Deckel des Eimers klappt auf, schluckt sie und schließt sich.
Einstellungen
Code
<div class="uvq15-trs"><div class="ar"><div class="dc"><b>Briefentwurf</b><i></i><i></i><i></i><i class="s"></i><i></i><i class="s"></i></div><span class="bl" aria-hidden="true"></span><div class="bn" aria-hidden="true"><span class="ld"></span><span class="cn"><span class="ct">0</span></span></div></div><button type="button" class="go"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M9 6V4h6v2"/></svg><span>In den Papierkorb</span></button><button type="button" class="un" hidden><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-3"/></svg><span>Rückgängig</span></button><p class="sr" aria-live="polite"></p></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
Einen Entwurf zu löschen fühlt sich sicherer an, wenn man sieht, wohin er geht. Hier wird das Dokument gestaucht und verdreht, bis es eine Papierkugel ist, die im Bogen zum Papierkorb fliegt; der Deckel klappt rechtzeitig auf, schließt federnd und am Eimer erscheint ein Zähler. Rückgängig holt das Blatt zurück und faltet es wieder auf.
Die Hauptfarbe ist das Metall des Eimers, die Zweitfarbe der Lösch-Button und der Zähler. Jede Bewegung nutzt die Web Animations API und passt sich so dem echten Abstand zwischen Dokument und Eimer an. Bei reduzierter Bewegung erscheint das Ergebnis ohne Wurf.