16asistentes
Apuntarse con avatar que vuela
Al apuntarte, tu avatar sale del botón y se coloca el primero de la fila mientras los demás se apartan y el contador sube.
Ajustes
Código
<div class="uvq15-rsv"><div class="top"><div class="dt" aria-hidden="true"><small>SÁB</small><b>14</b><small>NOV</small></div><div><b class="tl">Taller de cerámica</b><small class="pl">Estudio Barro, Valencia</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>asistentes</span></p></div><button type="button" class="bt" aria-pressed="false"><span class="a">Me apunto</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>Apuntado</span></button><p class="sr" aria-live="polite"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Las páginas de eventos muestran quién va con una fila de avatares solapados, y este bloque hace visible el momento de unirse. Pulsa Me apunto y un avatar con Tú sale en arco del botón hasta el primer puesto, el resto se aparta con un muelle y el número de asistentes sube. Al borrarte ocurre al revés: tu avatar salta fuera y el hueco se cierra.
El color principal es el botón y tu avatar, y el secundario la ficha de la fecha. Los avatares son elementos de lista con iniciales y color de fondo, así que es fácil cambiarlos por fotos. Encaja en talleres, quedadas, clases y cenas privadas.