«Ideas para el viaje a Oporto: librería Lello a primera hora y cena junto al río.»
Folded paper toast
The notice arrives folded in three like a letter and opens one fold at a time, with shading on every crease.
Settings
Code
<div class="uvq09-ori"><button type="button" class="fire">Show again</button><div class="tt" role="status"><div class="p p1"><span class="av" aria-hidden="true">A</span><b>Ana shared a note with you</b><div class="p p2"><p>“Ideas for the Porto trip: Lello bookshop first thing and dinner by the river.”</p><div class="p p3"><button type="button" class="x">Later</button><button type="button" class="op">Open note</button></div></div></div></div></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 Toasts
See all ToastsWhere to use it
A shared note feels more like a letter when it unfolds. This toast is three paper panels nested inside each other: the header shows first, then the middle panel swings down from behind with a 3D rotation and the action strip follows, each with a shadow that fades as it flattens. Closing folds it back in reverse order. Good for shared documents, messages and gentle invitations.
The main color is the avatar and main button, the second the paper. Keep each panel to one idea, title, preview and actions, and adjust the transition delays if you add or remove a fold.