Corbeille qui froisse le papier
Le document se froisse en boule de papier qui vole en arc ; le couvercle de la poubelle s'ouvre, l'avale et se referme.
Réglages
Code
<div class="uvq15-trs"><div class="ar"><div class="dc"><b>Brouillon de lettre</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>Mettre à la corbeille</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>Annuler</span></button><p class="sr" aria-live="polite"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Supprimer un brouillon inspire plus confiance quand on voit où il part. Ici le document s'écrase et se tord jusqu'à devenir une boule de papier qui vole en arc vers la corbeille ; le couvercle s'ouvre juste à temps, se referme avec un rebond et un compteur apparaît sur la poubelle. Annuler récupère la feuille et la déplie.
La couleur principale donne le métal de la corbeille et la secondaire le bouton de suppression et le compteur. Tout le mouvement passe par l'API Web Animations, il s'adapte donc à la vraie distance entre le document et la corbeille. En mouvement réduit, le résultat s'affiche sans le lancer.