Sesión de LucíaConectada en este navegador
Abmelden mit Tür
Beim Annähern öffnet sich die Tür einen Spalt und Licht fällt heraus; beim Abmelden geht die Figur hinein und die Tür schließt sich.
Einstellungen
Code
<div class="uvq15-dor"><div class="sc" aria-hidden="true"><span class="fr"><span class="lt"></span><span class="lf"><i></i></span></span><span class="ps"><svg viewBox="0 0 20 40"><circle cx="10" cy="6" r="5"/><path d="M4 16a6 6 0 0 1 12 0v10h-3v12H7V26H4z"/></svg></span></div><p class="st"><b class="who">Sitzung von Lucía</b><small class="ws">In diesem Browser angemeldet</small></p><button type="button" class="bt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l5-5-5-5M15 12H3"/></svg><span class="lb">Abmelden</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
Abmelden ist meist nur ein weiterer Menüpunkt, kann aber auch ein kleiner Abschied sein. Beim Überfahren oder Fokussieren öffnet sich die Tür einen Spalt und warmes Licht fällt auf den Boden; ein Klick öffnet sie ganz, eine kleine Figur geht hinein und die Tür fällt hinter ihr ins Schloss. Erneut anmelden spielt den Weg rückwärts ab.
Die Hauptfarbe ist das Holz der Tür, die Zweitfarbe das Licht dahinter. Die Szene besteht aus HTML und CSS mit zeitgesteuerten Klassen, die Zeiten lassen sich leicht anpassen. Geeignet für Kontomenüs, Kiosk-Apps oder den letzten Bildschirm eines geteilten Geräts.