Sesión de LucíaConectada en este navegador
Déconnexion avec une porte
À l'approche, la porte s'entrouvre et laisse passer la lumière ; à la déconnexion, le personnage entre et la porte se referme.
Réglages
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">Session de Lucía</b><small class="ws">Connectée sur ce navigateur</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">Se déconnecter</span></button><p class="sr" aria-live="polite"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Se déconnecter n'est souvent qu'une ligne de menu, mais ça peut aussi être un petit au revoir. Au survol ou au focus du bouton, la porte s'entrouvre et une lumière chaude tombe sur le sol ; un clic l'ouvre en grand, un petit personnage entre en marchant et la porte se referme derrière lui avec un bruit sourd. Se reconnecter rejoue la scène à l'envers.
La couleur principale donne le bois de la porte et la secondaire la lumière intérieure. La scène est faite de HTML et CSS avec des classes minutées, les durées se règlent donc facilement. À placer dans un menu de compte, une borne ou le dernier écran d'un appareil partagé.