- LLucíaFactura de octubre
- MMarcosFotos del viaje
- EEquipo de diseñoRevisión del lunes
- NNora¿Café esta tarde?
Liste à tirer pour actualiser
Tire la liste vers le bas, l'indicateur se charge avec ton geste et de nouveaux messages arrivent au relâchement.
Réglages
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>Facture d'octobre</span></div><time>9:41</time></li><li><span class="av" style="--c:#0ea5e9">M</span><div><b>Marcos</b><span>Photos du voyage</span></div><time>9:12</time></li><li><span class="av" style="--c:#f59e0b">E</span><div><b>Équipe design</b><span>Revue de lundi</span></div><time>Hier</time></li><li><span class="av" style="--c:#10b981">N</span><div><b>Nora</b><span>Un café cet après-midi ?</span></div><time>Hier</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>Mettre à jour</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
Le geste mobile bien connu, refait pour le web. En tirant la liste de messages vers le bas, un arc apparaît, grandit et tourne avec le geste, avec une résistance qui augmente plus on descend. Relâché après le seuil, la liste reste abaissée pendant que l'indicateur tourne, puis un nouveau message arrive en haut avec un léger surlignage.
Les événements pointeur gèrent souris, stylet et doigt, et un bouton d'actualisation offre la même action au clavier et aux lecteurs d'écran, avec une annonce quand la boîte est à jour. Relie le minuteur à ta vraie requête.