Sesión de LucíaConectada en este navegador
Log out with a door
Approach and the door opens a crack with light behind it; log out and the figure walks in as the door shuts.
Settings
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">Lucía’s session</b><small class="ws">Signed in on this browser</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">Sign out</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
Logging out is usually a plain menu item, but it can also be a small farewell. Hovering or focusing the button opens the door a crack and warm light spills onto the floor; pressing it swings the door open, a little figure walks in and the door closes behind it with a thud. Logging back in plays the walk in reverse.
The main color is the wooden door and the secondary one the light inside. The scene is plain HTML and CSS with timed classes, so the timings are easy to adjust. Put it in account menus, kiosk apps or the last screen of a shared device.