16asistentes
Zusage mit fliegendem Avatar
Bei der Zusage fliegt dein Avatar aus dem Button an die Spitze der Reihe, die anderen rücken zur Seite und die Zahl steigt.
Einstellungen
Code
<div class="uvq15-rsv"><div class="top"><div class="dt" aria-hidden="true"><small>SA</small><b>14</b><small>NOV</small></div><div><b class="tl">Töpferworkshop</b><small class="pl">Studio 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>Teilnehmende</span></p></div><button type="button" class="bt" aria-pressed="false"><span class="a">Ich bin dabei</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>Dabei</span></button><p class="sr" aria-live="polite"></p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Eventseiten zeigen Teilnehmende als Reihe überlappender Avatare, und dieser Block macht das Dazukommen sichtbar. Ein Klick auf Ich bin dabei schickt deinen Avatar im Bogen aus dem Button auf den ersten Platz, die anderen rücken federnd nach rechts und die Teilnehmerzahl rollt nach oben. Beim Absagen läuft alles rückwärts und die Lücke schließt sich.
Die Hauptfarbe gilt für den Button und deinen Avatar, die Zweitfarbe für die Datumskachel. Die Avatare sind einfache Listenelemente mit Initialen und Hintergrundfarbe, Fotos lassen sich leicht einsetzen. Passt zu Workshops, Treffen, Kursen und privaten Abendessen.