Sesión de LucíaConectada en este navegador
Cerrar sesión con puerta
Al acercarte, la puerta se entreabre y sale luz; al cerrar sesión, el muñeco entra caminando y la puerta se cierra tras él.
Ajustes
Código
<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">Sesión de Lucía</b><small class="ws">Conectada en este navegador</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">Cerrar sesión</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
Cerrar sesión suele ser una opción más del menú, pero también puede ser una pequeña despedida. Al pasar o enfocar el botón, la puerta se entreabre y una luz cálida cae sobre el suelo; al pulsarlo, la puerta se abre del todo, un muñeco entra caminando y la puerta se cierra tras él con un golpe. Volver a entrar repite el paseo al revés.
El color principal es la madera de la puerta y el secundario la luz de dentro. La escena es HTML y CSS con clases temporizadas, así que los tiempos se ajustan con facilidad. Ponla en menús de cuenta, apps de quiosco o la última pantalla de un equipo compartido.