- LLucíaFactura de octubre
- MMarcosFotos del viaje
- EEquipo de diseñoRevisión del lunes
- NNora¿Café esta tarde?
Pull to refresh list
Drag the list down and the indicator winds up with your gesture; release it to load new messages.
Settings
Code
<div class="uv-mpr"><div class="ind" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg></div><ul class="ls"><li><span class="av" style="--c:#ec4899">L</span><div><b>Lucía</b><span>October invoice</span></div><time>9:41</time></li><li><span class="av" style="--c:#0ea5e9">M</span><div><b>Marcos</b><span>Trip photos</span></div><time>9:12</time></li><li><span class="av" style="--c:#f59e0b">E</span><div><b>Design team</b><span>Monday review</span></div><time>Yesterday</time></li><li><span class="av" style="--c:#10b981">N</span><div><b>Nora</b><span>Coffee this afternoon?</span></div><time>Yesterday</time></li></ul><button type="button" class="rf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>Update</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
The familiar mobile gesture rebuilt for the web. Dragging the message list down reveals an arc that grows and turns with the pull, with resistance that increases the further you go. Releasing past the threshold keeps the list lowered while a spinner runs, then a new message slides in at the top with a soft highlight.
Pointer events handle mouse, pen and touch, and a refresh button offers the same action for keyboard and screen reader users, with a polite announcement when the inbox is updated. Connect the timeout to your real fetch call.