Papelera que arruga el papel
El documento se arruga en una bola que vuela en arco hasta la papelera; la tapa se abre, se la traga y se cierra.
Ajustes
Código
<div class="uvq15-trs"><div class="ar"><div class="dc"><b>Borrador de carta</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>Tirar a la papelera</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>Deshacer</span></button><p class="sr" aria-live="polite"></p></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
Borrar un borrador da más confianza cuando ves adónde va. Aquí el documento se aplasta y se retuerce hasta ser una bola de papel que vuela en arco hacia la papelera; la tapa se abre justo a tiempo, se cierra con un rebote y aparece un contador en el cubo. Deshacer recupera la hoja y la vuelve a desplegar.
El color principal es el metal de la papelera y el secundario el botón de tirar y el contador. Todo el movimiento usa la API Web Animations, así que se adapta a la distancia real entre el documento y la papelera. Con movimiento reducido, el resultado aparece sin el lanzamiento.