Trash can that crumples paper
The document crumples into a paper ball that arcs through the air; the bin lid flips open, swallows it and shuts.
Settings
Code
<div class="uvq15-trs"><div class="ar"><div class="dc"><b>Letter draft</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>Move to trash</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>Undo</span></button><p class="sr" aria-live="polite"></p></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
Deleting a draft is easier to trust when you can see where it went. Here the document squashes and twists into a paper ball, which flies in an arc toward the bin; the lid flips open just in time, snaps shut with a bounce and a counter appears on the can. Undo brings the page back and unfolds it.
The main color is the metal of the bin and the secondary one the delete button and the counter. Every motion is done with the Web Animations API, so it adapts to the real distance between the document and the bin. With reduced motion the result appears without the throw.