16asistentes
Inscription avec avatar volant
En t'inscrivant, ton avatar quitte le bouton pour prendre la tête de la file, les autres s'écartent et le compteur monte.
Réglages
Code
<div class="uvq15-rsv"><div class="top"><div class="dt" aria-hidden="true"><small>SAM</small><b>14</b><small>NOV</small></div><div><b class="tl">Atelier de céramique</b><small class="pl">Atelier Barro, Valence</small></div></div><div class="ft"><ul class="st" aria-hidden="true"><li style="--c:#f59e0b">AL</li><li style="--c:#10b981">JM</li><li style="--c:#6366f1">RC</li><li style="--c:#ec4899">SP</li><li class="mr">+12</li></ul><p class="ct"><b class="n">16</b><span>participants</span></p></div><button type="button" class="bt" aria-pressed="false"><span class="a">Je viens</span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Inscrit</span></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
Les pages d'événements montrent les participants sous forme d'avatars qui se chevauchent, et ce bloc rend visible le moment où l'on rejoint le groupe. Un clic sur Je viens envoie ton avatar en arc depuis le bouton jusqu'à la première place, les autres glissent avec un ressort et le nombre de participants augmente. Se désinscrire fait l'inverse.
La couleur principale sert au bouton et à ton avatar, la secondaire à la vignette de date. Les avatars sont de simples éléments de liste avec initiales et couleur de fond, faciles à remplacer par des photos. Idéal pour ateliers, rencontres, cours et dîners privés.