16asistentes
RSVP with flying avatar
Join and your avatar flies from the button to the front of the row while the others slide aside and the count rises.
Settings
Code
<div class="uvq15-rsv"><div class="top"><div class="dt" aria-hidden="true"><small>SAT</small><b>14</b><small>NOV</small></div><div><b class="tl">Pottery workshop</b><small class="pl">Barro Studio, 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>attendees</span></p></div><button type="button" class="bt" aria-pressed="false"><span class="a">Count me in</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>Going</span></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
Event pages show who is going with a stack of overlapping avatars, and this block makes joining that group visible. Press Count me in and a You avatar arcs out of the button into the first spot, the rest shift right with a spring, and the attendee number rolls up. Leaving reverses it: your avatar pops out and the gap closes.
The main color is the button and your own avatar, the secondary one the date tile. Avatars are plain list items with initials and a background color, so they are easy to swap for photos. It fits workshops, meetups, classes and private dinners.